let w, img;

const imagePath = "./images/ship.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);

}

​

/*

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 = [

    drawBlock,

    (i, j, ci) => {

      ci.filter(POSTERIZE, 12);

      return drawBlock(i, j, ci);

    },

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

    },

    (i, j, ci) => {

      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) => {

      ci.filter(DILATE);

      return drawBlock(i, j, ci);

    },

    (i, j, ci) => {

      ci.filter(DILATE);

      return drawBlock(i, j, ci);

    },

    (i, j, ci) => {

      ci.filter(DILATE);

      return drawBlock(i, j, ci);

    },

    (i, j, ci) => {

      ci.filter(BLUR, 10);

      return drawBlock(i, j, ci);

    },

    (i, j, ci) => {

      return drawBlock(i, j, img);

    },

    (i, j, ci) => {

      ci.filter(INVERT);

      return drawBlock(i, j, ci);

    },

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

​

  console.log(height, width, block_height, block_width);

​

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

    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 j = 0; j < v; j++) {

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

}

​