let paused = true;

function preload() {

  img = loadImage("ian.jpg");

}

function setup() {

  img.resize(1024, 0);

  createCanvas(img.width, img.height);

  gfx = createGraphics(img.width, img.height);

​

  gfx.noStroke();

  gfx.fill(color(20, 20, 20, 20));

  gfx.rect(0, 0, gfx.width, gfx.height);

​

  //   loadPixels();

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

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

  //       let c = color(get(x, y));

  //       drawPoint(x, y,  c, gfx);

  //     }

  //   }

​

  image(img, 0, 0);

  // noLoop();

}

​

function keyPressed() {

  if (key == " ") paused = !paused;

}

​

let ystep = 0;

function draw() {

  // background(220);

  // image(img,0,0);

​

  if (!paused) {

    img.loadPixels();

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

      let c = color(img.get(x, ystep));

      drawPoint(x, ystep, c, gfx);

    }

​

    image(gfx, 0, 0);

    ystep++;

    if (ystep > img.height - 1) {

      console.log("done");

      noLoop();

    }

  }

}

​

function drawPoint(x, y, c, g) {

  g.fill(c);

  // g.stroke(c);

  g.ellipse(x, y, 1, 1);

​

  let n = random(1, 5) | 0;

  for (let i = 0; i < n; i++) {

    c.setAlpha(random(20, 180));

    g.fill(c);

    g.ellipse(x + random(-3, 3), y + random(-3, 3), random(1, 5), random(1, 5));

  }

}

​