Let It Rain

I saw this really soothing, rain-pouring GIF and decided to rebuild it with code.

The construction process started with a single dot. Then I loop it to form a drop of rain. Then wrap it under an array with random width and height. Below is a contrast of 100 arrays versus 500. Though the higher array version looks closer to my reference, the render time it had was probably two times slower.

After finding a suitable count for the rain, I decided to add some random horizontal bars for the rain to interact, but did not succeed.

Full Code Here:
https://editor.p5js.org/shujuuu/sketches/HkBoADq5m

Blend in – Short Animation

The whole animation started when Tianyi saw this wonderful artwork. She then elaborated the artwork into a storyline.

After initializing our storyboard, we prepared the elements to be use in after effects. Most of the assets were hand-painted with watercolor since we aim for a mix media approach, combining traditional and digital art.

We divided the clips among ourselves so we can work individually and combine the clips afterwards. The three of us were able to play around on our own parts, adding personal preference and touch, while still keeping the storyline clear.

One cool experience we had together was the time we were asked to leave TISCH by the guard because it was over 12-midnight at that time. So we have to go to the library to continue our work.


Full Video Here
https://vimeo.com/user11728009/review/294075686/3191a6f368

Reconstruct Codes

We were asked to reconstruct our codes, make it cleaner and readable. I watched the youtube videos and take look into array and classes. I get so confused with the use of class, where to put them, where to reference, where to assign their parameters.

Full Code Here:
https://editor.p5js.org/shujuuu/sketches/ry6tRkf5X

Questions:
1. What is the purpose of class? Seems like we can do everything with functions and objects
2. When I input class, I get confused on where to put it, reference it, and call it.
3. How to transparency an image?

Interactive Technology – Presence

Last weekend, Maker Faire held its annual exhibition at NYSCI. I volunteered to help the 2nd year’s out and was assigned to this project named Presence, a project of Dan Oved.

It was really a fun project. By using the webcam, it captures body poses and reflects them real-time on screen and on the installation. If you do not feel comfortable moving your body around, there is also a midi set that act as a controller. I love the fact that it involves so little explanation for people to make interactions. They just know what to do; some sway their arms up and down, some do jumping jacks, some even dance!

One of the biggest problem we encounter is when there are other people present in the background, the program gets confused on who to interact with. Also, I think the pattern created in the real world is not as obvious as it is portrayed on the monitor.

Algorithmic Patterns and Buttons in p5js

This week, we were introduced with for, while, and nested loops. Our assignment was to worked in pairs and create an artwork with:
1. algorithmic pattern
2. button/slider

Aaron and I decided to play around individually with our codes first and combine halfway with whatever we got. I created this spiral spinning wheel with loops and rotation. And he created an self-expanding colored ellipse.

We both use ellipse as our base design, so we decided to combine the two elements with a slider that alters the spinning offset and expanding speed.

Full Code Here:
https://editor.p5js.org/shujuuu/sketches/B1opBZwYQ

Thoughts, Questions, Evaluations:
1. Rotate and translate are tricky functions!
I had a session with the residents because I could not figure out how to rotate my spiral. Apparently, it was because I put the translate before even drawing my spiral. The translate function used to change the center point of the spiral should also be reset to the original of canvas before drawing.

2.  Combining other people’s code
Codes get messy when combined together. Aaron and I need did some debugging before we were able to add the slider control function.

3. Slider control function
We actually just copied and tweak a bit of the code from the resource. They use a new function called constrain. I am thinking that it’s doing the same work as the map function.

Tasty ITP edition

I love watching Tasty videos. They were always relieving to watch. Shivani, Sachiko, and I decided to make an ITP edition for our stop motion project.

First, we think of the recipes we could make under three minutes. Because who are we kidding? ITP students do not have time to cook a proper meal. Then we write down random things we could use to substitute our ingredients. For example, post-it notes as cheese, baby powder as salt, sand as pepper, and so on.

We seen most food preparation videos shot on a top view angle, so we set the camera the same way to capture the whole process. In a span of three dishes, we shot nearly 500 frames, with 12 frames being one second.

Reference shot: Tasty Japan


Top View Set:
 

Here is the final video.

Thoughts and future plans:
We really love the idea of putting ITP found elements into the dish. It helps set the mood and illustrate the fact that students spare their time eating as they do their projects.

Subway Gardening

Living in New York, we get to enjoy the twenty-four seven service of MTA. People ride on them on a daily basis, to get to work, school, home, and other places. We spent a big amount of time inside, but never really enjoyed the space. It’s gloomy, stinky, and lifeless.

What if we could make the space more interesting to commuters? How can we make use of new technologies and bring more life to it. Maia and I decided to work on this project, a project about Subway Gardening.

From the photos we took, we found great potential on it. It’s spacious, has all-day (artificial) light, and even a guaranteed power supply.


After the observation, we decided to recreate a hydroponic, self-sustained system for plants to grow. Here’s a few sketches we had.

The system must:

  • Build on existing subway structure
  • Supply light, water, and nutrients needed in a photosynthesis

 

Turning LED with Creative Switches

After being able to light up a push button LED, we were asked to make a creative switch. I decided to try toggle switch, when switch to one side, one of the LED lights up, when switch to another, another LED lights up. But then I failed. Both LED lights up when switch is on one side. Which is not what I want. My good classmate Tushar came over and helped me with the sketch and board.


This second one was a flat iron switch! When the two ends touch together, LED lights up. I grab some aluminum foil from the shop and wrap them around the iron. Then place two wires to each side respectively.



The third one was a swiper switch, that when card is swiped across swiper, LED lights up. The shapes were created using laser cutter. I assembled them and included coil tapes and jumper wires.