Rainbow/Kaleidoscope Mirror – ICM – Week 9


  • OPTION 1: Continue working on your sketch from last week. Integrate something you learned in class this week. For example, how can you use color to change the mood or meaning of your sketch?
  • OPTION 2: Create a sketch that uses color. The sketch must be interactive or develop over time. Can you use color to evoke a specific feeling? Or a series of changing emotions as the sketch progresses?


Rainbow Mirror Gif

Check my code here.

The worksheet for two tasks are quite simple to me. However, for this week’s assignment, I struggled a lot. The original goal is combine seriously.js with multiple videos drawn from the webcam to create certain effects. However, when I use seriously.js, I would have to use WEBGL. With the canvas changed to that, I can only apply to the canvas as one target and could not create layered videos to create a psychedelic effect.

When I went to Alden’s office hour, he pointed that out the seriously.js library has not been updated for 4 years. I also had issues using certain effects within the library. Certain effects that work for me are as below.

I then tried to experiment with the ml5 library and worked on some poseNet examples. I switched the red dot into pineapples. When I tried to incorporate them offline, the dots seem to work but they are not on the exact body point. As the picture below, there is a lag when I move my body from left to right. I think it is because I have multiple video.get() from the webcam.

I don’t like the lag and it does not have the color incorporated into the sketch, therefore, I switched back to my sketch from last week with pineapples. I did succeed replacing the dots with the pineapple. However, I felt less inspired to use pineapple for my sketch.

I tried to replace the background color from black to red to make it change when the brightness exceeds a certain threshold controlled by the slider. However, I had trouble executing it has the png file of the pineapple. I can change the color to yellow or red however, for each pixel that is converted with yellow background, I couldn’t find a way to change it back.

Here is when I am struggling with changing the background color of the png file using style()

Therefore, I went back to create a simple sketch with rectangles and ellipses and try to layer the videos up by changing the order of the commands. I used HSB color mode and adapted colorCounter and counter to determine the change of color for my mirror.

To create a layered effect, I used the code where I push and pop the rotation of images from video.get(). Here are some patterns I got by changing the slider.


I spent a long period time playing around with seriously.js since I really want to utilize the effect in my sketch. Unfortunately, I didn’t figure out how to solve the issue and the library was not developed for the past 4 years. I will definitely use the library in the future.

Published by Yiting Liu


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
<span>%d</span> bloggers like this: