Glitch effect with or without pixels

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?

1 Like

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

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

2 Likes

BTW what kind of glitch you want to achieve?

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

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

1 Like

Your sketch is already pixels – no conversion necessary.

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.

2 Likes

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

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.

3 Likes

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

2 Likes

thanks a lot this is gonna be so helpful

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:

// - 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:

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.

4 Likes

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?

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.

https://editor.p5js.org/jeremydouglass/sketches/mweGz4Hk8

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.

2 Likes

yeah you’re right. 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:

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

Do this:

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().

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:

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:

https://editor.p5js.org/jeremydouglass/sketches/0EnMviqjP

1 Like