let w, img;

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

​

const SQUARES = 90;

const X_DIVISIONS = 3;

const Y_DIVISIONS = 105;

const MARGIN = 0.05;

const DOUBLE_ROTATION = false;

​

function preload() {

  img = loadImage(imagePath);

  img.resize(1200, 0);

}

​

/*

1. og

2. quant

3. white borders

4. flipped extreme

5. intermediate

6. final

*/

​

function setup() {

  randomSeed(hash(imagePath) + X_DIVISIONS + Y_DIVISIONS + MARGIN + 1);

  noiseSeed(hash(imagePath));

  angleMode(DEGREES);

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

  createCanvas(img.width, img.height);

  background("rgb(21,20,20)");

​

  var h = 5;

  var v = 3;

  var border = 100;

  var block_width = img.width / h;

  var block_height = img.height / v;

​

  const drawBlock = (i, j, current_image) => {

    const next_image = current_image.get();

    image(

      next_image,

      i * block_width + block_width / 2,

      j * block_height + block_height / 2,

      (img.width / max(h, v)) * 0.95,

      (img.height / max(h, v)) * 0.95

    );

​

    return next_image;

  };

​

  const funcs = [

    // ------ first row ---------------

    drawBlock,

    // (i, j, ci) => {

    //   ci.filter(POSTERIZE, 8);

    //   return drawBlock(i, j, ci);

    // },

    // (i, j, ci) => {

    //   ci.filter(POSTERIZE, 4);

    //   return drawBlock(i, j, ci);

    // },

    (i, j, ci) => {

      ci.filter(POSTERIZE, 3);

      return drawBlock(i, j, ci);

    },

    (i, j, ci) => {

      ci.filter(POSTERIZE, 2);

      return drawBlock(i, j, ci);

    },

    //---------- 2nd row ---------------------

    (i, j, ci) => {

      ci.filter(INVERT);

      ci.filter(POSTERIZE, 2);

      return drawBlock(i, j, ci);

    },

    (i, j, ci) => {

      ci.filter(INVERT);

      return drawBlock(i, j, ci);

    },

    (i, j, ci) => {

      ci.filter(GRAY);

      return drawBlock(i, j, ci);

    },

    (i, j, ci) => {

      ci.filter(INVERT);

      return drawBlock(i, j, ci);

    },

    (i, j, ci) => {

      const ni = img.get();

      ni.filter(GRAY);

      ni.filter(INVERT);

      return drawBlock(i, j, flipImageHorizontally(ni));

    },

    //---------- 3rd row ---------------------

    (i, j, ci) => {

      return drawBlock(i, j, pixelateImage(img, 40));

    },

    (i, j, ci) => {

      return drawBlock(i, j, pixelateImage(img, 80));

    },

    (i, j, ci) => {

      return drawBlock(i, j, pixelateImage(img, 160));

    },

    (i, j, ci) => {

      const p = pixelateImage(img, 160);

      p.filter(INVERT);

      return drawBlock(i, j, p);

    },

    (i, j, ci) => {

      return drawBlock(i, j, pixelateImage(img, 320));

    },

    (i, j, ci) => {

      return drawBlock(i, j, pixelateImage(img, 480));

    },

    (i, j, ci) => {

      return drawBlock(i, j, pixelateImage(img, 920));

    },

    //------------4-------------------

    (i, j, ci) => {

      return drawBlock(i, j, img);

    },

    (i, j, ci) => {

      ci.filter(POSTERIZE, 8);

      return drawBlock(i, j, ci);

    },

    (i, j, ci) => {

      ci.filter(POSTERIZE, 6);

      return drawBlock(i, j, ci);

    },

    (i, j, ci) => {

      ci.filter(POSTERIZE, 3);

      return drawBlock(i, j, ci);

    },

    drawBlock,

  ];

​

  let current_image = img;

  textSize(height / 50);

  textAlign(CENTER, TOP);

  stroke("black");

  strokeWeight(1);

  fill("white");

  imageMode(CENTER);

  rectMode(CENTER);

  background("white");

​

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

    pop();

    push();

    translate(random(-5, +10), 0);

    rotate(random(-PI / 6, PI / 6));

​

    rectMode(CORNER);

    const c = color("rgb(39,1,1)")

    c.setAlpha(240);

​

    fill(c);

    noStroke()

    rect(-150, (0 + j) * block_height, width + 150, block_height);

​

    rectMode(CENTER);

    fill("white");

​

    for (let i = 0; i < width * 1.1; i += width / 25) {

      rect(

        i,

        +block_height / 11 + (0 + j) * block_height,

        width / 50,

        width / 70,

        width / 200

      );

      rect(

        i,

        -block_height / 11 + (1 + j) * block_height,

        width / 50,

        width / 70,

        width / 200

      );

    }

    // stroke("white");

    // line(0, block_height * (j + 1), width, block_height * (j + 1));

    // stroke("black");

​

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

      const mod = i + j * h;

​

      current_image = (funcs[mod] ?? drawBlock)(i, j, current_image);

​

      text(

        mod,

        i * block_width + block_width / 2,

        j * block_height +

          block_height / 2 +

          (img.height / max(h, v)) * 1.05 * 0.5

      );

    }

  }

}

