- Acknowledgment
- Finding references in the NOC example code by Prof. Moon.
- The structure was reorganized with the help of Prof. Moon.
- Some parts were coded by Prof. Moon. This can be seen in the comments in those parts!
- Working Process
- Inspiration
Lots of people cry in this school, this world every day. I love crying, and I cry a lot. I sometimes cry when I eat.
There is also much slang in my culture about tears and what we eat (rice/soup):
Thus, I was thinking about whether I could develop a coding story regarding the relationship between tears and soup since they are both salt water.
In the meantime, relating to my project proposal “vice versa,” I was wondering if I could create something showcasing that sometimes things can go this way. Yet, it can go that way, a totally different way if we twist our sight. And the whole world might also be twisted if we do so.
Sometimes we cry when we see that the things tangled in us are too important. Yet, looking back on those things later, we might just think we were funny by then. We may even talk about it as a joke when telling others about that thing while eating. Or, even, we may cherish them as an indispensable delicacy in life.
-
- Main Concept
With the inspirations above, the main concept I want to showcase is that:
Tears you drop, “seaweeds” that trapped you can altogether become a bowl of soup someday.
-
- Sketches
With my concept, I drew 4 sketches to connect my story and developed my coding plan:
Sketch 1: Someone is crying.
Sketch 1-2: dragging to see why
Sketch 2: Eye-shaped boat inside the sea (indeed the projection of oneself – shadow inside the water)
Sketch 2-3: Twist this world by twisting the light
Sketch 3: Upside-down eye (then it becomes two boats now) constantly bounces each other. Mimic working in progress.
Sketch 4: A bowl of soup – telling people it’s nothing but just a soup😇!
-
- Coding and creating processes by timeline
- 1st Meeting with Moon
- Coding and creating processes by timeline
In our first meeting, Prof. Moon and I mainly focused on discussing the plot and the effect I wanted to achieve in the fourth scene, which involves something constantly rotating in a circular form in the soup. He sent me an example code that same night, but at that time, I was caught up with other code I was developing. Between our first and second discussions, I did the following:
-
- Created eyes in scene 1, where the opening and closing of the eyes can be adjusted by clicking the mouse, and tears flow when the eyes are closed to a certain extent.
- Added waves and light on the sea surface when tears flow.
- Implemented a “drag light” feature to transition to scene 2.
- Drew a stationary boat in scene 2.
- Created seaweed that moves when dragged in scene 2.
- Added rotation in scene 2 to transition to the light in scene 3 and make the screen turn white during rotation.
- Made the two eyes in scene 3 collide with each other.
After doing these, I encountered a bunch of problems.
-
- Problem 1 was that the relationship between the light and the water surface was strange, especially when these two elements appeared simultaneously in scene 1 and scene 2 without a smooth transition. So, I came up with two solutions: 1) Make the sea surface rise and fall not randomly but in response to the falling tears; 2) Gradually raise scene 2 after dragging from scene 1 to make the transition more natural.
- Problem 2 was that I didn’t know how to generate multiple seaweed. I consulted Lisa, and she suggested using nested arrays and advised me to seek Moon’s guidance.
- Problem 3 was that in scene 3, the boat is the inverse image of the eyes in scene 1, and they are on the same horizontal plane. Using the attract and repel function made them rigidly move and collide on the same plane. So, armed with these problems, I went to the second meeting with Prof. Moon.
- 2nd Meeting with Moon
I talked to Prof. Moon about the issues I encountered. Prof. Moon first helped me adjust the overall structure of my coding to make it clearer. He helped me add scenes in the “draw” function, so each scene would have its own “function draw.” This avoided the confusion of using true and false to switch pages, as well as the problem of code cluttered inside “draw” making it hard to find things.
Next, Moon suggested a method using “repel” to create horizontal surface fluctuations where raindrops fall, and he gave me an example code (though I didn’t end up using it because I found an alternative solution to my problem 1). Then Moon showed me how to add the “translate” and “frameCount” functions to make scene 2 move up on the canvas when activated. Following that, Moon explained and demonstrated how to nest arrays and make the seaweed move separately (using x offset and y offset) with mouse drag. He also helped me rename some classes for clarity and coherence. Finally, for the problem of the two boats constantly colliding on the same line, Moon suggested adding a random variable to the initial y-coordinate of the boats to achieve the effect I wanted.
Armed with this knowledge, I went back to try things out. First, I followed Moon’s steps to complete the seaweed, and now I have 8 seaweed that can interact with the mouse. Then, I reconsidered the logical relationship between scene 1 and scene 2. If the horizontal surface is the boundary between scene 1 and 2, then the light visible in scene 1 should be a segment on the sea surface, and all the light visible in scene 2 should be below the sea surface. So, I adjusted the position of the light and where the spring should be pulled to trigger the scene change. With their positional relationship clarified, I tried the “translate” and “frameCount” functions to achieve the gradual rise of scene 2 effect.
Regarding the two boats, I added a bit of variability to their initial positions, and they indeed started colliding everywhere! When they collide, their thickness and size increase at different rates. The boats gradually turn yellow, transitioning into eggs. Sometimes, the background color turns red upon collision. Apart from this, I also used the example code Moon gave me after the first meeting about forces with angle for scene 4, creating a soup (except for the final version’s bubbles). I noticed that both seaweed and eggs eventually settle in one position, which is okay. However, I wanted the oil on the soup (water bubble) to rotate in an elliptical trajectory. So, with this problem in mind, I went to my third meeting with Prof. Moon.
-
-
- 3rd Meeting with Moon
-
Prof. Moon suggested that I could achieve this by adding two “translate” functions and one “scale” function. Additionally, by using map(sin(frameCount), -1, 1, 80, 90), I could ensure that the angle remains relatively large and varies slightly, preventing it from settling in the center and causing it to rotate in an elliptical trajectory continuously. Furthermore, Prof. Moon also suggested adding some text to give the audience a hint and make the story more poetic and coherent.
With these suggestions in mind, I made some modifications the night before the presentation and wrote a poem overnight, adding it to my code. (Oh, and by the way, I learned how to add fonts in p5.js as a result of this!)
-
- After Presentation
I appreciate all my peers’ encouragement after my presentation. And I also appreciate Prof. Moon’s suggestion of modifying the size and transparency of the characters to make it more visually appealing and readable, but I haven’t tried it yet. Additionally, after the presentation, I saw many excellent works from other classmates. I also showed my assignment to my friends. Based on my observations, I feel that the biggest issues with my work are:
-
-
- It’s too lengthy.
- The story cannot be understood without characters.
- I haven’t fully utilized the advantages of p5.js for generative art.
- As one of my friends suggests, it’s more like a “communications lab” assignment trying to convey concepts rather than a coding class assignment.
-
In the future, I plan to first revisit the example code that Prof. Moon has provided but I haven’t used yet. I want to focus more on the essence and advantages of code and generative art, creating stories. Yes, I don’t think I’ll give up on storytelling because Luna loves to observe this world, think and tell stories! 👀
- Finished Work
- About the poem
- Written in Chinglish, since it rhymes and makes sense in this way, shows me and my personality in this way.
- About the poem
-
- Highlights: Similarities in outer shapes and changes in nature
-
-
- The perception of “myself”
-
-
-
-
- The perception of difficulties
-
-
-
-
-
- The perception of salty water
-
-
-
-
-
- The perception of something we seize with our hands
-
-
-
- Video
- Reflections & Lessons Learned
-
- “Nature of code” is more important than anything else. Understanding nature is the key to anything.
- I should do an open project instead of a nearly-close one. Yet, my imagination will never close!!🧚♀️
- The structure of the code is quite important (I couldn’t even find where the specific line of code is when Prof.Moon was asking me when the structure hadn’t been reorganized).
- The font and the size of the characters are also crucial in extending messages to the audience since they have fresh eyes. They just viewed it for the very first time.
- What troubles, troubles, or is going to trouble me is nothing but just a bowl of soup! Though my coding is quite shit at this stage, but, it’s not so much of a that bigggg deal. It’s not the end, but just the beginning of a journey😎!
-
Leave a Reply