Using LoadPixels on multiple images?

appy678

Hello! I'm somewhat new to p5.js, and I am working on editing an image. While I'm testing I want them side by side to see the difference. I have a start image and a final image. When I use loadpixels() I always end up loading the pixels of the imgstart image. I want to be able to leave that one alone and load the pixels of the final image. I know that I could just ignore it because it affects only one image, but I want it to affect the right one. I tried using something like imgfinal.loadPixels(), but that wasn't working. How can I select what image I am loading and updating the pixels for? Hopefully that makes sense.

     var h;
     var w;

     var imgstart;
     var imgfinal;
              function preload() {
       imgstart = loadImage('headshot.jpg');
       imgfinal = loadImage('headshot.jpg');
     }

     function setup() {
       h = imgstart.height;
       w = imgstart.width;
       createCanvas(w*2, h);
       background(50);
       image(imgstart, 0, 0);

       findPixels();         }


     function draw() {
       frameRate(10);
       image(imgfinal, w, 0);
     }

     function findPixels() {
       loadPixels();


       for (var i = 0; i < pixels.length; i++) {
         var check = Math.random();
         if (check > 0.5 && pixels[i] <=254){
           pixels[i] = pixels[i]+100;
         }
         else if (check <= 0.5 && pixels[i] >=1){
           pixels[i] = pixels[i]-100;
         }
       }

       updatePixels();
     }

GoToLoop

Do not load the same resource more than once. [-X
For images, you can clone it instead, using method get(): https://p5js.org/reference/#/p5.Image/get

When we call loadPixels() & updatePixels() and use its pixels[], we're manipulating the sketch's global canvas. L-)

In order to go to a specific p5.Image, use its corresponding methods instead: *-:)
https://p5js.org/reference/#/p5.Image