Valentine Hearts 💞

index.html

<!-- P5.js heart inspired by Coding Train video walkthrough of the heart formula https://www.youtube.com/watch?v=oUBAi9xQ2X4 -->

script.js

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

let heart = [];
let a = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(237, 34, 93);
  noFill();
  stroke(255);
  strokeWeight(5);
  // frameRate(60);
}

function drawHeart() {
  /*draw the heart */
  beginShape();
  for (let v of heart) {
    vertex(v.x, v.y);
  }
  endShape();

  r = 15;
  x = 1.2 * r * pow(sin(a), 3);
  y = -1.5 * (13 * cos(a) - 5 * 2 * cos(2 * a) - cos(3 * a) - cos(4 * a));
  heart.push(createVector(x, y));

  if (a > TWO_PI) {
    noLoop();
  }
  a += 0.01;
}

function draw() {
  /* reset the heart*/
  // a = 0;
  //  heart = []

  //background(237, 34, 93);
  // translate(width / 2, height / 2);
  drawHeart();

  const xWidth = map(random(), 0, 1, 0, width);

  const yHeight = map(random(), 0, 1, 0, height);
  //push();
  translate(xWidth, yHeight);
  strokeWeight(random(5));
  drawHeart();
  //  pop();
}

function mouseClicked() {
  /* restart drawing from beginning */
  heart = [];
  a = 0;
}

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

valentine-hearts.markdown

Valentine Hearts 💞

A Pen by Monica.dev on CodePen.

License.