let colors = [

  "#FFCCD7", "#D8FFA0", "#FFE7A0", "#A0ECFF", "#E9C4FF"

];

let fontStyles = ["normal", "italic", "bold"];

let fontWeights = [50]

let fontFamilies = [

  "Helvetica",

  "Fredoka One",

  "Monoton",

  "Petit Formal Script",

  "Six Caps",

  "Rammetto One",

  "Londrina Outline",

  "Modak",

  "Beth Ellen",

  "Mr Bedfort"

];

​

let offsetY = 90;

let offsetX = 140;

​

//mouse actions

let mousePressed = 1;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // frameRate(5);

  background(0, 0, 0);

  createLetters();

}

​

function draw() {

  if (frameCount % 7 === 0) {

    // google "javascript modulus"

    formatDiv(H);

    formatDiv(E);

    formatDiv(L);

    formatDiv(L2);

    formatDiv(O);

  }

​

​

​

  if (mousePressed > 0) {

    ellipse(mouseX, mouseY, 200, 200);

    noStroke();

    fill(255);

  }

}

​

​

function createLetters() {

  H = createDiv("h");

  formatDiv(H);

  H.position(width / 2.8 - offsetX, height / 2 - offsetY);

​

  E = createDiv("e");

  formatDiv(E);

  E.position(width / 2.2 - offsetX, height / 2 - offsetY);

​

  L = createDiv("l");

  formatDiv(L);

  L.position(width / 2.2, height / 2 - offsetY);

​

  L2 = createDiv("l");

  formatDiv(L2);

  L2.position(width / 2.2 + offsetX, height / 2 - offsetY);

​

  O = createDiv("o");

  formatDiv(O);

  O.position(width / 1.4 - offsetX, height / 2 - offsetY);

}

​

function formatDiv(div) {

  div.style("font-family", random(fontFamilies));

  div.style("color", random(colors));

  div.style("font-weight", random(fontWeights));

  div.style("font-size", "240px");

  div.style("width", "140px");

  div.style("text-align", "center");

  div.style("line-height", "190px");

}