let w, img;

const SEED = 99;

const NOISE_SEED = 99;

​

function preload() {

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

}

​

function setup() {

  createCanvas(img.width, img.height);

​

  randomSeed(SEED);

  noiseSeed(NOISE_SEED);

  img.loadPixels();

  rectMode(CORNERS) 

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

    let v2 = {x: random(width), y: random(height)}

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

    let v4 = {x: random(width), y: random(height)}

    let v3 = {x: random(width), y: random(height)}

    noFill()

    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)

  }

}

​

function draw() {

  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);

}