Interactive Media Arts @ NYUSH
link🔗: https://editor.p5js.org/yg1273@nyu.edu/sketches/2a9e_pd8o
For this week’s assignment, I played with spring and made an animation using spring. Tom and Jerry move according to the noise function. To make Jerry turn left and right, I used subtraction and angle to get the direction and load different direction pictures.
ANALOG RGB LED STRIP
Having seen some experimental light performance shows, I start to think, how about making a narrative light show? So I have the idea for this assignment-a light story box.
Fortunately, I found a laser cut box with lots of cute animals on it. After coloring them, I used a drill to hollow their eyes in the back. Then I put the light strip inside it and found when the light turns red, the eyes look really scary in the dark. So I made a dark fairytale show in the end, using a combination of two songs from The Little Mermaid, one is Under the Sea, one is Poor Unfortunate Souls.
Code: Google Drive
DIGITAL RGB LED STRIPS
Partner: Max
For this assignment, since we have 2*30(+) lights in total.
Our inspiration comes from Mark Rothko, an abstract expressionist who is famous for his color-field painting. His projects always give people a sense of calmness. We want to recreate his work using lights, so Max and I decided to maximize the light strips and we cut it to 7 light strips each with 8 lights and soldered each one with 3 wires.
Then we put some of Mark Rothko’s paintings together and upload it to the processing data file.
To utilize it as a meditation project, we added an ultrasonic aroma diffuser in front of the light.
Here’s the video documentation of the project:
Code: (Google Drive)
DMX LIGHTS
Partners: Max, Ying
For this project, we got the idea from the film One Day. There’s one scene in the film that the female protagonist and male protagonist chasing each other on a field and we want to turn the scene into a light show.
We edited the light composition according to the music using millis(). The most difficult part is to adjust the times so that the lights can match with the music. (and move the chip to upload it every time)
Each of us took charge of one light. The three lights represent the male protagonist, female protagonist, and the background. Our cooperation was really nice which increase the efficiency a lot.
Here’s the video documentation:
Code: Google Drive
(It takes some times to load the image)
TITLE
Floral Clock🌸
DESCRIPTION
Floral Clock🌸 is a clock that indicates people time by showing them the species of flowers that open exactly at that time based on Linnaeus’s flower clock.
INSPIRATION
I got my inspiration by watching a stop motion video of flower blooming, and after found some oscillation programming project online and taking the oscillation workshop, I started to think about is there any pattern or rules about flower blooming?
1. Flower Blossom Video (Image 1)
2. Meet Blobby in p5.js (Image 2)
3. Lissajous Oscillation (Image 3)
RESEARCH
So I searched online and found a very interesting paper called Flower clocks, time memory and time forgetting by Wolfgang Engelmann, Institut für Botanik and Universität Tübingen. In the article, they mentioned that:
“We have observed an interesting high frequency rhythm in petal movement in Forsythia. The oscillation occurs when the flower blooms and petal bends in the middle with a damped oscillatory frequency of about 90 minutes.”
They also mentioned Linné(also known as Linnaeus) and showed the flower clock image.(Image 4)
And then I found Linnaeus’s original flower clock (Image 5) and some derivative clock.(Image 6)
Image 6
PROCESS
1⃣ Step ONE
To begin with, I listed a table of flower that I am going to recreate.
And then I used sin and noise to recreate the flower using p5.js.
| Flower | p5 Flower | |
| 1 |
 |
 |
| 2 |
 |
 |
| 3 |
 |
 |
| 4 |
 |
 |
| 5 |
 |
 |
| 6 |
 |
 |
| 7 |
 |
 |
| 8 |
 |
 |
| 9 |
 |
 |
| 10 |
 |
 |
| 11 |
 |
 |
| 12 |
 |
 |
2⃣ Step TWO
Then I put all the flower on the clock and here’s the Final Demo:
CODE
Three Classes
To illustrate different kinds of flowers, I used three different classes, Sin_1 Class, Sin_2 Class and Noise Class.
Sin_1: For flowers have smooth petals, I used Sin_1 class.
Noise: For flowers with zigzag petals, I used Noise class.
Sin_2: For dandelion, I used Sin_2 class, because it is round.
Positions of the flowers
DEBUG MODE
Debug mode for flower (code: google drive)
It is so much easier to change the parameter of the flower using debug mode! (And I found that after I finished my project🙃). However, it is very nice to develop the color pattern for the flower. The debug properties include the petal number, size, color, sinValue, rotate degree, flower blossom speed, background color (to see if they fit each other) and background transparency.
Debug mode for clock (code: google drive)
For the clock, I added a debug mode to check the edge of the hand of the clock. Because the background for the flower has transparency, but if I want to apply the same background to the clock hand, it will leave trails. So I put an ellipse under the clock hand.(I tried create graphic function but it didn’t work) Other debug properties include flower blossom speed, background colors, background transparency, clock hands length and thickness.
POTENTIANLS
After the presentation, I got many helpful feedback and I’d like to further develop my project:
1. Instead of having a static background, it can also change according to the time. (My thought is maybe have a bigger size semi-transparent flower that opens at that time in the background?)
2. As a clock, you can mark the number (using flower?) to indicate time.
3. Add the flower open-close animation(use scale and rotate?)
4. Try to add (a little) noise value even using the sin mode.
5. The color pattern can be more unified.
6. The hour, minute and second hands can also have some diversity.
CONCLUSION
Overall, I think this project has so many places to improve and I would like to utilize it step by step. The research process was so much fun and I am excited to see something that is really happen in nature translate to programming. I’m looking forward to the second half semester.
REFERENCE
Link🔗: https://drive.google.com/open?id=1M5oFCPvjFbCCMp9S2nvC4JmlcPxCB7X0
For this week’s assignment, I played with attraction and collision to make a sketch that mimics two people bump into each other accidentally and develop ambiguous and romantic feelings to each other.
I used random(-2,2) for the force on each person — they cannot always meet each other easily every time, sometimes it takes some times–isn’t it similar to our real life?
Work Cited: Heart Curve: https://youtu.be/oUBAi9xQ2X4
Link🔗: https://docs.google.com/presentation/d/13mY-3GrYdXNdSQMV8uExOgiusNH7OOsw0r1nAzpKRv8/edit?usp=sharing