let w, img, font;

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

​

const SQUARES = 80;

let ascii = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~".split(

  ""

);

​

ascii = "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~<>i!lI;:,\"^`'. ".split(

  ""

);

​

const imageText = "goldengatebridgesanfranciscocalifornia";

ascii = imageText.split("");

​

function shift(arr, n) {

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

    arr.push(arr.shift());

  }

}

​

function shiftUntil(arr, c) {

  shift(arr, 2);

  while (arr[0] != c) {

    shift(arr, 1);

  }

}

​

function preload() {

  img = loadImage(imagePath);

  font = loadFont("fonts/rubik.ttf");

}

​

function setup() {

  //randomSeed(hash(imagePath) + 3);

  noiseSeed(hash(imagePath));

  angleMode(DEGREES);

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

  createCanvas(side, side);

​

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

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

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

  const size = width / SQUARES;

  textSize(size * 1.4);

  textFont(font);

  textStyle(BOLD);

  push();

  {

    //baseline header

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

    //header

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

    translate(0, offset);

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

    //filter(GRAY, false);

  }

  pop();

​

  //return

​

  const newimg = get();

  filter(BLUR, 150);

  //return

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

  background("rgb(237,237,237)");

  //return

  const margin = 1;

​

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

    const curtain = random(0.3) * SQUARES;

    const lowCurtain = random(0.8, 1) * SQUARES;

​

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

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

​

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

​

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

​

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

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

      //stroke(lerpColor(c, color("white"), 0.7));

      //stroke(c)

      fill(c);

      const lightValue = lightness(c);

      const index = map(lightValue, 0, 255, 0, ascii.length);

      // text(ascii[floor(index)], p1.x, p1.y + size);

      fill(c);

      stroke(c);

      square(p1.x, p1.y, size - margin)

      stroke(lerpColor(c, color("white"), 0.8));

      strokeWeight(4)

      noFill()

      text(ascii[i % ascii.length], p1.x, p1.y + size);

​

      // ;

      noStroke();

    }

    shift(ascii, random(imageText.length));

  }

}

​

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;

}

​