Category: SectionC

Kimberlyn Cho – Project-01-Face

portraitDownload
//Kimberlyn Cho
//15-104 C
//ycho2@andrew.cmu.edu
//Assignment-01

function setup() {
	createCanvas(600, 600);
    background("white");
}

function draw() {
    //background
    noStroke();
    fill(255, 153, 102);
    rect(0, 0, 150, 600);
    fill(255, 136, 77);
    rect(150, 0, 150, 600);
    fill(255, 119, 51);
    rect(300, 0, 150, 600);
    fill(255, 102, 26);
    rect(450, 0, 150, 600);
    //body
    fill("pink");
    ellipse(300, 590, 330, 285);
    //neck
    fill(242, 192, 131);
    rect(261, 416, 80, 55);
    ellipse(300, 470, 80, 50);
    //face
    fill(252, 204, 156);
    beginShape();
    vertex(300, 440);
    vertex(390, 390);
    vertex(390, 250);
    vertex(300, 200);
    vertex(210, 250);
    vertex(210, 390);
    endShape();
    //ears
    ellipse(200, 340, 30, 40);
    ellipse(400, 340, 30, 40);
    //hair
    fill(179, 89, 0);
    noStroke();
    arc(270, 300, 150, 200, PI, 0 - QUARTER_PI, CHORD);
    arc(330, 300, 150, 200, PI + QUARTER_PI, 0, CHORD);
    //bun
    ellipse(300, 190, 120, 120);
	//eyes
    fill("white");
    ellipse(255, 325, 40, 22);
    ellipse(345, 325, 40, 22);
    fill("brown");
    ellipse(255, 325, 20, 20);
    ellipse(345, 325, 20, 20);
    fill("black");
    ellipse(255, 325, 13, 13);
    ellipse(345, 325, 13, 13);
    stroke("black");
    noFill();
    arc(255, 320, 40, 15, PI, 0, OPEN);
    arc(345, 320, 40, 15, PI, 0, OPEN);
    //eyebrows
    noStroke();
    fill(179, 89, 0);
    rect(235, 295, 45, 6);
    rect(320, 295, 45, 6);
    triangle(235, 295, 220, 305, 235, 301);
    triangle(365, 295, 380, 305, 365, 301);
    //nose
    stroke(228, 179, 129);
    fill(252, 204, 156);
    arc(300, 370, 20, 8, 0, PI, OPEN);
    line(290, 310, 293, 360);
    line(310, 310, 307, 360);
    //mouth
    noStroke();
    fill(255, 77, 77);
    arc(300, 390, 50, 30, 0, PI, CHORD);

}

For my self portrait I mainly focused on my most distinct facial features and attributes such as a big bun and a square jawline. I experimented with a variety of shapes and functions to allow for more flexibility in my drawing.

Sean Leo – Project_01

sleo-selfportrait

/*Sean B. Leo
Section C
sleo@andrew.cmu.edu
Project_01*/
function setup() {
    createCanvas(600, 600);
  }
  function draw() {
    background(225);
    noStroke();
    //skin
    fill(222, 197, 165);
    rect(200, 150, 200, 300);
    quad(200, 150, 200, 450, 178, 400, 150, 200);
    quad(400, 150, 450, 200, 415, 440, 400, 400);
    //hair
    fill(83, 47, 22);
    quad(150, 150, 350, 100, 450, 150, 350, 175);
    rect(150, 210, 10, 80);
    rect(440, 210, 10, 80);
    triangle(200, 150, 150, 250, 130, 175);
    triangle(400, 150, 470, 170, 450, 250);
    //beard
    quad(150, 249, 200, 375, 250, 470, 160, 430);
    quad(450, 249, 440, 430, 350, 470, 400, 375);
    quad(200, 400, 270, 450, 270, 500, 200, 460);
    quad(400, 400, 400, 460, 320, 500, 320, 450);
    rect(270, 450, 50, 50); 
    //musatche
    quad(200, 420, 270, 390, 280, 395, 300, 405);  
    quad(320, 390, 330, 395, 400, 420, 300, 405); 
   
    
  }

Thinking about drawing through coordinates was challenging as well as getting used to the grid orientation. I believe it’ll just take some getting used too and practice.

*not sure why my height is getting cropped off…

Taisei Manheim – Project 01 – Face

sketch

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-01

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

function draw() {
    background('pink');

    stroke('black');
    fill('tan')
    rect(270, 270, 60, 60)
    //neck

    fill('tan');
    ellipse(300, 200, 150, 200);
    //head

    fill('black');
    rect(270, 500, 20, 80)
    rect(310, 500, 20, 80)
    //legs

    fill('black');
    ellipse(300, 420, mouseX, 200);
    ellipse(300, 420, 150, 200);
    //body

    fill('tan');
    curve(260, 240, 280, 260, 320, 260, 340, 240);
    //mouth

    fill('black');
    triangle(290, 240, 300, 200, 310, 240);
    fill('tan');
    noStroke();
    triangle(292, 238, 302, 198, 310, 238);
    //nose

    fill('white');
    arc(270, 190, 25, 10, 0, PI, CHORD);
    arc(270, 192, 25, 10, PI, PI + PI, OPEN);
    arc(330, 190, 25, 10, 0, PI);
    arc(330, 192, 25, 10, PI, PI + PI, OPEN);
    //eyes

    fill('black');
    ellipse(270, 191, 8, 8)
    ellipse(330, 191, 8, 8)
    //pupils

    fill('black');
    rect(255, 165, 30, 8);
    rect(315, 165, 30, 8);

    fill ('black');
    translate (285, 140);
    rotate (2.8);
    arc(0, 0, 120, 70, 0, PI, CHORD);
    arc(0, 2, 120, 30, PI, PI + PI, OPEN);
    //left hair

    rotate (4.2);
    translate(37,-35)
    arc(0, 0, 80, 10, 0, PI, CHORD);
    arc(0, 2, 80, 50, PI, PI + PI, OPEN);
    //right hair
}

With this project I wanted to use a variety of shapes and commands such as rectangles, ellipses, arcs, curves, and triangles in order to get myself used to coding. It was interesting thinking about myself solely based on simple geometries and I created a moving image to depict how I imagine myself changing over the course of my life.

Ammar Hassonjee – Project 01 – Face

ammars-portrait

// Ammar Hassonjee
// Section C
// ahassonj@andrew.cmu.edu
// Project-01

function setup() {
    createCanvas(600, 600);
    background(200);
}

function draw() {
  //Drawing my shirt
    stroke('navy');
    fill('navy');
    if (mouseX < width / 2) {
        fill('black');
    }
    arc(300, 600, 500, 275, PI, 0);

    //Making the neck
    stroke('rgb(205, 161, 132)');
    fill('rgb(205, 161, 132)');
    quad(217, 470, 244, 400, 348, 400, 374, 470);
    ellipse(295, 470, 155, 60);

    //Forming the head
    stroke('rgb(215, 165, 132)');
    fill('rgb(215, 165, 132)');
    ellipse(300, 280, 250, 300);

    //Creating the Hair
    stroke('black');
    fill('black');
    beginShape()
    vertex(186, 215);
    vertex(198, 153);
    vertex(201, 161);
    vertex(242, 107);
    vertex(242, 127);
    vertex(313, 90);
    vertex(303, 111);
    vertex(377, 100);
    vertex(351, 117);
    vertex(427, 118);
    vertex(406, 140);
    vertex(452, 126);
    vertex(439, 157);
    vertex(461, 156);
    vertex(444, 185);
    vertex(454, 187);
    vertex(414, 215);
    endShape();

    //forming the ears
    stroke('rgb(215, 165, 132)');
    fill('rgb(215, 165, 132)');
    beginShape();
    vertex(180, 258);
    vertex(161, 260);
    vertex(151, 267);
    vertex(165, 326);
    vertex(180, 326);
    endShape();

    beginShape();
    vertex(419, 258);
    vertex(437, 260);
    vertex(447, 267);
    vertex(433, 326);
    vertex(326, 326);
    endShape();

    //creating the eyes
    noStroke();
    fill('white');
    ellipse(256, 266, 40, 30);
    ellipse(346, 266, 40, 30);

    noStroke();
    fill('rgb(132, 100, 80)');
    if (mouseIsPressed) {
      fill('rgb(220, 5, 5)');
    }
    ellipse(256, 266, 20, 20);
    ellipse(346, 266, 20, 20);

    noStroke();
    fill('white')
    ellipse(250, 263, 5, 5);
    ellipse(340, 263, 5, 5);

    //shaping the mouth
    stroke('rgb(229, 229, 229)');
    fill('rgb(229, 229, 229)');
    triangle(263, 377, 300, 388, 338, 377);

    // forming the nose
    stroke(132, 100, 80);
    strokeWeight(2);
    line(300, 281, 314, 338);
    line(314, 338, 318, 345);
    line(318, 345, 304, 350);

    //eyebrows
    noStroke();
    fill('black');
    triangle(226, 239, 277, 241, 278, 235);
    triangle(324, 242, 324, 236, 375, 238);
}

