How do I loop a SampledProperty instance infinitely without changing the viewer clock?

1. A concise explanation of the problem you’re experiencing.

I would like to utilize a SampledProperty like the one in the example below. I would like for the point to continue pulsating infinitely, but can’t seem to do so without changing the bounds of the main timeline clock. I’d like to do so in a way that doesn’t alter the clock. Is this possible? I tried to do so by creating a separate clock solely for the pulsating effect, but am stuck on how to update the time period dynamically for all SampleProperty instances.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

Check out the solution for this StackOverflow post: https://stackoverflow.com/questions/42842607/cesiumjs-points-and-css-keyframe-animation

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I want to be able to incorporate CZML data, using the timeline to view a specific set of points at a specific time period. The solution in the example sets the clock length to an interval of one second, which disallows me from achieving this.

4. The Cesium version you’re using, your operating system and browser.

Chrome, 1.59

Can you post your attempt at using a separate clock here? I recall you posting it in a different thread but I can’t seem to find it.

In theory, this should work. The other approach, if you want your animation to be completely independent of the timeline is to just use a callback property, and an onTick or update event, where you can update your time counter or the state of your animation etc. For example, this code example uses onTick to move the camera on user input independently of the timeline:

https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Camera%20Tutorial.html

So I created a new clock that I’d like to run the animation off of. I’ve included the code snippet below. I added an event listener so that whenever the viewer clock ticks, the new clock does as well. However, this solution stops the pulsating effect, I’m assuming because the SampledProperty instances are depending on the viewer clock? How do I get the animation to run off the new clock? Also, assuming it does work through the new clock, how would I determine that start/end times of the clock so that the point continues to pulsate?

this.start = new Cesium.JulianDate.now();

this.mid1 = Cesium.JulianDate.addSeconds(this.start, 0.6, new Cesium.JulianDate());

this.mid2 = Cesium.JulianDate.addSeconds(this.start, 1.2, new Cesium.JulianDate());

this.mid3 = Cesium.JulianDate.addSeconds(this.start, 1.8, new Cesium.JulianDate());

this.mid4 = Cesium.JulianDate.addSeconds(this.start, 2.4, new Cesium.JulianDate());

this.stop = Cesium.JulianDate.addSeconds(this.start, 3.0, new Cesium.JulianDate());

var clock = new Cesium.Clock();

clock.startTime = this.start;

clock.currentTime = this.start;

clock.stopTime = this.stop;

clock.shouldAnimate = true;

clock.clockRange = Cesium.ClockRange.LOOP_STOP;

var listener = () => {

clock.tick();

}

viewer.clock.onTick.addEventListener(listener);

Also, this is how I’m creating the SampledProperty instances for the pulsating effect. I create several instances depending on the interpolated values throughout the start-end interval.

addSamples(startSize, mid1Size, mid2Size, mid3Size, mid4Size, stopSize) {

var property = new Cesium.SampledProperty(Number);

property.setInterpolationOptions({

interpolationDegree: 6,

interpolationAlgorithm: Cesium.HermitePolynomialApproximation

});

// Sets property value during start/mid/stop times

property.addSample(this.start, startSize);

property.addSample(this.mid1, mid1Size);

property.addSample(this.mid2, mid2Size);

property.addSample(this.mid3, mid3Size);

property.addSample(this.mid4, mid4Size);

property.addSample(this.stop, stopSize);

return property;

}

It looks like the API doesn’t support passing a custom clock to entities. I think this case would be better implemented by using a callback property to return the value using your custom logic. So for example, instead of:

entity.point.pixelSize = yourSampledProperty;

``

You would do:

entity.point.pixelSize = new Cesium.CallbackProperty(function(time, result) {

``
return property.getValue(customClock.currentTime, result);

}, false)

You could also just not use a clock instance at all, and just a JulianDate instance that you continue to increment in a postUpdate event (the camera Sandcastle I linked to has an example of this event).