Month: August 2019

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.

Bo Yang-Project-01-Face

In the beginning, I want to draw a little girl with fringe. However, I’m not a good painter. It is more like a cartoon here. And I love the two colors I made it.

Bo-sketch

/*
    Bo Yang
    byang2@andrew.cmu.edu
    Section A
    This program draws a self portrait.
*/

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

function draw() {
    background(180,60,80);
    if (mouseX < (width / 2)) {
        background(60, 100, 150);
    }
  
    //body
    line(180, 180, 225, 300); 
    line(120,180,75,300);
  
    //face
    fill(255,200,200);
    ellipse(150, 150, 120, 100); {
      
    //left eye
    fill(0);
    noFill();
    strokeWeight(7.0);
    strokeCap(ROUND);
    beginShape();
    curveVertex(100, 250);
    curveVertex(135, 150);
    curveVertex(115, 150);
    curveVertex(143, 250);
    endShape();
      
    //right eye
    strokeJoin(MITER);
    beginShape();
    vertex(180, 135);
    vertex(170, 143);
    vertex(180, 150);
    endShape();
      
    //nose
    point(150, 160);
      
    //mouth
    fill(255, 0, 0);
    arc(150, 175, 15, 25, 0, PI, CHORD);
      
    //hair
    noFill()
    arc(150, 150, 160, 180, 84, 76, OPEN);
    line(185, 190, 215, 201);
    line(95, 210, 109, 192);
      
    //earring
    fill(255, 204, 0);
    triangle(80, 155, 99, 155, 91, 176);
    triangle(205, 155, 224, 155, 215, 176);
      
    //headwear
    ellipseMode(RADIUS); 
    fill(180, 200, 50); 
    ellipse(200, 90, 28, 28); 

    ellipseMode(CENTER); 
    fill(255, 204, 0); 
    ellipse(200, 90, 25, 25); 
  }
}

Raymond Pai: Project-01-Face

A self-portrait made using mostly 2D primitives. I played with the shapes on Illustrator before approaching it on p5.js. I was surprised by what felt like limitations of the medium, which I eventually liked more than my initial drawing.

Brainstorming on Illustrator

Round boi

RaymondPai-Project-01

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

function draw() {
    background(260, 200, 0);
//EARS
    strokeWeight(10)
    fill(250, 200, 140);
    arc(100, 370, 180, 180,
        1, PI + HALF_PI, OPEN);
    strokeWeight(10)
    fill(250, 200, 140);
    arc(500, 370, 180, 180,
        4, PI , OPEN);
//HAIR1
    strokeWeight(0);
    fill(0);
    ellipse(200, 270, 300, 300);
// HEAD
    strokeWeight(10);
    fill(250, 200, 140);
    ellipse(300, 350, 485, 500);
//EYES
    strokeWeight(0);
    fill(255);
    ellipse(200, 300, 120, 160)

    strokeWeight(0)
    fill(255);
    ellipse(400, 300, 120, 160)
//PUPILS
    strokeWeight(0);
    fill(0);
    ellipse(220, 300, 70, 90)

    strokeWeight(0)
    fill(0);
    ellipse(380, 300, 70, 90)
//MOUTH
    strokeWeight(16)
    fill(250, 200, 140);
    arc(300, 350, 400, 400,
    1, PI, OPEN);
    ///return long lines ^ (for readability)
//NOSE
    strokeWeight(10);
    fill(255, 190, 130);
    ellipse(300, 420, 100, 70)
//EYEBROWS
    strokeWeight(25)
    line(140, 230, 250, 210);

    strokeWeight(25)
    line(400, 180, 500, 200);
//ACCESSORIES
    strokeWeight(0);
    fill(100, 100, 100);
    rect(40, 420, 20, 50);

    strokeWeight(0);
    fill(100, 100, 100);
    rect(540, 420, 20, 50);
//HAIR
    strokeWeight(10)
    fill(0);
    arc(300, 330, 520, 520,
    4, PI + PI, OPEN);
}

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


}

Claire Lee – Project 01 – Face

This project was definitely a learning experience for me. I realized that it’s a lot more difficult for me to translate the image I want to create to the canvas when I’m using code as a medium instead of a program like Photoshop or Illustrator. It took a lot of little adjustments, but I’m happy with how it came out and I think I learned a lot.

project01_face

