NOC#W06 – Pudding 🍮

• Project: Pudding 🍮• Process

  1. First, I played with several balls and springs and found out the structure with one ball in the middle was more stable.

2. Next, I made two hexagons with one ball in the middle connecting the six balls at the corner. These two hexagons are the top and bottom of the pudding. 3. Then, I connected the top and the bottom balls one by one. I adjusted the stiffness of the spring in the middle to be smaller to make the surfaces stable. 4. I moved the balls to see the structure of the springs. 5. I use vertex to color every surface. I tried curveVertex but it didn’t have a good effect. 6. I removed the strokes of the springs but keep the strokes of the vertex shape. 7. Eventually, I adjusted the restlength and the stiffness to make it natural. It looked nice if I dragged it only a little bit. I like the movement when it appears. But I think it can be better.  

• Reflection/ Lesson-learned

In this assignment, I had a lot of fun constructing the structure of pudding. However, I am still confused about why the balls will stick together or change the relevant position if I drag them too far. 

• Sketch Link

https://editor.p5js.org/Tinggg/sketches/KyPlbh8Vj

NOC#W05 – Sea at Sunset🌅

• Project: Sea at Sunset🌅

• Process

  1. I play with the example code and adjust the background transparency to see how it can show the wave track.
  2. I added a for loop to increase the number of waves and used noise to change the color.
  3. I adjusted the thickness of waves to see different effects.4. I adjusted the color to make it more like the sea reflecting the sunset and the frequency to mimic the speed of sea waves. 5. I used lerp to make the amplitude change more smooth and flatter. Also, I want to see how thin the wave can be. Now it looked like hair. Very amazing texture 6. I also used noise in the thickness of the wave so that it can be more like a natural sea wave. • Reflection/ Lesson-learned

In this assignment, I enjoyed a lot with the noise function. I think it has great potential to help me make natural and irregular phenomenon. However, I need to explore more about the sin() cos(). In the future, they can help me make more transformation.

• Sketch Link

https://editor.p5js.org/Tinggg/sketches/ECvbGLT-L

Assignment 2: Sculpted Light

• Concept and Inspiration

We want to recreate the scene when people sit in the car and see how the street lamps show the raindrops on the car windows. 

• Process

We glued the cover of acrylic board on the clothing to make it waterproof. We hung it up horizontally so that water could just flow down itself after we dripped water on the clothing.

In the process of documenting this project, we found out the position we fixed our halogen lamps helped show the motion of shadows intriguingly. Depending on what light was on, the users’ shadows’ positions and sizes would change.

• Documentation Video

 

NOC#W04– Heartbeat 💗

• Project: Heartbeat 💗 

• Concept

These hearts each represent a small thing that makes people’s heartbeat faster. When there is a force, these hearts will tangle together. This visualizes the emotions one have when he/she fall in love with somebody and has a tangled heart.

• Process

  1. The heart shape I found: https://editor.p5js.org/Supriyo/sketches/N2nRmPYL7

2. I apply this heart shape to  an example code.

3. add attraction to this, lookig weird. 4.  change the attraction to mousepressed interaction and add the number of hearts5. Change the color brightness and background transparency to make the track of it blurred, and making an effect showing the infatuated emotion.6. change the resistance to make the motion more slowly tangled

• Reflection/ Lesson-learned

In this assignment, I learned how to make interactions among objects themselves. This helped me create more interesting phenomenon, constructing an environment. 

• Sketch Link

https://editor.p5js.org/Tinggg/sketches/OFe7Q_fxL

Assignment 1: Generative Light

• Concept

As light travels through space, it is reflected and absorbed by each object, thus highlighting the different shapes, colors, and sensations we see.

• Process

We chose different shapes such as (octagon, triangle, and smiley face, etc.) to represent the different objects, visuals, and feelings light creates.

During the process, we laser cut the transparent acrylic board to fabricate an open box and glued the shapes on the top face, so the participant could have different views of the installation from all 4 sides of perspectives.

The lights were fixed to the top so it would be “hidden” and the audience would only see the “objects” as the source of light instead of the LEDs directly. 

The challenge we encountered involved aligning the shapes precisely with the light source. Only when the edges of the boards were positioned directly in the path of the light could they radiate their maximum brightness. Additionally, coming up with different forms of light change was also time-consuming.

• Documentation Video

• Code

https://docs.google.com/document/d/1dHRN84h8IKcTOFWkCdEQ3-Z2TNVwWXMPXCUtOD2zTSc/edit?usp=sharing

 

NOC#W03– Tornado 🌪️

• Project: Tornado

• Inspiration 

Tornado - Wikipedia (photo of Tornado in Wikipedia)

• Process

1. The initial velocity of the dusts 2. add the force of float and change the color3. Change the scale of the dusts. When the dusts float higher, the distance from them to the center of the tornado will also be enlarged. 4. Limit the number of the objects so that there will not be too large objects. 5. Add some frame rate interaction, which is cool, like slow-motion video6. Add two wind forces from left and right to make it spin 7. Try enlarging the range of the spinning dusts. 8. Add mouse interaction to change the range of the tornado 9. Find out the problem of the redundant translate function in my code and adjust the mouse interaction to be like a repelling wind force 10. Final version: using mouse interaction to make amazing spinning motion.  • Reflection/ Lesson-learned

In this assignment, I tried a lot of way to add forces, which are also acceleration. It gave me a surprising effect that this 2D animation look like 3D so much. This practice helped me get more methods of how to make the movement smooth and full of change in a natural way. However, I still need to learn more about how to make the movement more natural.

• Sketch Link

https://editor.p5js.org/Tinggg/sketches/C682qBTWJ

Project 1: Sense Interference – Separate Face 👀👃🏻👄

A. Title: S e p a r a t e  F a c e – Ting – Prof. Eric Parren

B. Project Description / Introduction

This project consists of five mirrors that match one’s eyes, nose, and mouth. It is about seeing our facial organs first separately and then together. Due to the different distances from mirrors to our face, it constitutes a new combination of face organs in different sizes and positions in our eyes. The intention behind this mirror device is vision interference with your recognition of the distribution of your eyes, nose, and mouth. People may find their faces funny in the mirror. The game of piecing together one’s facial organs which were cut off from a picture of one’s face inspired me to do so. 

C. Perspective and Context
In the first week, sense interference is discussed. We experience many devices about it, like upside-down glasses or glasses of filters. They truly interfered with my vision and then my recognition about the environment around me. It led me to look for more possibilities about how sight influence my recognition.

In Irwin’s reading, he divided the process of compounded abstraction to six steps: 1. Perception/ Sense, 2. Conception/ Mind, 3. Form/ Physical Compound, 4. Formful/ Objective Compound, 5. Formal/ Boundaries and Axioms, 6. Formalism. We have our sense and perception since born. And then based on the perception, our mind form the recognition and conception. Next, we represent our mental thoughts in a physical form. From my perspective, it’s like we set our concept of beauty in a certain distribution and size of our facial organs and also, the behavior of my  conceptualizing and interpreting my project. Then, it went to the form and the use and the norm and the mind. “The fact of our lives and logics having up til now enjoyed a relative independence and self-sufficiency will now become compounded fact-the fact of facts-to form a truth, and while appearing to become more concrete, will in fact become increasingly ethereal and unsupported.”(Irwin, 28) When thoughts was separated from reality, then everything which looks real will be actually unreliable, which led to formalism. However, is formalism empty? Is art fully formalism? I agree with Irwin’s idea that “there is one infinite
subject: The subject of art is aesthetic perception.”(Irwin, 31) I believe, art is the product of aesthetics and minds. In my project, the aesthetic part was not only the simplicity in the form but also the scene we see in the project. As what I have mentioned above, human set “beauty”, this concept, in the face. The project I made was purely physical, but when we use it, the scene we see in the mirrors was partly different from what we expected to see in a normal mirror and then, the expectation and recognition was interfered with. People focus on the separate facial organs instead of the whole face. It can change people’s first intention when seeing their faces. I think my project is formal but it does have effects on one’s minds, which means it works as art.

D. Development & Technical Implementation

At first, I was thinking of making a distorting mirror by adding a laser paper or other color paper with curve. When I was trying to see my face in the distorting mirror, I found out the reason why we called this a “Ha Ha Mirror”. The weird distribution of our facial organs changed our recognition of our face and made us feel funny. Then, I saw five pieces of mirrors on the table and thought of the game of piecing together one’s face organs on a paper. I tried to place it in the distribution of our facial organs, which inspires me of the idea of this project.

(This is the very rough sketch of the frame of my project.)

(Special thanks to Zora and Ricci for being my models)

I measured the size of eyes, nose and mouth from my friends to make an appropriate shape of the mirrors. I shrank the sizes of the mirror compared with the real size of the facial organs, when taking the distance from mirror to face in consideration.

Then, I used laser cutting to make the small mirrors. Freddie helped me use the new laser-cut machine with a camera to cut these mirrors very fast.

After that, I used cuttle.xyz to design the frame. There was a little problem with the old laser-cut machine, which met my frame on fire 🔥. So I made a lot of frames. To made people hold it more comfortably, I glued two of them together. And this thickness also helped support the sticks in a certain direction. It was also amazing that the sticks just fit in the holes. However, there were some flaws of this project. When I used hot glue to stick the mirror on the sticks, hot glue burned some marks on the mirror, which I cannot fix. Additionally, when the project wasn’t held in an appropriate direction, some sticks might just fall on the ground. So I made some small handles to fix it. Participants can also use the handles to adjust the distance from mirrors to face.

[User cideo Documentation by Nadine Chen]

[User Video Documentation by Ricci Liu] 

The interaction is very simple. Users only need to hold it in front of their face. Then, adjust the distance from mirrors to face with the handle on the stick until they see their facial organs separately shown in all five mirrors. After that, users can still adjust the mirrors to see the changes of the sizes and distribution of their facial organs to feel the vision interference.

E. Presentation

The presentation went very well. I think it depends on how easily people can understand how to experience the project. I felt very nervous when seeing them play with it. But I became relieved when I found out everyone can understand and get fun from my project. The participants didn’t show confusion after my interpretation. This device is convenient for everyone to try. The most unexpected reaction was the praise from Santiago that he thought my project was like Picasso Style. I felt extremely flattered. 

However, I got some suggestions from the participants. I think they are very beneficial and helpful for my project. My project can be better and more fun if there are some color filter paper on the mirrors or use lens instead of mirrors. I should make a handle also in the front so that it can be more convenient for people to adjust the sticks with mirrors.

F. Conclusion

In this project, I struggled a lot in the preparation part. It spent me a lot of time to think of an idea. After trying a lot of material in different ways. I finally came up with the idea of this “separate face”. In this process, I learned that inspirations are not easy to find. Trying helps inspiring. In the presentation, I discovered that participants’ experience is really important. When I see people have an enjoyable experience with my project and understand it, I felt a sense of achievements. Also, I think the user experience is what I succeeded at this time and the realization of the concept “sense interference ” is successful, too.

What I want to improve is the structure of this project. I need to make more rotatable sticks to adjust the distance between eyes, nose and mouth. In this way, people with different distributions of their facial organs can all have a nice experience with this project. The user experience can be better! Additionally, adding some filters on the mirrors to make different changes to different facial organs may help the project be more intriguing.

When I saw people’s first reaction about my project was “I look funny” or just laughing, I believed that my project was successful in interfering with their vision in the mind part. When I heard people’s praise on my project was “Picasso Style”, I believed that my project was successful in aesthetics part. Therefore, I was really satisfied with my project and its performance.

G. Reference

Irwin, R. (n.d.). “The Process of Compounded Abstraction- Notes Toward a Model“.

Reading Reflection 1: Light and Space

Burnham’s and Clark’s article focused on how light was shown in the environment. They both emphasized how the environment helped the light to be more fickle. In Burham’s article, light art first aimed at emitting light in art. Light was used as a medium of expression. (Burnham, 286) Light was the main object in the light art. The change of color,  scale, and intensity of light was the main intention. “Increasingly pure energy and information seem to be the essences of art; all else is being dropped methodically by the wayside.” (Burnham, 311)

(These videos are filmed by myself)

In the summer break in 2023, I visited one of James Turrell’s (mentioned in Burnham’s article) artworks, “House of Light“, in Japan. We stayed there for a day and saw the different changes of light in the room and light out of the room. His artwork focus on the comparision and integration of natural light (sky) and artificial light.

In Clark’s article, artists focused more on the experience and feeling of the audience given by light. Sometimes, the audience is also part of the project.

(Photos from Michael Asher: There is Never Enough Time to Get Everything Said by Thomas Lawson)

Michael Asher loved to use the form of light and shadow. “Instead of the work’s being developed from and contingent upon existing material conditions, it was based on and developed by the use of preselected materials and principles.” (Clark, 48) He set the light and shadow through his design in advance and made the phenomenon in a certain way, like architecture.

However, in Schuld’s article, the emphasis was moved to the phenomenology of light and space. He gave the concept of “naturalizing the void”, which means “Light and Space art does not deal with light and space as media as much as it deals with the participating subject’s perceptual adjustment” (Schuld, 118) The focus was transferred from the light and space themselves to the whole atmosphere and the feelings that participants feel.

In later exploration about light and space, I hope I can try more possibilities in different combination and reflection of light itself and its performance in spaces, which may lead to different feelings of participants. In addition, the collision of natural light and artificial light which James Turrell usually uses inspired me a lot. Also, I am also interested in playing with light and shadow in an artful way. For example, seeing the light from different angles, there will be different patterns and different texture of light and shadow, which may mix together and constitute a sense of illusion.

Reference

Burnham, J. (1969). Light as Sculpture Medium from Beyond Modern Sculpture.

 

NOC#W02 – Hot Rumor🔥🔥

•Project: Hot Rumor

• Concept

With the heat, the “RUMOR”s move faster.

• Process

  1. Try with the example code in class.(https://editor.p5js.org/MOQN/sketches/Pdbvj34Ng)

I made something like Japanese-style fire animation, which was my first idea.

2. With reappear and vector, the fire seemed to be endless and fierce.3. I used curveVertex to make the shape of the flame.

https://editor.p5js.org/Tinggg/sketches/-XcwZRBFj4. I limited the number of the object to see what happened.
5. Using the mouse to set the fire didn’t work well. 6. So I turned the mouse interaction to automatic animation. I limited the number of flames and used scale and lifespan concept (which is actually transparency) to show the growth, fading and end of the flames.
7. Only fire was too boring so I added “RUMOR” to roast.
8. This is the unsuccessful version of adding random moving object. 9. Finally, I used bouncing to the “RUMOR” to show a effect of roasting and added a mouse interaction to the fire. Considering the realistic physical situation, as the temperature increases, the molecular motion speeds up. Therefore, when the mouse goes upward, the fire will be bigger and “RUMOR” will move faster. On the contrary, it goes the opposite way. Additionally, I made some little shaking effect on “RUMOR” to show the twisted hot air.

10. In the later class, I got instructions from Moon. “blendMode(ADD);” helped a lot on making the color of the fire more realistic. 

• Reflection/ Lesson-learned

In this assignment, I learned how to use class to customize an object. It is beneficial and convenient. I can stuff all the functions of the object itself in it and classify them, which makes the code orderly. Vector is the first math function I have ever used. I still have more to learn about it but through this practice, I started to understand the charm of it, making the code concise. It became easier to use vector for motion. Besides, I tried to use the vertex that I didn’t use last week and I think I get some make-up practice now.

However, there is still much to improve in this assignment. It was not what I want that every flame looks so shaking. I need the shaking effect to show the flickering flames but this is too much. I hope I can figure out the reason in my later exploration and learn more methods to make various changes.

• Sketch Link

https://editor.p5js.org/Tinggg/sketches/37zxlE15W

NOC#W01 – Flower 🌸

• Project – Flower

 

• Process

1. Start from playing with the exercise example code

Example code link: https://editor.p5js.org/MOQN/sketches/FDL6XpJFv

2. Change the shape, color and angle to make it more like flower

3. Add Mouse Interaction to make various and unpredictable effects

4. Make an automatic animation separated from the mouse interaction

5. A rectangle try – it looked good but it didn’t meet my expectation.

6. Add Scale() 

7. Add more animations to make it look fancy  (the version I think which is the most like a flower animation)

 (A final draft)

• Reflection/ lesson-learned

It was out of my expectation that I have learnt how to make such delicate images by code in the first class. rotate(), lerp(), translate(), push() and pop(), which are essential in my assignment, are all what I first learnt and help me develop more possibilities of coding. Also, I found the reference on p5.js website was very useful. However, I still need to learn more about vertex() and some math function code. I didn’t know how to use them well so I gave up adding them to my code. I hope I can figure them out through more practice.

• Sketch Link

https://editor.p5js.org/Tinggg/sketches/vlBrk1j7S