pattern of points as backgroun in processing.js canvas

sebastiako

pattern of points as backgroun in processing.js canvas

in Processing with Other Languages • 9 months ago

Hi list, I need to ad a pattern of points as background of my processing.js canvas.
I can do it with processing.js for example:

Copy code

for (int i=0;i< 32; i++){
        for (int j=0;j< 56; j++){
          point(j * 30, i * 30 ) ;

        }
   }

The problem is that i need to do it inside draw{} and it consumes a lot of cpu, so i was wondering that instead of doing it with code , using a pic with my point pattern as background in my processing.js canvas.

which should be the best approach for this?

S.

Replies(3)

PhiLho

Re: pattern of points as backgroun in processing.js canvas

9 months ago

You actually draw a simple rectangle with the code you show...
That said, in classical Processing, using loadPixels() / pixels[] / updatePixels() is generally faster than using point() calls.
And, yes, if the pattern doesn't change, using an image is much more efficient.

sebastiako

Re: pattern of points as backgroun in processing.js canvas

9 months ago

Hi philo, and how can i create the same rectangle of points but using loadPioxels and updatePixels?

this:

Copy code

for (int i=0;i< 32; i++){
        for (int j=0;j< 56; j++){
          point(j * 30, i * 30 ) ;

        }
   }

PhiLho

Re: pattern of points as backgroun in processing.js canvas

9 months ago

Something like:

Copy code

loadPixels();
for (int i = 0; i < 32; i++) {
for (int j = 0; j < 56; j++) {
pixels[(j * 30) * 32 + i * 30] = c;
}
}
updatePixels();

where c is the color you want to set.

Top Reply