Assignment 3: Ocean – Farah Shaer

Here is my final sketch:

Concept:

For this assignment, I wanted to create an ocean-inspired sketch. It has clouds in the sky, moving waves, a floating boat, and birds flying across the sky. My goal was to make all of the animations smooth and calm rather than random.

Code Highlight:

class Waves {
  constructor(y, noiseLevel, noiseScale) {
    this.y = y; // the vertical position of the wave
    this.noiseLevel = noiseLevel; //for the height of the waves
    this.noiseScale = noiseScale; // for the smoothness of the waves
    this.t = 0; //the time for the animation (the move part)
  }

  move() {
    this.t += 1; //to update the wave over time (slightly)
  }

  display() {
    stroke("rgba(63,63,198,0.45)"); //color of the wave (a bit transparant)
    strokeWeight(4); //thickness of the wave

    for (
      let x = 0;
      x < width;
      x += 1 // so it can be looped from left to right across the canvas
    ) {
      let nx = this.noiseScale * x; // to scale the x position for the perlin noise, making the x values have a similar height
      let nt = this.noiseScale * this.t; //to scale the time variable for a smooth transiton because as the time increases the wave slowly changes its shape

      let waveHeight = this.noiseLevel * noise(nx, nt); // uses the perlin noise to calc the height of the wave and return it to a value between 0 and 1

      line(x, this.y, x, this.y - waveHeight); // draws a vertical line for the wave
    }
  }
}

 

I’m particularly proud of the wave animation. This was my first time working with Perlin noise. I followed the p5 noise reference and watched the coding train video to understand how Perlin noise creates smooth and natural movements. I think using noise instead of random values made the water feel more realistic and continuous.

Reflection/future work:

I built the sketch using object-oriented programming with separate classes for the waves, boat, clouds, and birds. I also used arrays to animate multiple objects at once. At the beginning, I started with the clouds, and I tried using the random function to place them, but it looked too messy and chaotic, so I decided to just space them out evenly with a little variation to make it look natural. That way, the clouds felt more organized and intentional. 

Originally, I planned to animate a person with a surfboard moving back and forth, but I decided a floating sailboat would fit the scene better. So I added a boat that floats gently up and down with the waves. I used sin for the floating motion and push and pop with translate to make it easy to move the boat without changing its shape (this is a game-changer). 

Then I felt as if the sketch was too empty, so I added birds that fly from left to right. Their y position changes a little, so they do not move in a straight line. The bird shapes were inspired by another P5 sketch I found online, but I changed the movement and made them fit my sketch.

I think the hardest part was positioning things so everything looked intentional and nice together. The clouds and boat were tricky at first. I also spent a lot of time figuring out how to use push and translate to make the boat move without messing up the coordinates. Once I got it down, it was actually really simple using objects and classes. Also, I felt like the object oriented programing was really useful, since it made it easier for me to create multiple objects without constantly repeating code. For my future work, I do want to lean more towards interactive elements, but I used this assignment to really focus on understanding OOP.

Here are the tutorials I watched and the reference/examples  I found inspiration for the sailboat and birds from other P5 sketches. I liked the shapes, so I used them as a starting point and modified the code to fit my scene by changing the motion, colors, and integrating them into my own object-oriented program:

https://editor.p5js.org/cs105/sketches/iCmF693Ps 

https://editor.p5js.org/zielinsj/sketches/NAzOThoLl#:~:text=Sketch%20Files,37 

https://www.youtube.com/watch?v=Qf4dIN99e2w 

https://www.youtube.com/watch?v=YcdldZ1E9gU 

https://p5js.org/reference/p5/noise/#:~:text=noise()%20is%20used%20to,x%2C%20y%2C%20t)%20.