The light installation imitates the sky colors, captures the moments, and brings calmness to the clock, a device that is often seen as a source of stress. This project is exhibited in ITP Spring Show 2022.
Relevant Tools
C++, Arduino, websocket, HTML/CSS, Javascript, Fusion 360, Figma
My role
Programmer, Website developer
Teammates
Zeshu Zhu, Meijie Hu
Ideation
Walking to Brooklyn Bridge Park to catch the sunset is one the few things that allow me to take a breath from the busy New York life. Time seems to stand still when the warm sunset cast a wide spectrum of colors to the sky. The colors of the sky are transient and everchanging, which is the reason why I want to capture it through the clock and emphasize its relationship with time.
Vienna design collective Breaded Escalope has created a clock that uses shadows to display the time when a finger is placed in its face.
This Limited Edition Triwa watch challenges the concept of time through hazy dials & colorful, cloud-like watch hands to represent the transient moment of dawn.
Interaction / Score
The clock is designed to be simplistic to focus on the lighting effect. the base color of the clock is made of the gradient blend between minute and hour hand color, and the second hand color will move across the screen slowly. To make sure the color across the clock can blend smoothly together, size of the clock is a medium-sized so that light emitted from leds can reach beyond the center point.
One of the early ideas is to extract color from the sky image as a ring and project it to led. This idea could potentially create beautiful gradients, but it would not help serve the function of a clock.
Sky ring translation
To change the color of the LED, user can access the customization panel by scanning a QR code, and upload pictures of sky to the online gallery. User can use color pickers to choose three colors from the selected image, and the colors will be updated to the clock hands via BLE.
User can view the BLE connection on the top right corner, the clock will blink as well to indicate successful connection. By introducing a digital component, we aim to make this a collective experience that can be shared with others, and to remind people that we are all under the same sky.
(Unfortunately, due to web BLE service limitation, access from phone is limited to android users)
Process
BILL OF MATERIALS
Technical Requirements
- Physical – 3D modeling, CNC Routing, Arduino fastLED, Arduino BLE
- Digital – html, css, BLE.js
FABRICATION
2/25/2022 – First-round fabrication
Fusion 360 → MasterCAM → CNC
Meijie learnt how to operate CNC machine with Aiden and this page (and now I prefer CNC so much more than laser cutter for woodwork…) There was a miscalculation for the inner diameter that made the ring smaller than the length of the 120-leds strip, so I had to remodel and CNC another one.
Gamma Correction
Helpful Reference for creating gradient
Conversation with lighting artist Erwin Redl –http://paramedia.net/externalpages/NYCTheHole.php
how do you get the gradient?
thin board to block between outer/inner led strip, 16-bit color palette,
control the RGBW independently for each led strip,
more color doesn’t mean better, blue red yellow
2/28/2022 – light color test with Gamma correction
In order to get the light color to reflect the color we see on the screen, we added gamma correction to the rgb values we got from the color picker to make lighting brightness correctly reflect the brightness of the display color.
Website
To create the website, we needed to provide the user with a timer, Bluetooth, upload image and color picker function. So we chose to use javascript and jquery to implement most of the features.
Since the others are fundamental programming points, I would like to share more about Arduino BLE in javascript here.
Although p5.ble.js is an API designed specifically for p5.js, we can still use most of its features without applying p5.js. However, since Arduino can only accept an array of data, I defined the data obtained by the user as the global variables in the color extraction part to facilitate the data transfer.
Then the obtained data will be transformed into a string of arrays by Unit8Array in function and transferred to Arduino. The specific splitting will be done in Arduino part.
Arduino programming
3/1/2022 – Real-time time update, real-time color update, used the internal rtc module
System Diagram
Schematics
Some issues we encountered:
- We switched from animating the light using 3 nest-in for loops (takes 1h to finish a loop) to animating with rtc time update (very fast looping), which allows us to update color in real time.
- To prevent from updating the LEDs too frequently, we only update the LEDs when we detect a change in values in rtc values.
while (central.connected()) can make it hard for the clock to keep running when no peripheral is connected to it and execute actions at the moments of connection/disconnection. Instead, we used event handlers to listen to different events, which makes the code much simpler and easier to execute a wide ranges of actions.
We added time calibration button on the web since internal rtc only update to correct time when code is compiled to the Arduino. This makes it easier to recalibrate as long as BLE is successfully connected.
Final fabrication
Meijie made the inner diameter of the front ring small to better hide the led strips, and widened the inner diameter of the back rings to just fit the length of the leds. We also minimized the connections by removing unnecessary components (external RTC, capacitors, resistors) and fit the wires into a small chip. As shown in the image, I adjusted the electronics pocket into an asymmetrical shape so that it is slightly easier for wire to plug into the Arduino board.
