let hearts = [];

const heartEmojis = ['❤️️','💖', '💕', '💚', '💙'];

let heartObj;

let activeHearts = [];

​

class Heart {

  constructor (date, rate, x, y) {

    this.date = date;

    this.rate = rate;

    this.x = x;

    this.y = y;

    this.textCounter = random(200);

    this.state = 0;

    this.heartEmoji = heartEmojis[Math.floor(Math.random() * heartEmojis.length)];

  }

  animate () {

    textSize(this.textCounter);

    if (this.textCounter <= 10) {

      this.state = 0;

    } else if (this.textCounter >= this.rate.value) {

      this.state = 1;

    }

    if(this.state == 0) {

      this.textCounter += 2;

    } else {

      this.textCounter -= 2;

    }

​

    let val = map(this.rate.value, 0, 200, 200, 100)

    setInterval( () => this.animate(), val);

  }

}

​

​

function preload(){

  jsonFile = loadJSON('data/parsed_data.json'); 

}

​

function setup() {

  createCanvas(600, 600);

  background(255);

  Object.keys(jsonFile).forEach( (heartRateDate) => {

    for (let heartRate of jsonFile[heartRateDate]) {

      let heart = new Heart(heartRateDate, heartRate, random(width), random(height));

      hearts.push(heart);

    }

  });

  frameRate(300);

  for (var i = 0; i < 30; i++) {

    let heartObj = hearts[Math.floor(Math.random() * hearts.length)];

    heartObj.animate();

    activeHearts.push(heartObj);

  }

}

​

function draw() {

  background(225);

  for (let heart of activeHearts){

    textSize(heart.textCounter);

    text(heart.heartEmoji, heart.x + 5, heart.y + 5);

  }

  for (let heart of activeHearts){

    if (int(dist(mouseX, mouseY, heart.x, heart.y)) < heart.rate.value / 2) {

      textSize(20);

      fill('steelblue')

      rect(10, 0, 250, 150)

      textAlign(CENTER, CENTER)

      fill('white')

      text("Date:\t" + heart.date, 110, 50);

      text("BPM:\t" + heart.rate.value, 110, 100);

    }

  }

}