Month: August 2017

Christopher Reyes Project-01

/*
Christopher Reyes
creyes1@andrew.cmu.edu
Section D
Project-01
*/

function setup() {

    createCanvas(600, 600); //Sets canvas size
    background(240); //Sets background color to light grey
    angleMode(DEGREES);
    strokeWeight(15);

}

function draw() {

    noStroke();

    //Draws a blue ellipse
    fill(121, 178, 178);
    ellipse(418, 192, 277, 269);

    //Draws a tan circle
    fill(206, 167, 133);
    ellipse(218, 340, 381, 381);

    //Draws a brown ellipse and rotates it 10 degrees
    fill(68, 49, 38);
    push();
    translate(320, 400);
    rotate(10);
    ellipse(0, 0, 280, 112);
    pop();

    //Draws several black shapes
    fill(0);
    ellipse(251, 295, 79, 84);
    ellipse(430, 295, 79, 84);
    rect(303, 401, 50, 31, 4, 4, 25, 25);

    stroke(0);
    strokeCap(ROUND);
    noFill();

    //Black ellipse "ear," no fill, rotated 344 degrees
    push();
    translate(142, 306);
    rotate(344);
    ellipse(0, 0, 60, 116);
    pop();

    //Draws a black arc, hairline
    arc(248, 254, 560, 102, 270, 0);

    //Black arcs for head shape, with rotations
    push();
    translate(420, 200);
    rotate(-11);
    arc(0, 0, 564, 242, -180, 270)
    pop();

    push();
    translate(421, 209);
    rotate(-11);
    arc(0, 0, 300, 260, 270, 0);
    pop();

    push();
    translate(461, 351.5);
    rotate(-343);
    arc(0, 0, 50, 250, 270, 80);
    pop();

    push();
    translate(208, 380);
    rotate(15);
    arc(0, 0, 500, 100, 0, 90);
    pop();

    push();
    translate(198, 394);
    rotate(9);
    arc(0, 0, 50, 68, 90, 180);
    pop();

    //Draws a pair of green glasses
    stroke(28, 91, 40);
    rect(172, 284, 160, 100, 12, 12, 37, 37);
    rect(377, 284, 160, 100, 12, 12, 37, 37);
    arc(360, 305, 90, 10, 190, 340);

}

For the sake of planning, I created a mock-up of what the image would look like using Adobe Illustrator, referencing that image in order to recreate it in JavaScript. However, I was not expecting the standard rotate(); command to rotate an object around the origin rather than the object’s center. To work around this, I utilized push(); and pop();, essentially rotating the canvas itself for a particular object to get it to appear in the desired orientation.

sketch

function setup() {
    createCanvas(600, 636);
    background(220);
    text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {
  //background
  background(175, 200, 135);

  //hair
  noStroke();
  fill(0);
  ellipse(297, 225, 374, 374);

  //face
  noStroke();
  fill(117, 77, 37);
  rect(150, 177, 290, 266);
  quad(150, 442, 440, 442, 354, 595, 240, 595);

  //nose
  noStroke();
  fill(110, 70, 40);
  quad(280, 450, 320, 450, 335, 470, 264, 470);
  fill(121, 79, 37);
  triangle(280, 450, 300, 330, 320, 450);

  //ears
  noStroke();
  fill(117, 77, 37);
  arc(140, 349, 55, 90, HALF_PI, HALF_PI);
  arc(450, 349, 55, 90, HALF_PI, HALF_PI);
  //inner ears
  fill(110, 70, 40)



  //glasses
  noFill();
  stroke(77, 77, 77);
  strokeWeight(15);
  rect(129, 301, 152, 91);
  rect(309, 301, 152, 91);
  line(281, 320, 309, 320);

  //eyes
  noStroke();
  fill(256);
  ellipse(219, 349, 75, 44);
  ellipse(372, 349, 75, 44);

  fill(0);
  ellipse(230, 355, 32, 32);
  ellipse(384, 355, 32, 32);

  //eyebrows
  noFill();
  stroke(0);
  strokeWeight(12);
  arc(230, 220, 195, 120, HALF_PI, PI-0.8);
  arc(384, 220, 195, 120, HALF_PI, PI-0.8);

  //mouth
  noStroke();
  fill(27);
  quad(235, 510, 365, 510, 325, 560, 275, 560);
  fill(290, 30, 121);
  arc(300, 560, 48, 34, PI, PI);


  }

The assignment wasn’t too difficult. I first abstracted a picture of myself into shapes in Illustrator, and used this as the foundation for constructing my code.

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.