Category: Project Week 1

sketch

function setup() {
    createCanvas(200, 200);
    background(210);
    ellipse(50,22,104,3);
}

function draw() {
}

rkondrup-portrait

/*Ryu Kondrup
Section D
rkondrup@andrew.cmu.edu
project-01*/


function setup() {
  var magenta = color(128, 33, 73);
    createCanvas(600, 600);
    background(magenta);
}

function draw() {

	var yellow = color(218, 222, 107);
  var lightYellow = color(240, 245, 139);
  var darkyellow = color(180, 184, 74)
	var skintone = color(230, 181, 172);
  var shadow = color(186, 134, 125);
  var white = color(255, 255, 255);
  var bgShadow = color(114, 23, 60);

  //shadow cloud big
  fill(bgShadow);
  noStroke();
  ellipse(115, 120, 80);

  //shadow cloud medium
  fill(bgShadow);
  noStroke();
  ellipse(175, 130, 60);

  //shadow cloud long
  fill(bgShadow);
  noStroke();
  rect(45, 130, 200, 40, 20);

  //shadow cloud big 2
  fill(bgShadow);
  noStroke();
  ellipse(215, 220, 80);

  //shadow cloud medium 2
  fill(bgShadow);
  noStroke();
  ellipse(275, 230, 60);

  //shadow cloud long 2
  fill(bgShadow);
  noStroke();
  rect(45, 230, 300, 40, 20);

    //cloud big
    fill(white);
    noStroke();
    ellipse(100, 100, 80);

    //cloud medium
    fill(white);
    noStroke();
    ellipse(160, 110, 60);

    //cloud long
    fill(white);
    noStroke();
    rect(30, 110, 200, 40, 20);

    //cloud big 2
    fill(white);
    noStroke();
    ellipse(200, 200, 80);

    //cloud medium 2
    fill(white);
    noStroke();
    ellipse(260, 210, 60);

    //cloud long 2
    fill(white);
    noStroke();
    rect(30, 210, 300, 40, 20);

    //hat top shadow
    fill(bgShadow);
    noStroke();
    rect(327, 40, 200, 600, 15);

    //hat brim shadow
    fill(bgShadow);
    noStroke();
    rect(125, 390, 550, 30, 15);

    //nose rectangle
    fill(bgShadow);
    noStroke();
    rect(285, 500, 45, 45);

    //hat top
    fill(yellow);
    noStroke();
    rect(312, 20, 200, 380, 15);

    //hat dark
    fill(darkyellow);
    noStroke();
    rect(312, 300, 200, 80);

    //hat shine
    fill(lightYellow);
    noStroke();
    rect(312, 20, 30, 380, 15);

    //hat ribbon shine
    fill(yellow);
    noStroke();
    rect(312, 300, 30, 80);

    //hat brim
    fill(yellow);
    noStroke();
    rect(110, 370, 550, 30, 15);

    //hat brim shine
    fill(lightYellow);
    noStroke();
    rect(110, 370, 100, 30, 15);

    //shadow under hat
    fill(shadow);
    noStroke();
    rect(312, 400, 200, 35);

    //head
    fill(skintone);
    noStroke();
    rect(312, 435, 200, 165);

    //nose curve
    fill(skintone);
    noStroke();
    ellipse(315, 480, 90, 90);

    //nose rectangle
    fill(skintone);
    noStroke();
    rect(270, 480, 45, 45);

    //small eye
    fill(white);
    noStroke();
    ellipse(325, 445, 40, 40);

    //large eye
    fill(white);
    noStroke();
    ellipse(440, 460, 70, 70);

    //mouth
    fill(shadow);
    noStroke();
    rect(312, 525, 40, 25);

    //mouth round
    fill(shadow);
    noStroke();
    rect(312, 525, 50, 25, 10);

  }

This is a very simple drawing of myself wearing my signature yellow hat, by which all my friends can recognize me.

I stuck mainly to a style composed of rounded rectangles and circles.

jiheek1_project1(self-portrait)