My process for completing this portrait began with experimenting with the different functions of ps.j5 and learning how the variables controlled shapes like ellipses and curves. I then began to digitally sketch the kind of drawing I wanted and then used the same coordinates in other softwares to code accurate shapes.

Katrina Hu – Project 01 – Face

I enjoyed playing with various shapes and colors throughout this project. At times, the process was slightly tedious, but overall it was a fun and informative learning experience.

Project-01-Face

function setup() {
    createCanvas(600, 600);
    background(255, 229, 244);
}

function draw() {
    //hair
        fill(0, 0, 0);
        ellipse(300, 300, 250); //top of hair
        rect(175, 300, 250, 200, 0, 0, 30, 30); //bottom of hair
    //neck
        fill(255, 229, 196);
        rect(280, 390, 40, 50);
    //face
        fill(255, 229, 196);
        ellipse(300, 300, 200); //face shape
    //facial features
        //eyes
            fill(255, 255, 255);
            ellipse(255, 290, 30); //white of left eye
            ellipse(345, 290, 30); //white of right eye
            fill(0, 0, 0);
            ellipse(255, 290, 17); //left pupil
            ellipse(345, 290, 17); //right pupil
        //mouth
            fill(0, 0, 0);
            arc(300, 350, 50, 50, 0, PI, CHORD);
    //body
        fill(200, 229, 247);
        rect(210, 430, 175, 200, 60, 60, 0, 0);


}

lee chu – looking outwards 01

The Pardall Tunnel, at UC Santa Barbara, had originally been an ordinary central passageway into Isla Vista, the main housing area for SB students. A tragedy in 2014 ended in the death of six SB students, and a year later as tribute to the lives lost, the tunnel lit up blue.

The tunnel now has LED strips lining its length, as well as motion sensors which trigger the lights as pedestrians and bikes make their way in and out of campus. Kim Yasuda, an art professor at SB, along with Marcos Novak of the Media Arts and Technology program were behind this project which now not only brings meaning, but also entertainment and excitement to a mundane trek to school. I had recently been to the Pardall Tunnel, and the lights seem to have only white LEDs and could benefit from a hardware upgrade.

source and extra info c:

Katrina Hu – Looking Outwards – 01

Times Square Heart Sculpture

The interactive Times Square Heart Sculpture

The Times Square Heart Sculpture, designed by the Bjarke Ingels Group, has a red heart hovering within a cube made with 400 glass rods. The heart grows brighter with more people touching the activation pad. The piece is very effective, and reflects the vibrant energy that flows throughout New York City.

I was inspired by the way it helps build community and inclusivity. The creators were very successful because it encourages people passing by to come together to light up the heart. Many people were involved in the creation of the project, including structural engineers and lighting experts to help with the LED technology. The project also works to encourage green technology, leading the way to a more environmentally friendly and sustainable future.

A passerby pressing the activation pad

