Grid Example - Colorful Abstract - Confetti Pattern - Bold - Knobs - randomGauassian =- random

grid-example-colorful-abstract-confetti-pattern-bold-knobs-randomgauassian-random.markdown

Grid Example - Colorful Abstract - Confetti Pattern - Bold - Knobs - randomGauassian =- random

A Pen by Monica.dev on CodePen.

License.

script.js

let xSize;
let ySize;
let noiseX = 0.1;
let noisePos = 0.1;

const standardDeviation = 25;
const margin = 20;
let baseR;
let baseG;
let baseB;

function setup() {
  createCanvas(windowWidth, windowHeight);
  strokeCap(ROUND);
  xSize = windowWidth;
  ySize = windowHeight;

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

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

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 draw() {
  clear();
  noLoop();
  background(250, 250, 250);
  //background("#2b2135");
  const colors = getColors();

  let xMargin = xSize * 0.01;
  let yMargin = ySize * 0.01;
  let scale = 0.0009 * windowWidth;

  let row = 0;
  for (let x = xMargin * 2; x < xSize - xMargin; x += 70) {
    row++;

    for (let y = yMargin * 2; y < ySize - xMargin; y += 70) {
      let opacity = map(y, 0, ySize - xMargin, 0.1, 0.6);

      strokeWeight(map(y, 0, xSize - xMargin, 4 * scale, 9 * scale));

      const xOffset = map(noise(noisePos + x + y), 0, 1, -35, 35);
      let yOffset = map(noise(noiseX), 0, 1, 10, 20);

      const rand = random(10);

      const currentColor = random(colors);

      fill(currentColor);
      stroke(currentColor);

      const shape = random(["circle", "line", "arc"]);

      if (shape == "circle") {
        if (rand > 5) {
          circle(x, y, 15);
        } else {
          circle(x + xOffset, y + yOffset, 15);
        }
      } else if (shape === "line") {
        if (rand > 5) {
          line(x, y, x + xOffset, y + yOffset);
        } else {
          line(x + xOffset, y + yOffset, x, y);
        }
      } else if (shape === "arc") {
        push();
        noFill();
        if (rand > 5) {
          arc(x, y - 10, 50, 50, 0, HALF_PI);
        } else {
          arc(x - 10, y, 50, 50, 0, HALF_PI);
        }
        pop();
      }
      noisePos += 0.00001;
    }

    noiseX += 0.001;
  }
}

function mousePressed() {
  //redraw on mouse press or touch
  redraw();
}

function keyPressed() {
  const SPACEBAR = " ";
  // redraw on spacebar press
  if (key == SPACEBAR) {
    redraw();
  }

  if (key === "g") {
    saveGif("canvas", 5);
  }
  if (key === "s") {
    saveCanvas("canvas");
  }
}

function windowResized() {
  xSize = windowWidth;
  ySize = windowHeight;
  resizeCanvas(windowWidth, windowHeight);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.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;
}