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.

Update 03.11.19: Try ignoring chrome blacklist via terminal
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome –ignore-gpu-blacklist

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

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:

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:

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:

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?

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.

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?