• Black Vimeo Icon

©2020 BY JENNY LIN

Drawing with Codes - Self Portrait and Thoughts

Updated: Sep 19, 2018

Almost all of my design skills are self-trained, and I attempted to learn how to code by myself, but it did not go anywhere. That was when I realized how much I enjoy visual appealing things, not that the color-coding of the codes itself wasn't visual, per say.


I admire the installation interactive exhibitions I attended, wondering if the combination of technology and arts could also be created by my own bare hands. I thought maybe self-training coding is just not for me, an education would be needed. ITP is the perfect place as it tolerates us in all diverse backgrounds, equips us with the programming and visual design skills needed in order to create something that we could not yet imagine now.


My first coding learning experience at ITP (or say with Daniel Shiffman on Youtube) really surprised me however. By accidentally mistaking that I had to watch from video 1.1 to 7.8, I learned so much in 2 days and achieved what I could not imagine myself would 3 days ago. Most significantly, I have been enjoying it, very much. As a visual designer for 3 years, it is easy for me to create images with Adobe Photoshop, Illustrator and After Effects, but I never thought I could also tell the computer to draw for me with codes, and that have made the whole learning experience different for me. As I enjoy creating arts, no matter what the mean is, learning javascript has been a treat to me.


I could not help but wanting to practice whatever Daniel Shiffman taught as I had some interesting ideas in my head. Struggling absorbing all the information from video 1.1 to 7.3 (16.4) as I practiced by myself, I have also created a self portrait of myself for the first time, and it was by coding! (Very exciting!)





The process was a bit hard and time consuming as I could not just draw waving curves, neither could I just put objects in the place I intended. But after around 4 to 5 hours of effort, I am satisfied with it as it honestly looks fairy similar to the current me (I used to have long, dark brown, relatively straight hair).


ITP was the only program that provides the curriculum to which I have ever felt so related throughout my entire learning journey so far. When I delved into the Thesis Week 2017 presented by ITP students, I could not help but keep going through one after one, as they were not only personal, creative, but also extremely intriguing. I have not had a concrete idea yet, but I would love to use what I learn in ICM, apply it to data visualization, and further express myself. As I have always been strongly curious about the motivation of human behaviors and human interactions, I would like to explore how I could use data visualization to give a more concrete insight on love and relationships, if possible.


One of the projects in Thesis Week 2017 I liked gives an insight on long-distance relationship. What was the most interesting and seemed super helpful to me in the whole project, was how ITP alumni, Ying He, used data visualization to improve the emotion expressing experience of a long-distance relationship by creating "breathing message" along with Google calendar to send the emotion. They could then further respond to or comfort each other's emotion by sending back another "breathing message". I used to have a long-distance relationship before, and always contemplated on how it would be so nice to know what each other is doing or feeling without having to actually talk, which causes disturbance, and here I found the most creative answer to my question at ITP.





Codes


function setup() {

createCanvas(600, 360);

background(255, 102, 102);


//hair

noStroke();

fill(0, 30, 0);

arc(280, 180, 300, 300, PI + HALF_PI, TWO_PI);

ellipse(280, 75, 60, 100);

ellipse(420, 220, 60, 100);

ellipse(400, 250, 80, 100);

ellipse(350, 270, 100, 100);

arc(255, 170, 180, 260, PI, PI + HALF_PI);

ellipse(180, 200, 80, 100);

ellipse(200, 250, 100, 100);

ellipse(250, 270, 100, 100);



//face

noStroke();

fill(255, 215, 150);

arc(300, 190, 200, 250, 0, PI, CHORD);

rect(200, 150, 200, 55);

arc(255, 160, 110, 150, PI, PI + HALF_PI);

arc(255, 164, 203, 160, PI + HALF_PI, TWO_PI);


//ears

ellipse(390, 220, 30, 50);

ellipse(210, 220, 40, 60);



//cheeks

fill(255, 50, 50, 50);

ellipse(230, 235, 60);

ellipse(356, 235, 60);


//bang

fill(0, 30, 0);

arc(405, 140, 100, 160, HALF_PI, PI);

triangle(185, 200, 200, 190, 210, 250);

arc(220, 275, 50, 30, 0, PI + QUARTER_PI);


//eyebrows

noFill();

stroke(0);

strokeWeight(3);

line(220, 150, 260, 150);

arc(220, 156, 10, 10, PI, PI + HALF_PI);

line(313, 150, 353, 150);

arc(353, 156, 10, 10, PI + HALF_PI, TWO_PI);


//eyes

noFill();

stroke(0);

strokeWeight(5);

arc(248, 185, 30, 15, PI, TWO_PI);

arc(248, 185, 17, 17, 0, PI + QUARTER_PI);

noStroke();

fill(20);

ellipse(248, 185, 15);


noFill();

stroke(0);

strokeWeight(5);

arc(328, 185, 30, 15, PI, TWO_PI);

arc(328, 185, 17, 17, 0, PI + QUARTER_PI);

noStroke();

fill(20);

ellipse(328, 185, 15)


//mouth

fill(255, 50, 50);

arc(294, 255, 60, 60, 0, PI);

fill(255);

quad(267, 258, 320, 258, 317, 265, 270, 265);


//glasses

noFill();

stroke(0);

stroke(77, 51, 0);

strokeWeight(3);

noFill();

arc(235, 190, 90, 60, PI, TWO_PI);

arc(340, 190, 90, 60, PI, TWO_PI);

arc(340, 190, 90, 90, 0, PI);

arc(235, 190, 90, 90, 0, PI);

arc(287, 185, 10, 5, PI, TWO_PI);


//hearts

push();

noStroke();

fill(255, 50, 50);

ellipse(45, 55, 15);

ellipse(56, 55, 15);

translate(50, 50);

rotate(PI / 4.0);

rect(0, 0, 15, 15);

noStroke();

fill(255, 50, 50);

ellipse(140, 105, 15);

ellipse(151, 105, 15);

translate(145, 100);

rotate(PI / 4.0);

rect(0, 0, 15, 15);

pop();

push();

noStroke();

fill(255, 50, 50);

ellipse(465, 284,15);

ellipse(473, 280,15);

translate(-100, 100);

rotate(PI / 10)

rect(592.5, -7.5, 15, 15);

pop();

noStroke();

fill(255, 50, 50);

ellipse(540, 113,15);

ellipse(548, 121,15);

translate(-60, 100);

rotate(PI / 90)

rect(592.5, -7.5, 15, 15);


}


#ITP #ICM #coding #selfportrait #ThesisWeek2017 #datavisualization