NOC: Cocoon (Skye Gao)

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?)

NOC Week6: Attraction (Skye)

Midterm project slides link: https://docs.google.com/presentation/d/13r1wf_NEIKu_-h8HkiYReFAtVtd20i-jl1mYi0tkIyk/edit#slide=id.g55106dbcaa_0_47

Assignment link: https://editor.p5js.org/Skye/present/IE8btHsaj

For this week’s assignment, I mainly played around with forces of attractions. At the first place, I wanted to simulate the particles trails around atom. However, at that stage I was not very with the attraction forces as well as all the formulas. So while I was reviewing the class examples, I also found some tutorial online. I found this tutorial very helpful and very much similar to what I wanted to create, so I followed its instructions and tried to build some similar sketch. However, I ran into some problems as the instrumental code is organized in a different way, when I tried compose it by what we learnt in class, it somehow did not work. I spent a lot of time figuring it out and finally created a sketch where the particles are rotating around on central particle. Based on this, I further tried out some interaction. I set a mouse pressed function with which once mouse is pressed, the particles will slightly move apart from original trails and thus create some random patterns (Most of them are in a way very much like daisy flowers for me). 

NOC – Week4: Forces (Skye Gao)

For assignment 4, I built a sketch which simulate the context of filling water into a tank.

Based on the example in class, I mainly played around with forces of resistance and buoyancy. At the very beginning, I was trying to create an effect that, if there is a force dragging balls to the bottom of water, balls will go back the water surface after the force is released. After I added the drag force, I felt like it was hard to visualize the force, so I further adjusted the sketch.

This time, instead of adding force on balls directly, I passed on the force to balls through water. By pressing the mouse, I changed the level of water, and thus adjust the position of balls. Later, to further simulate the situation, I drew a tap and add an object which represent the filling water.  The final effect look like this: 

Kinetic Light Project One: Sense Interference — Skye Gao

Project name: WHAT? I cannot SEE you talking!

Professor: Eric Parren

Documented by: Skye Gao

Date: March 11th, 2019

Project Description

