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 
(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 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.
5 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.
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:
2 Likes
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
Loads the pixel data for the display window into the 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…
p5.Graphics does have loadPixels and updatePixels as member functions and pixels as member variable (although it’s not documented).
also I would recommend opening a separate thread for further questions instead of necrobumping 
1 Like