Project I. Generative Visuals

link to the sketch: https://editor.p5js.org/cy1503/sketches/PRjI6gwyW

If you wanna run it:  mousePressed-still; mouseReleased-move.

 

 

 

Brainstorm and the Concept

The first idea that came to me is actually an interface for iPhone since I found the interface for the iPhone could be applied with almost everything that we learned in class if coupled with some interactions. As I almost finished the sketch, our professor Steele told me it would be better to have the idea based on our case study. I determined to give up the 6-hour work and try to generate a new one.

Then the current idea in the sketch comes from my case study: the Echoes that mimics cities from different counties with 3D models and generative techniques. Why not draw one for Shanghai?

The concept here is to present Shanghai as a generative visualized art under my perception. I believe Shanghai is a modern city whose most famous label is its buildings along the Huangpu River. It’s also a magic city (to present which I used a purple background. Purple is related to magic stuff. ) that can be further developed in the future. So I imagine it floating in the sky and touching the stars, symbolizing its promising future.

 

Working Process

a.I searched images for Shanghai online and picked some that are adaptable in p5 (like those above). The aim is to create an effect of floating cities as the Echoes does. For the background, I like how the colors graduate so I modified some coding in class and presented my own version. 

(Here’s the coding in class that I referred to)

And the first step is to draw the buildings down. I mimicked the buildings in the images above and simplified them. The process of drawing was smooth, I think I’ve basically commanded the drawing skills in p5. 

b. The first problem I ran into is the clouds. I prefer clouds under the buildings so that they can be seen as floating. While I am not sure how to write the idea down in p5. And here’s the work from my roommate’s project that I referred to.

The effect of her tree is quite similar to that of my ideal cloud.  I studied her code and tried my own version out. The result is that I learned a new use of “for”, and I got the ideal effect of clouds. I also want the clouds to move slowly (since I used the “random”). I searched on google and saw frameRate which did help with slowing down the clouds.

c. Here comes my biggest obstacle that I still can’t figure it out until submission. I combined the clouds and buildings as a function “everyThing” and I’d like them to move in a circle, mimicking the effecting of floating in the sky. It took me a long time to figure out using the “translate” and “frameCount” to do this visual effect. However, as “everyThing” successfully move around, the clouds still go fast; While when I set the frameRate, clouds became slow, and “everyThing” starts to stand still. It really took me a whole afternoon and some evening hours to debug. I turned to classmates, fellows, and some juniors with several experimental suggestions provided, while I would encounter the same problem at last. (I tried map(), setting different times for frameCount, putting things in the setup(), etc.) I guess it’s because the frameCount is for the whole sketch and it has to be some other methods if I want to control the clouds with different frameRates. 

I’ll keep following up on this problem.

 

At the End

I am quite happy that this project can be what I want it to be, to a great extent. I’ve also added some functions of mousePressed() and mouseReleased() to be more interactive. I’ve seen some other students’ projects in cclab-gallery which are so great that I still need to get close to their steps. 

 

Reference

Google; reference for p5.