const MARGIN = 0;

const PIXEL_SIZE = SIZE + MARGIN;

​

const SHIFT_X = PIXEL_SIZE * 4;

const SHIFT_Y = PIXEL_SIZE * 4;

​

let PATTERN_WIDTH = 0;

let PATTERN_HEIGHT = 0;

​

const COLOR_1 = "#FFF065";

const COLOR_2 = "#1D1D1D";

​

let colorIndex = 0;

const COLORS = [

  ["#FFF065","#1D1D1D"],

  ["#DE3C4B","#6F8F72"],

  ["#0B7A75","#7D869C"],

  ["#A18276","#330036"],

  ["#4281A4","#9CAFB7"],

  ["#E8E1EF","#78D5D7"]

]

​

​

const FADE_SPEED = 2;

​

const PATTERN = [

  [0, 0, 0, 0, 0, 0, 1, 0],

  [0, 0, 0, 0, 0, 1, 1, 0],

  [0, 0, 1, 1, 1, 1, 1, 1],

  [0, 1, 1, 1, 1, 1, 1, 0],

  [1, 1, 0, 1, 1, 1, 1, 0],

  [1, 0, 0, 1, 1, 1, 1, 1],

  [0, 0, 0, 0, 1, 1, 0, 0],

  [0, 0, 0, 1, 1, 0, 0, 0],

  [0, 0, 0, 1, 0, 0, 0, 0],

];

​

const ELEMENTS = [];

​

class Kraehe {

  constructor(x, y, c, type) {

    this.x = x;

    this.y = y;

    this.opacity = 0;

​

    this.type = type;

​

    this.color = color( COLORS[colorIndex][this.type] )

      this.color.setAlpha(this.opacity);

  }

  draw() {

    if (

      mouseX > this.x &&

      mouseX < this.x + PATTERN_WIDTH &&

      mouseY > this.y &&

      mouseY < this.y + PATTERN_HEIGHT

    ) {

      this.opacity = 255;

    } else {

      if (this.opacity > 0) this.opacity -= floor(FADE_SPEED);

    }

    this.color.setAlpha(this.opacity);

​

    fill(this.color);

    PATTERN.forEach((row, y) => {

      row.forEach((col, x) => {

        if (col === 1) {

          const posX = this.x + PIXEL_SIZE * x;

          const posY = this.y + PIXEL_SIZE * y;

          rect(posX, posY, SIZE, SIZE);

        }

      });

    });

  }

  adjustColor() {

    this.color = color( COLORS[colorIndex][this.type] )

      this.color.setAlpha(this.opacity);

  }

}

​

// const drawKraehe = () => {

//   push();

//   PATTERN.forEach((row, y) => {

//     row.forEach((col, x) => {

//       if (col === 1) {

//         const posX = PIXEL_SIZE * x;

//         const posY = PIXEL_SIZE * y;

//         rect(posX, posY, SIZE, SIZE);

//       }

//     });

//   });

//   pop();

// };

​

function setup() {

  createCanvas(800, 800);

​

  PATTERN_WIDTH = PIXEL_SIZE * PATTERN[0].length;

  PATTERN_HEIGHT = PIXEL_SIZE * PATTERN.length;

​

  for (let y = 0; y < height / SHIFT_Y + 1; y++) {

    for (let x = 0; x < width / PATTERN_WIDTH + 1; x++) {

      push();

​

      let posX = PATTERN_WIDTH * x - SHIFT_X;

      let posY = SHIFT_Y * y - SHIFT_Y - PIXEL_SIZE;

      if (y % 2 === 0) posX += SHIFT_X;

​

      ELEMENTS.push(

        new Kraehe(

          posX,

          posY,

          y % 2 === 0 ? COLOR_2 : COLOR_1,

          y % 2 === 0 ? 0 : 1

        )

      );

    }

  }

}

​

function mousePressed() {

  colorIndex = floor( random( ) * COLORS.length )

  console.log(colorIndex)

  ELEMENTS.forEach((el) => el.adjustColor());

}

​

function draw() {

  background("white");

​

  noStroke();

​

  ELEMENTS.forEach((el) => el.draw());

​

  //   translate(SHIFT_X * -1, SHIFT_Y * -1 - PIXEL_SIZE);

​

  //   for (let y = 0; y < height / SHIFT_Y + 1; y++) {

  //     y % 2 === 0 ? fill(COLOR_2) : fill(COLOR_1);

​

  //     for (let x = 0; x < width / PATTERN_WIDTH + 1; x++) {

  //       push();

  //       translate(PATTERN_WIDTH * x, SHIFT_Y * y);

​

  //       y % 2 === 0 && translate(SHIFT_X, 0);

​

  //       drawKraehe();

  //       pop();

  //     }

  //   }

}

​