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



For this week assignment, I decided to continue working on my black cat sketch from last week! My plan was to

  1. Make the eyes follow the mouse
  2. Make the cat drool randomly
  3. Draw random shapes on the background

After several attempts at using atan2 function to make the eyes move (and failed miserably), I gave up and reached out to one of the Residents. She suggested to map the eyes to the mouse instead of using atan2 since the latter requires a lot of calculation and it’s likely that I’ll get confused. Mapping was a lot simpler so I was able to finish the eye movement in no time!

As for no.2, I could somehow make the cat keep drooling on its own, which is nice, but still not exactly what I wanted. I thought it would be better if I could make the saliva drop randomly (in terms of starting point, size and speed) since now it just follows the same repeating pattern.

I didn’t have any problems working on no.3. I decided to make a text appear in different places every time I run the sketch. Everything went pretty smoothly. The only thing I’m concerned about is that I get VERY dizzy every time I look at my sketch since the text just keeps jumping around and you can’t actually read it. I will try to make it move in a slower manner later!

Here’s the link to my sketch.


Screen Shot 2018-09-19 at 00.24.21


I didn’t really know what computation meant. I did have the idea that it had something to do with computers and calculations but I never really thought of it as something that I would encounter in daily life. It was just out of the picture. Never thought about it, never cared about it.

It was after the first ICM class, where I learned the real meaning of the word, that I’ve finally realized that it is literally EVERYWHERE!!

  • At my most recent job where I did e-commerce for an apparel company? It was there! Our online shop can track your behavior and give you appropriate recommendations. If we see you constantly buying crop tops, we will give you more and more crop tops!
  • When I went to a Techno party? It was there! Sometimes we totally overlook the amazing artworks by the VJs, which is sad because I think it’s almost as important as the music. It can give you a whole different experience if you pay attention to both!

I can come up with more but I think I should stop before it gets too long lol

Now I’m interested in using coding/programming to play around with my photography, I’m still not really sure how though. Truth is, I haven’t been taking any pictures for quite a while (except from selfies) because I was frustrated with the outcome of my work. I hope that by learning something new, I will be able to come up with a different way to present my work and to approach my audiences.

As I’ve been looking for inspirations, I found this very interesting installation curated by a Bangkok-based design house. You walk into a dark room and lasers/lights will flash every time you make noises. The louder you are, the brighter the light will get.

The Existence from Eyedropper Fill on Vimeo.

I also find their other projects very appealing. I really want everyone to check their youtube channel out since the videos they made are so fun to watch (they are all in Thai but I’d be more than happy to translate them for you so just let me know!). Eyedropper Fill Youtube Channel

Back to my first ever coding project!!

I didn’t really know what to draw for the first assignment so I decided to just go with a cute black cat (which is what my favorite k-pop singer often gets called by his fan).

My idea was to draw only the head because I wanted to focus on the details of his face. I was looking through Google for references but I couldn’t find anything I like so I made a rough sketch with Adobe Photoshop. Here’s how it looks like.


My friend sent me a Sailor Moon meme while I was working on the draft so i decided to draw Luna instead of an ordinary black cat! That’s why I added the crescent moon. I also though it would be more fun if we could feed the cat with that blue little fish!

The most frustrating problem I had when working with the p5js editor was that I couldn’t get the exact shapes i wanted. There seemed to be no way I could draw the same outline as I did in Photoshop. After several attempts at toying around with bezier, i decided to give up and just use ellipse. Also with the crescent moon I just created two overlapping circles because I didn’t know how to draw a crescent.

For final sketch, the cat looks slightly different from the draft I made but I’m happy with it! I also decided to try mouseX mouseY function after watching Dan’s video so now the fish will somehow follows the mouse!

Here is my little cute cat Baejy!!


And here is the code.

function setup() {
createCanvas(500, 500);

function draw() {
background(252, 199, 223);


fill(66, 62, 87);
ellipse(250, 300, 200, 150);

triangle(153, 283, 185, 180, 253, 300);
triangle(347, 283, 315, 180, 247, 300);
fill(252, 199, 223);
triangle(173, 245, 187, 198, 200, 230);
triangle(327, 245, 314, 198, 300, 230);

ellipse(220, 285, 35, 45);
ellipse(280, 285, 35, 45);
fill(66, 62, 87);
ellipse(275, 285, 25, 35);
ellipse(225, 285, 25, 35);
ellipse(225, 285, 10, 20);
ellipse(275, 285, 10, 20);

fill(255, 245, 126);
ellipse(250, 245, 25, 25);
fill(66, 62, 87);
ellipse(250, 240, 22, 18);
fill(252, 199, 223);
ellipse(250, 320, 13, 7);

curve(250, 300, 250, 335, 230, 335, 260, 280);
curve(250, 300, 250, 335, 270, 335, 260, 280);

line(183, 277, 200, 280);
line(183, 295, 202, 290);
line(317, 277, 299, 280);
line(317, 295, 298, 290);

line(125, 300, 165, 310);
line(120, 320, 165, 320);
line(130, 340, 170, 330);
line(375, 300, 335, 310);
line(380, 320, 335, 320);
line(370, 340, 330, 330);

fill(120, 183, 224);
ellipse(mouseX, mouseY, 60, 30);

triangle(mouseX + 20, mouseY, mouseX + 50, mouseY – 15, mouseX + 50, mouseY + 15);
line(mouseX – 10, mouseY – 7, mouseX – 20, mouseY + 3);
line(mouseX – 10, mouseY + 3, mouseX – 20, mouseY – 7);