Change points' color over / based on time

CesiumJS
1

Hi,

is there a way to change points’ color over time with something like ColorMaterialProperty used with the material property of polygons - Material example

I need colors to fade over time but have to use points instead of polygons because of optimization.

Thank you very much.

2

Welcome to the Cesium Community, @Kiailandi!

PointGraphics also have a color property which you can change, similar to the polygon’s material property.

3

Hi @dzung, thanks for the welcome.

I get that color can change, but I am unable to find the equivalent of ColorMaterialProperty for color.

With ColorMaterialProperty I can use both a CallbackProperty and TimeIntervalCollectionProperty to change the material based on time, but I don’t see how can I do the same with the color, as it seems to accept only straight up colors in the constructor.

Thanks for any help you can give on the matter.

4

Can you post an example of what you’re trying to do in Sandcastle? That usually makes it a lot easier to help out.

5

I came up with this super simple example that uses a CallbackProperty to return a different color based on if the current second is even or odd. Is that what you were looking for?

6

I’d like to do something like this but using a point instead of a box (start cesium timer and increase time speed to see the effect).

The core idea is that the color should fade over time based on an iterval.

7

It’s not exactly what I’m trying to do as I am working with cesium time intervals, but I can probably expand this example and make it work.

Thank you.

(If you have any other suggestion based on the new sandcastle example I posted please share them, I would be grateful)

8

Your example works perfectly if you just don’t wrap the TimeIntervalProperty in a ColorMaterialProperty, i.e.

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    point: {
      color : createTimeIntervalCollectionProperty('#ff00ff', 0, refreshRate),
      pixelSize: 10,
    },
});
9

Well, I don’t really know what I did wrong in my project but it wasn’t working.

At least now I know that it works and if it doesn’t I have to search elsewhere for the problem.

Thank you very much for the help!

1 Like