function setup() {
    createCanvas(600, 600);
    background(188, 235, 237);


    fill(73, 59, 36);
    //back hair
    rect(228, 250, 300, 300);


    fill(229, 163, 178);
    //upper part of the shirt
    triangle(200, 500, 400, 450, 600, 500);
    //the lowest stripe of the shirt
    rect(200, 550, 400, 50);


    fill(249, 210, 221);
    //middle stripe of the shirt
    rect(200, 500, 400, 50);


    fill(239, 206, 186);
    //neck
    rect(364, 415, 71.9, 71.9);
    //my face
    ellipse(400, 300, 280, 280);


    fill(248, 244, 231);
    //collar
    triangle(364, 486.9, 364, 450.9, 400.9, 486.9);
    triangle(400.9, 486.9, 435.9, 450.9, 435.9, 486.9);


    fill(0);
    //eye outline
    ellipse(335, 320, 52, 52);
    ellipse(465, 320, 52, 52);


    stroke(255);
    strokeWeight(10);
    fill(66, 49, 37);
    //eyeballs
    ellipse(335, 320, 40, 40);
    ellipse(465, 320, 40, 40);


    fill(255);
    //eye reflection
    ellipse(340, 315, 3, 3);
    ellipse(470, 315, 3, 3);

    //mouth
    noFill();
    stroke(0);
    strokeWeight(3);
    arc(400, 385, 100, 30, 0, PI, PI);
    fill(73, 59, 36);


    //arm indications
    stroke(0)
    strokeWeight(3)
    line(270, 525, 270, 600);
    line(530, 525, 530, 600);


    //eyebrows
    noStroke();
    triangle(300, 278, 315, 270, 315, 278);
    rect(315, 270, 45, 8);
    rect(436, 270, 45, 8);
    triangle(481, 270, 481, 278, 496, 278);
    //side hair
    rect(228, 250, 60, 300);
    rect(505, 235, 60, 315);
    //bangs
    rotate(-0.5);
    ellipse(175, 330, 190, 70);
    rotate(1.80/2);
    ellipse(520, 0, 190, 70);


    //nose
    noFill();
    stroke(0);
    strokeWeight(2);
    curve(482, 134, 482, 134, 508, 174, 548, 174);
    curve(450, 144, 508, 174, 502, 190, 452, 190);


    noStroke();
    fill(255);
    //dialogue box
    rect(60, 0, 180, 200);
    triangle(240, 180, 240, 200, 270, 200);
    //"HI"
    fill(0);
    rect(100, 60, 6, 80);
    rect(106, 100, 30, 6);
    rect(136, 60, 6, 80);
    rect(170, 60, 25, 6);
    rect(180, 60, 6, 80);
    rect(170, 134, 25, 6);

}

The image above is a capture of my process work. Before coding my self-portrait, I used Adobe Illustrator to sketch out a general idea of my project. The graphical elements that I have commonly used are basic shapes, such as ellipses, rectangles and triangles. Some of the more complex items would be arcs and rotations. After creating a general form of my project with basic shapes, I refined it by differing line weights (or stroke weights). Through this project, I was able to practice creating images with basic coding language and organizing script.

odh-02

//Owen D Haft
//odh@andrew.cmu.edu

function setup() {
    createCanvas(600, 500);
    background(0);

    //ears
    strokeWeight(1)
    fill(255, 219, 172)
    ellipse(145, 240, 50, 90)
    ellipse(455, 240, 50, 90)
    
    //head
    fill(255, 219, 172);
    ellipse(300, 250, 300, 400);

    //eyes
    fill(255);
    ellipse(240, 225, 75, 40);
    ellipse(360, 225, 75, 40);

    fill(0, 255, 220);
    ellipse(250, 224, 35, 35);
    ellipse(370, 224, 35, 35);

    fill(0);
    ellipse(250, 224, 20, 20);
    ellipse(370, 224, 20, 20);

    fill(255);
    ellipse(256, 215, 16, 16);
    ellipse(376, 215, 16, 16);         

    //mouth
    noFill();
    strokeWeight(5);
    arc(300, 350, 150, 40, 0, PI, PI)
    arc(300, 350, 150, 30, 0, PI, PI)

    //hat
    fill(150, 0, 0)
    strokeWeight(1)
    arc(300, 150, 260, 220, PI, PI, PI)
    
    fill(200, 0, 0)
    arc(320, 150, 300, 40, PI, PI, PI)

    fill(150, 0, 0)
    ellipse(300, 35, 40, 15)


    //eyebrows
    fill(230, 206, 168)
    rect(195, 180, 80, 10)
    rect(325, 180, 80, 10)
    
    //nose
    strokeWeight(3)
    line(300, 225, 330, 310)
    line(330, 310, 290, 310)


  
}

