Initial Idea

In the beginning, I wanted to create an underwater theme for my design. The reason for this is because i was inspired by the Noise Wave example. Going from there, I wanted to match the underwater theme and add bubbles to float around on the canvas. This idea came up after I learn about the bouncing square in creative coding class.


Documentation

In general, there are three (3) main design choices for my assignment 1 design. I have done some research and experiment on each one of the topic related on each section. Check out the details on the link down bellow:

  1. Noise Wave Background
  2. Bubbles Class
  3. Change Colour

When combining all three of them, I had to create four custom function. I did this because i want to catagorized each sections and have a neat code.

  noiseWave()
  addBubbles()
  changeColour() 
  textContent()

Iside from that, I created a variable for colours. This will make it easier for me later on when I edit the colour changing function.

  var backgroundColour = "#000054"
  var waveColour = "waveColour"
  var bubbleColour = "bubbleColour"

Iteration of Initial Ideas

After learning more about each topic, I was able to tweak my original code and create a design with a sci-fi theme. Compare to the first design, here are some things that I changed:

  • The fonts of the text
  • The Bubble (changed the shape, the size, the speed, the movement direction)
  • The noiseWave() (increase the fluidity and speed and added 2 more vertex)
  • The changeColour() (changed the colours into a brighter and vivid colours)