Author: Lily Yu

Project Name: Peach Blossom Spring

Description

This project is originated from an ancient Chinese fable called Peach Blossom Spring, which is about the accidental discovery of an ethereal utopia where the people live an ideal and harmonious life with nature, separated from the outside world for centuries. This project is aimed to demonstrate an animated visualization of the Peach Blossom Spring in the story in the specific style of Chinese water ink painting.

Inspiration and Concept

My first inspiration was from a recursion tree created by Diana Lange.

I found this tree looked a lot similar to the ones in traditional Chinese paintings, which inspired me to pursue the aesthetic style of water ink painting.

I was also inspired by the exhibit at the Chinese Pavilion during the 2010 Shanghai expo, which was an animated recreation of the famous ancient Chinese painting, Along the Riverside During Qingming Festival.

Then I decided to recreate the story of Peach Blossom Spring in the form of animated water ink painting.

Processes

At first, I imagined that there would be only two scenes. One would be an entrance drawn by the ink strokes, the other would be the main scenery of the Peach Blossom Spring, and after it rained, the ink will start to spread out and the painting would become blurry, indicating that the utopia was just a fantasy.

I started off with creating the recursion tree.

This is my first draft. But according to some feedback, it looks like a tree in a Japanese painting style instead of the Chinese ink painting style. Also, for each generation, there would be three branches, which made the sketch really slow. Therefore, I developed a second version.

The strokes were thicker, though still a bit too straight. And I took out one of the branches in order to make the sketch run smoothly. Moreover, I added an ink drop where the tree grows as well as some strokes representing the reflection of the moon.

Then I continued to work on the entrance part.

My inspiration came from this sketch that I saw online.

To imitate this blurry effect, I used ” blendMode(MULTIPLY)” to blend the strokes. The below sketch was the first version.

But later I realized that the gate was not intuitive enough for people did not know about my project in advance. Plus, the Spring was found through a path between the mountains, therefore, it would make more sense to add some strokes to represent the mountains. By creating the particle system that will disappear depending on its lifespan and will keep generating particles from the above, I had the second version.

 

Considering the importance of blank space in water ink painting, I reduced the number of mountains. Also, thanks to Dave’s advice, I made a modification to the color of the mountains in order to create a space on a 2D canvas: if the stroke is going down, then the color will become darker, indicating that this mountain is closer to the viewer. 

 

I could not decide whether to make the canvas a square or the size of the screen. After receiving some feedback, I chose the former one, which resulted in that I kept the tree as a single scene.

When I was considering what to put in my next sketch to give a whole scenery of the Spring, I saw this painting of Guanzhong Wu.

 

Thus, I decided to have a pair of swallows, a couple of pedestrians, smoke from the rooftop, rain, and the houses as the background.

For the swallows, I first tried with autonomous agents to make one of them follow the other, but their movement was always a bit awkward. Then I used flocking, which made the movement much more natural.

For the house, I was first suggested to look for some SVG files of houses, which would contain the x and y coordinates of the house images. In the end, I adopted the technique of pixel iteration taught by Professor Moon, which saved me much time on figuring out where to place the particles by myself.

The smoke effect was inspired by the smoke particle system created by Daniel Shiffman.

The pedestrians were hand-drawn. But to prevent the sketch from being too busy, I only kept one of the pedestrians.

 

Here is a demonstration of my project.

Difficulties

The biggest difficulty that I had during the whole process would be how to imitate the water ink style as accurately as possible.

I played with the color of strokes, whether to use traces of particles or to have the particles spread out, different blend modes, etc.

Besides, for the final scene, the stokes for the house required that there was no background in the draw() loop, while all the other elements required there must be a background or they would leave a trace on the canvas. To solve this problem, “createGraphics()” was used to create another canvas for the house.

Further Improvement

Due to limited time, I did not get to the place where I could have the rain to blur the whole painting. But I still believe it would be cool to have this effect as an ending of the project and would make it more related to the theme of the original story.

