ICM-Final – Relative Time (Final Version)

Demo (No sound yet)

Collaborator: Roi Ye | Visual Design, Sound function Coding.

Github Link: https://rebeccazhou666.github.io/RelativeTime/

Story Behind

Ideation

In ICM final, I wanted to visualize some interesting collective data. I collaborated with Roi. She had a very interesting thought which visualized the passage of life as clocks. So how to codify the passage of life? We thought that it would be a great choice to use our heartbeat, in that it represented the passage of life as well. Gathering different people’s heartbeat would be a great visual impact for those who experience others’ passes of life and themselves as well.

So our main direction was to create unique patterns for each person using their heart rate and put all their patterns in the same page.

Pcomp Side Testing

Pulse sensor testing

I borrowed a pulse sensor from Rachel (Thank you!!!) and tested it. It could detect our heartbeat and transmit the real-time pulse data and estimated beat per minute to computer.

Here is the testing video.

Pulse Sensor Testing and Serial Communiation

ICM Side Design

IDEA 1 | Sand Clock

Firstly, we wanted to use the sand effect as the representation of each person’s heartbeat. I tried to build sand clocks for each person. The center of the sand was a-centric and rotate with the speed according to the heart rate. I made a demo and found that it was not working as good as we expect. It ran too slow because each of the clock was composed of 4000 point particles and each single of them rotated on each frame. You can see how computational heavy it was if I add clock to three or more. So we gave up the plan (sorry we didn’t know where we put this version’s sketch and the demo was lost).

IDEA 2 | Generative Pattern Clock

Then we did a little bit research and found the p5 generative pattern tutorial on Youtube (Link Here). I loved the generative pattern that can differentiate each of person’s identity. Roi seemed not so satisfied about the representation because it loosely related to our concept. But we’ll give a try. So I made a demo of adding the generative pattern clock and animated them.

Generated Pattern Animation (The heart rate decides the rotation and scaling speed)

Roi wrote the function of adding random clock sounds according to the animated speed and also “hover to see the name” function (Here is her p5 sketch of these two functions).

I integrated all functions by enabling serial communications and adding data collection page. We present it in the final class.

IDEA 3 | Clock

After final presentation, we received lots of feedback including Allison’s. There was one thing right about our design: it indeed loosely connected with what we wanted to convey. So Roi and I decided to redo all the designs and codings.

We wanted to go back to our initial concept that visualize the passage of life just like a clock. We were really inspired by the clock installation made by artists named Humans since 1982. So Roi draw all the design again and I wrote all the codes from scratch.

Visual Design by Roi Ye

Figure 1-2 | Data Collection Page. Jump to preview page once it detects heartbeat.

Figure 3-4 | Preview page. See your unique heartbeat clock whose rotation speed according to the heartbeat with unique tiktok sound. Add name and birthday to recognize your clock.

Figure 5-6 | Overview of all persons’ heartbeat clock and clock sounds. Once your mouse hovers on a specific clock, it will show your name and birthday on the clock and only play the tiktoking sound of this clock.