# Shader performance vs drawing array of points

**URL:** <https://discourse.processing.org/t/shader-performance-vs-drawing-array-of-points/31373>\
**Category:** Coding Questions\
**Created:** [July 22, 2021, 3:25am UTC](https://discourse.processing.org/t/shader-performance-vs-drawing-array-of-points/31373 "2021-07-22T03:25:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rkdnson](https://avatars.discourse-cdn.com/v4/letter/r/cc9497/32.png) [@rkdnson](https://discourse.processing.org/u/rkdnson)\
**Post date:** [July 22, 2021, 3:25am UTC](https://discourse.processing.org/t/shader-performance-vs-drawing-array-of-points/31373/1 "2021-07-22T03:25:30Z")

</div>

Hello all.

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

```auto
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!

---

<div class="post-metadata">

**Author:** ![rkdnson](https://avatars.discourse-cdn.com/v4/letter/r/cc9497/32.png) [@rkdnson](https://discourse.processing.org/u/rkdnson)\
**Post date:** [July 22, 2021, 5:08am UTC](https://discourse.processing.org/t/shader-performance-vs-drawing-array-of-points/31373/2 "2021-07-22T05:08:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [July 22, 2021, 7:25am UTC](https://discourse.processing.org/t/shader-performance-vs-drawing-array-of-points/31373/3 "2021-07-22T07:25:14Z")

</div>

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](https://editor.p5js.org/abe/sketches/vCmis6k90)

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [July 22, 2021, 9:02am UTC](https://discourse.processing.org/t/shader-performance-vs-drawing-array-of-points/31373/4 "2021-07-22T09:02:39Z")

</div>

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é](https://en.wikipedia.org/wiki/Moir%C3%A9_pattern) 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:

```auto
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);
}

```