220303a - OpenProcessing

mySketch
xxxxxxxxxx
 
let palette;
​
function setup() {
  createCanvas(800, 800);
  pixelDensity(1);
  colorMode(HSB, 360, 100, 100, 100);
  angleMode(DEGREES);
}
​
function draw() {
  clear();
  background(0, 0, 90);
  let offset = width / 15;
​
  let x = offset;
  let y = offset;
  let w = width - offset * 2;
  let h = height - offset * 2;
  let minSize = width / 20;
​
  for (let k = 0; k < 6; k++) {
    palette = random(MetPalettes).colors.concat();
    recursiveRect(x, y, w, h, minSize);
  }
  noLoop();
}
​
function recursiveRect(x, y, w, h, minSize = 5) {
  let ratio_min = 0;
  let ratio_xa = random(ratio_min, 1 - ratio_min);
  let ratio_xb = 1 - ratio_xa;
​
  let ratio_ya = random(ratio_min, 1 - ratio_min);
  let ratio_yb = 1 - ratio_ya;
​
  let xa = x;
  let wa = round(w * ratio_xa);
​
  let ya = y;
  let ha = round(h * ratio_ya);
​
  let xb = round(x + wa);
  let wb = round(w - wa);
​
  let yb = round(y + ha);
  let hb = round(h - ha);
​
  if (min(wa, ha) > minSize) {
    recursiveRect(xa, ya, wa, ha, minSize);
  } else {
    gradientRect(xa, ya, wa, ha);
  }
​
  if (min(wb, ha) > minSize) {
    recursiveRect(xb, ya, wb, ha, minSize);
  } else {
    gradientRect(xb, ya, wb, ha);
  }
​
  if (min(wa, ha) > minSize) {
    recursiveRect(xa, yb, wa, hb, minSize);
  } else {
    gradientRect(xa, yb, wa, hb);
  }
  if (min(wb, ha) > minSize) {
    recursiveRect(xb, yb, wb, hb, minSize);
  } else {
    gradientRect(xb, yb, wb, hb);
  }
}
​
function gradientRect(x, y, w, h) {
  push();
  drawDownStairs(x, y, w, h, int(random(2, 10)));
  drawingContext.clip();
  blendMode(BURN);
  let cx = x + w / 2;
  let cy = y + h / 2;
​
  let color_1 = color(random(palette));
  let color_2 = color(random(palette));
  let color_3 = color(random(palette));
​
  while (color_1 == color_2) {
    color_2 = random(palette);
  }
  while (color_3 == color_2 || color_3 == color_1) {
    color_3 = random(palette);
  }
  color_1.setAlpha(50);
  color_2.setAlpha(0);
  color_3.setAlpha(33);
​
  let angle = (int(random(8)) * 360) / 8;
  let gradient, cw, ch;
​
  push();
  translate(cx, cy);
​
  if (angle % 90 == 45) {
    let gw = sqrt(sq(w) + sq(h));
    push();
    rectMode(CENTER);
    noStroke();
    rect(0, 0, w, h);
    drawingContext.clip();
    rotate(angle);
    gradient = drawingContext.createLinearGradient(-gw / 2, 0, gw / 2, 0);
    gradient.addColorStop(0, color_1);
    gradient.addColorStop(1 / 2, color_3);
    gradient.addColorStop(1, color_2);
    drawingContext.fillStyle = gradient;
    noStroke();
    rect(0, 0, gw, gw);
    pop();
  } else if (angle % 180 == 0) {
    push();
    rotate(angle);
    gradient = drawingContext.createLinearGradient(-w / 2, 0, w / 2, 0);
    gradient.addColorStop(0, color_1);
    if (random() > 0.5) gradient.addColorStop(1 / 2, color_3);
    gradient.addColorStop(1, color_2);
    drawingContext.fillStyle = gradient;
    rectMode(CENTER);
    noStroke();
    rect(0, 0, w, h);
    pop();
  } else {
    let tmp = w;
    w = h;
    h = tmp;
    push();
    rotate(angle);
    gradient = drawingContext.createLinearGradient(-w / 2, 0, w / 2, 0);
    gradient.addColorStop(0, color_1);
    if (random() > 0.5) gradient.addColorStop(1 / 2, color_3);
    gradient.addColorStop(1, color_2);
    drawingContext.fillStyle = gradient;
    rectMode(CENTER);
    noStroke();
    rect(0, 0, w, h);
    pop();
  }
  blendMode(BLEND);
​
  pop();
  pop();
}
​
function drawDownStairs(x, y, w, h, step) {
  let rotate_num = (int(random(4)) * 360) / 4;
  push();
  translate(x + w / 2, y + h / 2);
  if (rotate_num % 180 == 90) {
    let tmp = w;
    w = h;
    h = tmp;
  }
  rotate(rotate_num);
  translate(-w / 2, -h / 2);
  let cells = step;
  let wd = w / cells;
  let hd = h / cells;
  fill(0, 0, 100, 0);
  noStroke();
  drawingContext.shadowColor = color(0, 0, 0, 15);
  drawingContext.shadowBlur = width / 15;
​
  beginShape();
  let nh = 0;
  for (let i = 0; i < cells; i++) {
    vertex(i * wd, nh);
    vertex((i + 1) * wd, nh);
    nh += hd;
    vertex((i + 1) * wd, nh);
  }
  vertex(w, h);
  vertex(0, h);
  endShape(CLOSE);
​
  pop();
}
​
let MetPalettes = [
  {
    name: "Austria",
    colors: [
      "#a40000",
      "#16317d",
      "#007e2f",
      "#ffcd12",
      "#b86092",
      "#721b3e",
      "#00b7a7",
    ],
    order: [1, 2, 3, 4, 6, 5, 7],
  },
  {
    name: "Cassatt",
    colors: [
      "#b1615c",
      "#d88782",
      "#e3aba7",
      "#edd7d9",
      "#c9c9dd",
      "#9d9dc7",
      "#8282aa",
      "#5a5a83",
    ],
    order: [3, 6, 1, 8, 4, 5, 2, 7],
  },
  {
    name: "Cross",
    colors: [
      "#c969a1",
      "#ce4441",
      "#ee8577",
      "#eb7926",
      "#ffbb44",
      "#859b6c",
      "#62929a",
      "#004f63",
      "#122451",
    ],
    order: [4, 7, 1, 8, 2, 6, 3, 5, 9],
  },
  {
    name: "Degas",
    colors: [
      "#591d06",
      "#96410e",
      "#e5a335",
      "#556219",
      "#418979",
      "#2b614e",
      "#053c29",
    ],
    order: [5, 2, 4, 3, 7, 1, 6],
  },
  {
    name: "Egypt",
    colors: ["#dd5129", "#0f7ba2", "#43b284", "#fab255"],
    order: [1, 2, 3, 4],
  },
  {
    name: "Gauguin",
    colors: ["#b04948", "#811e18", "#9e4013", "#c88a2c", "#4c6216", "#1a472a"],
    order: [2, 5, 4, 3, 1, 6],
  },
  {
    name: "Greek",
    colors: ["#3c0d03", "#8d1c06", "#e67424", "#ed9b49", "#f5c34d"],
    order: [2, 3, 5, 1, 4],
  },
  {
    name: "Hokusai",
    colors: [
      "#6d2f20",
      "#b75347",
      "#df7e66",
      "#e09351",
      "#edc775",
      "#94b594",
      "#224b5e",
    ],
    order: [2, 7, 4, 6, 5, 1, 3],
  },
  {
    name: "Ingres",
    colors: [
      "#041d2c",
      "#06314e",
      "#18527e",
      "#2e77ab",
      "#d1b252",
      "#a97f2f",
      "#7e5522",
      "#472c0b",
    ],
    order: [4, 5, 3, 6, 2, 7, 1, 8],
  },
  {
    name: "Isfahan1",
    colors: [
      "#4e3910",
      "#845d29",
      "#d8c29d",
      "#4fb6ca",
      "#178f92",
      "#175f5d",
      "#1d1f54",
    ],
    order: [5, 2, 4, 6, 3, 7, 1],
  },
  {
    name: "Isfahan2",
    colors: ["#d7aca1", "#ddc000", "#79ad41", "#34b6c6", "#4063a3"],
    order: [4, 2, 3, 5, 1],
  },
  {
    name: "Juarez",
    colors: ["#a82203", "#208cc0", "#f1af3a", "#cf5e4e", "#637b31", "#003967"],
    order: [1, 2, 3, 4, 5, 6],
  },
  {
    name: "Klimt",
    colors: ["#df9ed4", "#c93f55", "#eacc62", "#469d76", "#3c4b99", "#924099"],
    order: [5, 2, 3, 4, 6, 1],
  },
  {
    name: "Manet",
    colors: [
      "#3b2319",
      "#80521c",
      "#d29c44",
      "#ebc174",
      "#ede2cc",
      "#7ec5f4",
      "#4585b7",
      "#225e92",
      "#183571",
      "#43429b",
      "#5e65be",
    ],
    order: [8, 3, 10, 4, 7, 9, 11, 2, 6, 1, 5],
  },
  {
    name: "Monet",
    colors: [
      "#4e6d58",
      "#749e89",
      "#abccbe",
      "#e3cacf",
      "#c399a2",
      "#9f6e71",
      "#41507b",
      "#7d87b2",
      "#c2cae3",
    ],
    order: [2, 5, 8, 3, 4, 9, 1, 6, 7],
  },
  {
    name: "Moreau",
    colors: [
      "#421600",
      "#792504",
      "#bc7524",
      "#8dadca",
      "#527baa",
      "#104839",
      "#082844",
    ],
    order: [2, 5, 3, 4, 7, 1, 6],
  },
  {
    name: "Morgenstern",
    colors: [
      "#7c668c",
      "#b08ba5",
      "#dfbbc8",
      "#ffc680",
      "#ffb178",
      "#db8872",
      "#a56457",
    ],
    order: [6, 5, 4, 7, 3, 2, 1],
  },
  {
    name: "Nattier",
    colors: [
      "#52271c",
      "#944839",
      "#c08e39",
      "#7f793c",
      "#565c33",
      "#184948",
      "#022a2a",
    ],
    order: [1, 6, 5, 2, 3, 4, 7],
  },
  {
    name: "NewKingdom",
    colors: ["#e1846c", "#9eb4e0", "#e6bb9e", "#9c6849", "#735852"],
    order: [2, 1, 3, 4, 5],
  },
  {
    name: "Pillement",
    colors: ["#a9845b", "#697852", "#738e8e", "#44636f", "#2b4655", "#0f252f"],
    order: [4, 3, 2, 5, 1, 6],
  },
  {
    name: "Pissaro",
    colors: [
      "#134130",
      "#4c825d",
      "#8cae9e",
      "#8dc7dc",
      "#508ca7",
      "#1a5270",
      "#0e2a4d",
    ],
    order: [5, 2, 3, 6, 4, 7, 1],
  },
  {
    name: "Redon",
    colors: [
      "#5b859e",
      "#1e395f",
      "#75884b",
      "#1e5a46",
      "#df8d71",
      "#af4f2f",
      "#d48f90",
      "#732f30",
      "#ab84a5",
      "#59385c",
      "#d8b847",
      "#b38711",
    ],
    order: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  },
  {
    name: "Renoir",
    colors: [
      "#17154f",
      "#2f357c",
      "#6c5d9e",
      "#9d9cd5",
      "#b0799a",
      "#f6b3b0",
      "#e48171",
      "#bf3729",
      "#e69b00",
      "#f5bb50",
      "#ada43b",
      "#355828",
    ],
    order: [2, 5, 9, 12, 3, 8, 7, 10, 4, 1, 6, 11],
  },
  {
    name: "Robert",
    colors: ["#11341a", "#375624", "#6ca4a0", "#487a7c", "#18505f", "#062e3d"],
    order: [3, 2, 4, 5, 1, 6],
  },
  {
    name: "Stevens",
    colors: ["#042e4e", "#307d7f", "#598c4c", "#ba5c3f", "#a13213", "#470c00"],
    order: [4, 2, 3, 5, 1, 6],
  },
  {
    name: "Tara",
    colors: ["#eab1c6", "#d35e17", "#e18a1f", "#e9b109", "#829d44"],
    order: [1, 3, 2, 5, 4],
  },
  {
    name: "Thomas",
    colors: [
      "#b24422",
      "#c44d76",
      "#4457a5",
      "#13315f",
      "#b1a1cc",
      "#59386c",
      "#447861",
      "#7caf5c",
    ],
    order: [3, 2, 8, 6, 1, 4, 7, 5],
  },
  {
    name: "Tiepolo",
    colors: [
      "#802417",
      "#c06636",
      "#ce9344",
      "#e8b960",
      "#646e3b",
      "#2b5851",
      "#508ea2",
      "#17486f",
    ],
    order: [1, 2, 8, 6, 3, 5, 7, 4],
  },
  {
    name: "Troy",
    colors: [
      "#421401",
      "#6c1d0e",
      "#8b3a2b",
      "#c27668",
      "#7ba0b4",
      "#44728c",
      "#235070",
      "#0a2d46",
    ],
    order: [2, 7, 4, 5, 1, 8, 3, 6],
  },
  {
    name: "VanGogh1",
    colors: [
      "#2c2d54",
      "#434475",
      "#6b6ca3",
      "#969bc7",
      "#87bcbd",
      "#89ab7c",
      "#6f9954",
    ],
    order: [3, 5, 7, 4, 6, 2, 1],
  },
  {
    name: "VanGogh2",
    colors: [
      "#bd3106",
      "#d9700e",
      "#e9a00e",
      "#eebe04",
      "#5b7314",
      "#c3d6ce",
      "#89a6bb",
      "#454b87",
    ],
    order: [1, 5, 8, 2, 7, 4, 6, 3],
  },
  {
    name: "Veronese",
    colors: [
      "#67322e",
      "#99610a",
      "#c38f16",
      "#6e948c",
      "#2c6b67",
      "#175449",
      "#122c43",
    ],
    order: [5, 1, 7, 2, 3, 6, 4],
  },
  {
    name: "Wissing",
    colors: ["#4b1d0d", "#7c291e", "#ba7233", "#3a4421", "#2d5380"],
    order: [2, 3, 5, 4, 1],
  },
];
​