[Question] Fill pixel by pixel

[joex92]

Hi, I'm working on a project where, part of it, I fill the canvas pixel by pixel with a Simplex Noise algorithm (I did it that way on p5).

I was thinking about doing it with a Two.Group with Two.Rectangles, but when doing it, the page freezes and fps drops. I suppose it's because the quantity of rectangle objects. Then I thought about using a Two.Points, but those doesn't let me change the color for each vertices, which would be good the be able to as I explained here: #553.

Looking up through Two. on console, I see that there is a Two.Gradient, would that be what I need? but how do I use it? There are only docs for Two.RadialGradient and Two.LinearGradient...

Is there another way to "paint" a shape/canvas with a better performance? or is there another alternative?

I want to do something like this but with color gradients and not characters...

[joex92]

I was looking up for ways, and found that using a canvas type renderer I can create an ImageData object and set each pixel's value... that could work, but how do I add it to the Two canvas? I see there is a .makeImageSequence but It only accepts image files, I guess... Also this could work only on a canvas renderer, how do I use it on a SVG renderer?

[jonobr1]

Sorry for the delay, if you'd like to "paint" like p5.js you can do this in the canvas and webgl renderers using the overdraw property when constructing Two.js like so:

var two = new Two({
  type: Two.Types.canvas,
  overdraw: true
}).appendTo(document.body);

This gives you the control to manually clear the canvas when you need or want to. So, you can make a Two.Points with one vertex and move it around. Here's an example of that: https://jsfiddle.net/jonobr1/w9ma4t5b/

[joex92]

Interesting.. thanks, didn't know that... I´ll test this approach in my code...

[jonobr1]

Closing question due to inactivity