function draw() {
    if (millis() > 2000) {
        osc.stop();
        noLoop();
    }
}

I worked systematically from the larger shapes of my portrait down to the smaller details. Looking back, the portrait would greatly benefit from the usage of more complex methods of coding, which I yet to learn or become more comfortable with (i.e. curves, rotate). Therefore, I stuck with the more simple geometries.

sketch

function setup() {
    createCanvas(600, 600);
    background(255, 179, 179);

}

function draw(){

    //Hair
    noStroke();
    fill(0);
    rect(100, 160, 400, 480);

    //Ears
    noStroke();
    fill(255, 204, 153);
    ellipse(110,290,70,100);
    ellipse(490,290,70,100);

    //Clothes
    fill(209, 209, 224);
    rect(220, 480, 155, 300);

    fill(164, 164, 193);
    rect(260, 550, 5, 50);
    rect(330, 550, 5, 50);

    //Face + neck
    fill(255, 204, 153);
    arc(300, 480, 50, 50, 0, PI);
    rect(280, 450, 40, 30);
    ellipse(300,270,370,370);

    //Facial Expression
    fill(0);
    ellipse(200,240,45,10);
    ellipse(390,240,45,10);

    ellipse(200,295,90,60);
    ellipse(390,295,90,60);

    fill(256);
    ellipse(200,295,80,50);
    ellipse(390,295,80,50);

    fill(0);
    rect(370, 270, 40, 50);
    rect(180, 270, 40, 50);

    //Nose
    rect(290, 300, 5, 70);
    rect(300, 400, 20, 5);

    //Sleeves
    fill(209, 209, 224);
    rect(250, 480, 20, 30);
    rect(330, 480, 20, 30);

    //Side hair
    fill(0);
    rect(110, 220, 20, 200);
    rect(470, 220, 20, 200);

    //Glasses
    fill(77, 51, 0);
    rect(100, 250, 10, 80);
    rect(270, 250, 10, 80);
    rect(100, 250, 180, 10);
    rect(100, 330, 180, 10);

    rect(270, 280, 40, 10);

    rect(310, 250, 10, 80);
    rect(480, 250, 10, 80);
    rect(310, 250, 180, 10);
    rect(310, 330, 180, 10);

    //Bangs
    fill(0);
    translate(280/2, 130/2);
    rotate(1/2.1);
    ellipse(250, -50, 280, 130);

    translate(280/2, 130/2);
    rotate(-1/1.05);
    ellipse(10, -50, 280, 130);

    //sprout
    fill(0, 256, 0);
    translate(280/2, 130/2);
    rotate(1/2.1);
    ellipse(250, -50, 100, 60);

}

So I know some basic coding but I never really thought about how you could code shapes to make art so this was really interesting to try. I designed my self portrait on photoshop first and then tried to mimic what I drew using code.

Taken from photograph and transformed into geometric shapes in Illustrator. Then I divided each space up into quadrilaterals or triangles and plotted them into JavaScript in Brackets

Self Portrait

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 01

