​

function preload() {

  img1 = loadImage("photo1.jpg");

  img2 = loadImage("photo2.jpg");

}

​

let grMask, grOut;

​

const FACTOR = 2;

function setup() {

  createCanvas(img1.width*FACTOR, img1.height*FACTOR);

  pixelDensity(1);

  grMask = createGraphics(width, height);

  //grOut = createGraphics(width, height);

  grMask.pixelDensity(1);

  const duration = 3*STARTING_R/DECREMENT;

  saveGif("output.gif", duration/60);

}

​

const STARTING_R = 600;

let r = STARTING_R;

const DECREMENT = 10;

let timeOfPause = -10000;

function draw() {

  if (r === 0) {

    background(0);

    if (timeOfPause < 0) timeOfPause = frameCount;

  }

​

  if (r > 0) {

    background(img1);

  } else {

    background(img2);

  }

  grMask.clear();

  grMask.fill(255);

  grMask.ellipse(width/2, height/2, width*2, r);

  //let tmpImg = createImage(width, height);

  //tmpImg.copy(img1, 0, 0, width, height, 0, 0, width, height);

  //tmpImg.mask(grMask);

  //image(tmpImg, 0, 0, width, height);

  loadPixels();

  grMask.loadPixels();

    for (let x = 0; x < width; x++) {

      for (let y = 0; y < height; y++) {

        const idx = 4*(x + y * width);

        //if (idx % 64 === 0) console.log(grMask.pixels[idx]);

        if (grMask.pixels[idx] != 255) {

          pixels[idx+0] = 0;

          pixels[idx+1] = 0;

          pixels[idx+2] = 0;

        }

        pixels[idx+3] = 255;

      }

    }

  grMask.updatePixels();

  updatePixels();

  if (abs(timeOfPause - frameCount) > 30) {

    r -= DECREMENT;

  }

}