# Image transitions with pixel array in p5.js

**URL:** <https://discourse.processing.org/t/image-transitions-with-pixel-array-in-p5-js/26696>\
**Category:** Coding Questions\
**Created:** [January 2, 2021, 5:24pm UTC](https://discourse.processing.org/t/image-transitions-with-pixel-array-in-p5-js/26696 "2021-01-02T17:24:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![fbrie002](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fbrie002/32/11663_2.png) [@fbrie002](https://discourse.processing.org/u/fbrie002)\
**Post date:** [January 2, 2021, 5:24pm UTC](https://discourse.processing.org/t/image-transitions-with-pixel-array-in-p5-js/26696/1 "2021-01-02T17:24:26Z")

</div>

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 🙂

```auto
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);

}

```

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 2, 2021, 6:22pm UTC](https://discourse.processing.org/t/image-transitions-with-pixel-array-in-p5-js/26696/2 "2021-01-02T18:22:45Z")

</div>

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

```auto
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));
}

``
```

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 2, 2021, 6:25pm UTC](https://discourse.processing.org/t/image-transitions-with-pixel-array-in-p5-js/26696/3 "2021-01-02T18:25:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 2, 2021, 6:59pm UTC](https://discourse.processing.org/t/image-transitions-with-pixel-array-in-p5-js/26696/4 "2021-01-02T18:59:58Z")

</div>

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

Code is blured inside the details page

> **Code**
>
> ```auto
> 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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3d17fc24d6909e97637d9bbc021c09d094178d42.jpeg)  
image2:

 ![image2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3a868caf9624cc61d0af39f541c00bdd2b15c4c1.jpeg)  
edit and yes I do realise it looks like image 1 with image 2 at changing opacity placed over it

---

<div class="post-metadata">

**Author:** ![fbrie002](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fbrie002/32/11663_2.png) [@fbrie002](https://discourse.processing.org/u/fbrie002)\
**Post date:** [January 2, 2021, 11:12pm UTC](https://discourse.processing.org/t/image-transitions-with-pixel-array-in-p5-js/26696/5 "2021-01-02T23:12:44Z")

</div>

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