layers

// 02.01.25

//

// Made for Genuary 2025

// #genuary #genuary2

// Layers upon layers upon layers.

//

// https://www.instagram.com/lucjastozek/

​

let side, margin, circleD, circleGap, squareD, squareGap;

const palette = [

  '#D64933',

  '#FA8334',

  '#EA9010',

  '#2D854A',

  '#14591D',

  '#3587A4',

  '#23B5D3',

  '#70587C',

  '#573280',

  '#832232',

  '#DA4167',

  '#E87461'

];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noStroke();

  side = min(width, height) * 0.8;

  margin = {

    x: (width - side) / 2,

    y: (height - side) / 2

  };

​

  circleD = side * 0.07;

  circleGap = (side - circleD * 10) / 9;

​

  squareD = side * 0.14;

  squareGap = (side - squareD * 10) / 9;

​

  frameRate(2);

​

}

​

function draw() {

  background("#fffbe6");

​

  for (let y = margin.y; y <= height - margin.y; y += circleD + circleGap) {

    for (let x = margin.x; x <= width - margin.x; x += circleD + circleGap) {

      fill(random(palette) + "77");

      circle(x + circleD / 2, y + circleD / 2, circleD);

    }

  }

​

  for (let y = margin.y; y <= height - margin.y; y += circleD + circleGap) {

    for (let x = margin.x; x <= width - margin.x; x += circleD + circleGap) {

      fill(random(palette) + "77");

​

      if (y + circleD + circleGap > height - margin.y && x + circleD + circleGap > width - margin.x) {

        square(x, y, circleD);

        continue;

      } else if (y + circleD + circleGap > height - margin.y) {

        rect(x, y, squareD, circleD);

        continue;

      } else if (x + circleD + circleGap > width - margin.x) {

        rect(x, y, circleD, squareD);

        continue;

      }

​

      square(x, y, squareD);

    }

  }

​

  fill("#fffbe6ab");

  circle(margin.x, margin.y, circleD * 4);

  circle(margin.x + side, margin.y, circleD * 4);

  circle(margin.x, margin.y + side, circleD * 4);

  circle(margin.x + side, margin.y + side, circleD * 4);

}