let s1 = "I just wanted to tell you that";

let s2 = "You'll be OKAY";

​

let letters = [];

let letters1 = [];

let letters2 = [];

​

let hearts = [];

​

//To Load Font

function preload() {

  myFont = loadFont("assets/AlmaMono-Regular.ttf");

}

​

function setup() {

  createCanvas(500,400);

  textFont(myFont, 20);

  //To make a new heart and push into the hearts array

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

    hearts.push(new Heart(random(width), random(height), 20));

  }

  //To loop through all the characters in the s string

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

    let startPoint = width * 0.4 - textWidth(s.charAt(i))/ 2;

    let xLoc = startPoint + textWidth(s.charAt(i)) * i;

​

    //make a new object for each letter

    letters.push(new Letter(xLoc, height* 0.25, s.charAt(i)));

  }

  //To loop through all the characters in the s1 string

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

    let startPoint = width * 0.15 - textWidth(s1.charAt(i));

    let xLoc = startPoint + textWidth(s1.charAt(i)) * i;

    //make a new object for each letter

    letters1.push(new Letter(xLoc, height* 0.50, s1.charAt(i)));

}

  //To loop through all the characters in the s2 string

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

    let startPoint = width * 0.35 - textWidth(s2.charAt(i)) / 2;

    let xLoc = startPoint + textWidth(s2.charAt(i)) * i;

​

    //make a new object for each letter

    letters2.push(new Letter(xLoc, height* 0.75, s2.charAt(i)));

  }

}

​

function draw() {

  background(225);

  //To loop through the hearts array and call all needed functions

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

    hearts[i].run();

  }

  //To loop through the letters array and call all needed functions

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

    letters[i].run();

  }

  //To loop through the letters1 array and call all needed functions

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

    letters1[i].run();

  }

  //To loop through the letters2 array and call all needed functions

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

    letters2[i].run();

  }

}

​

// when the mouse is pressed assign a random x & y speed for all arrays

function mousePressed() {

  //for the hearts array

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

    hearts[i].seekHome = false;

      hearts[i].xSpeed = random(-2, 2);

      hearts[i].ySpeed = random(-2, 2);

  }

  //for s array (specific area on canvas)

  if (mouseX <= width && mouseY <= 100){

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

    letters[i].seekHome = true;

  }

  }

  else {

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

    letters[i].seekHome = false;

      letters[i].xSpeed = random(-2, 2);

      letters[i].ySpeed = random(-2, 2);

  }

  }

  //for s1 array (specific area on canvas)

  if (mouseX <= width && mouseY > 100 && mouseY < 200){

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

    letters1[i].seekHome = true;

    }

  }

  else {

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

    letters1[i].seekHome = false;

      letters1[i].xSpeed = random(-2, 2);

      letters1[i].ySpeed = random(-2, 2);

  }

}

  //for s2 array (specific area on canvas)

  if (mouseX <= width && mouseY > 200 && mouseY <= height){

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

    letters2[i].seekHome = true;

    }

}

  else {

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

    letters2[i].seekHome = false;

      letters2[i].xSpeed = random(-2, 2);

      letters2[i].ySpeed = random(-2, 2);

  }

}

}

​

class Letter {

  constructor(x, y, c) {

    // we need to save the home location too

    this.homeX = x;

    this.homeY = y;

    this.x = random(width);

    this.y = random(height);

    this.xSpeed = this.ySpeed = 0;

    this.letter = c;

    // boolean to know when we should be trying to find our way home

    this.seekHome = false;

  }

​

  update() {

    if (this.seekHome) {

      this.x += (this.homeX - this.x) * 0.2;

      this.y += (this.homeY - this.y) * 0.2;

    } else {

      this.x += this.xSpeed;

      this.y += this.ySpeed;

      this.xSpeed *= 0.98;

      this.ySpeed *= 0.98;

    }

  }

​

  display() {

    fill(0);

    text(this.letter, this.x, this.y);

  }

​

  checkEdges() {

    if (this.y > height) {

      this.y = 0;

    }

    if (this.y < 0) {

      this.y = height;

    }

    if (this.x > width) {

      this.x = 0;

    }

    if (this.x < 0) {

      this.x = width;

    }

  }

​

  run() {

    this.update();

    this.display();

    this.checkEdges();

  }

}

​

function heart(x, y, size) {

  beginShape();

  vertex(x, y);

  bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);

  bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);

  endShape(CLOSE);

}

​

class Heart {

  constructor(x, y, s) {

​

    this.homeX = x;

    this.homeY = y;

    this.x = random(width);

    this.y = random(height);

    this.xSpeed = this.ySpeed = 0;

    this.size = s;

    // boolean to know when we should be trying to find our way home

    this.seekHome = false;

  }

​

  update() {

    if (this.seekHome) {

      this.x += (this.homeX - this.x) * 0.2;

      this.y += (this.homeY - this.y) * 0.2;

    } else {

      this.x += this.xSpeed;

      this.y += this.ySpeed;

      this.xSpeed *= 0.98;

      this.ySpeed *= 0.98;

    }

  }

    display() {

      noStroke();

      fill(139, 0, 0);

      heart(this.x, this.y, this.size);

    }

​

  checkEdges() {

    if (this.y > height) {

      this.y = 0;

    }

    if (this.y < 0) {

      this.y = height;

    }

    if (this.x > width) {

      this.x = 0;

    }

    if (this.x < 0) {

      this.x = width;

    }

  }

​

  run() {

    this.update();

    this.display();

    this.checkEdges();

  }

}