I have thalassophobia, the fear of giant bodies of water. So, if ever asked to choose between mountains and the sea (like on those personality quizzes), I will, without a doubt, choose the mountains. However, like most people, I love nature. Having grown up in a small village I am no stranger to its wonders and in my 20 years of being on the Earth, I have grown my appreciation for even the smallest drops of dew condensed on an unripened plum. So, for this assignment, I choose to focus on both mountains and the sea in order to explore loops and conditionals in p5js:
The Sea
Challenges
To start off, I didn’t animate the sea. Rather, I just created a stationary sine curve. Then, sine curves. I didn’t quite understand how to make them move, so I watched this video by Professor Daniel Shiffman and implemented his motion technique to my sine curves. To make them move in the opposite directions, I first started with graphing them out of phase, which did not work because they would move in the same direction. By using the modulus function, I was able to move adjacent rows in opposite directions, which gave the animation an interesting effect. A big obstacle was also the background. Since fill() and stroke() can go beyond the scope of the function they are in, it took some time to re-read the code in order to remove stroke() and strokeWeight() from elements they were not supposed to be on. Lastly, since I used curveVertex() for the sine waves, I was unable to fill the sea properly. So, to get around that, I increased the stroke and used scale() to make the waves slightly bigger without seeing the background underneath.
Reflection
The sunset, although it does not look completely realistic, is still very beautiful. By looking up the hexadecimal values for the sunset colours I was able to create ellipses which imitate the sky around a setting sun. I placed a rectangle above the canvas with a varying alpha (transparency) which made the sunset more realistic:
// Sunset color over the sea noStroke() fill(4, 97.7, 65.9, map(mouseY, height, 0, 0.1, 0.4)) translate(100,100) rect(width/2, height/2, 800, 1000)
Although I tried making a gradient, it did not look good, so I stuck with the simplified version. In the future, I wish to understand how to make gradients without the help of external libraries and make the motion of the waves both horizontal and vertical compared to the currently only horizontal ones.
The Mountains
Challenge
To start off, understanding how to graph noise() was very challenging. To understand noise(), I once again watched Professor Daniel Shiffman and his series on noise(). They were extremely helpful in understanding how to graph noise without having all the curves look the same. Although I understood how to store the points on the canvas and how to graph them, the amplitude of the waves (y offset) was not working properly. Fortunately, I realized that I was not the only one interested creating noise() curves and I solved my issue by contrasting my code with the example on this page. After graphing my mountains, I realized that they would not fill completely. After some time, I realized I could use rectangles underneath the curves in order to make them completely filled. Lastly, working with RGB is the easiest when dealing with a single shade of blue. By reading about different color modes in p5js, I was able to figure out how to gradually increase the brightness of my blue through the use of colorMode(HSB).
Reflection
In class, we made “buttons” by constraining the mousePressed function on an ellipse or rectangle. For this assignment, I wished to create the option to, in a way, shuffle the mountains and the stars in order to get new pieces of art, if they can be called that. I created a button (“Generate new”) which can be pressed to do just that:
let button = createButton("Generate New");
button.position(0, h - 20);
button.mousePressed(loop);
button.mouseReleased(noLoop);
The button loops draw() when pressed and stops after being released which showcases the noise() function a lot better and its weight on standard distribution, i.e., distribution around the center. In the future, I wish to combine the two artworks and create a bay or lagoon that encompasses both the concept of noise() and water motion inspired by sine curves.