let w, img;

const imagePath = "./images/vienna.jpg";

​

const SQUARES = 16;

​

function preload() {

  img = loadImage(imagePath);

}

​

function setup() {

  randomSeed(hash(imagePath) + 2);

  noiseSeed(hash(imagePath));

  angleMode(DEGREES);

  rectMode(CENTER);

  const side = max(img.width, img.height);

  createCanvas(side, side);

​

  const topline = img.get(0, 12, img.width, 13);

  const bottomline = img.get(0, img.height - 1, img.width, 1);

  const offset = (img.width - img.height) / 2;

  const size = width / SQUARES;

​

  push();

  {

    //baseline header

    image(topline, 0, 0, img.width, offset);

    //header

    image(topline, size * 4, 0, img.width, offset * 0.65);

    translate(0, offset / 2);

    image(topline, 0, 0, img.width, offset * 0.35);

    //main

    translate(0, offset / 2);

    image(img, 0, 0);

    image(img.get(0, 0, width, height * 0.45), -size * 17, 0);

    // image(img.get(0,0,width, height*0.4), -size, 0)

​

    //baseline footer

    translate(0, img.height);

    image(bottomline, 0, 0, img.width, offset);

    //footer

    image(bottomline, 0, 0, img.width, offset / 4);

    translate(0, offset / 4);

    image(bottomline, -size, 0, img.width, offset / 2);

    translate(0, offset / 2);

    image(bottomline, size * 3, 0, img.width, offset / 4);

  }

  pop();

​

  const newimg = get();

  //background(extractColorFromImage(newimg, 0, 0, width, height));

 background("#ddd")

​

  const margin = 1;

​

  translate(size / 2, size / 2);

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

    push();

    for (let j = 0; j < SQUARES; j++) {

      const p1 = new p5.Vector(i * size + margin, j * size + margin);

​

      const p2 = p5.Vector.add(p1, new p5.Vector(size - margin, size - margin));

​

      let c = extractColorFromImage(newimg, p1.x, p1.y, p2.x, p2.y);

​

      strokeWeight(5)

      noFill();

      push()

      rotate(random(-4,4))

      for(let k=0; k<random(4,7);k++){

        rotate(random(-4,4))

        c=lerpColor(c, color(random(["white","black"])), 0.1)

        stroke(c);

        square(0, 0, size -(1+k)*25);  

      }

      pop()

      // fill(i > curtain && i < lowCurtain ? c : inverseColor(c));

      // push()

      // translate(p1.x/2, p1.y/2)

      // rectMode(CENTER)

      // square(0,0, size - margin);

      // pop()

      translate(0, size);

    }

    pop();

    translate(size, 0);

  }

}

​

function inverseColor(c) {

  r = 255 - red(c); //get the mathmatical inverse

  g = 255 - green(c); //get the mathmatical inverse

  b = 255 - blue(c); //get the mathmatical inverse

​

  return color(r, g, b); //return a p5 color function containing our inverse color!

}

​

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

}

​

function hash(str) {

  function charCode(char) {

    return char.charCodeAt(0);

  }

  let h = 0;

​

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

    let c = charCode(str[i]) ^ (i * i);

    h ^= c;

  }

​

  return h;

}

​