I would also love to improve the recursion tree by adding more randomness to it, instead of making it too symmetrical.

Furthermore, I could add more colors to the sketch, or at least have different levels of darkness for the ink strokes, so that it would be more like the real ink.

For this week’s assignment, I created a bunch of Fairy Dust from Spirited Away 😀

They will be very chill and sing Doraemon Theme song to you as long as you don’t press the mouse!

My original idea was to create a group of them in the shape of a rectangle that can move with the mouse. But later,  I found out that if I wanted them to be in their positions and form a rectangle, they cannot follow the mouse position. So I modified the function and added forces to make them stay where they were.

They would get anxious when the mouse is being pressed. To achieve this effect, I used mousePressed and mouseReleased functions to modify the range that the distance between the original position and the current position is mapped to.

Keep the sound on and enjoy your interaction with the Fairy Dust!

For this sketch, I used the spring class we created in class to simulate “Angry Birds”. Once the chick is dragged, the spring will give it a force. And once the mouse is released, the spring will disappear and let go of the chick. The user can aim the chick at the pig and hit at it.

It seems that there is only one ball (the chick) in the sketch, but there are actually two. The difference between the spring I created and the spring we created in class is that the invisible ball is fixed at the center. 

Also, I added a function to the ball class, which is “fly( )”. When the mouse is released, the function will be triggered to check the distance between the chick and the center and to splice the spring. 

One problem that I am still not able to solve is that the chick will not be launched in the expected direction unless the spring is stretched to its fullest.

Demo

Demo

  

Inspiration and Concept

My inspiration comes from the story of Little Prince. Instead of building a complete system, I planned to integrate what we have learned from class to recreate a narrative of this story. 

The general idea is to allow the user to help Little Prince get closer to his rose by using mouse interaction to generate balloons.

Aesthetic Style That I Expected to Achieve

Originally, considering using the screen space to the full, I wanted to place Little Prince and the rose on the left and right side of the webpage. But the idea of balloons would thus make no sense. Therefore, I decided to put the rose above Little Prince.

When Little Prince reaches his rose, a quote from the book will appear.

Process

First, I created the starry night sky with particles. For this part, I used oscillation to make the stars blink.

For the movement of Little Prince, I used forces and resistance. As each balloon is generated, a force will be given to the character that will add his acceleration in the negative direction of the y-axis. When the character reaches a certain height, he will be given a resistance to make him stop gradually.

Before creating and placing the actual images of the rose and Little Prince, I used rectangles as replacements to get the precise size and positions of the images. 

My sketches: 

For the balloons, I added collision check to make them bounce when they collide with each other so that their movement will look more natural.

Also, to prevent the user from generating too many balloons, I set an upper limit of eight balloons.

Challenges

One of the challenges is to calculate the exact figures for the positions of each element, for I used different translation positions for different elements.

Another one is the forces added to the character. My original plan is to use the vector obtained from the subtraction result of the balloon’s position and the character’s position. But later I realized that the character may drift away on the x-axis, instead of going up directly to the rose. Therefore, when each balloon is generated, I would give the same vertical force to the character.

Further Improvement

• • Make the stars blink randomly instead of at the same time.
  • Reconsider the layout to make better use of the space. (A vertical one may be better?)
  • Add some more plot to the story: things that might happen after Little Prince reaches the rose.
  • More detailed components if I had more time: the falling petals of the rose as it is waiting for Little Prince, the appearance of the planets, the background of the universe (utilizing the noise function?), etc.
    •  

I have created a Ping Pong game with collision this week 😛

The bat is controlled by the x, y position of the mouse. The number of Ping Pong balls that are not touched by the bat will be displayed in the background. When the number reaches 20, the game is over.

In order to keep the webpage smooth, I wrote a “checkEdges” function that uses splice to remove each ball when it is out of the window. 

Demo: