Shader performance vs drawing array of points

p5.js Coding Questions
1

Hello all.

I have a project where I want every other pixel to be black. This could be accomplished with two simple for loops;

for (let x = 0; x < width; x+=2) {
    for (let y = 0; y < height; y+=2) {
      point(x,y);
    }
  }

However, this solution does not scale well as the canvas gets larger. I have not dove into the world of shaders but have wanted to for some time now. Would a shader perform better in this situation?

Thanks!

2

Updating my question with another question.

Looking more into Pixels. It looks like this is the most performance-efficient way to accomplish this task.

Is that the case? I am sure there is some explanation that is over my comprehension of how the browser / p5.js handles things.

3

Hi,

I would say using point() is the slowest, using the pixels array is faster, and using shaders even faster, specially for a large canvas. Here an example:
https://editor.p5js.org/abe/sketches/vCmis6k90

4

hamoid is definitely correct about the different speeds of those options. The difference between point() and pixels is probably fairly nominal, but the difference between either of those and shaders will be massive.

Side note: alternating individual pixels in the modern world of high DPI displays is kind of a weird thing to do. You’re probably going to wind up with either a strange moiré pattern or just a shade of gray.

Also, if you’re really just using a static background for you sketch, you could consider using a graphics object that you just render once and reuse:

let bg;

function setup() {
	createCanvas(windowWidth, windowHeight);
	bg = createGraphics(width, height);
	bg.background(255);
	bg.stroke(0);
	for (let x = 0; x < width; x++) {
		for (let y = x % 2; y < height; y += 2) {
			bg.point(x, y);
		}
	}
}

function draw() {
	image(bg, 0, 0);
	ellipse(mouseX, mouseY, 20, 20);
}