let angle1 = 0;

let rows = 4;

let begin;

let finish;

​

function setup() {

  createCanvas(500, 500);

}

​

// A function to draw the background

function drawBackground() {

   // initialize the colors of the gradience

  begin = color("#FFC3A0"); 

  finish = color("#A4C3E1"); 

  // adjust the colors

  let r = map(sin(angle0), -1, 1, 180, 255); 

  let g = map(cos(angle0), -1, 1, 180, 255); 

  let b = map(sin(angle0 * 2), -1, 1, 180, 255); 

  begin = color(r, g, b);

  angle0 += 0.05;

​

  // loop through the canvas height from top to bottom

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

    // calculate the constant range of change based on the current vertical position

    let change = map(i, 0, height, 0, 1);

    // to make a smooth color change, interpolate between the starting and the ending colors

    let color = lerpColor(begin, finish, change);

    stroke(color);           // set the color for the current row

    line(0, i, width, i);     // draw a horizontal line with given color stroke

  }

}

​

// A function to draw the text

function drawText() {

  textSize(20);

  fill(0);

  let txt = "keep going";          // set the text

  let letters = txt.split("");    // create a list of text letters

  let txtWidth = txt.length * textWidth("A");             // calculate the total width of the text

  let spacing = (width - txtWidth) / (letters.length - 1); // calculate the spacing between the letters

  let rowHeight = (3 * height / 4) / rows;                 // calculate the space between the text rows

​

  for (let j = 0; j < rows; j++) {                         // draw the text 4 times

    for (let i = 0; i < letters.length; i++) {             // place and space the each letters evenly

      let x = width / 2 - txtWidth + i * spacing - 50;     // center the text horizontally, added 50 pixels to separate the text from the left

      let y = j * rowHeight + 80;                          // calculate the y position for each row, added 80 pizels to seperate the text from the top

      let h = map(sin(angle1 + x * 0.01), -1, 1, 0, 100); // to give the letters motion

      text(letters[i], x, y + rowHeight / 2 - h / 2);

    }

  }

  angle1 += 0.1;

}

​

function draw() {

  drawBackground();

  drawText();

}

​