Sonhos - cores - OpenProcessing

mySketch
xxxxxxxxxx
 
const sat_factor = 0.9;
const SHUFFLE = false;
let colors = [];
​
const words = [
    "Saúde",
    "Educação",
    "Diversidade",
    "Justiça social",
    "Natureza",
    "Cuidado",
    "Sustentabilidade",
    "Liberdade",
    "Cooperação",
    "Coletividade",
    "Memória",
    "Brincadeira",
    "Bem estar",
    "Amor",
    "Segurança"
];
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  
  //starting point:
  //https://www.instagram.com/p/DCUbW67o16o/
  colors = [
    color("#D3352A"),
    color("#F07525"),
    color("#FFBF52"),
    color("#DDF067"),
    color("#A2D975"),
    color("#60BD62"),
    color("#5EF09D"),
    color("#45DECC"),
    color("#3FC4F5"),
    color("#6691FF"),
    color("#ED9DE8"),
    color("#BBA6FF"),
    color("#B66FC9"),
    color("#D966B2"),
    color("#D95F74")
  ];
  
  colorMode(HSB, 360, 100, 100);
  noStroke();
  noLoop();
  textAlign(CENTER, CENTER);
  textSize(14);
}
​
function draw() {
  background(255);
  
  const palletHeight = 100;
  const space = 15;
  
  const ww = (width-((colors.length+2)*space))/colors.length;
  for(let i = 0; i < colors.length; i++){
    const col = colors[i];
    fill(hue(col), saturation(col)*sat_factor, brightness(col));
    rect(i*(ww+space) + space, space, ww, palletHeight-space*2);
    
    fill(0);
    text(words[i], i*(ww+space) + space + ww/2, palletHeight-space*2);
    
    text(i, i*(ww+space) + space + ww/2, palletHeight / 2);
    
    console.log(words[i], hsbToHex(hue(col), saturation(col)*sat_factor, brightness(col)));
  }
  
  noStroke();
  let result = generateCombinations(colors, 3);
  if(SHUFFLE) result = shuffle(result);
  const cols = floor(sqrt(result.length));
  const rows = ceil(result.length/cols);
  const w = (width - (cols+2)*space) / cols;
  const h = (height - space*2 - palletHeight - space*rows) / rows;
​
  result.forEach((combination, i) => {
      const gridX = i % cols;
      const gridY = Math.floor(i / cols);
      if (gridY >= rows) return;
      combination.forEach((col, j) => {
          //fill(col);
          fill(hue(col), saturation(col)*sat_factor, brightness(col));
          rect(gridX * w + w/3 * j + gridX * space + space, gridY * (h + space) + space + palletHeight, w/3, h);
      });
  });
}
​
function hsbToHex(hue, sat, bri) {
    const h = hue / 360;
    const s = sat / 100;
    const v = bri / 100;
​
    let r = 0, g = 0, b = 0;
​
    const i = Math.floor(h * 6);
    const f = h * 6 - i;
    const p = v * (1 - s);
    const q = v * (1 - f * s);
    const t = v * (1 - (1 - f) * s);
​
    switch (i % 6) {
        case 0: r = v; g = t; b = p; break;
        case 1: r = q; g = v; b = p; break;
        case 2: r = p; g = v; b = t; break;
        case 3: r = p; g = q; b = v; break;
        case 4: r = t; g = p; b = v; break;
        case 5: r = v; g = p; b = q; break;
    }
​
    r = Math.round(r * 255);
    g = Math.round(g * 255);
    b = Math.round(b * 255);
​
    const toHex = (c) => c.toString(16).padStart(2, '0');
​
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
​
function generateCombinations(options, groupSize) {
  const combinations = [];
​
  function combine(current, start) {
    if (current.length === groupSize) {
      if(SHUFFLE) current = shuffle(current);
      combinations.push([...current]);
      return;
    }
​
    for (let i = start; i < options.length; i++) {
      current.push(options[i]);
      combine(current, i + 1);
      current.pop();
    }
  }
​
  combine([], 0);
  
  return combinations;
}
​
// https://github.com/processing/p5.js/issues/4667
p5.prototype.saturation = function(c) {
  c = this.color(c);
  r = red(c);
  g = green(c);
  b = blue(c);
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;
  const saturation = max === 0 ? 0 : delta / max;
  return saturation * 100;
}