let w, img;

const SEED = 99;

const NOISE_SEED = 99;

​

function preload() {

  img = loadImage("./images/messina.jpg");

}

​

function setup() {

  angleMode(DEGREES);

  createCanvas(img.width, img.height);

​

  randomSeed(SEED);

  noiseSeed(NOISE_SEED);

​

  img.loadPixels();

​

  //image(img, 0, 0)

  rectMode(CORNERS);

  background("white");

​

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

    let v1 = { x: floor(random(width)), y: floor(random(height)) };

    let v2 = new p5.Vector(v1.x, v1.y).add(

      random(-200, 200),

      random(-200, 200)

    );

​

    const c = extractColorFromImage(img, v1.x, v1.y, v2.x, v2.y);

​

    stroke(lerpColor(c, color("#white"), 0.6));

    fill(c);

​

    rect(v1.x, v1.y, v2.x, v2.y, 5);

  }

​

  //   for (let i = 0; i < 3; i++) {

​

  //     //pop()

  //   }

  frameRate(1.5);

}

​

let i = 0;

​

function keyPressed() {

  if (key === 's') {

    saveGif('01.gif', 1); // 1 sec

  }

}

​

function draw() {

  translate(width / 2, height / 2);

  imageMode(CENTER);

​

  let c = get(20, 20, width - 40, height - 40);

​

  c.resize(width / 1.5, 0);

​

  //push();

  rotate(15 * (i + 1));

​

  image(c, 0, 0);

  //pop();

​

  if (i++ >= 3) noLoop();

}

​

​

​

function extractColorFromImage(img, x, y, x2, y2) {

  minx = min(x, x2);

  miny = min(y, y2);

​

  imgChunk = img.get(

    minx,

    miny,

    ceil(max(x, x2) - minx),

    ceil(max(y, y2) - miny)

  );

  imgChunk.loadPixels();

  if (imgChunk.pixels.length == 0) {

    return "#ffffff";

  }

​

  let r = 0,

    g = 0,

    b = 0;

  for (let i = 0; i < imgChunk.pixels.length; i += 4) {

    c = imgChunk.pixels[i];

    r += imgChunk.pixels[i + 0];

    g += imgChunk.pixels[i + 1];

    b += imgChunk.pixels[i + 2];

  }

  r /= imgChunk.pixels.length / 4;

  g /= imgChunk.pixels.length / 4;

  b /= imgChunk.pixels.length / 4;

​

  return color(r, g, b, 100);

}

​