My project is a glasses-like device which exams the interference between vision and hearing. The idea was initially developed upon my personal experience:  as a very short-sighted person, I often run into the situation where without my glasses or clear vision, I cannot hear people talking clearly. While I conducted researches, I found out this is a common phenomena among people with poor visions. According to Lawrence Rosenblum, professor of psychology at the University of California, Riverside, the phenomena – though not highly researched – is plausible. “What we understand about the perceptual brain is that our senses integrate, and though we don’t think we use sight in hearing, we lip-read all the time,” and we also get clues from teeth and tongue movement. The statement is also in a way supported by the McGurk effect, a perceptual phenomenon that demonstrates an interaction between hearing and vision in speech perception. ( A link for illustration of McGurk effect

Based on these findings, I built my project to simulate a blurred visual experience which will have effect on hearing. The project is intended to project the interference vision has on hearing, and discover possible by-effects on an individual level.

Perspective and Context

As Maurice Merleau-Ponty states in the book The World of Perception: “rather than being absolutely separate, each of these qualities has an affective meaning which establishes a correspondence between it and the qualities associated with the other senses.”(60). There are connections between each senses, however, people with full sense seldom realize such connections. How do we actually perceive the world?  How do our senses connect with each other? What is the balance between them and what will happen if we break the balance?

My project hence picks the specific sense of vision and hearing, and experiment with the interaction between them.  People name our senses with specific names, but the truth is they are always corresponding and coexisting with each other. By weakening one sense, I tend to break the harmony and reveal the indivisibility among them.

Development & Technical Implementation

There are two essential parts for my project: visual experience and acoustical experience. I first started with the visual part and tried two ways to implement the idea: one is to make some videos with high/poor qualities; the other is to built physical devices that make people see unclearly. 

As for the first approach: I first found some random speech videos and covered the screen with frosted plastic board for temporary effect. However, the result for user-testing was not ideal. The majority of the users were aware that they were under test and thus would consciously pay special/no attention to the content of the video with hearing. As I discussed with professor, I also got recommendation that conversation may be a better way to bring out the interference between hearing and vision. 

Therefore, I started to go with the second approach. In terms of the physical device that makes people’s vision blur, my idea was to built a glass to achieve the effect. Considering that though a pair of glasses with lens can certainly have effect on normal people, the lens can also cause discomfort or even harm on peoples’s eyes. Thus I decided to use some simple material to simulate the effect. One kind of ideal material is frosted plastic. After trying out with several kinds of plastic, I found the one used for plastic gloves works the best, and I got several pair of these gloves from delivery food. 

With these plastics, I borrowed a pair of protective glasses from Lily. I simply attached the plastic to the glasses (the image of glass one and the vision through it are shown as below):

As I proceeded to some user tests, I realized that the outcome was really differed from person to person as well as the environment: with the glasses on, people tend to identify the words more clearly when talking to a familiar person or/and in a more quiet environment, and more unclearly the opposite. Also, people having chronic experience with glasses were more likely to understand situation than others. Therefore, I learned that the test should be conducted with settled variables. Considering the final test will be in a certain room which the environment is settled, I focused more on the objects of conversation (person and content). 

To ensure the randomness of the conversation objects, I searched for some “common misheard sentences” online and paired up random people to do the test. Compared to previous tests, such arrangements has led to much more obvious outcomes as I expected. 

As I played around with the material, I found out that different layers of frosted plastic can also create different blurred visions. Therefore, I further made another pair of glasses with double layers of the same plastic  which made the vision extremely blurred(glasses2 and the vision through it are shown as below). The outcome of user testing are very interesting: with two layers (a very blurred vision), users’ hearing are actually better than wearing glasses of less blurred vision. According to some users’ feedbacks, when their visions fail more, users tended to rely more on hearing and hence adjusted to the situation quickly. 

 

   

Presentation

The presentation went quite well in class. My classmate Rosie participated in the tests as a volunteer, and Luis helped me read out the sentences to her. While Luis read the same sentence three time, Rosie wore glass two, glass one and did not wear glasses for each time. The result quite matched my assumption: with blurred vision, Rosie could not hear clearly than usual; Moreover, with glass two, Rosie said that she heard even more clearly than wearing glass one. While other people played around with glasses during conversation, the effect that blurred vision can lead to poor hearing was confirmed. 

I did not manage to record the presentation in class, but here is a test I run after class with students outside our class:

I also got several feedbacks and suggestions during the class presentation:

  1. Since each test the testee would hear the same sentence for three times, they may become  familiar with the sentences and thus spare the role vision plays in the process. Therefore, I got suggestions that I should read different sentences each time to the testees.
  2. As for the person who reads the sentence, the testee can also get familiar with his/her voices. Thus I could try to use audio recording or let different people read sentences to overcome the influencing factors. 
  3. To better simulate the vision of a poor-sighted person, I could explore other materials to create more realistic effect. For example, instead of using plastic to create only blurred vision, I can also use some materials to make double images effect. 

Conclusion:

This project is a exploration of daily experience with sense interference between vision and hearing. During the whole duration of building my project, I learnt the following things:

  1. Always left enough time for project implement and adjustment. While we had a week for project preparation, I still spent more than three day trying to figure out how to implement my ideas. After I settled down with my final plan, I only got about two days to built everything. Such intensive duration of working left me with limited time and choices on materials and the scale of my project. At the night before the presentation, I got feedback that the blurry vision was not like shorted-sighted vision very much. Though this was only one feedback out of twenty, when I tried to improve this point, I did not have enough time for perfection. So I could only make full use of what I had and take this as a random sample.
  2. People’s perception of sense really differs from individual to individual. Such outcome should not be considered as failure, instead, it is exactly the by-effetc I wanted from such experiment. Just as Irwin states “conception is the faculty of unique individual to appropriate and mold reality as presented in perception into a systematic experience of cognizance” (25), people’s experience with sense and perception is not only demonstration of some definitions but parts of a larger picture of conception. 

Future improvement: Considering all the feedback and suggestions I got from the precess of building my project, I am thinking about 1) designing my test more cautiously and let the outcome more accurate; 2) trying different materials to experiment with various visual experience, and exploring the more connections between vision and other senses.