The Water Flow Metaphor

This week we looked into serial communications, and have our arduino and web work together. I took one of the sketch I had in previous ICM class, and manipulated it using an analog value.

Here’s the photo of my sketch, I controlled the water flow as the potentiometer turns on and off.

 

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.