Adaptive candle

Display the dominant color of any online image on an electronic candle

Billy Kwok. Professor Kimiko Ryokai. NWMEDIA C262, Fall 2021

Photo by Paolo Nicolello on Unsplash

Candle is not only a very soothing object to me, it is also thought-provoking and humbling. It symbolizes the divine and sacredness in religious ceremonies. It signifies our grief and sorrow at funerals. It represents hopes and wishes when put on our birthday cakes. Whenever I see a candle next to me, I cannot help starting to reflect on myself. Even when it is simply used as a tool to create a mindful and relaxing vibe, the ever-changing flame and its projection on the walls always make me hyper-focused and satisfied.

Can we take this further and make candle even more personal and functional? What if we can customize the candle with the color of our favorite environment? What if this can be done as easily as copy-and-pasting the URL of an example image of such an environment? People who love the nature can just find a photo of forest, canyon or desert and set the candle color to match it. Skygazer can turn their favorite picture of the sky (sunrise, sunset, dawn, dusk, sunny day, rainy day, or in fact any moment) into a candle flame!

Description

In this assignment, I built an electronic candle that glows in the main color of a given image. I originally wanted to take the live input from the webcam but this idea has been implemented too many times in the past by other students. Instead, I generalize it and make the program accepts any image. By doing so, the candle can display the color of places and objects anywhere in the world, as long as there is a picture of it online.

Diffuser

I used Blu-Tack to fixed the position of the LEDs and make them all pointing to the same point in space. And then I made a cylinder using white paper, sealed the top with translucent tape, and filled it tightly with cotton. I used #fff as a benchmark and found that it mixes the color quite well.

However, the opaque paper wall blocks a lot of light and reduces the overall brightness a lot. I eventually made a refined version with translucent walls which allow more light to pass through with the same diffusion performance.

Iterations of diffuser design — LEDs pointing to the same point (left), original version (center) and refined version (right)

Emulating a candle flame

A real candle flame has a natural dim-and-glow cycle. On top of that, random wind blowing through a real candle flame occasionally speeds up the cycle and such sudden luminance change in fact characterizes a candle flame.

Real candle flame

This brightness dynamics of a candle flame can be modeled by a frequency-modulated sine wave whose amplitude determines the duty cycle of the PWM. The frequency modulation is randomized with a simple probability distribution, which gives 33.3% chance of doubling, tripling or quadrupling the base frequency.

Candle flame effect

Integration between Arduino and Node.js

A tutorial for setting up the serial communication between Arduino and Python is provided in the lab. However, I personally prefer JavaScript more because it allows more seamless integration with the wider web ecosystem. I used the serialport library and created a simple binary serial protocol for sending the color to Arduino in 3 bytes, delimited by a line break character.

Basic Task

The basic task asks us to simply increment the RGB value based on repeated key presses. This can be easily done in Node.js using the built-in readline library. In my implementation, if the value has reached 255, further keypresses will wrap the number around i.e. back to 0.

Basic keypress control

Optional Task

As mentioned in the introduction, I made the color customizable with any online image for more creative input. The dominant color selection is done by the node-vibrant library.

Customize vibe with image

(The color of the LEDs matches the screen image better in real life than in the video. There is a slight blue shift in the video due to the color correction of my phone.)

Components Used

1x Arduino UNO R3
1x Breadboard
3x 220 Ω Resistors
3x LED (Red green and blue)
Some cotton and paper
Some jump wires

Code

Code for Arduino
Code for basic keypresses
Code for image input

--

--

--

Master of Design student at UC Berkeley, solving problems at the intersection of design, technology, and business. Check out billykwok.me / billykwok.medium.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A Retrospective into a rapidly designed solution.

Wireframing with spotify app

Three stories from the frontline of circular design

How to conduct effective user surveys and interviews

UIUX DESIGN INTRODUCTION BASICS

UX is UI (but it shouldn’t be)

Future of urban form

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Billy Kwok

Billy Kwok

Master of Design student at UC Berkeley, solving problems at the intersection of design, technology, and business. Check out billykwok.me / billykwok.medium.com

More from Medium

My thoughts on human languages and computer code

ChangeWindows 7.5

Performing Analysis of Meteorological Data

png

AuroraFS