function setup() {
    createCanvas(500,400);
    noStroke();
    background(135,206,250);255,192,203
    
    fill(255,192,203);
    quad(250,0,250,400,500,400,500,0);
    
    var ls = color(245,224,205);
    var ds = color(240,208,180);
    var lb = color(156,119,97);
    var db = color(146,109,90);
    var shade = color(74,50,34);
    var ulip = color(203,140,132);
    var llip = color(240,190,180);
    translate(-100,0);
//hairs
    fill(db);
    quad(200,37,232,95,291,48,265,15);
    quad(232,95,291,48,300,100,226,218);
    quad(300,100,226,218,259,211,298,155);
    quad(259,211,226,218,235,351,244,259);
    fill(lb);
    noStroke();
    quad(194,34,187,45,181,34,191,29);
    quad(181,34,175,61,185,64,187,45);
    quad(185,64,175,61,180,135,195,120);
    quad(195,120,180,135,164,179,171,179);
    triangle(164,223,148,281,152,340);
    quad(195,120,171,179,154,233,152,340);
    quad(208,176,198,144,195,120,205,139);
    quad(194,34,213,142,217,48,215,28);
    quad(217,48,215,28,223,17,222,34);
    quad(222,34,223,17,237,17,231,58);
    triangle(231,58,237,17,235,34);
    quad(237,17,235,34,246,51,246,31);
    quad(237,17,237,13,250,12,246,31);
    quad(246,31,250,12,266,27,270,51);
    quad(266,27,250,12,265,15,275,27);
    quad(226,218,213,142,217,48,232,95);
    triangle(244,259,259,211,253,289);

    fill(db);
    noStroke();
    quad(152,340,162,324,170,354,174,290);
    triangle(152,340,174,290,195,120);
    triangle(174,290,184,328,195,120);
    quad(184,284,190,240,201,214,195,120);
    quad(201,214,195,120,198,144,208,176);
    quad(189,26,194,34,215,28,210,10);
    quad(210,10,215,28,223,17,217,11);
    quad(217,11,223,17,237,17,230,6);
    quad(237,17,230,6,250,12,237,13);
    
//face highlights
    fill(ls);
    noStroke();
    quad(187,45,185,64,205,58,194,34);
    quad(188,63,195,61,196,70,195,64);
    quad(200,59,201,63,205,61,205,58);
    quad(195,61,200,59,202,67,196,74);
    quad(202,67,196,70,196,74,205,83);
    quad(205,83,196,74,195,76,194,78);
    quad(194,78,191,87,205,87,205,83);
    triangle(205,87,205,94,207,90);
    quad(205,87,206,98,197,90,191,87);
    triangle(197,90,191,92,191,87);
    quad(187,85,191,87,196,100,185,96);
    quad(185,96,211,93,214,112,194,116);
    quad(214,121,214,129,203,135,203,129);
    
//face lightshadows   
    fill(ds);
    noStroke();
    quad(185,71,190,68,191,76,186,78);
    quad(191,76,195,76,196,74,190,68);
    triangle(190,68,196,74,196,70);
    triangle(202,67,206,64,208,73);
    quad(208,73,202,67,205,83,210,89);
    quad(187,85,188,85,193,83,191,87);
    quad(191,92,191,96,197,96,197,90);
    quad(197,90,197,96,198,93,206,98);
    quad(196,100,195,105,200,102,199,101);
    quad(199,101,200,102,203,99,199,99);
    quad(214,112,214,121,195,120,201,120);
    quad(195,120,203,135,203,129,214,121);
    quad(203,135,205,139,213,142,214,129);
    
//nose shadow and eyelash
    fill(shade);
    noStroke();
    quad(191,96,196,100,199,101,197,96);
    quad(197,96,199,101,199,99,203,99);
    quad(203,99,197,96,198,93,206,98);
    triangle(184,83,188,85,187,81);
    quad(187,81,188,85,193,83,194,78);
    
//brows and creases
    fill(db);
    noStroke();
    quad(201,63,202,67,206,64,205,61);
    quad(185,71,184,68,185,64,189,63);
    quad(189,63,185,71,190,68,196,70);
    triangle(196,70,195,64,189,63);
    triangle(186,78,187,81,191,76);
    quad(191,76,187,81,194,78,195,76);
    quad(205,83,205,87,207,90,210,89);
    triangle(210,89,207,90,211,93);
    quad(211,93,206,98,206,94,207,90);
    quad(194,116,196,115,197,119,195,120);
    quad(195,120,197,119,204,118,201,120);
    
//upper and lower lip
    fill(llip);
    noStroke();
    quad(196,115,197,119,204,118,204,111);
    triangle(204,111,214,112,204,118);
    fill(ulip);
    quad(194,116,196,115,197,107,195,107);
    quad(196,115,197,107,200,106,204,111);
    triangle(200,106,204,111,214,112);

//pink dup
    translate(250,0);
    //hairs
    fill(db);
    quad(200,37,232,95,291,48,265,15);
    quad(232,95,291,48,300,100,226,218);
    quad(300,100,226,218,259,211,298,155);
    quad(259,211,226,218,235,351,244,259);
    fill(lb);
    noStroke();
    quad(194,34,187,45,181,34,191,29);
    quad(181,34,175,61,185,64,187,45);
    quad(185,64,175,61,180,135,195,120);
    quad(195,120,180,135,164,179,171,179);
    triangle(164,223,148,281,152,340);
    quad(195,120,171,179,154,233,152,340);
    quad(208,176,198,144,195,120,205,139);
    quad(194,34,213,142,217,48,215,28);
    quad(217,48,215,28,223,17,222,34);
    quad(222,34,223,17,237,17,231,58);
    triangle(231,58,237,17,235,34);
    quad(237,17,235,34,246,51,246,31);
    quad(237,17,237,13,250,12,246,31);
    quad(246,31,250,12,266,27,270,51);
    quad(266,27,250,12,265,15,275,27);
    quad(226,218,213,142,217,48,232,95);
    triangle(244,259,259,211,253,289);

    fill(db);
    noStroke();
    quad(152,340,162,324,170,354,174,290);
    triangle(152,340,174,290,195,120);
    triangle(174,290,184,328,195,120);
    quad(184,284,190,240,201,214,195,120);
    quad(201,214,195,120,198,144,208,176);
    quad(189,26,194,34,215,28,210,10);
    quad(210,10,215,28,223,17,217,11);
    quad(217,11,223,17,237,17,230,6);
    quad(237,17,230,6,250,12,237,13);
    
//face highlights
    fill(ls);
    noStroke();
    quad(187,45,185,64,205,58,194,34);
    quad(188,63,195,61,196,70,195,64);
    quad(200,59,201,63,205,61,205,58);
    quad(195,61,200,59,202,67,196,74);
    quad(202,67,196,70,196,74,205,83);
    quad(205,83,196,74,195,76,194,78);
    quad(194,78,191,87,205,87,205,83);
    triangle(205,87,205,94,207,90);
    quad(205,87,206,98,197,90,191,87);
    triangle(197,90,191,92,191,87);
    quad(187,85,191,87,196,100,185,96);
    quad(185,96,211,93,214,112,194,116);
    quad(214,121,214,129,203,135,203,129);
    
//face lightshadows   
    fill(ds);
    noStroke();
    quad(185,71,190,68,191,76,186,78);
    quad(191,76,195,76,196,74,190,68);
    triangle(190,68,196,74,196,70);
    triangle(202,67,206,64,208,73);
    quad(208,73,202,67,205,83,210,89);
    quad(187,85,188,85,193,83,191,87);
    quad(191,92,191,96,197,96,197,90);
    quad(197,90,197,96,198,93,206,98);
    quad(196,100,195,105,200,102,199,101);
    quad(199,101,200,102,203,99,199,99);
    quad(214,112,214,121,195,120,201,120);
    quad(195,120,203,135,203,129,214,121);
    quad(203,135,205,139,213,142,214,129);
    
//nose shadow and eyelash
    fill(shade);
    noStroke();
    quad(191,96,196,100,199,101,197,96);
    quad(197,96,199,101,199,99,203,99);
    quad(203,99,197,96,198,93,206,98);
    triangle(184,83,188,85,187,81);
    quad(187,81,188,85,193,83,194,78);
    
//brows and creases
    fill(db);
    noStroke();
    quad(201,63,202,67,206,64,205,61);
    quad(185,71,184,68,185,64,189,63);
    quad(189,63,185,71,190,68,196,70);
    triangle(196,70,195,64,189,63);
    triangle(186,78,187,81,191,76);
    quad(191,76,187,81,194,78,195,76);
    quad(205,83,205,87,207,90,210,89);
    triangle(210,89,207,90,211,93);
    quad(211,93,206,98,206,94,207,90);
    quad(194,116,196,115,197,119,195,120);
    quad(195,120,197,119,204,118,201,120);
    
//upper and lower lip
    fill(llip);
    noStroke();
    quad(196,115,197,119,204,118,204,111);
    triangle(204,111,214,112,204,118);
    fill(ulip);
    quad(194,116,196,115,197,107,195,107);
    quad(196,115,197,107,200,106,204,111);
    triangle(200,106,204,111,214,112);

}