let img;

let glitchImg;

let counter = 0;

let copyOrg = true;

​

let img1;

​

//function preload() {

  //img1 = loadImage("assets/t4copy.jpg");

//}

​

function preload() {

   img1 = loadImage("assets/t4copy.jpg");

  orgImg = loadImage("/assets/t5.jpg");

}

​

function glitch() {

  if (copyOrg) {

    img.copy(orgImg, 0, 0, width, height, 0, 0, width, height);

    copyOrg = false;

    counter = 0;

  }

  img.resize(

    int(img.width + random(-200, 200)),

    int(img.height + random(-200, 200))

  );

  img.resize(

    int(img.width + random(-200, 200)),

    int(img.height + random(-200, 200))

  );

  const data = img.canvas.toDataURL("image/jpeg", 1);

  loadImage(data, loadedImg => {

    const { width: iw, height: ih } = loadedImg;

    img.copy(loadedImg, 0, 0, iw, ih, 0, 0, iw, ih);

    img.resize(width, height);

    glitchImg.copy(img, 0, 0, width, height, 0, 0, width, height);

    counter += 1;

    setTimeout(glitch, 0);

  });

}

​

function setup() {

  frameRate(30);

  createCanvas(800, 480);

  img1 = createImage(width, height);

  //imageMode(CORNERS);

  img = createImage(width, height);

  glitchImg = createImage(width, height);

  pixelDensity(2);

  noStroke();

  fill(255);

  textSize(18);

  glitch();

}

​

function draw() {

  background(0);

  image(img,0,0);

  image(glitchImg, 100, 100);

  text(counter, 20, 34);

}

​

function mousePressed() {

  copyOrg = true;

}