Author Archive

Beautiful Now: Glowing Heart

Present Video:


For the Proximities project, we decided to create a piece of multi-color glowing intimate clothing whose colors can be controlled through a digital interface. We embed Arduino-controlled heart-shaped LED strings into a wearable piece of velvet intimate camisole.


How it works:
The color of the LED light is controlled by the number input on the digital screen. The color code is in RGB order. The camisole is black velvet when the light isn’t shined. When you put in a color code and activate the LED, it shines through the velvet material into a centered heart shape. Every time you change a number, the LED lights up in a different color. The main color scheme that controls the range of colors can only be modified in the LEDcontrol code. In this piece for right now, we chose to put blue on zero to increase our chances of getting red and purple-ish colors.

screen-shot-2021-12-12-at-6-00-43-pm screen-shot-2021-12-12-at-6-00-19-pm
Design Concept:

The wearer must be close to the digital interface that controls it. In our case, it is the laptop. This requires a shared-spatial relationship for both the controller and the wearer. Limited by the length of the USB cable, the wearer and the controller can be the same person. We chose the wearable piece to be an intimate piece because we want to emphasize and embrace the loving relationship between couples and ourselves, our mind and body.

When worn by two people, the lights-up revelation of a heart is a warm message from the controller to the wearer about their love for them. When it is worn and played with by one user, it refreshes the user’s experience of wearing underwear and reminds them to love themselves.  Underwear/intimate wear is often overlooked as the basic we wear everything else over. It doesn’t embellish the look of us nearly as much as what we wear over it. And we often rush to put on other clothes instead of taking a moment to appreciate our most real selves.  We want to create a fun piece that promotes a healthy and positive visual interaction between one and oneself. Through wearing and playing our piece, we encourage our users to see themselves from a new perspective. To notice the glowing heart as a nice reminder of the importance of self-love and confidence. You are beautiful the way you are. We picked LED under velvet material because the darker the surrounding is, the more obvious the LED shines through the black velvet. Just like how the darker it gets, the more important it is for us to hold onto our faith in ourselves to pull through.

This piece, by sending a visual message and provoking interaction with the wearer, constructs this special spatial relationship that aims to put a smile onto the wearer’s face and some positive vibe alongside it!

Arduino Code:

P5JS Code:


Potential future development:


Light Buzzer


My design includes the light sensor and the buzzer. When the light sensor senses light, the buzzer sounds, and the LEDs flash. This piece can exist just fine on its own as long as it is put in a place with light and darkness. I was inspired when I was rewatching the Vampire Diaries. If there is a vampire in the world, they might like my work. Does this count as inclusive design?

Experience Video:

For presentation sake, I intentionally use my finger to block the light from reaching the sensor to show that the buzzer and LEDs stop instantly without light input. But it works independently from human interaction as well. The light sensor is extremely sensitive. So I thought this piece can also be used as a light-triggered alarm that would buzz when a lockbox or a locked storage unit is opened.

How it works Video:

with light:img_1844

without light:img_1846

Arduino Code:

code1 code-2

Code Reference:


Color Blocking Body Glitches

In this experiment, I designed simple geometrical responses to movements of designated body parts with PoseNet. The glitch-art-like tint filter emphasizes the trippy imaginative space created in my webcam. My collection is designed to discover the beauty happening in the responsive relationship between 3D realistic webcam body captures and graphic shapes in motions.

The overall experience is super rewarding in the most surprising ways. The independent process of modifying existing codes, reading different variables, trying to write my own, repeatedly debugging through the errors, and successfully running it after all is a very hand-on, challenging, yet solid learning process. I find myself remembering the codes I debugged the most, reading the codes I write myself the best. The successful takeaway here is not only the technical knowledge on how to make body responsive art in p5.js, but also the feeling of inspiration and a sense of confidence towards coding and programming.

The hardest part in this experiment for me is understanding the relationship between the p5.js server and external elements like PoseNet. Editing the index.html and understanding codes referring to external variables gets confusing sometimes. But it truly is the best feeling when I navigate myself out of my confusions. And now, I look forward to all the cool things we will get to do together in the very near future.

#1 B&W Nose Stroke Brush:



This black and white nose-tracker tracks the location of the nose in continuous motion. It also tracks the eye coordinates: the closer you are to the webcam, the larger the circle will appear. The further away you are, the smaller. This is the first thing I made. I was very happy to figure out how to replace mouse with body part tracking. Something to add would be another motion that stops the tracking of the nose. Like if the program detects the wrists, the nose tracking motion stops. It would also be cool to see randomized shapes instead of just circles. I wish I figured that out.

#2 Glitching Nose filter:


Building on my #1 piece, I added the webcam and the glitching tint filter. The tracking trace also went away so the dots are more like a moving filter than a paint brush stroke in this one. After doing the Related Work on glitch art, I want to touch upon that topic in the experiment. I really enjoy how the tint filter turned out, adding pixilated color blocks onto the webcam as well a delayed capture time. The nose size shrinks when you are further away and vice versa. The visual effect of delayed capture really adds a vintage and trippy vibe to the work. I wish I figured out how to allow more than one nose detection in this one.

#3 Glitching Performer



I created these four thin triangles hanging from the y axis with coordinates to both wrists and elbows. When you make the triangles very thin, they look like strings. The red ball like the clown’s nose moves in the same left/right direction as the nose unless the nose stays centered in the screen. I love how this is capturing actions happening overtime all into one screen. In action, because of the delayed capturing of multiple actions into one frame, the moving red ball will turn into a thick round stroke instead of a ball every time the nose moves. It appeared as interesting to me to include Marionette string and clown nose together because they share similarities in my opinions. The string and the nose are all signature visual features that in some way define and limit the performers’ freedom on stage: what they do, how they should act, and who they must please.

#4 Tripping:


The last piece is made up with four triangles coming in from the edge of the canvas that all share one common coordinate, the nose. The triangles will all track the nose as the nose move and reshape themselves to keep that common coordinate on the nose. The transparency on white, black, and yellow triangles makes it harder to distinguish them from the blurry and half transparent background of realistic stuff. The pink triangle in full opacity is meant to contrast the rest and remind us that this visual is not real. The fun thing to do here is to place your nose in the center perfectly to turn the pink and black triangles into lines, making them always disappear.

Additional Documentation:






Access codes through Editor Links.

Use of this service is governed by the IT Acceptable Use and Web Technologies policies.
Privacy Notice: It is possible for your name, e-mail address, and/or student/staff/faculty UserID to be publicly revealed if you choose to use OCAD University Blogs.