let lyrics = [

  "Pull us, pull us", 

  "The current's tryna pull us under", 

  "High tide, we capsize", 

  "We blame it on something lunar", 

  "Rogue winds are coming in",

  "We're sinking",

  "Secrets are washing out",

  "If we make it out the storm",

  "So we need to move like ",

  "water, water, water, water Water",

  "So we need to move like",

  "water, water, water, water Water",

  "Too shallow to see underneath",

  "Too far gone, now we're lost at sea",

  "We need to move like",

  "water, water, water, water Water",

];

​

let currentLine = 0; // Keeps track of the current line of lyrics to display

let lineY = 200;  // Y-position where the text is displayed

let displaySpeed = 500; // How quickly lines appear 

let fadeValue = 255; // Opacity of the text, starting fully opaque

​

// Array of water-like colors to cycle through for the background

let colors = [

  [0, 105, 148],   // Deep Blue

  [0, 191, 255],   // Sky Blue

  [64, 164, 223],  // Light Blue

  [175, 238, 238], // Pale Turquoise

  [70, 130, 180],  // Steel Blue

  [0, 128, 128]    // Teal

];

let currentColor = 0; // Index to keep track of the current background color

let sound; // Variable to hold the sound object

​

// function to preload assets such as sound files

function preload() {

  soundFormats('mp3'); // Specify that we'll be using the mp3 format

  // Load the sound file

  sound = loadSound('music/bruce.mp3');

}

​

function setup() {

  createCanvas(600, 400); 

  textSize(32);

  textAlign(CENTER, CENTER); // Center the text 

  sound.play();

}

​

function draw() {

  // Set the background to gradually change through water-like colors

  background(colors[currentColor][0], colors[currentColor][1], colors[currentColor][2]);

​

  // Display the current line with a fade-in effect

  fill(255, fadeValue);

  text(lyrics[currentLine], width / 2, lineY); // Display the current line of lyrics at the center of the canvas

​

  // Gradually make the text appear by decreasing its opacity

  fadeValue -= 1;

​

  // When the text is fully faded, move to the next line

  if (fadeValue <= 0) 

  {

    currentLine = (currentLine + 1) % lyrics.length; // Move to the next line, looping back to the start if at the end

    currentColor = (currentColor + 1) % colors.length; // Change to the next background color, looping through the array

    fadeValue = 255; // Reset the fade value to fully opaque

  }

}

​

function mousePressed() {

  currentLine = (currentLine + 1) % lyrics.length; // Move to the next line when mouse is clicked

  currentColor = (currentColor + 1) % colors.length; // Change the background color

  fadeValue = 255; // Reset fade value to fully opaque

}

​