Part 1 (“for a public readers”):
Hello, my name is Hongxi Zheng, and this interactive drawing is for my second/final project for CCLAB class. For this project, I decided to create the look of a city’s skyline, a similar look to what it is like on the minimal poster, like the ones you see below, on the P5 canvas.
The look of the night city always fascinates me. The looming night atmosphere corresponds with the city lights just makes me feel very intrigued. Although it is very clear that I wasn’t capable to recreate an image that could count as the same level of artwork as these two, my work isn’t at all awful.
The drawing contains a clocktower that could read the time it is on the device and shows it as it is for whoever is currently viewing the drawing. As the viewer is moving the mouse upward and downward, he could change the time of the drawing from day to night. During the day, the sky would be cloudy, and for the night, it would be starry.
Part 2 (“for yourself (and your instructor)”):
Well, at first, I wasn’t really sure how to start off with this project. There are many stuff, many ideas that came across my head, and unluckily, I am not the type of person that could of decide a way to go on my own with haste speed. On deciding the idea, professor Moon gives me the suggestion of the skyline, and it went right through my mind, a great idea it is.
Then it is how this project is worked. I first create out the baseline, basically separate the regions that should be considered as the city and the sky. Then it comes down to the buildings. It didn’t took much effort for me to adjust the find the right position to alien the different shapes that are of rectangles and triangles, in the end it results with a clocktower, well, without the clock it is.
Then I encounter the first problem, and that is how to create something that has the same function of a clock? I tried for a long time, using for, while, if,different functions, but in the end, I realized my creativity isn’t enough for me to think of a way to accomplish this. Luckily, on P5 java reference site, I have found an example of a clock, thus this problem has been solved.
Then it comes to the sky. I want the sky to look differently according to the positioning of my mouse cursor. This isn’t difficult after I have found the right RGB color and utilized the map function. In the end, I have complete this part. Also, I have stored the value I get out from the map function and stroed it for another purpose, because it is strange for a bulding without light to look as bright as it is in the midnight than in the day time, well, that is what happened to me.
The stars didn’t happened to be much of a challenge, as it shares almost the same code that I have used from Project A, but for the day time, the cloud took me a little bit of effort. I did create out the cloud, but I encouted two problems: first is that, the cloud appears regardless of the time/mouse cursor position, which means, even in the night time, the bright cloud would still appear, and second, the cloud’s appearence would caused my p5 coding page to crash.
At this moment of my project, professor Moon helped me to solved these problems, also did quite a lot of improvements on my coding, fixing problems here and there to make the drawing better, such as the sun would become smaller as the mouse moves down, or fixing the problem of the building’s stroke line appeared during the night.
In the end, the project results in what it is now.
Github display page: https://zhengh9217.github.io/CCLAB/Project%202/
P5 Java coding page: https://editor.p5js.org/hz2504/sketches/hHnGwhqYH
For future development, I would say that this drawing difinatelly has a lot of room for improvement. I think many critics/suggestions that I have heard is definally correct, such as the skyline looks really simple because it contains only one building, the clock that shows the time is not displaying the time matching to the time in canvas but to the device time of whoever is viewing this project, etc. These are really great suggestions for future development.