Tinkle, part 2/2 – website

For ICM finals, I extended our PCOMP project, Tinkle, into a website. The idea is to make user rethink about this intimate space we inhabit every day, and let our thoughts freely flow while on it. After visiting the physical toilet we build, participants either leave messages down or listen to other people’s thoughts, through the website. Thoughts could be random, from daily happenings to life expectancies.


I drafted the wireframe and make sure the two major functions are clearly presented to users . P5 voice recognition, sound library, and WebGL techniques were implemented into the sketch. The WebGL was painful to work with since my laptop was too old to support any fancy new web technology. The workaround for that is to use Firefox and run local server.

General Feedbacks after Play-test:
– Add background music over voice over
– Make sound visualization more cohesive to sound waves or equalizer
– Simplify the interaction: physical toilet guides the user to think, while website focus on recordings

The ultimate versions of this website will probably looks like this image from Trainspotting movie.

Playtest and More

In preparation of the play-test, Suzanne and I cut out a toilet-shaped seat and lid and put them on top of a chair. We agreed that the piece should be isolated in some way; whether enclose with cardboard, curtain, or even install near a corner.

System Diagram

Above is the system diagram. User enters and sits on the toilet. Once they are sitted, the sound piece will be played. They hear the piece and record a response. They get a note from the toilet then exits.

Questions Still Need Figure Out:
Do user get a printed message before they end the experience?
Do we want them to be able to hear their own recordings?
Or does it make more sense to play other people message?

BOM, Timeline

PCOMP ideation v2

1. 90s Childhood Games – More Interactive

How to Interact:
2 people play together, each playing one sensor. One who first connects in four wins.

Plywood – rack
Silicon – chips
Sensors – knock, temp, LED.

6″ x 6″ laser-cutted plywood
36 pre-installed chips (each with 2 sensors)
reset button

– What sensor should I use? Knock, temp, LED.

How to Interact:
User press the buttons and guess where the bomb is.

Minesweeper algorithm


2. Real-time API
Flight, traffic, stars.
Indian Train

Based from real-time API, interaction piece respond to it. Something moves, something goes off.

ICM Final Project Ideation

 Concept#1: Color Emotion

“Color, rather than shape, is more closely related to emotion.”
– David Katz

Colors have been used widely in photographs and films to convey an emotion. The idea for my final project will be to make a color detection from a screenshot of the movie and guess the mood.

Concept#2: Ambient Sound Covers

I am always fond of generative art. I wanted to created a series of them from p5 sketches, laser-cut the results, and combine with ambient sounds.

Concept#3: Camera Storytelling – Pan and Zoom

Concept#4: Living in the Browser World

Concept#5: Real-time API
Possible interesting APIs: stars, flights, suicidal rates.

ICMadness – Love Forecast

For week-10, all first-years were gathered at the floor for an ICM workshop. We were paired in groups of three to work on a random project. All project ideas are generated here.

Dana, Carol, and I decided to spin the wheels individually on our computer and choose the one we most like. We then agreed to work on “Make a project about LOVE that RANDOMLY GENERATES with WEATHER DATA” because it sound fun.

Fortunately, Carol was able to work with a weather API before, so we don’t have to start everything from scratch. We quickly looked into the parameters for weather data and supply it with datas related to love.
1. Chance of rain = chance of love
2. Humidity level = clinginess level
3. Wind pressure = obstacle to your relation
4. Average temp = Overall quality and healthiness

We further wrapped the whole concept under a forecast telling love slit, and included a “suggestion” section for users such as “Put your lucky coat today”, “Red flag warning”,”Possible heat waves” and so on. The result look something like this.

It was a fun and educational experience, knowing what people could come up with in just two hours.

Full Code

PCOM Final Project Ideas

1. Sound manipulation from everyday objects.
I would love to see how things we use and see each day can be manipulated into a musical instrument. Some of the “instrument” I have in mind are rubber shoes, kitchen utensils, or even washing machine. The Nike/Free Run Plus project serve as one of my inspiration.

2. Self-motivated machine.
In ITP, I often felt my time fleet away without me even noticing, like I need 36 hours to catch up with all the workloads and classes I am taking. I wanted to create a installation that moves on its own without people interacting with it, a truly self-motivated piece, to make a resemblance of my current status.

Symmetrical Faces Simulator

Week 8, we were introduced with video and sound. I created a mirror image capture similar to mac’s built-in photo booth effect. I used to play it back when I was in high school. Another inspiration to this project was the beautiful, symmetrical portraits done by Photographer Alex John Beck. It shows us how human faces are not exactly symmetrical.

Below are the attempts I did in p5. I also created a slider to control the amount of sides revealing. I would like to add a feature that would automatically capture the left and right symmetry of the user’s face when aligned on center.


Full Code Here:

Tickle My Tummy Candy Dispenser

Halloween is such a huge thing in States that even our PCOM midterm revolves around the theme. Which is weird for me and my group mate Arnab, because we never really get to celebrate it back in our countries. We heard that there is even a Halloween parade coming up this week, and streets will be shut down partially.


The initial idea for the project was based on the hammer game. But instead of hitting the target as hard as you can with a hammer, you squeeze it.

Breaking down the component of the hammer game, we have:
1. a input where force is detected
2. a visual and audio output to represent the force (a.k.a score)
3. a reward

With the components listed above, we then decided to make it a candy dispensing machine to have it more relevant to Halloween.


After setting our idea, we quickly went to production. We were able to talked with a few people who had similar projects before, namely Lola, Cammy, and Armitabh. Lola lent us a  MPX 5010 air pressure sensor which we tested on stress ball, enema, and silicon. Enema and silicon works surprisingly well since they both have a hallow space inside.

We decided to customize our own shape by 3D-printing a mold and casting it with silicon. Cammy recommended us to get the Smooth-on Eco-flex 00-30 on it. We got it from the Compleat Sculptor. They have all variations and samples of the silicon.

After getting the sensor to work. We worked with the lights, audio, and motor, and fabrication.

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.