Assignment 2 – Lava Lamp

Concept:
After learning in class about how the Perlin noise effect simulates more natural movement, I experimented with it using circles instead of lines. The way the circles moved reminded me of bubbles in a lava lamp, which is quite a nostalgic object from my childhood. I never actually owned one, but I would often be mesmerized by them whenever I saw them in classrooms or stores. To recreate the feel of a lava lamp with different size bubbles, I set 4 offset values and made them control different aspects of the circles. For example, for the first circle circle(n, n, 0.4 * n), the x-coordinate, y-coordinate, and diameter are all changing at the same time, while for the second circle circle(v - 10, 400, 0.4 * v) the y-coordinate is fixed. I did this so that the bubbles would have their own “territory” on the screen and not overlap that much.

offset = offset + 0.003;
  let n = noise(offset) * width;
  circle(n, n, 0.4 * n);

  offset2 = offset2 + 0.003;
  let v = noise(offset2) * 200;
  circle(v - 10, 400, 0.4 * v);

  offset3 = offset3 + 0.003;
  let k = noise(offset3) * width;
  circle(400, k, 0.2 * k);

  offset4 = offset4 + 0.003;
  let u = noise(offset4) * width;
  circle(40, u, 0.3 * k);

Highlight:
A part of the code I had many difficulties with was the forloop. My aim was to make the background color change slowly by altering the “g” value in my background function using a forloop. However, my p5.js kept crashing whenever I did anything, which was quite frustrating. I eventually found out that it was doing so because I had made an endless loop with g+1. Since  the value of g +1  is never reassigned to g, g stays at 0 forever. Therefore, g is always less than or equal to 255, so the forloop will run forever, causing p5 to crash.

function draw() {
  for loop does not work, why?
  for (let g = 50; g <= 255; g + 1) {
    background(255, g, 50);
  }

After I fixed this problem, the forloop was still not causing the background color to change, and I am still unsure of the reason why. I asked a NYU Shanghai IMA major for help, and she explained that I do not need a forloop to accomplish my aim, I could simply initialize a global variable g and then tell g to increase by 1 in the draw function.

let g = 50

function draw() {
  background(255, g, 200)
  g = g + 1
  
  drawBubbles();
}

This created the below effect:

However, this project still lacked the use of a forloop, so my friend proposed that I could make a gradient by drawing vertical lines of varying colors from left to right. She showed me the code, but I did not want to simply copy and paste it without knowing how it worked, so I really tried to break down each part I did not understand. Writing it out on paper helped with that:

So, the final forloop code creating the changing background gradient was as follows:

let r = 50; // red
let b = 200; // blue

function draw() {
  //increase x by 1 every time the for loop runs
  for (let x = 0; x <= width; x = x + 1) {
    noFill();
    strokeWeight(1);
    let g = 200 - x / 2; // vary the "g" value according on the "x" value
    stroke(r, g, b);
    line(x, 0, x, height); //draw line from (x, 0) to (x, height) from left to right to create gradient
  }

  r = r + 1; // gradually increase r value by 1
  b = b + 1; // gradually increase r value by 1 

Embedded sketch:

Reflection and ideas for future work or improvements:
I’d like to figure out how to make the gradient change back the other way, so the background will keep changing forever once you run the program.

As a self reflection, I have never been very quick at understanding mathematical logic, so I always feel extremely lost when it comes to coding. Some functions of code seem like they should be simple, but I always need to walk through each step slowly in my head (or even better, on paper) to understand how it works. However, this may not be a bad thing, it just means I need more time for the information to marinate.

Resources:
Many thanks to the IM Discord and Pacey Wang for their help!