How to update background color when doing loadPixels

james_cao

Hi another question about the update the background color after i loadPixels and updatePixels. Its looks like some glitches about the background or loadPiexls function. here is my project look like right now

each line of the vertical pixels were random move up and down but it did not update the background so the pixels overlay on top of the last time update; compare to processing version: or the video https://vimeo.com/84565395

and my code is like this var img; var noiseOff = 0.0; function preload() { img = loadImage("assets/OriginalPic_small.jpg"); } var halfimage; function setup() { //frameRate(30); createCanvas(1920, 371*2); cimage = createImage(1920, 371*4); img.loadPixels(); } function draw() { noiseOff = noiseOff +0.1; var offsetY = 100; cimage.loadPixels(); for (var x=0; x<cimage.width; x++) { var n = int(offsetY*noise(noiseOff+x)); for (var y=0; y<cimage.height; y++) { var r = x + (y+n*4)*cimage.width; cimage.pixels[r]=img.pixels[x + y*cimage.width]; } } cimage.updatePixels(); background(0); image(cimage, 0, 0); }

any idea? big thanks to you guys!

GoToLoop

http://forum.processing.org/two/discussion/8045/how-to-format-code-and-text

In p5*js, a pixel is 4 bytes (RGBa) instead of 1 byte (aRGB).
Therefore, the loop needs to advance 4 steps for each iteration for the x position!

http://p5js.org/reference/#/p5/pixels[]