Color Distribution

const SIZE = 400;

const words = [

    "Saúde",

    "Educação",

    "Diversidade",

    "Justiça social",

    "Natureza",

    "Coletividade",

    "Sustentabilidade",

    "Liberdade",

    "Cooperação",

    "Memória",

    "Segurança",

    "Bem estar",

    "Amor",

    "Brincadeira",

    "Cuidado",

]

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB, 360, 100, 100);

  noStroke();

  noLoop();

  textAlign(CENTER, CENTER);

  textSize(14);

}

​

function draw() {

  background(255);

  push();

    translate(width / 2, height / 2 - 100);

​

    let radius = SIZE / 2;

    const numSegments = 360;

    noStroke();

    for (let i = 0; i < numSegments; i++) {

      for(let bri = 0; bri < 100; bri++){

        let angle = map(i, 0, numSegments, 0, TWO_PI);

        let hue = map(i, 0, numSegments, 0, 360);

        let r = map(bri, 0, 100, 0, radius);

        fill(hue, 100, bri);

        drawCircle(angle, r, map(r, 0, radius, 2, 4));

      }

    }

​

    let colors = [];

    for(let i = 0; i < words.length; i++){

      let hue = map(i, 0, words.length, 0, 360);

      let bri = i % 3 == 0 ? 90 : (i % 3 == 1 ? 65 : 40);

      let sat = i % 3 == 0 ? 90 : (i % 3 == 1 ? 75 : 60);

      colors.push({hue, bri, sat});

    }

​

    stroke(255);

    strokeWeight(5);

    for(let i = 0; i < words.length; i++){

      let angle = map(i, 0, words.length, 0, TWO_PI);

      const col = colors[i];

      let r = map(col.bri, 0, 100, 0, radius);

      fill(col.hue, col.sat, col.bri);

      drawCircle(angle, r, 30);

    }

  pop();

  for(let i = 0; i < colors.length; i++){

    const col = colors[i];

    fill(col.hue, col.sat, col.bri);

    rect(i*width/colors.length, height-200, width/colors.length, 200);

    fill(0);

    text(words[i], i*width/colors.length + width/colors.length/2, height-210);

  }

}

​

function drawCircle(angle, radius, size){

  circle(radius * cos(angle),

           radius * sin(angle),

           size);

}

​