​

function setup() {

  createCanvas(500, 500);

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

    let x = random(width);

    let y = random(height);

    let heartSize = random(5, 25);

    let heartSpeed = random(1, 2); 

    let heartbeat = true;

    hearts.push({ x, y, heartSize, heartSpeed, heartbeat });

  }

}

​

function draw() {

  background(220);

​

  for (let i = 0; i < hearts.length; i++) {

    updateHeartbeat(hearts[i]);

    displayHeart(hearts[i].x, hearts[i].y, hearts[i].heartSize);

  }

}

​

function updateHeartbeat(heart) {

  let d = dist(mouseX, mouseY, heart.x, heart.y - heart.heartSize);

  let threshold = 100;

  if (d < threshold) {

    heart.heartSpeed = map(d, 0, threshold, 2, 4.5);

  } else {

    heart.heartSpeed = 1;

  }

  if (heart.heartbeat) {

    heart.heartSize += heart.heartSpeed; 

  } else {

    heart.heartSize -= heart.heartSpeed; 

  }

​

  if (heart.heartSize > 350 || heart.heartSize < 100) {

    heart.heartbeat = !heart.heartbeat;

  }

}

​

function displayHeart(x, y, heartSize) {

  let color1 = color(255, 0, 0);

  let color2 = color(50, 0, 0);

  let d = dist(mouseX, mouseY, x, y - heartSize);

  let lerpedColor = lerpColor(color1, color2, d / width);

​

  fill(lerpedColor);

  stroke(50, 0, 0,80);  

  beginShape();

  vertex(x, y - heartSize);

  bezierVertex(x, y - heartSize - 25, x + 50, y - heartSize - 25, x + 50, y - heartSize);

  bezierVertex(x + 50, y - heartSize + 25, x, y - heartSize + 50, x, y - heartSize + 75);

  bezierVertex(x, y - heartSize + 50, x - 50, y - heartSize + 25, x - 50, y - heartSize);

  bezierVertex(x - 50, y - heartSize - 25, x, y - heartSize - 25, x, y - heartSize);

  endShape(CLOSE);

}

​