EXPO2025DesignSystem_p5.js

//Reference: 
//https://www.expo2025.or.jp/overview/design_system/#inochi

const EXPO2025DesignSystem = [
  {
    name: "Inochi",
    colors: ["#E60012", "#D2D7DA", "#0068B7", "#FFFFFF"],
  },
  {
    name: "Umi",
    colors: ["#0068B7", "#31ACE3", "#00A59E", "#C9E0B8", "#A78EC3", "#FFFFFF"],
  },
  {
    name: "Noyama",
    colors: ["#0068B7", "#99C41E", "#00A59E", "#C9E0B8", "#D9DE00", "#FFFFFF"],
  },
  {
    name: "Hikari",
    colors: ["#E60012", "#F2A800", "#EC8632", "#FCD700", "#E95D19", "#FFFFFF"],
  },
];

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(220);

  // get colors in p5.js
  let palette = random(EXPO2025DesignSystem).colors;
  let separateGrid = function (x, y, a, b) {
    let step = int(random(2, 5));
    let c = a / step;
    for (let j = 0; j < step; j++) {
      for (let i = 0; i < step; i++) {
        let nx = x + i * c;
        let ny = y + j * c;
        if (random() < 0.9 && c > b) {
          separateGrid(nx, ny, c, b);
        } else {
          fill(random(palette));
          noStroke();
          rect(nx, ny, c);
        }
      }
    }
  };

  separateGrid(0, 0, width, width / 15);
  noLoop();
}