Category: Nature of Code

Nature of Node 

Professor: JH Moon

Documented by: Skye Gao

Date: April 7th, 2019

Initial concept: Fluid simulation
Since I was really interested in water diffusion, my initial idea for midterm project is to explore the concept of fluid simulation and create some basic simulating effects. The expected outcome was to create a 2D sketch where the fluid flows horizontally. As I shared with professor my initial concept, he suggested me to try to visualize it in a 3D space by using WEBGL. From this project, I expected to learn about the physical dynamic of fluid and consolidate our knowledge of force/oscillation through the process.

Process (Difficulties and changes):
1. Research: Since I knew nothing about fluid simulation before, the first step I took was to learn about the physical principles and methods to visualize it. By researching for some references and coding examples. I found some water simulation coding examples (this is one of the workable codings in p5). However, none of these coding examples utilized the concept of force/oscillations, so I turned to another way — finding similarities between wave flows and water simulations. From my understanding, since water simulation is the generative movement by forces that push water particles, it is very essential for understanding the forces among these particles, in other words, a flow field.
2. Flow field: To learn about flow field, I took reference from the example of Perlin noise by Daniel Shiffman (https://www.youtube.com/watch?v=Qf4dIN99e2w&list=PLRqwX-V7Uu6bgPNQAdxQZpJuJCjeOr7VD) because I though the example was very similar to the effect I wanted.

I broke down the coding and focus on the part of flow field. However, though I tried to integrate the coding with what we learnt from class (objects, vectors, forces, oscillations), I found the part of the coding where noise() was used to control the directions of the vectors was very hard to understand.

After I talked to professor, I realized that such application of flow field was a little bit beyond my capabilities and was too ambitious. Professor suggested me to think in another way: instead of create a filed of vector to control the particles, I could otherwise directly apply the forces to the particles.

3. New version of sketch: The time left for me was very intense, things became much more easier with the new path. For this new version of my sketch, I first created a class of particles and applied a random force of each of them. For easier visualization and modification, I let all the particles generated from the center of canvas. The I applied the attraction forces that make the particles flow in certain way (in this case, they are attracted to the center). Since, the trails of the particles looks very random and unnatural, I further applied noise and let the trails became more smooth. The I replaced the particles with lines that connected the Previous and current position of the particles. The effect by then look like a mass of line generated from the center. Since I used HSB color mode with generative variables, the visual looks somehow very explosive and attractive. In consideration with time and efficiency, I felt like there were also other possibilities of art for me to explore with what I had.

4. Cocoon shape: I felt like the way lines were generated was very booming and reminded me of the texture of cocoon, thus I applied a shape to the mass of lines by setting an edge, and the lines then would pile up on the edge and draw out the exact shape (like shown in demo below).

Based on this, I added some interaction: if pressing the mouse, the mass of lines will move beyond the shape within certain arrange for each time and thus create the shape of cocoon (image are shown as below).

5. Dai. gui. min: I added a debug mode and a control bar of direction and dai. gui.min. In terms of the directions control bar, I added a value to control the direction in which the lines are generated by corneal the arrange of PI in noise() .

With the debug mode, I wanted to show the vector of each particle (in this case, the particle which serves as current position), thus to simplified the process of modifying force and movements. However, as long as I display the vectors in the function, there would show a mass of line piling up from one point (not each position of the particle). However, once I replaced the line of vector with point of its position, there would show a bunch of particles projected around the edge of shapes and gradually generated a plane (as shown in the image). Such outcome, though did not serve the function as expected, somehow added on the visual effect a lot, especially when it is displayed simultaneously with the change of direction, as it could create a 3D space.

Presentation feedback:
During the in-class presentation, I received the following feedback for my project:

* The debug mode is visually very strong, and it would be very stunning to only see the appearance of the 3D space;
* The mass of lines is a little bit too dense and explosive, it might look more visually comfortable if the generation of lines is more natural.
* Since I related it as cocoon, it would be better to try out with different shapes;
* The flow and generation of lines remind some audience of the booming of energy, it would be interesting to have a process in which the lines gradually cover the whole canvas in different shapes.
* The project can be related to Atones Ohans’s work, I could draw some inspiration from there.

Reflection: This project went through great challenges and changes. As I did not set my exception properly, the effective time for me to complete the project as very intense. However, I actually like the final outcome very much since it looks very beautiful and energetic. Also for the process during which I tried to explore the concept fluid simulation, though I did not make it happen at last, I did learn about the physical principles of water flow and some coding techniques about diffusion and flow filed. Instead of a settled presentation of project, the project means more to me as an opportunity to explore with things that I did not learn or think about before. It also inspires me that sometimes random factors in the process can also be chances for surprising outcomes.

Future improvement:
* Clear the canvas each the direction mode is change, so that the changes can be more apparent.
* Figure out how to utilize the debug mode more appropriately (show the vector).
* Explore with the form of generating shapes according the feedback
* The interaction is not very effective in this project, maybe I should change / delete it.
* Turn the sketch into 3d mode (using three.js?)

Topic: The Life and Death of a Star

For my midterm project I was inspired by planetary orbits and the forces that make up a galaxy. While I was looking at our own solar system for inspiration, I didn’t want to limit myself. Utilizing the concepts of oscillation learned in class, I was able to mimic elliptical orbits for several planets(ellipses) that I categorized under particles. Then, I wanted to replicate a black hole sucking the particles in itself. I applied gravitational forces and attraction to get this sketch:

But the challenge came when I had to integrate the two – orbits and attraction together to create a sketch. I tried to first call all the particles in the draw loop but that made strange objects appear simultaneously. I was able to fix this by setting up two functions and calling them on the draw loop. That’s how I got the objects to orbit when mouse isn’t pressed and to be sucked in when mouse is pressed. 

It was really helpful to hear critiques during my presentation. I want to further improve my sketch by incorporating more interactive elements like having the blackhole increase in size when sucking in certain objects or manipulating the orbits of certain planets since I don’t have constraints on p5js. 

Link to sketch: https://editor.p5js.org/jihwanshin96/sketches/qxI-HfGIN

Link to presentation: https://docs.google.com/presentation/d/1bPAoklxJha6gEeJqADsru1RmpAS3vR6W7ZY1D9AkBCM/edit?usp=sharing

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.
    •