Image transitions with pixel array in p5.js

p5.js Coding Questions
1

Is it possible to animate a transition between two images in p5?
This should be so simple but I can’t find any examples on how to do it.
I looked into using createGraphics and an offscreen buffer but apparently it doesn’t have the pixel array property and blend() is static.
So I thought that by finding the difference in the rgb values of each pixel from each image and then using that difference to transition from one frame to the next might work… but I’m stuck.
So far this is what I’ve tried, for some reason when I console.log r it results undefined.
Also unsure about the logic. Any help would be super appreciated, thanks :slight_smile:

let img0, img1;

function preload() {
    img0 = loadImage('data/image0.jpeg');
    img1 = loadImage('data/image1.jpeg');
}

function setup() {
    createCanvas(windowWidth, windowHeight);
    pixelDensity(1);
    image(img0, 0, 0, 256, 256);
    image(img1, 300, 0, 256, 256);
    img0.loadPixels;
    img1.loadPixels;
}

function draw() {

    for (var x = 0; x < img0.width; x++) {
        for (var y = 0; y < img0.height; y++) {
            var index = (x + y * img0.width) * 4;
            var r = img0.pixels[index + 0];
            var g = img0.pixels[index + 1];
            var b = img0.pixels[index + 2];
            var a = img0.pixels[index + 3];
            
            var r2 = img1.pixels[index + 0];
            var g2 = img1.pixels[index + 1];
            var b2 = img1.pixels[index + 2];
            var a2 = img1.pixels[index + 3];
            
            var dR = r2 - r;
            var dG = g2 - g;
            var dB = b2 - b;
            
            for (var i = 0.0; i < dR; i++){
                r = lerp(r, r2, i);
            }
            for (var i = 0.0; i < dG; i++){
                g = lerp(g, g2, i);
            }
            for (var i = 0.0; i < dB; i++){
                b = lerp(b, b2, i);
            } 
        }
    }
    img0.updatePixels();
    
    image(img0, 0, 0, 256, 256);

}
2

it should be possible. The only way I know how is by changing colors. Like an animation from red to green.

color begin = color(255,0,0), finnish = color(0,0,255);
float age = 0, maxAge = 100;
void setup() {
  size(200,200);
}

void draw() {
  background(mix(begin,finnish,age,maxAge));
  age+=0.1;
}
color mix(color start, color end, float step, float steps) {
  float r = map(step,0,steps,red(start),red(end));
  float g = map(step,0,steps,green(start),green(end));
  float b = map(step,0,steps,blue(start),blue(end));
  return(color(r,g,b));
}

``
3

just apply it to the whole canvas and do it for every pixel, by using
stroke ( mix(image1.pixels(i+j*image1.width) image2.pixels(...), publicAge, maxAge) ); point(i,j);
or use pixels[] function to set pixel values
and btw I forgot how to access pixel color in processing yet alone p5js

4

I made the program. The images 1 and 2 are stretched but well whatever.

Code is blured inside the details page

Code 
color begin = color(255, 0, 0), finnish = color(0, 0, 255);
float age = 0, maxAge = 100, speed = 1;
PImage img1, img2;

void setup() {
  size(600, 600);
  img1 = loadImage("data/image1.jpg");
  img2 = loadImage("data/image2.jpg");
  img1.resize(600, 600);
  img2.resize(600, 600);
}


void draw() {
  background(mix(begin, finnish, age, maxAge));
  speed *= ((age > maxAge || age < 0)? -1 : 1);
  age+=speed;
  //image(img1,0,0);
  //image(img2,0,0);
  loadPixels();
  for (int x = 0; x < width; x++) {
    for (int y = 0; y < height; y++) {
      color pixelClr = mix(img1.get(x, y), img2.get(x, y), age, maxAge);
      pixels[x+y*width] = (pixelClr);
    }
  }
  updatePixels();
}
color mix(color start, color end, float step, float steps) {
  float r = map(step, 0, steps, red(start), red(end));
  float g = map(step, 0, steps, green(start), green(end));
  float b = map(step, 0, steps, blue(start), blue(end));
  return(color(r, g, b));
}

(I do not own the rights to these pictures, they are the result of a 30 second google search)
image1:
image1
image2:

image2
image21000×1000 118 KB

edit and yes I do realise it looks like image 1 with image 2 at changing opacity placed over it

5

Thanks so much for replying so quickly! This makes a lot of sense, thank you :slight_smile: