Claudia_GenerativeLandscape

Water

For this project, I made a generative landscape under water. I used WEBGL to make the canvas 3D, and used triangle strips to create a terrain. Then I used Perlin noise to create wave-like features to make my terrain look like water. I also have a fish class with a lot of fishes that swims in the ocean, a bubbles class that have bubbles coming up, 4 jelly fish, as well as 2 submarines. I used vectors to manipulate the positions of the fishes and bubbles, and I used random() to make them randomly distributed. The bubbles’ size also changes so they move more realistically. The water and the background changes color according to the current seconds. The mountains and submarines in the back shift to the right while the fishes swim to the right to make it seem like the canvas is moving.

During the process of coding, I encountered a lot of problems. A major one being the 3D terrain. After I made my water waves, I realized that I cannot load image the regular way. Instead, I have to “shatter” the image and put them in as vertexes. It was really hard to manipulate the images, and I couldn’t really find anything that fits my overall aesthetics, so I decided to not to use any. Instead, I coded everything, so that took me a really long time. Another problem I noticed was that the canvas size changes when it’s displayed on different screens. So instead of using windowWidth and windowHeight, I used fixed dimensions(1400 x 700).

If I had more time, I will probably populate the ocean with more creatures and plants. I would also make the jellyfish loop around and come back to the bottom. The reason why I didn’t figure it out is because I’m moving them using translate() as oppose to using a variable like what I did for the fishes, mountains, submarines and bubbles.