NOC | PROJECT B: Windows of Four Seasons 四季之窗

Acknowledgment
- Finding references in the NOC example code by Prof. Moon.
- Patterns of windows are inspired and designed based on the windows of the four seasons in the Suzhou Canglang Garden.

Working Process
- Inspiration

When I was working on the assignment about recursive patterns, I initially planned to create something inspired by the windows in Suzhou Gardens because I could see the mathematical elements in those designs. However, I didn’t pursue that idea for the assignment because I misunderstood its requirements (I thought we were supposed to create something natural, but windows aren’t natural 😅). So, when I started thinking about our assignment in a broader context, the idea of creating physical windows and showing how the patterns on them evolved from plants or natural objects to human-made windows came back to me.

Previous calculations I did and thoughts on how to do window patterns with recursive patterns

I’m a fablab assistant (which is why you often see me in the studio, Professor👀). I can do laser cutting and create patterns using Adobe Illustrator, thanks to my professors in Comlab (Prof. Inmi) and Interlab (Prof. Andy). So, I can handle the physical window part with laser cutting. Initially, I planned to make a wooden book of windows. People could interact with the physical windows to see how those patterns develop on screen. However, the idea was still vague at that point, and I wasn’t sure if it qualified as “beyond screen” and how I could utilize the interaction. That’s when I had my first meeting with Prof. Moon.

- First Meeting with Prof. Moon

Prof. Moon introduced me to several ways to incorporate interaction during our first meeting and demonstrated machine learning techniques during our second meeting the following day.

Additionally, he suggested that instead of laying the book flat on the table, it might be more engaging to stand it up and play with shadows and lighting effects using physical windows in conjunction with scenes generated on screen. (Thank goodness for this suggestion—it’s crucial for my project🪄.)

With this idea in mind, I continued to contemplate the types of patterns I should create and which windows from the stunning Suzhou Gardens would be best suited for showcasing based on the lighting and shadow concept.

- The choice of patterns and window types

After extensive research, I’ve become increasingly anxious. The reason being, I’ve discovered that there are just too many gardens in Suzhou, and an overwhelming variety of window types as well. Initially, I found some references for the recursive pattern assignment that I really liked, and I even brainstormed how to implement them in p5.js. However, they lacked a specific theme, and I couldn’t think of a good way to combine them with light and shadow. My goal at the time was to, within a limited timeframe, create a themed and coherent project that would highlight the necessity of light and shadow, and contrast natural plants with windows created by humans inspired by those plants.

I first learned that there are two common types of windows in Suzhou gardens. One type is “open windows,” where the window is empty, allowing visitors to enjoy the panoramic view better. These windows come in basic geometric shapes as well as shapes inspired by plants. The other type is “leaking windows,” where there are hollowed-out shapes within the window, including plant motifs, sun motifs, and objects used by literati and scholars. These windows give visitors a feeling of partial concealment and natural landscape harmony. I thought that creating sets composed of open and leaking windows and projecting different scenes through them would be quite interesting. So, following this direction, I continued to explore which patterns to include to have a specific and cohesive theme.

The vague idea of how to present open and leaking windows in a set in the proposal presentation day

I can’t recall exactly when, but after a lengthy search online, I stumbled upon the Four Seasons Windows of Suzhou’s Canglang Pavilion. These windows are all ‘leaking windows’ (with hollowed-out patterns), and each of the four windows corresponds to a season: spring: blooming crabapple flowers; summer: flourishing lotus flowers; autumn: ripe pomegranates; winter (early spring): peach blossoms bearing fruit. Inspired by these four windows, I decided to develop four sets consisting of both leaking and open windows.

Then, I replicated these windows in Adobe Illustrator and created their “open windows” versions.

- Finalize my coding plan

