Abstract Confetti Pattern - Click to Regenerate

abstract-confetti-pattern-click-to-regenerate.markdown

Abstract Confetti Pattern - Click to Regenerate

A Pen by Monica.dev on CodePen.

License.

script.js

let xSize;
let ySize;
let noiseX = 0.1;
let noisePos = 0.1;
function setup() {
  createCanvas(windowWidth, windowHeight);
  strokeCap(ROUND);
  xSize = windowWidth;
  ySize = windowHeight;
}

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

function drawShape(x, y, xOffset, yOffset) {
  const currentColor = random(colors);
  fill(currentColor);
  stroke(currentColor);
  const shape = random(["circle", "line", "arc"]);
  const rand = random(10);
  if (shape == "circle") {
    rand > 5 ? circle(x, y, 15) : circle(x + xOffset, y + yOffset, 15);
  } else if (shape === "line") {
    rand > 5
      ? line(x, y, x + xOffset, y + yOffset)
      : line(x + xOffset, y + yOffset, x, y);
  } else if (shape === "arc") {
    noFill();
    rand > 5
      ? arc(x, y - 10, 50, 50, 0, HALF_PI)
      : arc(x - 10, y, 50, 50, 0, HALF_PI);
  }
}

function draw() {
  clear();
  noLoop();
  background("#2b2135");

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

  for (let x = xMargin * 2; x < xSize - xMargin; x += 70) {
    for (let y = yMargin * 2; y < ySize - xMargin; y += 70) {
      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);

      drawShape(x, y, xOffset, yOffset);

      /* changing noise value doesn't matter since this is set to noLoop();
       */
      //  noisePos += 0.00001;
    }

    /* changing noise value doesn't matter since this is set to noLoop();*/
    //    noiseX += 0.001;
  }
}

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

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

  // save image of canvas
  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;
}