Final Work: p5.js Web Editor | NOC-W5 Assignment Waves (p5js.org)
In this assignment, I created a simulation of a river. It has circles inside it, which shows a sense of water running inside. By using GUI, the “sinAmp” can manipulate the width of the river; the “noiseFreqAdj” can control the speed of the river stretching and shrinking; the “riverDens” can control the density of the river by increasing/decreasing the amount of circles inside the river; and the “frameRate” controls the speed of the circles moving inside the river.
To create the effect, I simply used sine waves combing with noise waves to create the wavy effect of each stroke of waves. The dotted effect of the river is made by mistake as I was experimenting with how to offset the strokes and added a random value to the frequency of the sinValue. However, the visual outcome is quite good, so I kept it.
Initially, I wanted to create an animation of a static mountain at the upper half of the canvas, and a moving water on the lower half. However, it didn’t quite work out because 1). I used noise wave for the mountain, and it’s hard to make the mountain static because of the random value inside; 2). simultaneously, because both the mountain and the water used two for loops to make them moving as the way I wanted, the program was to heavy to make the two working smoothly. Thus, while experimenting with the mountains, I noticed how I could actually create a river-like effect through by changing some of the values inside the mountain thing.
(The failed code: p5.js Web Editor | NOC-W5 Assignment Waves-failed (p5js.org))