Jai Sawkar – Project 01 – Self Portrait

Click to Change My Wardrobe

Portrait_Jai

//Jai Sawkar
//Section C
//jsawkar@andrew.cmu.edu
//Project-01


var b = 0;

function setup() {
    createCanvas(400, 450);
}

function draw() {

    rectMode(CENTER)
    ellipseMode(CENTER)
    angleMode(DEGREES)
    noStroke();
    background("#ccb0a7");

//Body
  
    fill(b);
    rect(201.7, 431.9, 268.2, 35.7);
    ellipse(123.7, 346.8, 113.2, 199.4);
    ellipse(281.1, 344.3, 113.2, 199.4);
    rect(202.4, 384.3, 270.2, 60.3);
    rect(202.5, 431.9, 270.1, 50.7);
    ellipse(205.4, 272.1, 220.2, 87.2);
    rect(201.6, 338.7, 74.9, 76.4);

//face
  
    fill(167, 136, 105);
    ellipse(202.3, 239.9, 76.3, 22.3);
    quad(164.6, 237.7, 240.8, 239.6, 231.9, 201.8, 172.1, 198.6);
    ellipse(162.1, 114.9, 34.1, 117.1);
    ellipse(248.5, 116.2, 34.5, 113.2);

//shadow
  
    fill(99, 95, 85);
    ellipse(216.4, 226.9, 40.2, 9.2);
    quad(172.4, 200.8, 196.2, 226.9, 236.5, 226.9, 233.2, 206.6);

//Face Infront of Shadow
  
    fill(167, 136, 105);
    ellipse(205.9, 133.1, 117.3, 165.3);

//hair
  
    fill(41, 35, 17);
    quad(143.9, 118.2, 147.0, 115.5, 147.9, 107.8, 143.7, 109.9);
    ellipse(146.1, 89.7, 6.9, 52.4);
    ellipse(179.8, 65.9, 69.3, 27.3);
    quad(266.3, 121.1, 263.6, 119.2, 261.8, 111.7, 265.7, 111.8);
    ellipse(190.1, 76.4, 89.4, 25.5);
    ellipse(199.6, 64.4, 80.4, 27.3);
    ellipse(223.7, 68, 69.3, 27.3);
    ellipse(231.8, 66.1, 69.3, 27.3);
    ellipse(262.9, 87.0, 6.9, 52.3);
    ellipse(264.4, 87.9, 6.9, 52.3);

}

function mousePressed() {
  
    b = random(0, 255)
  
}

I aimed to create a slightly abstract self-portrait that added a little flair. I began by using a series of shapes to create the body, and then mostly ellipses to create the rest of the face, and finally, used a variable to change my shirt color on each click.

Jasmine Lee – Project 01 – Face

selfportrait

//Jasmine Lee
//Section C
//jasmine4@andrew.cmu.edu
//Project-01-Face

