Color-Scales depending on how often a point gets drawn (JS Canvas)

Viewed 45

Lately I created a project involving drawing a lot of points on a canvas to plot a strange attractor. The details of this project aren't really relevant, but if you want to see it in action, go here: How can I check if an attractor is strange?

The problem I was encountering is the following: How can I draw a point on a canvas, whose color depends on the color, that was already there? In other words: How do I implement a color scale that depends on that number of times, a specific point has been colored?

I actually found a way, but I'm not convinced if it's the best. Here is how it works:

ctx.globalCompositeOperation = "lighter";
ctx.fillStyle = "rgb(50,5,1)";
ctx.fillRect(x,y,size,size);

It simply adds to the color that is already there. This can already look pretty good: enter image description here

But there are also a lot of restrictions when using this method:

  • I can't get a colorchange from green to red for example
  • Using this method on a white background is impossible
  • I can't create a colorscale that includes more than to "fixed points", like for example red->green->blue

Maybe you know methods that work better than mine...

1 Answers
Related