Building a heatmap with Pixi.js

[anjuna]

Hi,

 

Any pointers on whether or not this is possible? I'm building some stuff with Pixi for non-gaming applications, and it's been going great so far, other than it's been a little tricky to figure out how to do some things! The next thing I'd like to do is try building a heatmap, but I can't find an easy way to do it.

 

Essentially, my idea to do this is to paint a circular brush with a radial gradient of opacity, where the center of the brush is something like 40% opaque and the outer edge is 0% opaque. As I layer these brushes on top of each other, the layering should affect the opacity of the brushes underneath, and then I need to apply a filter or something similar to apply colorization based on opacity (so 80%+ opacity is red, 10% is blue, 60% is yellow, etc, etc.)

 

I haven't been able to figure out a simple way to do this by browsing the docs so maybe it's not possible, but maybe I'm also going about it wrong. Any ideas?

[xerver]

If you make that circular brush a sprite, then you can just put the sprites in your scene. Their alphas will multiply automatically, and you can use the `tint` property of the sprites to color them.

However, since a heatmap is usually a one-time-draw application and depending on the type of map can involve irregular shapes it may make sense to use something more like d3, raphael, or vanilla canvas instead.

[anjuna]

Hmm, interesting. I actually need to constantly redraw this heatmap in real time, which was why I was looking at something like Pixi. There is also heatmap.js out there, but that uses vanilla canvas rather than WebGL which I figured might be faster. I'll give the sprite option a try and see how it works - is it possible to tint based on opacity though? That's going to be the important part - e.g. a high opacity needs to be red but low opacity needs to be blue.

[xerver]

is it possible to tint based on opacity though? That's going to be the important part - e.g. a high opacity needs to be red but low opacity needs to be blue.

 

Ah, I misunderstood what you were saying. If you want to do this in webgl you will likely be doing custom shaders. Either one for the viewport quad or one that each sprite is assigned.

 

Pixi.js itself probably isn't going to help you too much since you won't be using any of the features. Likely would be easier to just do it yourself in webgl/canvas.