a link to my code: https://www.openprocessing.org/sketch/621410

My generative landscape project is about fishing near Brooklyn bridge. Cars move from left to right on the bright. Every time a car passes, another one will show up on the left side. Water waves are controlled by noise function. Fish are controlled by random function. I made classes for both fish and fishing net. Carousel light is also controlled by random function. And every fish missed will be laid out on the left side of the shore. Every fish caught will be turned into a money bag and laid out on the right side of the shore. If the number of fish missed reaches 10, game is over. If the number of fish caught reaches 10, the player wins the game! The result is printed.

(When I screenshot the gif, I need to make the dimension of the browser smaller. So the car is not exactly on the trail because it depends on the screen size. But if you open the code in browser with normal dimension, it should be landed on the trail:))

https://www.courses.tegabrain.com/cc18/randomness-in-art/

https://github.com/shiffman/LearningProcessing-p5.js/blob/master/chp10_algorithms/example_10_10_rain_catcher_game/catcher.js

My generative landscape was inspired by the “landscape” we see everyday as we scroll on our phones. Social media is a great way for ideas and news to spread, but it can also be manipulated to spread misinformation. With exposure to so much information, it can be hard to find truth in all of the noise, especially with headlines and click baits trying to generate a response from us. But if we don’t pause to actually read and/or check what scrolls down our screens, we would be losing out on everything that can’t be categorized as just black or white(or red, pink and blue in this case).

I used Facebook’s interface and reactions as part of my landscape. The post itself is drawn using code but the like/comment/share part of the post as well as the reactions and phone are imported images. The post’s color matches the most clicked reaction of the post, which could be either like, love or anger(blue, pink or red respectively). The shade of the color will become brighter and bolder as more posts scroll down, representing the escalation of emotions. with each post, the right side of the screen will also have that reaction pop up, visually counting how many of each reaction had been seen so far. Once the colors of the posts gets to maximum brightness, it starts over at white.

There could be some improvements to my current code. My original idea also included a variety of posts, such as “video” and picture posts, instead of having just word posts. The posts also would end up overlapping each other, since the code is running through the same list of posts, which has their y-position messed up as time passes. (But I think this adds to the chaos/overwhelming feeling of endless scrolling). I could also have the post’s reaction be less “random” and be based off of what previous reactions were(ex. a lot of angry reactions in a row, then transitioning into like before love). I also could have make the reactions on the right side of the phone animate or move in some way.

Link: https://www.openprocessing.org/sketch/621254

For my generative landscape I created a scrolling horizon of a military graveyard. As the screen scrolls two horizons lines moving at different speeds scroll past the screen. These horizon lines are shaped and shaded in accordance to noise. As the horizon lines move grave markers along them move with them. These grave markers are generated at random intervals with a random tilt. Between the grave markers are pale ghostly silhouettes of soldiers, generated at random intervals. As the scene scrolls by red flower petals fall in at random from the right, bouncing in accordance to noise and randomly varying in size and shape. The design of this project takes inspiration from John McCrae’s poem “In Flanders Field.”

“In Flanders Field”: https://www.poets.org/poetsorg/poem/flanders-fields

Link to code: https://www.openprocessing.org/sketch/619829

Evening Sky

link: https://www.openprocessing.org/sketch/622613

For this project, I generate a evening sky with pink cloud, sun, meteor and buildings. The cloud and sun moves randomly in the sky. The color of sky and windows changes over time. 

The main generative landscape is the cloud, and it was quite challenging to show it. So I chose to deal with the buildings and background first. When I look at photographs of evening sky, I noticed the color of sky tends to much lighter when close to the Sun. As a result, I decided to use for loop to draw lines on entire screen, and when y-position of lines gets bigger, which means lines are at the lower place of the screen, the transparency of line would be smaller, so that the color would be lighter. In draw(), I set the background as pink. Consequently, it looks like the sky change from blue to pink as a whole. To add a more variation to this landscape, I use random function to let the color of windows and sky changes. 

The technique about transparency in sky color inspired me. Maybe I can use similar technique to display the texture of  cloud. Basically, I use loops to draw triangles on the entire canvas, and then let each one have random transparency. Since noise function gives a much smoother sequence than random() does, I use 2D noise to control the opacity of color. I wrote the cloud function, and var A is my 2D noise variable. In order to add a 3D effect on the texture, I also applied var A, noise variable, into the satisfaction of color. As a result, when A is closer to 1, both the opacity and satisfaction of cloud is higher. 

In addition, I add a sun and a meteor in the sky to show more motions. Sun is moving based on noise variable, and the meteor is falling at same speed, starting at random X value. 

For my generative landscape, I’ve created a scenery of a night sky. It features a series of shooting stars passing through alongside the occasional constellation as the night progresses. I used classes to determine the functions behind the stars on screen, the shooting stars, and the constellations. I used a lot of images for many components of the landscape as well, with the moon, trees, silhouettes, and stars. The constellations passing by are the 12 zodiac constellations. In bringing the whole generative together with the images, I had to mess around with the scale command a lot. Scaling certain images led to shifting other graphics being displayed, so I had to make adjustments as I go. In making the constellations move, I used the raindrop movement code from the raindrop game as a backbone to how I constructed the code for this project. In making them move, I also had to make adjustments to the motion placement of each image so that their spacing could be ranged and more varied.

https://www.openprocessing.org/sketch/618502

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.

project code on open processing

(the mount() function is commented out for a smoother-running program)

references:

Triangle Strip

3D WEBGL