Category: Nature of Code

Project Name: Finally, they became stars

Course: Nature of Code

Professor: Moon

Project Presentation:

Introduction

There is a saying that “When people pass away, they become stars in the sky”, which I found really beautiful when I was a child. So I visualized this process based on the fact that “In average, about 1.8 people pass away every second”. So, in the project, every second about two starts will go up into the beautiful auroral night sky from ground, indicating that there are two men leaving us but heading to a new world.

Motivations

I have been hearing the saying when I was at very young age, and I really like this telling. Death is happening every second, it truly is a terrifying things, some people want to avoid it while some people are waiting for it. What’s death truly is? It’s too complicated and we will never have the answer. And that’s why this saying is so attractive and beautiful, it’s simple, peaceful, and it makes us forget about the pain.

Inspiration 

For Aurora, I looked into the real Aurora in our world and so do stars and mountains. And for souls, I found the shape of Lanterns, especially the Chinese Kongming Lantern is quite inspiring and pretty, so I decided to use this form to present souls.

Building Process

I used P5 (Java Script) to build my project, and every elements of the project is generated by code rather than any images. Here are some techniques for each element:

Aurora

Aurora is generated mainly by the function noise. The basic technique is that each particle has a Xcurr = Xpre + 1 value, and Y value is created with noise value plus a sin value so there is a wave effect, randomly but also consistently.  And for the color, I used Screen blend mode so that it would be more similar to real Aurora.

Background Sky

The sky is also generated by noise value, and you can see the change of the color from dark to light is not even, which is more natural. Basically there are thousands of 4*4 rectangles arranged in the background, and they have different color to each other, making it possible for color change.

Lantern / soul

This is the soul that goes from ground to the sky. Cause it represents the human soul, I want to make it pretty and thus be respectful for lives. It is made by three nested classes, and each has its own function.

As shown in the image, class Particle is responsible for basic movement of each ellipse, and then class pSystem has an array to store all these ellipse object, and make it a whole. Then class Lantern has an array to store each particle system, make it possible to move together from ground to sky, and then finally disappear(splice). Why disappear? Because p5 is only capable for about 20 Lantern class objects exist at the same time, so I have to splice them regularly to maintain my frameCount.

I changed the color to make it fit into the background, and changed its size to very small. I wish it to be a little bit bigger but it seems to lose frameCount in this way too.

Stars

( The above image is quite unclear)

The stars are relatively simple, but it’s also quite important for the screen. Basically there is star class and each star is a particle whose transparency keeps change through Sin value. Also, the whole class is rotating around point(width/2,0), which shows a effect of time change, and makes the frame more dynamic.

Difficulties

1. The coordinates of the star, Aurora, and the souls.
   At first, I was worried that these three things will be quite messy, cause they are all moving and they might collide with each other. So I searched a lot of the pictures of real Aurora night sky with stars and try to adjust the colors of the aurora, souls and the background, finally I found one combination could work out, although not completely satisfying, it’s not messy at least.
2. Lose frameCount
   Because the stars, souls and aurora are moving and the same time, the frameCount is quite low and it’s not as smoothy as expected, the only solution is to use less elements with small size and low speed.

Reflection

In all, it’s quite fun making this project cause each part is very pretty thus gives me a sense of accomplishment. And I have learnt to make my code structure much cleaner this time so I could easily make adjustment to my project. As professor said, we should make things step by step, part by part, and I found that really useful especially when my projects are composed of several parts. I could make each part work and then group them together, which saves a lot of time.

Project: Wings

Date: May 18th, 2019

Processor: JH Moon

Introduction:

My final project is about object simulation. I intend to simulate the motion of bird wing and to make some visual effect based on the anatomical movement with p5.js . The project has two versions: one shows the physical structure of bird wings, the other visualizes the appearance of wings by applying particles systems. 

Inspiration:

The inspiration of my project comes from some street arts that paints wings of human size with various art styles. One common feature for these kinds of wings art works are that, the audience are invited to become part of art pieces by posing with the wings. Also,  from my other class about 3D modeling, I learnt that wings is a common organic feature in many 3D modeling scenes and game design, which leaves the concept with much room for exploration and utilization. With p5.js, I would like explore this form of art by creating visuals of moving wings, and by utilizing tools like projection in the future, I would like to let the art piece to be immersive or even interactive. 