I originally intended to use mathematical calculations and other methods to depict the evolution of patterns from natural plants to artificial windows on the open side of the window. Prof. Moon introduced me to several methods, but I found them to be quite challenging, and I doubted my ability to complete them within a week. It was at this point that Moon proposed a new approach: showcasing the natural forms of plants from the leaking side on the open side of the window. He also provided me with a starting direction: attempting to blend spring with recursive patterns so that the branches of plants could undergo dynamic movement. Consequently, my coding plan took shape: creating various plants that change with external forces based on recursive functions and spring. I also incorporated autonomous agents of animals and plants to interact. Additionally, I used functions we had learned, such as forces, to make the scene more realistic.

- Coding exploration
  - Early Exploration on Scene 1

First, I explored Professor Moon’s example code on recursive patterns and spring, successfully integrating them to begin creating the pomegranate tree with CurveVertex and added the wind force based on the frameCount to the tree. I crafted the shapes of pomegranate fruits and leaves, using the lerp function to position them differently. Next, I incorporated code for autonomous agents to create geese that would dodge the tree trunk and flap their wings, appearing larger up close and smaller from afar (symbolizing animals flying in the clear autumn sky). Then, I added a color-changing circle to simulate the transition between day and night (as in Chinese culture during autumn, there are descriptions of the bright sun and the full moon night of the Mid-Autumn Festival).

At this point, I had most of the elements I wanted to include. However, I realized my coding skills were quite poor 😅😅😅 because I struggled with implementing some straightforward functionalities. Below is the issue I encountered while designing the autumn pomegranate tree scene, seeking Moon’s help, and improving my code’s documentation based on his instructions.

5/1 Meeting

The angle of the branches is kind of strange //make variations based on gens

The first branch is missing + is to be fixed//have something to do with the stiffness, I fixed (?) it by myself (originally the stiffness and the len of the branches doesn’t match each other. The stiffness constrained the initial length of the branch)
Have some leaves +fruits between joints//gen+random

Have thickness changes even within the same curveVertex(branch) //Prof. Moon provided me with several plans with curve and curveVertex – But after several attempts, I think I didn’t follow them. Instead, I just divided one branch into 3 pieces with 3 sets of curveVertex and made small variations between them

5/2 Meeting

Fruit and Leaves to overlap with each other//remaining unsolved, since I feel fine to have no overlap (fine, because I’m lazy)
Style is too cartoon//making color variations based on gens and random

Autonomous agent is kind of strange, don’t follow the mouse// Oh yes because I translate them with (this.pos.x, this.pos.y) and still set their pos to be (this.pos.x, this.pos.y) so the position is not right and don’t follow the mouse.😅😅😅
Let the patterns of branches be more stable// don’t set random too early (in the first several gens)
Let every leaves have different orientations//set rotate(random(2*PI)) after the translate point

- - Start doing Scene 2, 3, 4 and refine scenes

After solving the problems in the previous meetings, I didn’t work for the entire 3 days since I went to watch a concert in another city. 👀😬

When I got back to Shanghai on 5.5, I had another meeting with Professor Moon.

5/5 Meeting

Everything looks too simple right now. Are there any other elements to add?// Moon’s Suggestion 1:
- Make the colors have more variations – have some contrast between different elements (Yes, I think I successfully did this.)
- Set imagination element (😅. No, I didn’t really set the imaginary elements since my brain cells died in finals)
- Add some small knots on branches (Oh, yes I did!)

- Interaction with the fruit (No, I didn’t made this.)

Moon’s Suggestion 2: Finish projector setting and laser cutting +code before Thursday and be mindful of the frame size and length-width ratio – Yes, I set the ratio to 16*9 and laser cut my stuffs for the whole afternoon on both sides of the wood and connect them with loose-leaf binder

Moon’s Suggestion 3: GUI is not necessary but can be added to change the properties of autonomous agents//I didn’t utilize GUI in the end

And the following part is how I construct and refine each scenes for each season (based on the time order I construct them):

Autumn – Pomegranate tree

Firstly, I added some rays to the sun/moon. Then, I mapped the rate of color change for the scenery (several objects) and the sky (background), achieving the transition between day and night. As a result, the autumn scene is now mostly complete.

Then, I duplicated this sketch three times to create other scenes.

Spring – Malus spectabilis

Then, I created the cherry blossom scene for spring. Firstly, I changed the orientation of the trees. Instead of having only one tree, I created two trees of different sizes. Next, I adjusted the thickness, color, and stiffness of the branches because I felt that cherry blossom branches are darker and thinner. Then, I created the cherry blossom patterns and adjusted the appearance and color of the leaves because cherry blossom leaves are more slender. I still used frameCount to set the background color change because there’s a Chinese saying, “At three in the morning, I see the cherry blossoms not asleep.” Haha, I happened to be working on this scene at three in the morning, and I saw the sky change from deep black to a hazy gray-blue, a slow transition that captured the feeling of early morning.

Inspired by a popular song from a recent historical drama in China that goes, “Last night, the rain was sparse and the wind abrupt, a deep sleep yet the remaining wine not cleared. I asked the person behind the curtain, and they said the Malus blossoms are still here.” I added elements of “rain,” adapted from my assignment 3, but this time, I made the rain’s direction change automatically in a loop based on frameCount.

Additionally, I changed the animals from the autonomous agent to butterflies, unlike the autumn geese which didn’t change direction with the mouse position, the butterflies flip left and right based on the mouse position. So, I added this function to the scene. With that, my spring scene is nearly complete.

Winter (Early Spring) – Peach blossom

For the winter (early spring) peach scene, while researching reference photos, I discovered that peach branches often droop due to the weight of the peaches. So, I once again adjusted the positions and angles of the branches to make the peach branches hang down from above. Besides creating the shapes of peaches and adapting the shapes of branches and leaves to resemble peach trees more closely, I also created additional branches to form a curtain-like row.

I then removed the autonomous agent and explored what kind of shapes could be formed solely using recursive patterns in this scene. When thinking of peaches, I recalled the story from “Journey to the West” where Sun Wukong steals the peaches of the Queen Mother of the West, which reminded me of artificial mountains and waterfalls. I had learned traditional Chinese painting when I was younger (even though I’m not very good at it and haven’t practiced for a while), but I remember thinking that the brushstrokes for painting tree branches and rocks or mountains were quite similar, just with different directions. So I thought, could I replace the branches I already have with rock-like artificial mountains with intricate twists and turns?

While you might not recognize them as artificial mountains, that’s indeed what I aimed to create.

Building on this idea, I made some modifications to the class Rain from the spring scene, creating a waterfall between the artificial mountains and the peach tree. With that, I’ve almost completed the creation of the early spring peach scene.

Summer – Lotus

For the summer lotus scene, I once again incorporated autonomous agent dragonflies. Then, I transformed one group of branches into lotus stems and the other group into the reflection of lotus stems in the river. They share common start points and joints, but have different angles, thicknesses, and colors. I also added elements of changing sky color, reflecting the feeling of a summer evening by the lotus pond. Sometimes the sun shines intensely, casting golden light on the water, and at other times, clouds pass by, casting a bluish tint.

Additionally, I selected some start points to connect them with points related to Spring, creating a flowing effect where the water in the lotus pond flows along with the movement of the lotus stems, which was a feature I initially wanted to use in my project A but didn’t at the time, so I’m glad to use it now!

Furthermore, I added some lotus leaves that attract and repel each other (modified from code from the imaginary environment assignment), with a shimmering effect around them intentionally set to be non-flickering.

I also included some waves created using the sine function to add a dreamy effect (modified from the sine cosine assignment). Regarding the appearance of the lotus flowers, I divided them into open flowers and closed flowers. Each lotus stem has closed flowers (to avoid looking bare), and the closed flowers look like flower cores on stems with open flowers. This essentially completes my summer lotus pond scene.

After completing these scenes, I attempted to project them, and I must say, the projector and laser cutting really saved my assignment. (I’ll keep the suspense for now and won’t reveal them just yet, haha.) Finally, I met with Prof. Moon again. He suggested that I scale down the scenes a bit because the distance between us and the scenery seen through windows is usually somewhat distant. Additionally, he advised me to turn each scene’s laser-cut insert base into a fixed base.