function setup() {
    createCanvas(600, 600);
    background(255, 208, 223);

    noStroke();
    fill(50,30,30);
    rect(150,300,300,250,0,0,50,50); 
    //hair base

    noStroke();
    fill(50,30,30);
    ellipse(300,300,300,300);
    //top of hair

    stroke(150);
    strokeWeight(2);
    fill(200);
    ellipse(300,600,300,350);
    //body

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196);
    rect(260,380,80,100,0,0,40,40);
    //neck

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196);
    ellipse(430,330,38,38);
    //right ear

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196);
    ellipse(170,330,38,38);
    //left ear

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196); 
    ellipse(300,300,250,250);
    //base for face
  
    noStroke();
    fill(0);
    ellipse(360,320,20,20);
    //left eye

    noStroke();
    fill(0);
    ellipse(240,320,20,20);
    //right eye

    noStroke();
    fill(238,125,77);
    triangle(300,330,280,350,320,350);
    //nose
    
    noStroke();
    fill(215, 59, 62);
    ellipse(300,380,75,50);
    //mouth (part one) 
    //I tried to draw an arc but that didn't work

    noStroke();
    fill(255,229,196);
    rect(250,355,90,25);
    //mouth (part two), improvised

    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(230,320,95,90);
    //glasses (right)

    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(370,320,95,90);
    //glasses (left)

    line(280,318,320,318); 
    //glasses(middle)

    line(174,298,184,308);
    //glasses(frame left)

    line(416,308,426,298);
    //glasses(frame right)

    noStroke();
    fill(50,30,30);
    rotate(PI/5); 
    //question: why does ellipse move locations when being rotated?
    ellipse(420,-20,200,90); 
    //right side bangs

    noStroke();
    fill(50,30,30);
    rotate(46);
    ellipse(-105,-302,130,50);
    //left side bangs

}

Fanjie Jin – Project 01 – Self Portrait

Sketch

//Fanjie Jin
//Section C
//Fjin@andrew.cmu.edu
//Project-01-Face

function setup(){
  createCanvas(600,600);
  background(167,226,235)}
// computer
function draw(){
//chair
  noStroke();
  fill(149,70,41);
  quad(362,343,545,354,535,600,337,600);

//cloth
  noStroke();
  fill(78,101,111);
  ellipse(329,600,280,220);

  noStroke();
  fill(72,75,75);
  quad(0,250,62,233,155,600,0,600);

  noStroke();
  fill(132,132,132);
  quad(62,233,108,244,203,600,155,600);

//neck
  noStroke();
  fill(255,223,203);
  rect(302,430,50,69);

  noStroke();
  fill(255,223,203);
  ellipse(329,335,195,230);

  noStroke();
  fill(255,223,203);
  ellipse(327,496,50,30);

//face
  noStroke();
  fill(230,202,184);
  ellipse(327,449,50,20);

  noStroke();
  fill(255,223,203);
  ellipse(329,350,195,210);

//ears
  noStroke();
  fill(255,223,203);
  ellipse(238,380,35,35);

  noStroke();
  fill(255,223,203);
  ellipse(418,380,35,35);

//hair
  fill(0);
  stroke(255);
  strokeWeight();
  beginShape();
  vertex(239, 340);
  quadraticVertex(304, 345, 359, 315);
  quadraticVertex(361, 324, 358, 330);
  quadraticVertex(400, 300, 400, 290);
  quadraticVertex(420, 320, 427, 357);
  quadraticVertex(450, 250, 340, 210);
  quadraticVertex(210, 210, 230, 360);
  endShape();

//hand
  fill(167,226,235);
  stroke(255);
  strokeWeight();
  beginShape();
  vertex(260, 600);
  quadraticVertex(260, 590, 260, 560);
  quadraticVertex(255, 590, 255, 600);
  endShape()

  fill(149,70,41);
  stroke(255);
  strokeWeight();
  beginShape();
  vertex(403, 600);
  quadraticVertex(403, 590, 403, 560);
  quadraticVertex(408, 590, 408, 600);
  endShape()

//eye left
  noStroke();
  fill(0);
  ellipse(283,370,13,13);

  noStroke();
  fill(255);
  ellipse(285,368,3,3);

//eyes right
  noStroke();
  fill(0);
  ellipse(373,370,13,13);

  noStroke();
  fill(255);
  ellipse(374,368,3,3);

//glasses
  noFill()
  stroke(87, 22, 22);
  strokeWeight(7);
  ellipse(374,378,50,50);

  noFill();
  stroke(87, 22, 22);
  strokeWeight(7);
  ellipse(285,378,50,50);

  noFill();
  strokeWeight(7);
  beginShape();
  vertex(310, 378);
  quadraticVertex(330, 365, 349, 378);
  endShape();

  noFill();
  stroke(87, 22, 22);
  strokeWeight(7);
  line(399,378,424,360);

  noFill();
  stroke(87, 22, 22);
  strokeWeight(7);
  line(260,378,230,360);

  noFill();
  strokeWeight(3);
  beginShape();
  vertex(310, 425);
  quadraticVertex(330, 435, 349, 425);
  endShape();

//ear
  noFill();
  strokeWeight(7);
  beginShape();
  vertex(310, 378);
  quadraticVertex(330, 365, 349, 378);
  endShape();

//eyebrow
  noFill();
  strokeWeight(2);
  beginShape();
  vertex(270, 350);
  quadraticVertex(284, 340, 298, 350);
  endShape();

  noFill();
  strokeWeight(2);
  beginShape();
  vertex(360, 350);
  quadraticVertex(374, 340, 388, 350);
  endShape();}

Throughout the process, I have begun to gain more familiarity with this new workflow and I am looking forward to learning how to develop the code I wrote in much cleaner, more efficient ways.

Ankitha Vasudev – Project 01 – Self Portrait

(Press on portrait to change background)

sketch

// Ankitha Vasudev
// Section B 
// ankithav@andrew.cmu.edu
// Project-01-Face
 
function setup() {
    createCanvas(600, 600);
}

function draw() {
    noStroke();

    //background squares 
	background(255, 218, 255);
    fill(255, 180, 255);
    rect(10, 10, 580, 580);
    fill(213, 231, 255);
    rect(20, 20, 560, 560);
    rect(30, 30, 500, 500);

    //background color change 
  if (mouseIsPressed) {
    if (mouseButton === LEFT) {
      fill(172, 220, 255);
      rect(0, 0, 600, 600);
      fill(255, 220, 255);
      rect(10, 10, 580, 580);
      fill(182, 234, 255);
      rect(20, 20, 560, 560);
    }
}

    //hair
    fill(1);
    rect(210, 180, 212, 240, 200, 200, 15, 20);
    fill(60, 0, 0);
    rect(220, 190, 190, 215, 150, 150, 15, 20);

    //shoulders
    fill(255, 180, 255);
    rect(180, 428, 260, 185, 20);
    triangle(160, 600, 180, 450, 180, 600);
    triangle(440, 600, 440, 450, 460, 600);
    fill(189, 190, 255);
    arc(310, 428, 60, 60, 0, PI, OPEN);
    stroke(189, 190, 255);
    strokeWeight(3);
    line(220, 470, 200, 600);
    line(400, 470, 415, 600);

    //neck
    noStroke();
    fill(123, 77, 0);
    rect(290, 370, 40, 75, 100);

    //ears
    ellipse(231, 305, 18, 30);
    fill(96, 68, 0);
    ellipse(232, 305, 14, 18);
    fill(237, 239, 122);
    ellipse(231, 320, 7, 7);

    //face
    fill(123, 77, 0);
    rect(233, 205, 150, 200, 100);

    //eyes
    fill(255);
    arc(270, 290, 30, 30, PI, 0, OPEN);
    arc(343, 290, 30, 30, PI, 0, OPEN);
    fill(0);
    ellipse(270, 284, 15, 15);
    ellipse(343, 284, 15, 15);

    //left eyebrow 
    beginShape();
    vertex(252, 268);
    vertex(264, 265);
    vertex(290, 267);
    vertex(292, 263);
    vertex(262, 262);
    endShape(CLOSE);

    //right eyebrow 
    beginShape();
    vertex(323, 263);
    vertex(351, 262);
    vertex(363, 268);
    vertex(352, 265);
    vertex(325, 267);
    endShape(CLOSE);

    //glasses
    stroke(115, 0, 113);
    strokeWeight(3);
    noFill();
    rect(250, 270, 40, 30, 5, 5, 90, 90);
    rect(323, 270, 40, 30, 5, 5, 90, 90);
    line(290, 280, 323, 280);
    line(234, 272, 251, 272);
    line(361, 272, 382, 272);

    //nose
    stroke(0);
    strokeWeight(2);
    line(310, 310, 300, 335);
    line(300, 339, 310, 338);

    //mouth
    fill(60, 0, 0);
    quad(290, 365, 325, 365, 315, 372, 292, 374);
}

I tried to experiment with multiple shapes and commands using a very animated style of drawing. I wanted to include features that were specific to me; these include my purple-frame glasses and my brown and black hair. Lastly, I used a palette comprising of my favorite colors (pastel shades of blue and pink) for the background and used the mouseIsPressed command to alter the background color. 

Claire Lee – Looking Outwards – 01

Cell by Keiichi Matsuda and James Alliban is an interactive art installation that uses Xbox Kinect technology to trace viewers across the screen by adding tags taken from social media to their form, until their entire screen “self” is comprised of lines of text that seem to simultaneously represent everything and nothing at all. I found this project to be fascinating because of its technological advancement in the interactive art field and its piercing social commentary.

The piece provokes a lot of thought about how we construct our sense of self in the new digital world. It seems to be asking the question: do we put ourselves into social media, or does social media put itself into us?

Cell at Audi CIty Beijing in December 2013.

In collaboration with Microsoft and the openFrameworks community, the creators of this installation pioneered a new method of making interactive displays by building a new code library that supports Kinect for Windows. This code is on an open-source platform, so it is bound to inspire many future projects as well.

James Alliban & Keiichi Matsuda: Cell, Interactive Installation 2011

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