​

function pixelateImage(img, pixelSize = 10) {

  let pixelatedImg = createGraphics(img.width, img.height);

  pixelatedImg.pixelDensity(1);

  pixelatedImg.image(img, 0, 0);

  let border = 1;

  pixelatedImg.stroke("black");

  pixelatedImg.strokeWeight(2);

  // pixelatedImg.noStroke()

​

  for (let x = 0; x < img.width; x += pixelSize) {

    for (let y = 0; y < img.height; y += pixelSize) {

      let c = img.get(x, y);

​

      pixelatedImg.fill(c);

      pixelatedImg.rect(

        x + border,

        y + border,

        pixelSize - border,

        pixelSize - border

      );

    }

  }

​

  noStroke();

​

  return pixelatedImg;

}

​

function flipImageHorizontally(img) {

  let flippedImg = createGraphics(img.width, img.height);

  flippedImg.imageMode(CORNER);

  flippedImg.push();

  flippedImg.translate(img.width, 0); // Move origin to the right edge.

  flippedImg.scale(-1, 1); // Flip horizontally.

  flippedImg.image(img, 0, 0);

  flippedImg.pop();

  return flippedImg;

}

​

function rotateImg(img, angle = PI) {

  let rotatedImg = createGraphics(img.width, img.height);

  rotatedImg.translate(img.width / 2, img.height / 2); // Translate to center

  rotatedImg.rotate(angle);

  rotatedImg.translate(-img.width / 2, -img.height / 2); // Translate back

  rotatedImg.image(img, 0, 0);

  return rotatedImg;

}

​

function flipHorizontally(img) {

  let flippedImg = createGraphics(img.width, img.height);

  flippedImg.scale(-1, 1); // Flip horizontally by scaling x-axis by -1

  flippedImg.image(img, img.width, 0); // Draw image at flipped position

  return flippedImg;

}

​

function flipImageVerticallyScale(img) {

  let flippedImg = createGraphics(img.width, img.height);

  flippedImg.imageMode(CORNER); // Ensure image draws from top-left.

  flippedImg.push(); // Save the current transformation matrix.

  flippedImg.translate(0, img.height); // Move the origin to the bottom-left.

  flippedImg.scale(1, -1); // Flip vertically.

  flippedImg.image(img, 0, 0); // Draw the original image.

  flippedImg.pop(); // Restore the previous transformation matrix.

  return flippedImg;

}

​

//-----------------

​

function setup2() {

  randomSeed(hash(imagePath) + X_DIVISIONS + Y_DIVISIONS + MARGIN + 1);

  noiseSeed(hash(imagePath));

  angleMode(DEGREES);

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

  createCanvas(img.width, img.height);

​

  const blockWidth = img.width / X_DIVISIONS;

  const blockHeight = img.height / Y_DIVISIONS;

  const margin = blockWidth * MARGIN;

  background("red");

​

  let blocks = [];

  for (let i = 0; i < img.width; i += blockWidth) {

    const row = [];

    for (let j = 0; j < img.height; j += blockHeight) {

      row.push(img.get(i, j, blockWidth, blockHeight));

    }

    blocks.push(row);

  }

​

  imageMode(CENTER);

​

  let c = 0;

  for (let i = 0; i < img.width; i += blockWidth) {

    const shiftCount = random(Y_DIVISIONS / 3);

    const row = arrayRotate(blocks.shift(), random() < 0.4, shiftCount);

    for (let j = 0; j < img.height; j += blockHeight) {

      c++;

      const block = row.shift();

​

      if (random() < 0.05) block.filter(INVERT);

      if (random() < 0.2) block.filter(POSTERIZE, 2);

      //if (random() < 0.2) block.filter(GRAY, 2);

      push();

      translate(i + blockWidth / 2, j + blockHeight / 2);

      if (DOUBLE_ROTATION) rotate(180);

      block.resize(blockWidth * (1 - MARGIN), blockHeight * (1 - MARGIN));

​

      image(block, 0, 0);

      pop();

    }

  }

​

  if (DOUBLE_ROTATION) {

    const toRotate = get();

​

    background("white");

​

    translate(img.width / 2, img.height / 2);

​

    rotate(180);

    image(toRotate, 0, 0);

  }

}

​

function arrayRotate(arr, reverse, count) {

  console.log(count);

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

    if (reverse) arr.unshift(arr.pop());

    else arr.push(arr.shift());

  }

  return arr;

}

​

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;

}

​