ICM : WEEK 1

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.

baejy

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!!

https://editor.p5js.org/msyves/sketches/ryM0jzIOX

And here is the code.

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

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

//Cat

//Outline
noStroke();
fill(66, 62, 87);
ellipseMode(CENTER);
ellipse(250, 300, 200, 150);

//Ears
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);

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

//Moon
fill(255, 245, 126);
ellipseMode(CENTER);
ellipse(250, 245, 25, 25);
fill(66, 62, 87);
ellipse(250, 240, 22, 18);
//Nose&Mouth
fill(252, 199, 223);
stroke(0);
ellipseMode(CENTER);
ellipse(250, 320, 13, 7);

noFill(0);
stroke(255);
strokeWeight(1)
curve(250, 300, 250, 335, 230, 335, 260, 280);
curve(250, 300, 250, 335, 270, 335, 260, 280);

//Lines
stroke(0);
strokeWeight(1);
line(183, 277, 200, 280);
line(183, 295, 202, 290);
line(317, 277, 299, 280);
line(317, 295, 298, 290);

strokeWeight(2);
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);

//Fish
fill(120, 183, 224);
noStroke(0);
ellipseMode(CENTER);
ellipse(mouseX, mouseY, 60, 30);

triangle(mouseX + 20, mouseY, mouseX + 50, mouseY – 15, mouseX + 50, mouseY + 15);
stroke(0);
strokeWeight(1);
line(mouseX – 10, mouseY – 7, mouseX – 20, mouseY + 3);
line(mouseX – 10, mouseY + 3, mouseX – 20, mouseY – 7);
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s