Animonica - Grid Practice

animonica-grid-practice.markdown

Animonica - Grid Practice

A Pen by Monica.dev on CodePen.

License.

script.js

const colors = ["#bdb2ff", "#ffc6ff"];

let img;

// p5 logo image https://assets.codepen.io/209274/P5.js_icon.png

// Load the image.
function preload() {
  img = loadImage(
    "https://assets.codepen.io/209274/animonica-headshot-cropped.png"
  );
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(1);
  /* moves ellipse into the grid */
  ellipseMode(CORNER);
  background("#2b2135");
  fill("#fbf4ff");
  textStyle(BOLD);
  textSize(50);
}

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

  background("#2b2135");

  //   text("✨", mouseX, mouseY);

  //   textAlign(CENTER, CENTER);
  //   text("P5⁎js Starter Template", width / 2, height / 2);

  let spacer = width / 12;
  // stroke("red");
  for (let x = 0; x < width; x += spacer) {
    for (let y = 0; y < height; y += spacer) {
      if (random(1) > 0.75) {
        fill(random(colors));
      } else {
        fill("#fbf4ff");
      }

      if (random(1) < 0.5) {
        square(x, y, spacer);
      } else if (random(1) < 0.1) {
        image(img, x, y, spacer, spacer);
      } else {
        circle(x, y, spacer);
      }
    }
  }
}

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();
  }

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

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;
}