# Glitch effect with or without pixels

**URL:** <https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556>\
**Category:** Coding Questions\
**Created:** [August 23, 2019, 7:24am UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556 "2019-08-23T07:24:23Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![l3ehfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/l3ehfar/32/4074_2.png) [@l3ehfar](https://discourse.processing.org/u/l3ehfar)\
**Post date:** [August 23, 2019, 7:24am UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/1 "2019-08-23T07:24:23Z")

</div>

I’ve been working on a project which has been developed with pure p5js code, but I wanna have a glitch effect as a reaction to sound though, as I know the actual glitch effect works much better on image pixels (although I’ve seen without pixels too), has anyone got a good idea to convert my sketch into pixels instantly during the process to have a perfect glitch effect on it?  
I was thinking about a png expert but I guess it goes to crash, isn’t it? should I give up on pixels?

---

<div class="post-metadata">

**Author:** ![morisil](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/morisil/32/6166_2.png) [@morisil](https://discourse.processing.org/u/morisil)\
**Post date:** [August 23, 2019, 8:42am UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/2 "2019-08-23T08:42:13Z")

</div>

I don’t have much experience with p5j, but I use this technique in regular processing and other frameworks, so I guess it will work here as well. Instead of drawing directly to the screen, you can create off-screen graphics buffer:

[https://p5js.org/examples/structure-create-graphics.html](https://p5js.org/examples/structure-create-graphics.html)

Most of the time you can just draw it to the screen, but in the moments you want to have a glitch, you can apply it after everything is drawn on the off-screen graphics and before it is drawn on the screen.

Good luck

---

<div class="post-metadata">

**Author:** ![morisil](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/morisil/32/6166_2.png) [@morisil](https://discourse.processing.org/u/morisil)\
**Post date:** [August 23, 2019, 8:43am UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/3 "2019-08-23T08:43:57Z")

</div>

BTW what kind of glitch you want to achieve?

---

<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:** [August 23, 2019, 9:36am UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/4 "2019-08-23T09:36:41Z")

</div>

Here’s some shader examples for p5.js: [https://github.com/aferriss/p5jsShaderExamples/](https://github.com/aferriss/p5jsShaderExamples/)

Using shaders (as @morisil does) is the most performant approach, but it involves learning a new language 🙂 (GLSL)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 23, 2019, 6:01pm UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/5 "2019-08-23T18:01:55Z")

</div>

> [@l3ehfar](#):
>
> to convert my sketch into pixels instantly during the process to have a perfect glitch effect on it?

Your sketch is already pixels – no conversion necessary.

- [reference | p5.js](https://p5js.org/reference/#/p5/pixels)
- [reference | p5.js](https://p5js.org/reference/#/p5/loadPixels)
- [reference | p5.js](https://p5js.org/reference/#/p5/updatePixels)

After your draw some things on the sketch, use loadPixels, manipulate the pixel values to glitch, then use updatePixels to save your changes. The frame will draw glitched.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 23, 2019, 6:43pm UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/6 "2019-08-23T18:43:32Z")

</div>

Here is an example of a pixels-based glitch effect in a p5.js sketch. It uses simple runs of pixel copying of variable length – sometimes with RGBA channel shifting.

[https://editor.p5js.org/jeremydouglass/sketches/L13wuQ2hg](https://editor.p5js.org/jeremydouglass/sketches/L13wuQ2hg)

This is simple but definitely less performant than shaders – if you want realtime effects, then editing the whole pixels array every frame may slow your sketch down substantially, depending on what you are trying to do.

---

<div class="post-metadata">

**Author:** ![l3ehfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/l3ehfar/32/4074_2.png) [@l3ehfar](https://discourse.processing.org/u/l3ehfar)\
**Post date:** [August 25, 2019, 3:33pm UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/7 "2019-08-25T15:33:35Z")

</div>

thanks for your help and this is kinda I want: [https://www.openprocessing.org/sketch/733567](https://www.openprocessing.org/sketch/733567)

---

<div class="post-metadata">

**Author:** ![l3ehfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/l3ehfar/32/4074_2.png) [@l3ehfar](https://discourse.processing.org/u/l3ehfar)\
**Post date:** [August 25, 2019, 3:35pm UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/8 "2019-08-25T15:35:19Z")

</div>

thanks a lot this is gonna be so helpful

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 25, 2019, 4:44pm UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/9 "2019-08-25T16:44:47Z")

</div>

> [@l3ehfar](#):
>
> thanks for your help and this is kinda I want: [Glitch Streaks - OpenProcessing](https://www.openprocessing.org/sketch/733567)

This example works differently. First, it doesn’t call background() – it draws the whole image in setup, then updates a random bands on top of the previous contents each frame.

The key drawing line is here:

```
image(img, xChange - maxXChange, -maxYChange + y + yChange, img.width, h, 0, y, img.width, h);

```

That works like this example from the reference:

```auto
// - Draw this subsection to fill the dimensions of the destination rectangle
  image(img, 50, 0, 40, 20, 50, 50, 50, 50);
// https://p5js.org/reference/#/p5/image

```

It uses the nine-argument form of image to cut a (semi-random) band out of the source image. So the main effect isn’t modifying pixels, it is randomizing which bands grabs and draws into the screen. The location of each band (y) is random, and then the amount that the source is different from the destination is random, so sampling jumps around (but not too much).

You can get a better sense of what the sketch is doing each frame by removing the initial draw, adding a background, and dropping the number of calls to drawStreak, like this:

```auto
function setup() {
	createCanvas(constrain(img.width - maxXChange * 2, 100, windowWidth), constrain(img.height - maxYChange * 2, 100, windowHeight));
	background(255);
	// image(img, -maxXChange, -maxYChange);
	// for (let i = 0; i < 100; i++) {
	// drawStreak()
	// }
}
function draw() {
  background(0);
  drawStreak();
}

```

Now you can see what the sketch is doing each frame – creating a kind of cut-paste glitch.

---

<div class="post-metadata">

**Author:** ![l3ehfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/l3ehfar/32/4074_2.png) [@l3ehfar](https://discourse.processing.org/u/l3ehfar)\
**Post date:** [August 25, 2019, 7:36pm UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/10 "2019-08-25T19:36:32Z")

</div>

oh thanks I got it now!  
but I have a new problem, I wanna pass one of my functiones to the createGraphics() but I get this error as it’s not a function! it seems like it just gets ellpice, line and … .  
any idea?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 26, 2019, 4:37pm UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/11 "2019-08-26T16:37:33Z")

</div>

> [@l3ehfar](#):
>
> I wanna pass one of my functions to the createGraphics()

Don’t do that. Instead, pass the graphics object (the `Renderer` / `p5.Graphics` that you get from `createGraphics()`) to your function as an argument, `pg`. In your function, call draw operations (`pg.line()`) or pixel manipulations (`pg.pixels[]`) on your graphics object to change it.

> **[p5.js Web Editor](https://editor.p5js.org/jeremydouglass/sketches/mweGz4Hk8)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

Keep in mind that, like the main sketch canvas, things on a graphics object accumulate over time unless you call `pg.background()` or `pg.clear()` every frame.

---

<div class="post-metadata">

**Author:** ![l3ehfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/l3ehfar/32/4074_2.png) [@l3ehfar](https://discourse.processing.org/u/l3ehfar)\
**Post date:** [August 27, 2019, 3:19pm UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/12 "2019-08-27T15:19:59Z")

</div>

yeah you’re right. does it get vertex() too?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 27, 2019, 3:40pm UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/13 "2019-08-27T15:40:18Z")

</div>

> [@l3ehfar](#):
>
> does it get vertex() too?

**Solution for Processing (Java)**  
(below that is one for p5.js)

Nothing is automatic. Call everything on the PGraphics. Instead of:

```auto
void myfunc() {
  beginShape();
  vertex(a,b);
  vertex(c,d);
  endShape();
}

```

Do this:

```auto
PGraphics pg;
void setup() {
  pg = createGraphics(100, 100);
  myfunc(pg);
  image(pg, 0, 0);
}

void myfunc (PGraphics pg) {
  pg.beginDraw();
  pg.stroke(0);
  pg.beginShape();
  pg.vertex(10, 10);
  pg.vertex(90, 90);
  pg.endShape();
  pg.endDraw();
}

```

Same with createShape. Render it with pg.shape() instead of shape().

```auto
PGraphics pg;
void setup() {
  pg = createGraphics(100, 100);
  myfunc(pg);
  image(pg, 0, 0);
}

void myfunc (PGraphics pg) {
  PShape r = createShape(RECT, 10, 10, 80, 80);
  pg.beginDraw();
  pg.stroke(0);
  pg.shape(r);
  pg.endDraw();
}

```

**Solution for p5.js**

In p5.js, there is no PShape, but you use beginShape / endShape in the exact same way:

```auto
function modGraphics(pg, num) {
  pg.clear();
  pg.beginShape();
  for(let i=0; i<num; i++){
    pg.vertex(random(width), random(height/2));
  }
  pg.endShape(); 
}

```

Example p5.js sketch:

> **[p5.js Web Editor](https://editor.p5js.org/jeremydouglass/sketches/0EnMviqjP)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![DCsan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dcsan/32/12710_2.png) [@DCsan](https://discourse.processing.org/u/DCsan)\
**Post date:** [April 5, 2021, 7:28pm UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/14 "2021-04-05T19:28:39Z")

</div>

Is it possible to use `loadPixels()` on another canvas? It seems to only work with the current display window, I want to modify an offscreen image before updating.

[https://p5js.org/reference/#/p5/loadPixels](https://p5js.org/reference/#/p5/loadPixels)  
Loads the pixel data for the display window into the [pixels[]](https://p5js.org/reference/#/p5/pixels) array.

It could be that I can just modify pixels in my image directly, before drawing it to the screen, and then I don’t need to `loadPixels()` or `updatePixels()` at all?  
These two seem to be some fast implementations to just copy the display buffer into an array for modification…

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 6, 2021, 9:47pm UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556/15 "2021-04-06T21:47:45Z")

</div>

p5.Graphics does have `loadPixels` and `updatePixels` as member functions and `pixels` as member variable (although it’s not [documented](https://p5js.org/reference/#/p5.Graphics)).

also I would recommend opening a separate thread for further questions instead of necrobumping 🧟