var myCanvas;

var names = ["Emmanuel", "Minjin", "Orianna", "Fen", "Bea", "Seyoung", "Eujin", "Katie", "Laurence", "Pat", "Golan", "Connie", "Tomas", "Michelle", "Jasmine"];

​

​

//-----------------------------------------------

function setup() {

  myCanvas = createCanvas(600, 600);

  backgroundColor = color(random(235, 250), random(50, 150), random(115, 190));

  pixelDensity(1);

  randName = (random(names));

  createLoop({duration:1.4, gif:true});

}

​

//-----------------------------------------------

function draw() {

  background(backgroundColor);

  push();

  var scaleNum = 0.5 * (cos(frameCount / 14) + 1.7);

​

  translate(20, 30);

  for (let i = 0; i < 15; i++) {

    for (let j = 0; j < 15; j++) {

      drawHeart(i * 40, j * 40, scaleNum);

    }

  }

  pop();

  push();

  translate(0, 20);

  textFont('Pacifico',50*scaleNum);

  fill(181, 18, 45);

  textAlign(CENTER, TOP);

  text ("Happy", (width/4), height/4);

  textAlign(CENTER,CENTER);

  text ("Valentine's", width/2, height/2);

  textAlign(CENTER, BOTTOM);

  text ("Day!", width/1.4, height/1.4);

  textSize(25);

  text("Dear:", 400, 100);

  text(randName, 490, 100);

  text("From: Leah", 150, 500);

  pop();

}

​

function drawHeart(x, y, z) {

  fill("white");

  stroke("white")

​

​

  var ax = 200;

  var ay = 340;

  var bx = 200;

  var by = 250;

  var cx = 350;

  var cy = 200;

  var dx = 265;

  var dy = 140;

  var ex = 230;

  var ey = 120;

  var fx = 210;

  var fy = 150;

  var gx = 200;

  var gy = 180;

  var hx = 190;

  var hy = 150;

  var ix = 170;

  var iy = 120;

  var jx = 135;

  var jy = 140;

  var kx = 50;

  var ky = 200;

  var lx = 200;

  var ly = 250;

​

  push();

  translate(x, y);

  scale(z * 0.2);

  translate(-200, -260)

  beginShape();

  vertex(ax, ay);

  bezierVertex(bx, by, cx, cy, dx, dy);

  bezierVertex(ex, ey, fx, fy, gx, gy);

  bezierVertex(hx, hy, ix, iy, jx, jy);

  bezierVertex(kx, ky, lx, ly, ax, ay);

  endShape();

  pop();

​

}