← p5.jsPalette-Driven Grid

BaseHarmonyAnalogousTriadicTetradic12×12

import kleur from "@driangle/kleur";

const base = kleur("#e84393");
const palette = base.analogous()
  .spread(144);

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  const size = width / 12;
  let i = 0;

  for (const color of palette) {
    const [r, g, b] = color.toArray();
    fill(r, g, b);
    noStroke();
    rect(
      (i % 12) * size,
      Math.floor(i / 12) * size,
      size, size
    );
    i++;
  }
}