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:

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.

Animating with p5js

Mid-Autumn Festival is this Sunday! It’s one of the big event we celebrate in my country. Traditionally, we would gather for moonlight BBQ parties at a house or riversides. An interesting fable about this event is that once there was a rabbit who was sent to the moon by the gods because of its kind act toward them. Having said, I relate myself as the hare who is far away from home this year.

Development & Difficulties:
In this project, we were asked to include two things, elements that could be controlled by mouse and elements that could change independently over time. I tried to input the criteria in my artwork with the following elements.
1. Star – shines at random position continuously within the canvas
2. Moon – moves and resizes with mouse movement
3. Skyline – color changes with mouse movement
4. Rabbit – eyes and shadows changes with mouse movement

One of the problem I encountered was to map more than two sets of colors in p5js. I was intending to do a more complicated color mapping with the skyline at first; changing the colors from orange to blue to dark blue as mouseX start at 0, to halfway its width, then to full width. Sort of like a sunset effect. But I was not able to achieve it. One of the residents told me that I might need to bring in the if-else statement to do so.

Full Code Here:

Q: How to map three or more sets of colors for a given width?

Drawing with p5js

In the first week of our class, we looked into the possibilities of computational media and some inspiring artists that created their artpieces with codes and algorithms. Some of which are Sol LeWitt’s Interaction of Colors, Vera Molnar’s Hypertransformation of 20 Concentric Squares, and John Cage’s Williams Mix. We were introduced with p5.js, a javascript library that will be use as the main tool for this semester.


Our take home work was to do a screen drawing through p5js. I start off with a quick sketch before coding. The process was basically trial and error, guessing placements for all the primitive shapes. Despite the simplicity of my drawing, it was time consuming. I was wondering if there is a simpler way where they could import SVG into p5js, that will be a time-saver. Also, I feel like the lines and shapes I drew out with code is not as smooth and freely as compared with my sketch.

Full Code Here:

Interest & Experience:

I never thought I would want to start coding. Working as UI designer, I deliver wireframes and visuals to developers; watch them turn those pages to interactive sites. Often times, we would have a couple communications before they could grasp the big picture and begin to get everything right. I believe it would be a lot easier for designer to know a bit of programming, that way we can think like the developer and minimize the language barrier.

By the end of this term, I wish to be able to visualize data through programming and to build a full-interactive site. I imagined the experience would be more like giving birth of a child on your own rather than having doctor assists you.

1. Does p5js support SVG?
2. How to comment multiple lines of code?