Development:

Since my project really focuses on the object of wings, I started off with researching for and analyzing the anatomical movement of wings. 

With reference to the research findings, I divided the structure into several parts: joints, bones, and feathers; and based on that, I proceed to plan my project by breaking them down into different gradations: sketch, movement, and appearance. 

As shown in the sketch, I first planed to build the bone structure and joints with the basic movement, then I would attach feather structure to the bones by using the concept of springs, and finally I would visualize the appearance of wings by applying particles to the kinetic structure. My project were basically implemented according to this plan.  

Bone structure: 

To build the bone structure, I created the movement of joints (points) first and connected them with lines (bones). However, the way to design movement was tricky. I firstly tried to change the joints position with spring concept, but the wan points moving with springs is was not very regular and they would tangle with each other. So I proceeded to manually change the positions of the joints. I used the sin() and cos() first, but in this way, the movement was too stiff and the bones were stretching.

To solve the problem, I looked up more animated movement of wings online to study the organic principles, and I realized that the problem was each joint was not moving based on the previous one. The way joints are moving should be revolving around an axis. Therefore, I changed the code to achieve the effect. 

Feather structure: 

After completing the bone structure, I then proceeded to attached the feather mainly using the concept of springs. I used lerp() function to divide the distance between each two joints into ten and placed one end of the spring over there. I then positioned the other end of spring based on the first one by using sin() and noise() to build the basic curve shape of wings and connected the points with springs. 

Two wings:

After having the basic structure of one wing, I used class systems to duplicate and flip the wing to make a pair of them. The final result for the wing structure looked very organic and really met my exception. 

Link for p5 demonstration: https://editor.p5js.org/Skye/sketches/4ycJm0eZg

Particles:

With the anatomical structure of wings, I then tried present the appearance of wings by attaching particles to the structure. The outcome looked like this:

Link for p5 demonstration: https://editor.p5js.org/Skye/sketches/ZVm2FPYOo

Presentation & Future improvement:

For presentation, I showed the two versions of my wings, and got feedbacks that I should as I have two version of the wings: one is realistic simulation, the other is more about artistic representation, I may be should choose one direction to focus on and push it to the limit. 

Due to my intensive schedule during the final, I did not fully achieve the result of my project as expected, which left much room for me to further develop it. Based on the feedbacks and my reflection, I think I should have these future improvements:

• Make the wings structure & movement more realistic and organic by experiencing with the variables;
• Explore with the particles to create different kind of visual effects of wings (e.g.. color, shapes, lights);
• Create some scenarios by adding some background or decorations in the canvas;
• …

In all, it was an challenge for me at some stage but I really learnt a lot from those theories and concepts in class. I am especially thankful for all the help and support professor Moon had offered us. It was a real pleasure to be in the class!

Description:

Dreamwalker is a human-graphics interactive dance performance which aims to explore if computer graphics can replace a human in a duet. My experiences as both an IMA student and a dancer inspired her to observe the similarities between human movement and computer graphics. 
This piece applies four different interactions using three different projectors to create the illusion of someone you lost in the past coming back to you in a dream. 
The interaction between a human body and a virtual body also intends to make the audience consider: how can you tell if something is real or no?

Visuals:

For the visual part, I used the concept of nature of code to make it. It starts with dots moving around. When the wakes up, the graphics get the awareness and begin to have shapes and finally grow into a human being. 

      Non-human visuals:

      I used autonomous agents and flow field to create non-human shapes. With a Kinect, when the dancer moves to the ground, the graphics will follow her. I also used sin and cos functions to mimic the movement of legs.

      Human Shapes:

      I used motion capture to capture the movements and use noise to draw the human skeleton shapes. I also played with opacity when the visual dancer turns.

Presentation:

https://docs.google.com/presentation/d/1aEQu5dnVH2e_3doHIWDBPLQejHqynlH24GERCwZAfPE/edit?usp=sharing

Final Video Documentation: