Author: Tiger Tian

Posted on

NOC – Week 9: Elastic Bracelets – Tiger Tian

Date: 04-16-2019

Click here to visit on p5 Web Editor

For this assignment, I utilized the concept of spring to make some elastic bracelets with p5. I also integrated the concept of particle system to create bead particles and spring particles within one bracelet instance. Every two beads that are next to each other have repulsion between one another, while the string between them constantly pulls them towards each other.

One difference I made to my project from the spring that we implemented in class is that, I wanted it to be more like a string, not a spring – that is, only when the stretch value is above 0 (actually stretched) would the spring work, and the two beads are pulled towards each other.

When you click on one of the beads to drag it, it turns red.

Posted on

Week 8: DMX Project – Tiger Tian

Title   A Day in the City

Partner   Rosie Gao

Presentation Date  04/02/2019

Project Description  Considering the brightness of the DMX lights, we decided we would do something that corresponded with their big scale. Thus we came up with the sky to simulate the changing color of the sky in a city.

Our two-minute composition could be divided into the following sections: dawn (0:00) – sunrise – morning – noon (0:30) – afternoon – sunset – evening (1:00) – neon lights (1:20) – midnight (2:00) For each section we found an image online to get sample colors from. Since we had three lights, we aimed them at different heights of the wall, while also mixing the colors by giving them some overlap with each other.

For the neon light section, we picked colors from this image of a Japan city we found online. We drew our inspiration from the concept of “Cyberpunk”, which is a sub-genre of sci-fi that has inspired movies like Ghost in the Shell and Blade Runner 2049. Cyberpunk works usually feature a wide use of neon colors in city scenes.

Below is our composition.

Posted on

NOC – Midterm Project: Pop the Balloons! – Tiger Tian

Date   04/03/2019

Title   Pop the Balloons! (Click to view on IMA nas)

Introduction   I drew my inspiration for this project from a PC game I used to play on my dad’s laptop when I was around 4 years old, which is called “MozPong” (click to view on YouTube). I wanted to make something similar, where player uses a controller to keep the ball from falling to the ground. To make it more interesting, I added the balloons, which player can pop with the ball to score. Once the ball falls out of the screen, the score goes back to zero.

Concepts Involved   Obviously, gravity is a very important physical element here. Nevertheless, the core feature of this project is the collision between the ball and the controller. It is a little bit different from what we learnt about collision in class, because the controller is not an ordinary object – its movement depends on mouse position, so does the velocity. Instead of the regular update method, I used two variables – current mouse position and previous mouse position – to keep track of mouse movement and implement it on the controller while also having a this.vel variable for it at the same time. Besides, repulsion happens between every two balloons, so that they dynamically maintain a balanced distribution all over the canvas.

In terms of the sine function that we newly learnt, I utilized it to make the balloons “inhale and exhale” (alternately increase and decrease in size), and make the fireworks effect when a balloon blows up. To be more specific, I used sine and cosine function to calculate the initial position of the firework particles around where the balloon previously was.

dat.GUI   Thanks to dat.GUI, I added a debug mode to the project. It’s a boolean variable, and if you tick the box at the top right corner, you can see what all the velocity vectors are actually like – their magnitude and direction – including that of the controller, which is also the key point in this project of how to control the strength of each hit at the ball. The larger the velocity of the controller, the harder the ball is hit.

Some other features that I implemented using GUI are changing theme color and modifying the amount of balloons on screen. Being able to adjust the number of balloons basically means if you think the game is a little hard and you can’t seem to hit the balloons, you can increase the chance of hitting them by increasing the number of them.

Aesthetics   I mapped the color of the balloons to their position, so that all the colors looked harmonious together. I added a little triangle at the bottom of each balloon so that they looked more like balloons. For the fireworks, they start out in the same color as the popped balloon, but as they fall they get redder-ish / yellower-ish. The appearance of the controller echos that of the ball. I added a half-transparent layer on top of the actual object, so that even if the player changes their color to black, which is the background color, they’re still visible.

Presentation  Also, I wanted to defend myself that this game is far less hard to play than it looked during presentation! Because of some weird setting of my laptop, when things were projected on the screen, the canvas got larger but objects remained small. I think it was because I used pixels to scale them. Below is a video clip of me playing with it – not hard at all, right? You can try it yourself 🙂

Posted on

Week 7: LED Experiments – Tiger Tian

Title  20 – Sound Visualization

Presentation Date  03/19/2019

Rationale  Since the requirement was to compose a one-minute piece of narrative with this analog LED strip, I thought that music would be the easiest the way to create an atmosphere and build a mood for the audience. Therefore I used a piece of music (called “20”) that I composed with GarageBand earlier this year, cut out a one-minute snippet and wrote the LED composition according to how the music evolved.

Project Video

Documentation  Below is a video of me playing with the strip before actually starting composing. Given that there’s only three values to change to control the entire strip – r, g, and b – it’s basically the same thing as controlling an RGB LED, the only difference being that the strip would require a larger voltage and thus an external power source.

One friend told me that the music sounded like wandering in a forest, so I used green as the theme color and based most color transitions on green. The biggest challenge in composing was to make several values change at the same time but at different speeds that don’t interfere with each other, which would be almost impossible with the appearance of delay function in the code. Even though I didn’t get rid of delay function in the end, I learnt to do it by using millis function instead.

This is what the circuit looked like.

 

The feedback I received for this assignment included compliments on how well the music and the composition matched, and that the transitions in the composition were smooth. Nevertheless, some suggested I give it a more concrete theme, such as wandering in universe, and a better physical setting to contain it.

Title  Marine Creature

Partner  Rosie Gao

Presentation Date   03/28/2019

Rationale  When we were discussing the theme of this project, we decided to use another piece of music that I composed, which made us think of the ocean. Thus we decided blue be the main color, and that we would create an underwater effect with the two digital LED strips that we have for the assignment.

Project Video   Video

Documentation  For this assignment, we put more effort into the physical setting than I did for the last assignment. We found a cardboard box whose size approximately fitted what we wanted, so we used a spray print to make it blue. We ordered reflective materials online for wrapping.

When we started writing the code, we realized that it was a little more complicated than analog LED strip, as we are able to control each of the LED’s separately. Though the FastLED library is not difficult to use, weird problems occurred and it took us a lot of time to debug. Eventually we decided to each write a version of code and then put them together. Because both of us used the music to time our composition, our compositions would easily match. My favorite part of the composition is when my strip starts to blink to the drum beat, Rosie’s strip displays fire-like patterns.

In terms of the physical part, we hid most of the circuit in the box, letting the wires out through a hole we cut. We wrapped the strips in a transparent pipe that we made by rolling a piece of plastic paper we bought, and put another piece of reflective paper on the box. Together with the reflective and refractive materials, the strips looked more colorful while still featuring blue as the theme color.

Source code of both assignments on Github