We Keep Coding

Cesium separate timeline widget is not working properly

I want to display cesium clock and timeline widget inside a different div container outside of the cesium container. With the help of this link I've created a separate clock widget and applied animation on an entity. Animation is working but the clock widget is not working. It seems like default clock widget is working not the newly created. Sandcastle link
var viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false, //Disable InfoBox widget
selectionIndicator: false, //Disable selection indicator
shouldAnimate: true, // Enable animations
terrainProvider: Cesium.createWorldTerrain(),
});
//Enable lighting based on the sun position
viewer.scene.globe.enableLighting = true;
//Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;
var _currentSysDT = new Date();
function onTimelineScrubfunction(e) {
clock = e.clock;
clock.currentTime = e.timeJulian;
clock.shouldAnimate = false;
}
var timeControlsContainer = document.getElementById('timeControlsContainer');
// viewer.animation.viewModel.timeFormatter = LocalFormatter;
var clock = new Cesium.Clock();
clock.startTime = Cesium.JulianDate.fromDate(_currentSysDT);
clock.currentTime = Cesium.JulianDate.fromDate(_currentSysDT);
clock.clockRange = Cesium.ClockRange.LOOP_STOP;
var clockViewModel = new Cesium.ClockViewModel(clock);
clockViewModel.startTime = Cesium.JulianDate.fromDate(_currentSysDT);
clockViewModel.currentTime = Cesium.JulianDate.fromDate(_currentSysDT);
var animationContainer = document.createElement('div');
animationContainer.className = 'cesium-viewer-animationContainer';
timeControlsContainer.appendChild(animationContainer);
var animViewModel = new Cesium.AnimationViewModel(clockViewModel);
var animation = new Cesium.Animation(animationContainer, animViewModel);
var timelineContainer = document.createElement('div');
timelineContainer.className = 'cesium-viewer-timelineContainer';
timeControlsContainer.appendChild(timelineContainer);
var timeline = new Cesium.Timeline(timelineContainer, clock);
timeline.addEventListener('settime', onTimelineScrubfunction, false);
timeline.zoomTo(clock.startTime, clock.stopTime);
clockViewModel.shouldAnimate = true;
animViewModel.snapToTicks = false;
animViewModel.pauseViewModel.command(); //comment this for default play
timeline.zoomTo(clock.startTime, Cesium.JulianDate.addSeconds(clock.startTime, 60, new Cesium.JulianDate()));
clock.onTick.addEventListener(function (clock) {
});
window.setInterval(function () {
clock.tick();
}, 32);
var start = Cesium.JulianDate.addSeconds(Cesium.JulianDate.fromDate(_currentSysDT), 0, new Cesium.JulianDate());
var stop = Cesium.JulianDate.addSeconds(Cesium.JulianDate.fromDate(_currentSysDT), 120, new Cesium.JulianDate());
var positions = [{"lat":"23.14291673","lon":"73.60544359","alt":"33.79739465869949"},{"lat":"23.14291736","lon":"73.60558935","alt":"33.705623697852786"},{"lat":"23.14284330","lon":"73.60553133","alt":"33.280035949546644"},{"lat":"23.14284640","lon":"73.60546898","alt":"33.219775982790594"}];
var positionProperty = new Cesium.SampledPositionProperty();
positions.forEach((p,i)=>{
let _pos = Cesium.Cartesian3.fromDegrees(parseFloat(p.lon), parseFloat(p.lat), parseFloat(p.alt));
let _time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
positionProperty.addSample(_time, _pos);
});
var entity = viewer.entities.add({
//Set the entity availability to the same interval as the simulation time.
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: start,
stop: stop,
}),
]),
//Use our computed positions
position: positionProperty,
//Automatically compute orientation based on position movement.
orientation: new Cesium.VelocityOrientationProperty(positionProperty),
//Load the Cesium plane model to represent the entity
model: {
uri: "../SampleData/models/CesiumMan/Cesium_Man.glb",
minimumPixelSize: 64,
},
//Show the path as a yellow line sampled in 1 second increments.
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.YELLOW,
}),
width: 10,
},
});
viewer.trackedEntity = entity;