function setup () {
	createCanvas(600, 600);
    background (180, 150, 210);
    angleMode(DEGREES);


    //reflection
    strokeWeight(0);
    fill(190, 250, 255);
    quad(420, 90, 410, 280, 330, 275, 345, 85);
    quad(420+95, 90+6, 410+95, 280+6, 330+95, 
    	 275+6, 345+95, 85+6);
    quad(420-12, 90+210, 410-12, 280+210, 330-12, 
    	 275+210, 345-12, 85+210);
    quad(420-12+95, 90+210+6, 410-12+95, 280+210+6, 
    	 330-12+95, 275+210+6, 345-12+95, 85+210+6);


    //hair-leftback
    strokeWeight(0);
    fill(50, 40, 35);
    triangle(170, 275, 178, 480, 120, 470);

    //hair-rightback
    strokeWeight(0);
    fill(50, 40, 35);
    triangle(330, 275, 368, 470, 290, 480);

    //body
    strokeWeight(0);
    fill(255, 198, 0);
    rect(143, 400, 200, 300, 50);

    //arm-lines
    strokeWeight(1.5);
    stroke(222, 190, 136);
    line(175, 475, 155, 600);
    line(310, 475, 330, 600);

    //neck
    strokeWeight(0);
    fill(253, 231, 187)
    ellipse(247, 425, 80, 55);

    //neck-shadow
    strokeWeight(0);
    fill(222, 190, 136)
    ellipse(247, 425, 80, 45);

    //head
    strokeWeight(0);
 	fill(253, 231, 187);
    rect(160, 240, 172, 190, 77);

    //lefteye
    strokeWeight(0);
    fill(255, 255, 255);
    ellipse(200, 350, 41, 30);

    //righteye
    strokeWeight(0);
    fill(255, 255, 255);
    ellipse(290, 350, 41, 30);

    //leftpupil
    strokeWeight(0);
    fill(0,0,0);
    ellipse(200, 350, 25, 28);

    //rightpupil
    strokeWeight(0);
    fill(0,0,0);
    ellipse(290, 350, 25, 28);

     //leftpupilshine
    strokeWeight(0);
    fill(255, 255, 255);
    ellipse(205, 339, 5, 5);

    //rightpupilshine
    strokeWeight(0);
    fill(255, 255, 255);
    ellipse(295, 339, 5, 5);

    //leftblush
    strokeWeight(0);
    fill(250, 180, 160);
    ellipse(185, 380, 30, 30);

    //rightblush
    strokeWeight(0);
    fill(250, 180, 160);
    ellipse(305, 380, 30, 30);

    //noseshadow
    strokeWeight(0);
    fill(222, 190, 136);
    triangle(235, 370, 245, 375, 255, 370);

    //lips
    strokeWeight(0);
    fill(255, 170, 150);
    ellipse(245, 394, 30, 10);

    //mouth-line
    strokeWeight(1);
    stroke(150, 140, 100);
    noFill();
    arc(245, 389, 40, 12, 14, 167);

    //hair
    strokeWeight(4);
    stroke(50, 40, 35);
    fill(50, 40, 35);
    arc(247, 305, 180, 175, 180, 360);

    //hair-left
    strokeWeight(4);
    stroke(50, 40, 35);
    noFill();
    arc(44, 335, 300, 330, 340, 30);
    strokeWeight(25);
    stroke(50, 40, 35);
    noFill();
    line(167, 300, 167, 490);

    //hair-right
    strokeWeight(20);
    stroke(50, 40, 35);
    noFill();
    line(329, 300, 326, 490);

    //hair-bangs
    strokeWeight(0);
    fill(50, 40, 35);
    arc(157, 285, 150, 100, 360, 90);
    arc(335, 285, 230, 100, 90, 180);

    //hair-barrette
    strokeWeight(0);
    fill(105, 255, 255);
    rect(155, 333, 25, 5);

    //eyebrows
    strokeWeight(3.5);
    stroke(0);
    noFill();
    arc(200, 360, 70, 70, 220, 295);
    arc(290, 360, 70, 70, 240, 315);
}

Doing this portrait was an interesting process. Since it was drawn using the computer, the process was a bit tedious because of the lack of direct translation from hand to “paper.” It was also a little tricky figuring out the coordinates for some of the shapes I wanted to draw, as well as the angles of the curves. I decided to try out a more cartoon-like style that is suitable with flat shapes and colors.

lee chu – project 01 – face

lrchu-face

// Lee Chu
// section c
// face-01


