I got an inspiration from a sketch I found on openprocessing.org. The sketch is called ‘Snake Brush’ and it uses processing to recreate a famous painting in a way I found very interesting. I have been trying to add a new touch to my photography and I think this is where I want to start. However, for this week assignment I decided to experiment with webcam first.


The idea is to control the movement of the circles with a microphone and have the circles pick up colors from the webcam as they move across the screen. It means you have to constantly talk into the microphone in order to create a painting of yourself.

I ran into a problem where the webcam took too long to load so the circles wouldn’t pick up the colors from live video. I tried preload function but it didn’t work so I decided to use frameCount and make the drawing appear after certain amount of time.

Far from perfect but I had a lot of fun playing with this! Hope you enjoy it too!




Lyrics generator!

Screen Shot 2018-10-24 at 05.19.54

Was trying to use API from Musixmatch and Genius but couldn’t get them both to work. I also planned to put a youtube video at the end of the page so you have an instrumental version of the song to sing along to. Again, couldn’t get it to work 😦 I need to figure out how OAuth works to gain access to Genius API and data.

Link to sketch : https://editor.p5js.org/msyves/full/S1F9awpiX


For this week homework, I decided to restructure my old black cat sketch from week 1. Though I understand how class and object work, I’m still not able to write everything from scratch without any guideline. I literally just followed everything Dan did in his youtube videos T-T

Screen Shot 2018-10-03 at 01.04.15
A cat appears every time you click your mouse!

I spent most of the time re-arranging the shapes. My code still looks very messy and I need to keep looking for a way to make it easier to read. I also couldn’t get some elements to work after I put them under class and function. The cat now doesn’t know how to drool and the eyes don’t really follow the mouse anymore T-T

Link to the sketch : https://editor.p5js.org/msyves/sketches/HyuB6TW97


The theme for this week sketch is inspired by an art exhibition Nick (my partner) saw in a museum in Beijing earlier this year. Similar to the installation ‘A Million Times’, the idea is to create a wall of clocks that can form random shapes when the hands, which move at different speed, are connected.

We agreed to work on this separately since we both wanted to try different approaches. I started by creating simple clock hands and put them in loop. I also created a slider to control the movement of the legs.

Screen Shot 2018-09-26 at 00.24.54

Now the challenging part is to make the hands move. I want the hands of each clock to start at different position and start moving only when the slider is being dragged. After spending the whole day trying and still couldn’t figure out the way, I asked Yuguang for help. He suggested using sine and cosine and explained how they work.


Not exactly what I was trying to achieve, but at least it’s kind of similar to what I had in mind. As you can see, the clocks in the same column still move in the same pattern and at the same speed. I also couldn’t make the hands stay where they are after I released the slider. I will come back and try to work on this later!

Here’s the link to the sketch