let speed = 0

​

// this is the array to hold a bunch of bubbles

let Bubbles = []

​

// these are the variables for the colour

// with these variables, it will be easier to change the colour later on

var backgroundColour = "#000054"

var waveColour = "waveColour"

var bubbleColour = "bubbleColour"

​

// Preload the fonts for the text

function preload () {

  aclonica = loadFont ('fonts/Aclonica-Regular.ttf')

  princessSofia = loadFont ('fonts/PrincessSofia-Regular.ttf')

}

​

function setup() {

  createCanvas(576, 324);

  noStroke()

  // This will set up an instance for the bubbles

  // With setting the x position to be random, the bubble will scater around the x axis. But all of them will start at the bottom because the y position is the height value.The ySpeed and size will be random within the set value.

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

    Bubbles[i] = new bubble(random(width), height, random(-2, 2), random(15))

  }

}

​

function draw() {

  background(backgroundColour)

  // These are the custom functions for what is happening on the canvas

  // I decided to use costum functions for each section to make it neat

  // the functions go in order on which shows first (noise wave in the background, and text in the front)

  noiseWave()

  addBubbles()

  changeColour() 

  textContent()

}

​

function noiseWave() {

  fill (waveColour)

  // Create a shape with vertexed for the wave noise

  beginShape()

  // this is the offset for the fluidity of the noise wave

  let fluidity = 0

  // this will loop the wave 

  for (let x = 0; x <= width + 10; x += 10) {

    // it will map the noise into the y axis to there will be a noise wave on that certain area of the canvas

    let y = map(noise(fluidity, speed), 0, 1, height/6, height/6 + 200)

    // set the vertex of the noise wave for the shape

    vertex(x, y)

    // this is to change the fluidity of the wave 

    // increasing it will create a jagged wave, while decreasing it will create a smooth wave.

    fluidity += 0.025

  }

  // this is to change the speed of the wave 

  // increasing it will speed up the wave movement, while decreasing it will slow down the wave movement.

  speed += 0.01

  // The first vertex will be on the top-left, the second vertex will be on the bottom-middle, and the third vertex will be on the top-right.

  // It will create a V line across the horizontal wave.

  vertex(width, 0)

  vertex(width / 2, height)

  vertex(0, 0)

  endShape(CLOSE)

}

​

function addBubbles() {

  fill(bubbleColour)

  // this will loop the bubble class function 

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

    Bubbles[i].float()

    Bubbles[i].show()

    }

}

​

class bubble {

  // to create a floating bubble, I need to change the y speed and the size for a more bubble-like effect.

  constructor(x, y, ySpeed, size) {

    this.x = x

    this.y = y

    this.ySpeed = ySpeed

    this.size = size

  }

​

// the bubble class functions

  // this float function lets the bubble move upwards

  // If the bubble goes outside the canvas, it will loop back to the bottom of the canvas

  float() {

    this.y += this.ySpeed

    if (this.y < 0 || this.y > height) {

      this.y += height

    }

  }

​

  // create the circle shape

  show() {

    circle(this.x, this.y, this.size)

  }

}

​

function changeColour() {

  // if the mouse enter the area mention below (which is the first rectangle) it will change the colour into a puple theme

   if ((mouseX > 180) && (mouseX < 395) &&

  (mouseY > 70) && (mouseY < 140)) {

   bubbleColour = "#3B54FF"

   waveColour = "#434C99"

  } 

  // if the mouse enter the area mention below (which is the second rectangle) it will change the colour into a green theme

  else if ((mouseX > 180) && (mouseX < 395) &&

  (mouseY > 150) && (mouseY < 225)) {

   bubbleColour = "#06E8F0"

   waveColour = "#007377"

  } 

  // if the mouse doesn't enter both the area mentioned above, then it will stay on default colour theme, which is the blue theme

  else {

   bubbleColour = "#64E3FD"

   waveColour = "#026AB4"

  }

  // create a rectangle under the word `RMIT`

  fill('#9DA8F6')

  rect(180, 70, 215, 70, 20)

  // create a rectangle under the word `Creative Coding Specialisation`

  fill('#A4F5EC')

  rect(180, 150, 215, 75, 20)

}

​

function textContent() {

  // create an `RMIT` text

  fill (backgroundColour)

  textFont (aclonica)

  textSize (72)

  text (`RMIT`, width / 3, height / 2 - 30)

  // create a `Creative Coding Specialisation` text

  fill (waveColour)

  textFont (princessSofia)

  textSize (32)

  text (`Creative Coding`, width / 3, height / 2 + 15)

  text (`Specialisation`, width / 3 + 30, height / 2 + 50)

}