function setup() {
    createCanvas(600, 600);
    background(127);

    // blue ribbons
    fill('cyan');
    strokeWeight(0);
    rect(10, 0, 80, 600);
    rect(110, 0, 80, 600);
    rect(210, 0, 80, 600);
    rect(310, 0, 80, 600);
    rect(410, 0, 80, 600);
    rect(510, 0, 80, 600);

    // orange ribbons
    fill('orange');
    rect(0, 10, 600, 80);
    rect(0, 110, 600, 80);
    rect(0, 210, 600, 80);
    rect(0, 310, 600, 80);
    rect(0, 410, 600, 80);
    rect(0, 510, 600, 80);

    // cyan fillers
    fill('cyan');
    rect(110, 10, 80, 80);
    rect(310, 10, 80, 80);
    rect(510, 10, 80, 80);
    rect(10, 110, 80, 80);
    rect(210, 110, 80, 80);
    rect(410, 110, 80, 80);
    rect(110, 210, 80, 80);
    rect(310, 210, 80, 80);
    rect(510, 210, 80, 80);
    rect(10, 310, 80, 80);
    rect(210, 310, 80, 80);
    rect(410, 310, 80, 80);
    rect(110, 410, 80, 80);
    rect(310, 410, 80, 80);
    rect(510, 410, 80, 80);
    rect(10, 510, 80, 80);
    rect(210, 510, 80, 80);
    rect(410, 510, 80, 80);

    // circles
    fill('white');
    ellipse(0, 0, 20, 20);
    ellipse(100, 0, 20, 20);
    ellipse(200, 0, 20, 20);
    ellipse(300, 0, 20, 20);
    ellipse(400, 0, 20, 20);
    ellipse(500, 0, 20, 20);
    ellipse(600, 0, 20, 20);
    ellipse(0, 100, 20, 20);
    ellipse(100, 100, 20, 20);
    ellipse(200, 100, 20, 20);
    ellipse(300, 100, 20, 20);
    ellipse(400, 100, 20, 20);
    ellipse(500, 100, 20, 20);
    ellipse(600, 100, 20, 20);
    ellipse(0, 200, 20, 20);
    ellipse(100, 200, 20, 20);
    ellipse(200, 200, 20, 20);
    ellipse(300, 200, 20, 20);
    ellipse(400, 200, 20, 20);
    ellipse(500, 200, 20, 20);
    ellipse(600, 200, 20, 20);
    ellipse(0, 300, 20, 20);
    ellipse(100, 300, 20, 20);
    ellipse(200, 300, 20, 20);
    ellipse(300, 300, 20, 20);
    ellipse(400, 300, 20, 20);
    ellipse(500, 300, 20, 20);
    ellipse(600, 300, 20, 20);
    ellipse(0, 400, 20, 20);
    ellipse(100, 400, 20, 20);
    ellipse(200, 400, 20, 20);
    ellipse(300, 400, 20, 20);
    ellipse(400, 400, 20, 20);
    ellipse(500, 400, 20, 20);
    ellipse(600, 400, 20, 20);
    ellipse(0, 500, 20, 20);
    ellipse(100, 500, 20, 20);
    ellipse(200, 500, 20, 20);
    ellipse(300, 500, 20, 20);
    ellipse(400, 500, 20, 20);
    ellipse(500, 500, 20, 20);
    ellipse(600, 500, 20, 20);
    ellipse(0, 600, 20, 20);
    ellipse(100, 600, 20, 20);
    ellipse(200, 600, 20, 20);
    ellipse(300, 600, 20, 20);
    ellipse(400, 600, 20, 20);
    ellipse(500, 600, 20, 20);
    ellipse(600, 600, 20, 20);

    //dish
    fill(color(255, 255, 213));
    strokeWeight(1);
    ellipse(300, 420, 225, 60);
    noFill();
    strokeWeight(.5);
    ellipse(300, 420, 160, 35);
}

function draw() {
    // face
    strokeWeight(1);
    fill('white');
    ellipse(300, 300, 200, 250);
    
    // eyes
    fill('black');
    ellipse(260, 300, 15, 15);
    ellipse(340, 300, 15, 15);

    // eyebrows
    beginShape();
    vertex(270, 270);
    vertex(275, 280);
    vertex(250, 270);
    endShape();
    beginShape();
    vertex(330, 270);
    vertex(325, 280);
    vertex(350, 270);
    endShape();

    // mouth
    noFill();
    strokeWeight(2.5);
    arc(290, 310, 20, 20, 0, PI);
    arc(310, 310, 20, 20, 0, PI);

    // blush
    fill(color(255, 218, 255));
    strokeWeight(0);
    ellipse(360, 325, 40, 20);
    ellipse(240, 325, 40, 20);
}

egg