var popperImg;

let FONT_SIZE = 100;

let LETTER_SPACING = 100;

if (window.innerWidth < 815) {

    FONT_SIZE = 80; 

    LETTER_SPACING = 80; 

}

if (window.innerWidth < 650) {

    FONT_SIZE = 60; 

    LETTER_SPACING = 60; 

}

if (window.innerWidth < 500) {

    FONT_SIZE = 40; 

    LETTER_SPACING = 40; 

}

​

const rows = [

  {

        text: "HAPPY",

    xPos: window.innerWidth/2-LETTER_SPACING*2,

    yPos: window.innerHeight/2-150

  },

  {

        text: "BIRTHDAY",

    xPos: window.innerWidth/2-LETTER_SPACING*3.5,

    yPos: window.innerHeight/2

  },

  {

        text: "SAM!",

    xPos: window.innerWidth/2-LETTER_SPACING*1.5,

    yPos: window.innerHeight/2 + 150

  },

];

var letters = [];

var poppers = [];

​

function preload() {

    roboto = loadFont('Roboto-Bold.ttf');

  popperImg = loadImage('popper.png');

}

​

function setup() {

  createCanvas(window.innerWidth, window.innerHeight);

  textAlign(CENTER);

  angleMode(DEGREES);

  // frameRate(3);

  rows.forEach(row => {

    row.text.split("").forEach((letter, i) => {

      letters.push(new Letter(letter, FONT_SIZE, roboto, row.xPos + LETTER_SPACING*i, row.yPos));

    });

  });

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

    poppers.push({x: random(width), y: random(height)}); 

  }

}

​

function draw() {

  background("#cfebf9");

    letters.forEach((letter) => {

    letter.drawSelf();

    });

  drawAndUpdatePoppers();

}

​

function drawAndUpdatePoppers() {

    poppers.forEach((popper) => {

        image(popperImg, popper.x, popper.y, 30, 30);

    popper.y = popper.y + 2;

    if (popper.y > height) {

        popper.y = -10; 

    }

    });

}

​

​