​

let imgArr = [];

let fps = 3;

let sampleGap = 16;

​

function preload() {

  img = loadImage("assets/face1.jpg");

}

​

function setup() {

  cnv = createCanvas(img.width, img.height);

  let newCanvasX = (windowWidth - img.width) / 2;

  let newCanvasY = (windowHeight - img.height) / 2;

  cnv.position(newCanvasX, newCanvasY);

​

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

    for (let row = 0; row < img.height; row += sampleGap) {

      let posX = col;

      let posY = row;

      let c = img.get(posX, posY);

      imgArr.push({ color: c, x: posX, y: posY });

    }

  }

  frameRate(fps);

  doImage();

}

​

function doubleClicked() {

  clear();

}

​

function mouseClicked() {

  doImage();

}

​

function doImage() {

  let extraX = mouseX;

  let extraY = mouseY;

  console.log("doImage");

  noFill();

​

  for (let i = 0; i < imgArr.length; i += 1) {

    let c = imgArr[i].color;

    let posx = imgArr[i].x;

    let posy = imgArr[i].y;

    push();

    stroke(c);

    strokeWeight(random(20));

    point(posx, posy);

​

    translate(posx, posy);

    strokeWeight(random(3));

    // rotate(radians(random(360)))

    rotate(radians(extraY));

    curve(

      posx,

      posy,

      sin(posx) * random(extraY),

      cos(posy) * random(extraX),

      0,

      0,

      cos(posy) * random(extraY),

      sin(posx) * random(extraX)

    );

    pop();

  }

}

​