Grid of nested circles - guassian colors

grid-of-nested-circles-guassian-colors.markdown

Grid of nested circles - guassian colors

A Pen by Monica.dev on CodePen.

License.

script.js

// const colors = [
//   "#ffadad",
//   "#ffd6a5",
//   "#fdffb6",
//   "#caffbf",
//   "#9bf6ff",
//   "#a0c4ff",
//   "#bdb2ff",
//   "#ffc6ff"
// ];

let standardDeviation = 35;
let baseR;
let baseG;
let baseB;

function getColors() {
  // x, y, w,h
  let colors = [];
  // background(color(baseR, baseG, baseB, .4))

  for (let x = 0; x < 10; x++) {
    const R = randomGaussian(baseR, standardDeviation);
    const G = randomGaussian(baseG, standardDeviation);
    const B = randomGaussian(baseB, standardDeviation);
    const currentColor = color(R, G, B);

    baseR = map(R, 0, 255, standardDeviation, 255 - standardDeviation);
    baseG = map(G, 0, 255, standardDeviation, 255 - standardDeviation);
    baseB = map(B, 0, 255, standardDeviation, 255 - standardDeviation);
    colors.push(currentColor);
  }

  return colors;
}

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

  //background("#2b2135");
  fill("#FFF");
  textStyle(BOLD);
  textSize(50);

  baseR = random(0 + standardDeviation, 255 - standardDeviation);
  baseG = random(0 + standardDeviation, 255 - standardDeviation);
  baseB = random(0 + standardDeviation, 255 - standardDeviation);
}

function draw() {
  clear(); // clear canvas of elements from previous draw

  //background("#2b2135");
  background(250, 250, 250);
  const colors = getColors();
  noFill();
  stroke("white");
  //  text("✨", mouseX, mouseY);
  let spacing = 60;
  for (let x = spacing; x < width - spacing; x += spacing) {
    for (let y = spacing; y < height - spacing; y += spacing) {
      // circle(x, y, 30);
      // circle(x, y, 20);
      let count = random(3, 15);

      strokeWeight(random(3, 5));
      while (count > 0) {
        stroke(random(colors));
        circle(x, y, 50 - count * 10);
        count--;
      }
    }
  }
}

function keyPressed() {
  const SPACEBAR = " ";
  // pause/play animation when spacebar is pressed for sketches that animate from draw to draw
  if (key == SPACEBAR) {
    isLooping() ? noLoop() : loop();
    noLoop();
  }

  if (key === "g") {
    saveGif("canvas", 25);
  }
  if (key === "s") {
    saveCanvas("colorful-disks");
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>

style.css

canvas {
  /* center canvas in middle of page */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 50%;
  text-align: center;
}