Connected Devices Week 2

This week, we are exercise to control a smart device (Hue light) with front end javascript.

I downloaded a example code from tom’s github, and then try play with it a bit.

And then I tried to control the light with a p5 sketch. so i combine some of the code i wrote before to a particle simulator. code here.

from the p5 code, i detect the center pixel’s color. and try to use that color to control the light. Because p5 pixel out put RGB color, I found a code to convert RBG to HSB.

And then combining three code, i was able to create this.

Screen Shot 2019-02-09 at 8.44.00 PM

In the beginning , i kept getting error “Internal error, 404”. It would success in the beginning when i run it for a bit, then give me that error message. So I thought that might be because I send the message too fast, which is the case, when i slow down the rate of the data put, it work. but the color didn’t change as much as i expected. When i go back to the source code, i notice the max of saturation slider value is set to 65535 instead of normally 360. So changing that, it work perfectly.

heres the code








Connected Devices

I decide to use the ultimaker control as a model to build on. I listed down what the option there are from the machine and how to get there.



Continue reading “Connected Devices”

Hacking the Browser 1

This week we are creating a responsive website, I decided to use the battery api, with the reference codepen page. From reading the code, I see that the information is being saved as a object.

let batteryState = {
 level: 0,
 charging: false,
 chargingTime: Infinity,
 dischargingTime: Infinity

So I tried to set a if statement that if the computer is charging, the webpage is green, if it is not, the webpage is red, and wrapped it with jQuery function.

$(() => charging ? $(“body”).css(“background-color”,“green”):$(“body”).css(“background-color”,“red”))

Then I noticed it only work when the browser refresh, but doesn’t update, so I know i needed a event listener.

$(() => navigator.getBattery().then(function(battery) {
 battery.addEventListener(“chargingchange”, () => {
   let charging= battery.charging
   charging ? $(“body”).css(“background-color”,“green”) :  $(“body”).css(“background-color”,“red”);

then it work! Finally I tried to add animation between the transition, I have to install the jQuery-color lib. and change the css argument to object.


$(() => navigator.getBattery().then(function(battery) {
 battery.addEventListener(“chargingchange”, () => {
   let charging= battery.charging
   charging ? $(“body”).animate({backgroundColor: “#00FF00”}) :  $(“body”).animate({backgroundColor: “#FF0000”});


Here is the code

Animation Unreal Engine

The last project we worked on our animation class is with Unreal Engine. This time I teamed up with Halen. We are inspired by the game Mirror’s Edge.


Halen Created a city with some asset we found, and created the avatar from Adobe Fuse. and got some animation from Adobe Mixamo. I put the animation together and create cameras to capture different angle of the protagonist.


This is a very short project, we didn’t have that much time to experiment and explore. So we picked a very clear and simple subject to animate, without having to worry about plot and story but still make sense and look good.

Animation After Effect

For the After Effect project, I once again, teamed up with S.J. and Halen. We decided to use some classical painting with as style of one of the a example that we’ve seen in class, which the scene keep zooming out to different drawings, while the drawing being animated.

We decided to pick American painter Edward Hopper’s painting as the theme. And we saw someone photoshopped a cat into the painting Nighthawks, which inspired us to make the animation about a cat travels through different painting.


We picked 4 of Hopper’s painting, and decide what the cat does in there.

s-l300 71ROurdzpYL._SX355_morning-sun  43

We think the cat should be different sizes in different painting to have more dynamic. And when we talk about the one that the cat was going to be giant, I mention the person in the painting’s jar drop, as a expression, but we pushed it literally make the jar drop and bounce to the next painting as an end.

We divided our work load to me working on assets of the painting, animating opening scene, and animation first and third painting, Helen prepared the asset for the museum hall in the beginning and end, and animate all of the museum scene and the last painting, S. J. worked on one of the painting, master edit and sound.

ICM Final Game of Life

As I decided to make modify game of life as my project, I think it would be useful to learn the segment of nature of code from Shiftman, I watched the playlist of cellular automata.

The play list started by introducing wolfram’s cellular automata. I recreate one, that make the new generation on the bottom, and use “get” and “set” to move the old generations up.

In the beginning, i had problem of the last generation updated before checking all the cells, but using “slice()” function create a shadow copy solved the problem.

Continue reading “ICM Final Game of Life”