You need to create the viewer after the clockViewModel, and pass in the clockViewModel as a constructor option. For example:
var viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false, //Disable InfoBox widget
selectionIndicator: false, //Disable selection indicator
terrainProvider: Cesium.createWorldTerrain(),
// Construct this viewer using your previously constructed clockViewModel.
clockViewModel: clockViewModel,
// Don't let this viewer build its own animation widget.
animation: false,
// Don't let this viewer build its own timeline widget.
timeline: false
});
Here's the Updated Sandcastle Demo.

Connect edges to anchor points of vertices in mxgraph

I'm using mxGraph (javascript version) to draw a graph and I need to use radial tree layout for graph layout. Look at this pen
I managed to redefine connection points (anchor points) of each vertex and you can see that by hovering the mouse over any vertex. I assumed that the radial tree layout will connect edges to anchor points of vertices, but this is not happening. Any idea how to make edges connect to anchor points of vertices?
The same code in the Pen is also available below.
<html>
<head>
<title>Anchors example for mxGraph</title>
<script type="text/javascript">
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js">
</script>
<!-- Example code -->
<script type="text/javascript">
// Overridden to define per-shape connection points
mxGraph.prototype.getAllConnectionConstraints = function(terminal, source)
{
if (terminal != null && terminal.shape != null)
{
if (terminal.shape.stencil != null)
{
if (terminal.shape.stencil.constraints != null)
{
return terminal.shape.stencil.constraints;
}
}
else if (terminal.shape.constraints != null)
{
return terminal.shape.constraints;
}
}
return null;
};
// Defines the default constraints for all shapes
mxShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.25, 0), true),
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
new mxConnectionConstraint(new mxPoint(0.75, 0), true),
new mxConnectionConstraint(new mxPoint(0, 0.25), true),
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
new mxConnectionConstraint(new mxPoint(0, 0.75), true),
new mxConnectionConstraint(new mxPoint(1, 0.25), true),
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
new mxConnectionConstraint(new mxPoint(1, 0.75), true),
new mxConnectionConstraint(new mxPoint(0.25, 1), true),
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
new mxConnectionConstraint(new mxPoint(0.75, 1), true)];
// Edges have no connection points
mxPolyline.prototype.constraints = null;
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Disables the built-in context menu
mxEvent.disableContextMenu(container);
// Creates the graph inside the given container
var graph = new mxGraph(container);
graph.setConnectable(true);
// Enables connect preview for the default edge style
graph.connectionHandler.createEdgeState = function(me)
{
var edge = graph.createEdge(null, null, null, null, null);
return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
};
// Specifies the default edge style
//graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
graph.getStylesheet().getDefaultEdgeStyle()[mxConstants.STYLE_EDGE] = mxEdgeStyle.scalePointArray;
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 0, 0, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);
var v3 = graph.insertVertex(parent, null, 'Hello,', 0, 0, 80, 30);
var v4 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);
var v5 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);
var v6 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);
var v7 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
var e2 = graph.insertEdge(parent, null, '', v1, v3);
var e3 = graph.insertEdge(parent, null, '', v1, v4);
var e4 = graph.insertEdge(parent, null, '', v1, v5);
var e5 = graph.insertEdge(parent, null, '', v1, v6);
var e6 = graph.insertEdge(parent, null, '', v1, v7);
}
finally
{
var radialLayout = new mxRadialTreeLayout(graph);
radialLayout.execute(parent);
// Updates the display
graph.getModel().endUpdate();
}
console.log(v1.geometry);
console.log(v2.geometry);
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="position:relative;overflow:hidden;width:621px;height:641px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>

You can do that via setting constraints in edge style while adding it:
var e1 = graph.insertEdge(parent, null, '',v1,v2, "entryX=0.25;entryY=0");
that way you can also specify starting point of edge:
var e1 = graph.insertEdge(parent, null, '',v1,v2, "entryX=0.25;entryY=0;exitX=1;exitY=1");
Or after inserting edge you can connect it with specific constraint:
var e2 = graph.insertEdge(parent, null, '', v1, v3);
graph.connectCell(e2,v3,false, mxShape.prototype.constraints[0]);

Paint text on the mouse hover on the graphics in the position of cursor

I have a problem when I go to paint the PIXI.Text in the cursor position.
This is the simple demo to reproduce the problem, when you go over the node with the cursor I paint the text, in this case, "#author vincenzopalazzo" but I want the position on the node, so I think for resolving the problem I have got the solution I must set the position of the mouse.
But I don't have an idea got get this position, so this is an example to reproduce the problem with PIXI
//setup Pixi renderer
var renderer = PIXI.autoDetectRenderer(600, 400, {
backgroundColor: 0x000000
});
document.body.appendChild(renderer.view);
// create new stage
var stage = new PIXI.Container();
// create helpful message
var style = {
font: '18px Courier, monospace',
fill: '#ffffff'
};
// create graphic object called circle then draw a circle on it
var circle = new PIXI.Graphics();
circle.lineStyle(5, 0xFFFFFF, 1);
circle.beginFill(0x0000FF, 1);
circle.drawCircle(150, 150, 100);
circle.endFill();
circle.alpha = 0.5;
stage.addChild(circle);
// designate circle as being interactive so it handles events
circle.interactive = true;
// create hit area, needed for interactivity
circle.hitArea = new PIXI.Circle(150, 150, 100);
// make circle non-transparent when mouse is over it
circle.mouseover = function(events) {
var message = new PIXI.Text('Hover your mouse over the circle to see the effect.', style);
message.x = events.clientX;
message.y = events.clientY;
circle.message = message;
circle.addChild(message);
}
// make circle half-transparent when mouse leaves
circle.mouseout = function(mouseData) {
this.alpha = 0.5;
circle.removeChild(circle.message);
delete circle.message;
}
// start animating
animate();
function animate() {
requestAnimationFrame(animate);
// render the root container
renderer.render(stage);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.4/pixi.js"></script>
This is my real code
module.exports = function (animatedNode, ctx) {
ctx.on('hover', function(animatedNode, ctx){
let x = animatedNode.pos.x;
let y = - animatedNode.pos.y / 2;
if(animatedNode.label === undefined){
animatedNode.label = new PIXI.Text('#author vincenzopalazzo', { fontFamily: "Arial", fontSize: "20px" , fill: 0x000000} );
animatedNode.label.x = x;
animatedNode.label.y = y + animatedNode.width/2;
ctx.addChild(animatedNode.label);
}else{
animatedNode.label.x = x;
animatedNode.label.y = y + animatedNode.width/2;
}
});
ctx.on('unhover', function(animatedNode, ctx){
ctx.removeChild(animatedNode.label);
delete animatedNode.label;
});
ctx.mouseover = function() {
console.debug('I\'call the hover events');
this.fire('hover', animatedNode, ctx);
}
ctx.mouseout = function() {
console.debug('I\'call the unhover events');
this.fire('unhover', animatedNode, ctx);
}
}
I'm using the ngraph.events on the ctx (it is the PIXI graphics) object, the method on and fire is the module nghraph.events

In your example code (first snippet) the "moseover" handler should be changed from:
// make circle non-transparent when mouse is over it
circle.mouseover = function(events) {
var message = new PIXI.Text('Hover your mouse over the circle to see the effect.', style);
message.x = events.clientX;
message.y = events.clientY;
circle.message = message;
circle.addChild(message);
}
to:
// make circle non-transparent when mouse is over it
circle.on('mouseover', function(event) {
// console.log('mouse is over the circle');
// console.log(event); // see in (for example in Chrome Devtools console) what is inside this variable
var message = new PIXI.Text('Hover your mouse over the circle to see the effect.', style);
// By looking at what "console.log(event)" shows we can see that instead of:
// message.x = events.clientX;
// message.y = events.clientY;
// should be:
message.x = event.data.global.x;
message.y = event.data.global.y;
circle.message = message;
circle.addChild(message);
});
To understand it more you can uncomment the "console.log" lines to observe it in your browser devtools console.
Then we also need to handle 'mouseover' event like this:
circle.on('mousemove',function (event) {
if (!circle.message) {
return;
}
var newPosition = event.data.getLocalPosition(this.parent);
circle.message.x = newPosition.x;
circle.message.y = newPosition.y;
});
so whole runnable example will be like this:
//setup Pixi renderer
var renderer = PIXI.autoDetectRenderer(600, 400, {
backgroundColor: 0x000000
});
document.body.appendChild(renderer.view);
// create new stage
var stage = new PIXI.Container();
// create helpful message
var style = {
font: '18px Courier, monospace',
fill: '#ffffff'
};
// create graphic object called circle then draw a circle on it
var circle = new PIXI.Graphics();
circle.lineStyle(5, 0xFFFFFF, 1);
circle.beginFill(0x0000FF, 1);
circle.drawCircle(150, 150, 100);
circle.endFill();
circle.alpha = 0.5;
stage.addChild(circle);
// designate circle as being interactive so it handles events
circle.interactive = true;
// create hit area, needed for interactivity
circle.hitArea = new PIXI.Circle(150, 150, 100);
// make circle non-transparent when mouse is over it
circle.on('mouseover', function(event) {
// console.log('mouse is over the circle');
// console.log(event); // see in (for example in Chrome Devtools console) what is inside this variable
var message = new PIXI.Text('Hover your mouse over the circle to see the effect.', style);
// By looking at what "console.log(event)" shows we can see that instead of:
// message.x = events.clientX;
// message.y = events.clientY;
// should be:
message.x = event.data.global.x;
message.y = event.data.global.y;
circle.message = message;
circle.addChild(message);
});
circle.on('mousemove',function (event) {
if (!circle.message) {
return;
}
var newPosition = event.data.getLocalPosition(this.parent);
circle.message.x = newPosition.x;
circle.message.y = newPosition.y;
});
// make circle half-transparent when mouse leaves
circle.mouseout = function(mouseData) {
this.alpha = 0.5;
circle.removeChild(circle.message);
delete circle.message;
}
// start animating
animate();
function animate() {
requestAnimationFrame(animate);
// render the root container
renderer.render(stage);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.4/pixi.js"></script>
Please also see:
"Interaction/Dragging" Pixi.js demo (with source code): https://pixijs.io/examples/#/interaction/dragging.js
tutorial "Rotate towards mouse and shoot in that direction" by Igor Neuhold : http://proclive.io/shooting-tutorial/
Pixi.js API reference:
https://pixijs.download/dev/docs/PIXI.DisplayObject.html#event:mousemove
https://pixijs.download/dev/docs/PIXI.interaction.InteractionEvent.html
https://pixijs.download/dev/docs/PIXI.interaction.InteractionData.html

Why is this object's position NaN?

Right now, I have a websocket server that sends the client the position of other players using an object ({pos:{x:32,y:46}}). I then put that into a point by doing var newposition = new Point(msg.pos.x,msg.pos.y) but then I never see the player appear.
I tried to console.log it, but it said the position was NaN. Then I tried to console.log the point, and it worked. I even tried not setting the position at all but it randomly sets its position to NaN for no reason that I can see.
This is my code for making a player join:
function addPlayer(nickname,position,color,uid,size,face) {
var circle = new Path.Circle(position,size)
var face = new Raster("/faces/"+face+"/face.png")
face.rescale(40,40)
face.position = position
var masker = new Group({
children: [circle, face],
clipped: true
});
face.onLoad = function() {
// Fit the circle snugly around the image:
circle.fitBounds(face.bounds);
};
circle.fillColor = color
console.log(nickname + " has joined the server")
console.log(players)
players[uid] = {
circle: circle,
nickname: nickname,
entirething: masker,
face: face
}
console.log(circle.position)
}
And here's what happens when a player moves (without actually setting the position of the player.)
if(msg.event == "move" && msg.who != cuid) {
var thepoint = new Point(msg.pos.x,msg.pos.y)
console.log(thepoint)
console.log(players[msg.who].circle.position)
}
And finally when the player joins:
if(msg.event == "join" && msg.who != cuid) {
addPlayer(msg.username,{x:0,y:0},"dodgerblue",msg.who,20,msg.face)
}
On my backend, I just have it broadcast that someone joined with their id (who) and face (face).
There are no errors in the console and I am rather confused of why this happens... Why does it set itself to NaN?

(I put this as an answer rather than as a comment because I won't have enough space there)
In order to find where the problem comes from, try simulating messages coming from the backend, to check that your client-side logic is right.
Here is a sketch adapted from your code sample that can serve as a starting point for this task.
I modified some things that didn't make sense to me but I think that you should be able to adapt it to your specific case.
// Init global variables.
var cuid = 999;
var players = {};
function addPlayer(nickname, position, color, uid, size, face) {
// Init image and circle.
var circle = new Path.Circle(position, size);
var image = new Raster(face);
image.onLoad = function() {
// Make image fit circle bounds.
image.fitBounds(circle.bounds);
};
// Use circle as image clip mask.
var masker = new Group({
children: [circle, image],
clipped: true
});
console.log(nickname + ' has joined the server');
// Store player.
players[uid] = {
circle: circle,
nickname: nickname,
entirething: masker,
face: image
};
}
// On message...
function onMessage(msg) {
// If message concerns current player...
if (msg.who === cuid) {
// ...don't do nothing.
return;
}
// If message is a move event...
else if (msg.event == 'move' && msg.who != cuid) {
// ...update player position.
players[msg.who].entirething.position = new Point(msg.pos.x, msg.pos.y);
// If message is a join event...
} else if (msg.event == 'join' && msg.who != cuid) {
// ...add a new player.
addPlayer(msg.username, { x: 0, y: 0 }, 'dodgerblue', msg.who, 20, msg.face);
}
}
//
// Simulate messages reception.
//
// Add player 1
onMessage({
event: 'join',
who: 1,
username: 'player 1',
face: 'http://assets.paperjs.org/images/marilyn.jpg'
});
// Move player 1
onMessage({
event: 'move',
who: 1,
pos: {
x: 50,
y: 50
}
});
// Add player 2
onMessage({
event: 'join',
who: 2,
username: 'player 2',
face: 'http://assets.paperjs.org/images/marilyn.jpg'
});
// Move player 2
onMessage({
event: 'move',
who: 2,
pos: {
x: 500,
y: 125
}
});

WebWorldWind Renderable Position Update

I am trying to "move" renderables around the web worldwind globe on an interval. To illustrate the issue I am having, I made a small example.
This works (but is inefficient):
var myVar = setInterval(myTimer, 5000);
function myTimer() {
shapesLayer.removeRenderable(shape);
shape = new WorldWind.SurfaceCircle(new WorldWind.Location(shape.center.latitude+1, shape.center.longitude), 200e3, attributes);
shapesLayer.addRenderable(shape);
console.log(" new pos "+shape.center.latitude + " "+shape.center.longitude);
wwd.redraw();
}
This is what I'd like to do, but the shape doesn't move:
var myVar = setInterval(myTimer, 5000);
function myTimer() {
shape.center = new WorldWind.Location(shape.center.latitude+1, shape.center.longitude);
console.log(" new pos "+shape.center.latitude + " "+shape.center.longitude);
wwd.redraw();
}
Is there a flag I need to set on the renderable to make it refresh?
Here is the full SurfaceShapes.js file I've been playing with (based on this http://worldwindserver.net/webworldwind/examples/SurfaceShapes.html):
/*
* Copyright (C) 2014 United States Government as represented by the Administrator of the
* National Aeronautics and Space Administration. All Rights Reserved.
*/
/**
* Illustrates how to display SurfaceShapes.
*
* #version $Id: SurfaceShapes.js 3320 2015-07-15 20:53:05Z dcollins $
*/
requirejs(['../src/WorldWind',
'./LayerManager'],
function (ww,
LayerManager) {
"use strict";
// Tell World Wind to log only warnings.
WorldWind.Logger.setLoggingLevel(WorldWind.Logger.LEVEL_WARNING);
// Create the World Window.
var wwd = new WorldWind.WorldWindow("canvasOne");
/**
* Added imagery layers.
*/
var layers = [
{layer: new WorldWind.BMNGLayer(), enabled: true},
{layer: new WorldWind.BingAerialWithLabelsLayer(null), enabled: true},
{layer: new WorldWind.CompassLayer(), enabled: true},
{layer: new WorldWind.CoordinatesDisplayLayer(wwd), enabled: true},
{layer: new WorldWind.ViewControlsLayer(wwd), enabled: true}
];
for (var l = 0; l < layers.length; l++) {
layers[l].layer.enabled = layers[l].enabled;
wwd.addLayer(layers[l].layer);
}
// Create a layer to hold the surface shapes.
var shapesLayer = new WorldWind.RenderableLayer("Surface Shapes");
wwd.addLayer(shapesLayer);
// Create and set attributes for it. The shapes below except the surface polyline use this same attributes
// object. Real apps typically create new attributes objects for each shape unless they know the attributes
// can be shared among shapes.
var attributes = new WorldWind.ShapeAttributes(null);
attributes.outlineColor = WorldWind.Color.BLUE;
attributes.drawInterior = false;
attributes.outlineWidth = 4;
attributes.outlineStippleFactor = 1;
attributes.outlineStipplePattern = 0xF0F0;
var highlightAttributes = new WorldWind.ShapeAttributes(attributes);
highlightAttributes.interiorColor = new WorldWind.Color(1, 1, 1, 1);
// Create a surface circle with a radius of 200 km.
var shape = new WorldWind.SurfaceCircle(new WorldWind.Location(35, -120), 200e3, attributes);
shape.highlightAttributes = highlightAttributes;
shapesLayer.addRenderable(shape);
// Create a layer manager for controlling layer visibility.
var layerManger = new LayerManager(wwd);
// Now set up to handle highlighting.
var highlightController = new WorldWind.HighlightController(wwd);
var myVar = setInterval(myTimer, 5000);
function myTimer() {
//Shape doesn't move
shape.center = new WorldWind.Location(shape.center.latitude+1, shape.center.longitude);
//Shape "moves" but is inefficient
//shapesLayer.removeRenderable(shape);
//shape = new WorldWind.SurfaceCircle(new WorldWind.Location(shape.center.latitude+1, shape.center.longitude), 200e3, attributes);
//shapesLayer.addRenderable(shape);
console.log(" new pos "+shape.center.latitude + " "+shape.center.longitude);
wwd.redraw();
}
}
);

  Document says renderables variable is readonly but I think it can be possible.
change code
shape.center = new WorldWind.Location(shape.center.latitude+1, shape.center.longitude);
To
index = ShapesLayer.renderables.indexOf(shape);
ShapesLayer.renderables[index].center = new WorldWind.Location(shape.center.latitude+1, shape.center.longitude);
I think ShapesLayer.addRenderable create anther shape.
If you think it's not good way to do you can use this way
RenderableLayer.prototype.changeRenderable= function (prevRenderable, nextRenderable) {
index = ShapesLayer.renderables.indexOf(prevRenderable);
ShapesLayer.renderables[index].center = nextRenderable;
};
main code
ShapesLayer.changeRenderable(shape, new WorldWind.Location(shape.center.latitude+1, shape.center.longitude));
Document : https://nasaworldwind.github.io/WebWorldWind/layer_RenderableLayer.js.html

If anyone else is looking at this, I found a better solution to force it to recompute the center position by setting isPrepared to false and _boundaries to undefined.
var myVar = setInterval(myTimer, 5000);
function myTimer() {
shape.isPrepared = false;
shape._boundaries = undefined;
shape.center = new WorldWind.Location(shape.center.latitude+1, shape.center.longitude);
console.log(" new pos "+shape.center.latitude + " "+shape.center.longitude);
wwd.redraw();
}