Creative Coding Projects

Looped Animation (P5.js)


Overall I am pretty satisfied with how this turned out, and it looks very close to what I had on my sketch. For the background switch, I decided to use an EaseInOutElastic function because it matches almost exactly like what I imagined the transition to be when I drew my sketches. I believe the bounciness really suites the style of the visuals that I created here and defiantly adds to the overall quality of the piece. The hardest part about this assignment was defiantly the fact that I had to think and calculate everything based on the percentage frame rate. It was not so easy to wrap my head around that and when I ran into a glitch I have to really sit down and think about where the problem is: "Did I lose count on the frame somewhere or was it something else?" For example this one:

VR Sculpture

(Unity + Maya + 8th Wall)


I created this playful AR experience specifically for the night light in my bedroom to add more liveliness to the moment. The materials and particles used in the scene are intentionally made glowy, thus contrasting the surrounding environment and can be viewed as part of a virtual night light. The fishes swim around the viewer in circular motions with different velocities and distance.​

Given the way of how the found model was made, the animation was first done with deformer which gives a better result: (this gif doesn't loop for some reason, so if you want to look at it please refresh the page)

However, unity does not support deformer animation import thus I had to go with rigging even though it fragments the mesh:

Abstract Clock (P5.js)

Animated gif

I had a lot of trouble coming up with ideas, but I really liked one of the ancient time keeping tool that only tracked time to the hours. In addition, I also wanted to create a clock that can blend into the everyday routine that you shouldn't need to pay much attention to.  I was then inspired by "rainy mood (" which I listen to while working as the rain sound can keep me calm and concentrated. Thus I decided to make this clock that is all about that. It is designed so that you don't really need to pay much attention to the visuals. For every hour that passed by, there will be a thunder sound to remind you that it's now the next hour.

I am overall satisfied with the final product. I originally imagined this to be a full-scale projection that blends into a wall to create the illusion of a rainy day. However, I had to scale it down due to 1). time constraints and 2). the style of computer graphics might not be the best to create that illusion(?).


Praxinoscope (Processing)

For this exercise I wanted to practice using sin/cos function to create wave patterns so I explored some aspects of that. I also played a little with rotation, transformation, push, pop, and scaling. One challenge I found that it is harder to design for a very limited space. Also, since this is my first time using processing I also tried to familiarized myself with the syntax and the available built-in functions. The good thing is that I did find that it is very similar to javascript which saved my a lot of time.

Final Pattern

Demo play-through 

Augmented Body (ml5.js PoseNet w/ webcam)

My original idea was pretty different from what I eventually finished. Originally I wanted to create a drawing tool that one can draw with his/her pupils. The line would trace where the eye had been and the entire canvas would erase itself if the person blinks. However, I was having trouble to distinguish the different state of the eyes with the face tracking templet code and decided to go to a different direction.


Then the new idea I had was to use head tilt to control a character. I first thought of the more conventional multiple levels of floors that a character could be placed into by changing the vertical position of the head. However, I realized that did not make much sense since I want to use a head tilt to trigger "jump". The left&right motion does not naturally map to the up&down motion of the jump. Therefore I redesigned the floor to be vertical and have the character run up the screen to avoid obstacles. That been said, this not a game yet as it does not have any level design, no goals to achieve, etc. As it for now, it's more like an exploration of the kind of controllers that can be implemented. If there is more time, I would like to turn this into a game that two people can play against each other at the same time.