While adjusting the projector position, we discovered that occasional lateral movement of the entire image was quite intriguing. So, Prof. Moon provided me with example code for moving the canvas as a whole and also how to make the canvas full screen with just one click. Consequently, I scaled down the scenes overall, created fixed bases using my laser-cut pieces, and incorporated the example codes for full-screen mode and canvas movement into my code.

I really like the fixed base I made

Finished Work:

I realized I had hardly taken any videos, so I converted my live photos into videos.

I also didn’t capture any photos of people visiting my project at Ima Show. Unfortunately, I was caught up with interactive fashion that day, and my computer and projector kept running out of battery alternately. I’m not even sure how long my project was available for viewing. TT

These photos include some I took myself after the Ima Show ended and some that Jean helped me take. I’m very grateful to her.

I feel, just like Prof. Inmi said on our presentation day, that I also have a fondness for the different projections on the wall and windows that create a sense of space and distance. When I look at my code, I find it quite ugly, but I console myself by thinking that the layout in my code is designed to look good when combined with the shadows from the windows.

Reflections:

This is my last blog post for the “Nature of Code” course.

I feel quite sad while working on my project because I’ve realized that I’m still not very good at coding; there are many loopholes in my work. I believe I put in a lot of effort into each assignment, but my code still ends up messy.

However, I know that if I had not taken this course, I might have forever avoided and feared coding, which is a necessary skill in the IMA major. This course at least got me started with coding.

I don’t regret struggling to choose it, and I also don’t regret not withdrawing from it in the first week due to too much peer pressure. I always felt like I couldn’t create aesthetically pleasing images through coding. Even while doing some assignments, I felt that what I produced didn’t resemble the abstract and beautiful generative art that coding is known for. I joked with my friends that it seems like I always go against the assignment requirements. Initially, I was dissatisfied with the artistic style of my work because I thought it looked cartoonish and childish. However, I’ve come to accept it. Perhaps this is the best I can do at this stage, or maybe, as Ting said, I should embrace this “Luna style.”

Looking back on this semester, I have created some beautiful works that I am proud of and have had thoughts like “Hey, I’m pretty clever” about. My code may not be elegant; it’s long and messy, but it’s what I can do for now, and I must accept it and continue to improve.

When I look back at my final project, the level of richness in the functions used is something I couldn’t have imagined a semester ago (oh, that’s a cliché, considering I had no idea what p5.js was a semester ago). The final code clearly shows shadows of many other assignments, which initially frustrated me. But now, I think, why be frustrated? It’s because of the effort I put in and the work I’ve done throughout the semester that I could manage during the final crunch.

I really enjoyed this course because I have a group of talented classmates. I always sneak a peek at what others are doing for assignments, check out their blogs to see how they achieved certain beautiful features (sorry, bros, I’ve been secretly stalking your blogs, although sometimes the functions they use are too complex for me to understand). Many people have helped me with some assignments this semester. I also appreciate our warm-hearted teacher, who’s in the same time zone as me. Even though, teacher, you should still take care and avoid staying up late, and I know there are times when you’re puzzled by some of my silly questions, but you always patiently answer them, and I’m very grateful for that. I also love myself for putting effort into this course. Whether my assignments turn out cute or beautiful, I love them all, even if the code that makes them up isn’t as elegant. That’s the best I could do as someone new to p5.js. If you are not smart enough, then keep trying harder, dear Luna!

I remember feeling especially nervous and upset during Inmi’s critique of our presentation because I didn’t think my first presentation after a long time not seeing her was my best work (although, what really is “the best,” right?). If Prof. Moon critiques my work in another class next time, I hope I won’t be as nervous and upset. I hope I can present confidently as a more improved student.

Lastly, I want to say that I am indeed someone who provides feedback well because I am always impressed by every classmate’s impressive work!

David – Claire – Xiangyi – Sissy – Tina – Aura – Lisa – Melanie – Ting – Luna – Moon

Link to the sketches:

Reader Interactions

Leave a Reply Cancel reply