Assignment
- 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?
Presentation
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.
ascii 
tvglitch
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.
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.
Conclusion
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.
