Category: SectionC

Project 01 – Self Portrait

This is what I look like in the morning

hayoonc
function setup() {
    createCanvas(500, 600);
    background(251, 242, 255);
}

function draw() {
    //Hair 1
    noStroke();
    fill(80)
    ellipse(215, 140, 190, 170);
    beginShape();
        vertex(131, 100);
        vertex(75, 245);
        vertex(80, 240);
        vertex(88, 255);
        vertex(93, 260);
        vertex(100, 255);
        vertex(105, 265);
        vertex(140, 270);
        vertex(190, 100);
    endShape();

    //Body
    fill(142, 133, 160);
    rect(95, 260, 390, 500, 140)
  
    //Head
    noStroke();
    fill(255, 237, 225);
    ellipse(240, 210, 260, 240);
  
    //Shadow
    fill(235, 184, 146)
    ellipse(170, 205, 27, 14);
    ellipse(280, 205, 30, 14);
    triangle(215, 210, 208, 220, 200, 240);
    triangle(250, 210, 260, 225, 265, 240);
    fill(252, 218, 192);
    beginShape();
        vertex(200, 296);
        bezierVertex(200, 295, 240, 320, 260, 295);
    endShape();
  
    //eyes
    strokeWeight(1);
    stroke(0);
    fill(254, 246, 246);
    ellipse(170, 200, 27, 12);
    ellipse(280, 200, 30, 10);

    //Pupils 
    fill(0);
    ellipse(172, 200, 7, 7);
    ellipse(282, 200, 5, 6)

    //nose
    noFill();
    arc(240, 220, 15, 10, 175, 70);
    arc(220, 220, 13, 11, 90, 180);
    push();
        translate(230,223);
        rotate(125.9);
        arc(0, 0, 15, 10, 170, 90);
    pop();
    arc(220, 220, 14, 10, 20, 360);
    arc(240, 220, 14, 10, 20, 360);

    //Mouth
    fill(249,134, 128);
    arc(220, 242, 13, 13, PI, 0);
    arc(233, 242, 13, 13, PI, 0);
    arc(227, 242, 26, 15, 0, PI);
    stroke(0);
    strokeWeight(0.8);
    line(214, 243, 238, 243);

    //Hair 2
    noStroke();
    fill(80);
    push();
        translate(125,90);
        rotate(-0.25);
        rect(0, 0, 160, 70, 140)
    pop();
    triangle(170, 150, 100, 250, 123, 127);
    push();
    translate(320, 110);
    rotate(0.5);
    ellipse(0, 0, 160, 70)
    pop();
    beginShape();
        vertex(300, 100);
        vertex(360, 289);
        vertex(370, 285);
        vertex(375, 280);
        vertex(380, 285);
        vertex(388, 277);
        vertex(395, 280);
        vertex(405, 272);
        vertex(410, 277);
        vertex(417, 265);
        vertex(425, 272);
        vertex(435, 265);
        vertex(445, 270);
        vertex(393, 140);
    endShape();
  
    //Eyebrows
    ellipse(170, 180, 15, 5);
    ellipse(275, 180, 17, 5);
  
    //Flower
    noFill();
    stroke(125, 206, 160);
    strokeWeight(5);
    beginShape();
        vertex(230, 550);
        bezierVertex(260, 450, 230, 305, 180, 400);
    endShape();
    noStroke();
    fill(255, 230, 69);
    ellipse(160, 360, 30, 50);
    push();
        translate(195,370)
        rotate(0.8);
        ellipse(0, 0, 30, 50)
    pop();  
    push();
        translate(210,400)
        rotate(1.5);
        ellipse(0, 0, 30, 50)
    pop();  
    push();
        translate(200,430)
        rotate(1.9);
        ellipse(0, 0, 30, 50)
    pop();  
    push();
        translate(155,435)
        rotate(3.7);
        ellipse(0, 0, 35, 50)
    pop();  
    ellipse(130, 400, 50, 35);
    fill(216, 162, 98);
    ellipse(170, 400, 60, 60)

  
  //Arm
    strokeWeight(0);
    fill(255, 237, 225);
    ellipse(410, 360, 120, 110);
    push();
        translate(470, 370);
        rotate(2);
        rect(0, 0, 160, 100, 140)
    pop();
    push();
        translate(220, 450);
        rotate(-0.2);
        rect(0, 0, 200, 80, 170);
    pop();
      rect(195, 428, 85, 100, 100);
      rect(180, 428, 60, 30, 70);
      rect(175, 455, 60, 30, 70);
      rect(183, 482, 60, 30, 70);
      rect(193, 505, 50, 25, 70);
  
    //Flower face
    strokeWeight(1);
    stroke(0);
    fill(254, 246, 246);
    ellipse(150, 400, 12, 7);
    ellipse(180, 400, 11, 7);
    line(160, 400, 157, 410);
    line(157, 410, 159, 412);
    noStroke();
    fill(247, 84, 84);
    ellipse(162, 417, 10, 3);
    ellipse(162, 420, 10, 3);
    fill(0);
    ellipse(150.5, 398, 4, 4)
    ellipse(180.5, 398, 4, 4)
  
  //Blush
    if (mouseIsPressed) {
        fill(255, 186, 186);
    } else {
        fill(255, 237, 225);
    }
    ellipse(160, 227, 40, 20);
    ellipse(295, 227, 40, 20);
}

Project 01 – Self Portrait

self-portrait.js 
function setup() {
    createCanvas(600, 600);
    background(183,163,146);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    stroke(198,213,204);
    strokeWeight(100);
    line(-20,-20,619,619);
    line(0,427,600,480);
    noStroke();
    fill(234,219,192);
    ellipse(550,350,400,600);
    fill(183,172,157,140);
    triangle(550,460,520,360,580,360);
    ellipse(450,300,100,80);
    ellipse(635,300,100,80);
    stroke(0,0,0);
    strokeWeight(55);
    line(0,300,570,300);
    strokeWeight(35);
    line(350,450,650,450);
    line(0,520,545,520);
    noStroke();
    fill(255,255,255,70);
    circle(450,300,42);
    circle(450,300,20);
}

Project 01 – Self Portrait

This is my self portrait, that changes color when you move your mouse around

self-portrait
/*
*Alyssa Song
*agsong@andrew.cmu.edu
*Section C
*
*This program draws a self-protrait. It takes a little bit of time to load!
*/

function setup() {
    createCanvas(800, 800);
    //background(255, 255, 255);
}
   

function draw() {
	stroke(0);
	strokeWeight(5);
	//background changes color when mouse is on left or right side of screen
	 if (mouseX < 0.5*width) {
    	background(228, 228, 253); //light purple background
    } else {
    	background(198, 226, 249); //light blue background
    }

	//hair in the back and face
	fill(0, 0, 0);
	quad(0.25*width, 0.25*height, 0.125*width, 0.875*height, 0.875*width, 0.875*height, 0.75*width, 0.25*height) //back hair
	fill(227, 180, 171); //skin color
	ellipse(0.5*width, 0.5*height, 0.5*width, 0.7*height); //face

    //eyebrows
    fill(0, 0, 0);
    quad(0.4375*width, 0.40625*height, 0.4375*width, 0.4375*height, 0.3125*width, 0.4375*height, 0.3125*width, 0.40625*height); //left eyebrow
    quad(0.6875*width, 0.40625*height, 0.6875*width, 0.4375*height, 0.5625*width, 0.4375*height, 0.5625*width, 0.40625*height); //right eyebrow

    //hair in front of face
    quad(0.25*width, 0.25*height, 0.25*width, 0.5*height, 0.5*width,0.25*height, 0.5*width, 0.125*height) //left side hair
    fill(0, 0, 0);
    quad(0.75*width, 0.25*height, 0.75*width, 0.5*height, 0.5*width, 0.25*height, 0.5*width, 0.125*height) //right side hair
    fill(0, 0, 0);

    //eyes
    fill(255, 255, 255); //white
    ellipse(0.375*width, 0.5*height, 0.125*width, 0.0625*height); //left eye
    //change left eye color when mouse is on left or right side of the screen
    if (mouseX < 0.5*width) {
    	fill(149,85,73); //light brown
    } else {
    	fill(104, 47, 48); //brown
    }
    ellipse(0.375*width, 0.5*height, 0.0625*width); //left iris
    fill(0, 0, 0); //black
    ellipse(0.375*width, 0.5*height, 0.02*width); //left pupil
    fill(255, 255, 255); //white
    ellipse (0.38*width, 0.49*height, 0.02*width); //left shine
    fill(255, 255, 255); //white
    ellipse(0.625*width, 0.5*height, 0.125*width, 0.0625*height); //right eye
    //change right eye color when mouse is on left or right side of the screen
    if (mouseX < 0.5*width) {
    	fill(149,85,73); //light brown
    } else {
    	fill(104, 47, 48); //brown
    }
    ellipse(0.625*width, 0.5*height, 0.0625*width); //right pupil
    fill(0, 0, 0) //black
    ellipse(0.625*width, 0.5*height, 0.02*width); //right pupil
    fill(255, 255, 255); //white
    ellipse(0.635*width, 0.49*height, 0.02*width); //right shine

    //nose 
    line(0.5*width, 0.5*height, 0.5*width, 0.5625*height); 
    line(0.5*width, 0.5625*height, 0.5625*width, 0.625*height);
    line(0.5*width, 0.625*height, 0.5625*width, 0.625*height);

    //mouth
    //change lip color when mouse is on left or right side of the screen
    if (mouseX < 0.5*width) {
    	fill(160, 95, 120); //nude lip
    } else {
    	fill(152, 41, 41); //red lip
    }
    quad(0.4375*width, 0.71875*height, 0.46875*width, 0.6875*height, 0.53125*width, 0.6875*height, 0.5625*width, 0.7185*height); //upper lip
    quad(0.4375*width, 0.71875*height, 0.46875*width, 0.75*height, 0.53125*width, 0.75*height, 0.5625*width, 0.7185*height); //lower lip
    
    //blush
    if (mouseX < 0.5*width) {
    	fill(241, 212, 230); //nude lip
    } else {
    	fill(229, 142, 196); //red lip
    }
    ellipse(0.625*width, 0.625*height, 0.0625*width); //right cheek
    ellipse(0.375*width, 0.625*height, 0.0625*width); //left cheek

}

Project 01 – Self Portrait

This is what I wish I looked like.

Self-PortraitDownload
function setup() {
    createCanvas(800, 800);
    background(250);
}

function draw() {
//German Flag background
    fill(0, 0, 0);
    rect(0, 0, 800, 800/3);   //creates the black portion
    fill(218, 41, 28);
    rect(0, 800/3, 800, 1600/3);    //creates the red portion
    fill(255, 205, 0);
    rect(0, 1600/3, 800, 800);    //creates the yellow portion
//left face line
    line(250, 250, 250, 500);
//right face line
    line(550, 250, 550, 500);
//hat
    strokeWeight(3);
    fill(155, 175, 220);
    arc(400, 250, 300, 225, PI, 0, CHORD);   //creates the hat itself
    fill(255, 233, 220);
    arc(400, 230, 90, 60, PI, 0, CHORD);    //provides the skin color underneath
    arc(340, 300, 50, 15);    //provides the smaller arc within the hat
//left jawline
    line(250, 500, 370, 570);
//right jawline
    line(550, 500, 430, 570);
//chin
    strokeWeight(2);
    arc(400, 570, 60, 20, 0, PI);    //physical chin
    strokeWeight(0);
    rect(250, 250, 300, 250);   //the following chin commands are all to color that portion of the face
    fill(255, 233, 220);
    rect(370, 470, 60, 100);
    triangle(250, 500, 370, 500, 370, 570);
    triangle(550, 500, 430, 570, 430, 500);
    strokeWeight(1);
//eyebrows
    strokeWeight(4);
    fill(0, 0, 0);
    quad(370, 280, 370, 290, 300, 295, 305, 285);   //left eyebrow
    strokeWeight(5);
    noFill();
    arc(460, 290, 55, 30, PI, 0);   //right eyebrow
//nose
    fill(255, 233, 220);
    strokeWeight(3);
    arc(400, 395, 30, 25, 0, PI);
    arc(385, 395, 15, 15, 1/2*PI, 3/2*PI);    //left nostril
    arc(415, 395, 15, 15, 3/2*PI, 1/2*PI);    //right nostril
//mouth
    fill(250, 250, 250);
    arc(400, 450, 100, 100, 0, PI, CHORD);

//eyes
    ellipse(340, 310, 50, 25);    //left eye
    ellipse(460, 310, 50, 25);    //right eye
    fill(100, 41, 19);
    ellipse(340, 310, 30, 25);    //left iris
    ellipse(460, 310, 30, 25);    //right iris
    fill(0, 0, 0);
    circle(340, 310, 15);   //left pupil
    circle(460, 310, 15);   //right pupil

}

Project 01- Self Portrait

This is what i look like everyday.

sketchDownload
function setup() {
    createCanvas(500, 500);
    background(250);
}

function draw() {
  //background
  strokeWeight(0);
  fill(255,0,0);
  rect(0,0, 167,500);
  fill(255,255,255);
  rect(167,0, 166,500);
  fill(0,255,0);
  rect(333,0, 167,500);
  //face color
  fill(191, 128, 111);
  //face shape
  ellipse(250, 250, 210, 272);
  //nose
  strokeWeight(1);
  stroke(0,0,0);
  arc(240,270, 10, 10, 1/2*PI, 3/2*PI);
  arc(260,270, 10, 10, 3/2*PI, 1/2*PI);
  arc(250,275, 20, 10, 0,PI);
  line(240,265, 242,240);
  //lips
  arc(235,298,30,7,PI,0);
  arc(265,298,30,7,PI,0);
  //eyebrows
  strokeWeight(0)
  fill(0,0,0);
  quad(225,197, 228,203, 185,202, 185,200);
  quad(275,203, 278,197, 315,200, 315,202);
  fill(191,128,111);
  //smile
  fill(150,0,0);
  arc(250, 300, 60, 60, 0, PI);
  //eye white
  fill(255, 255, 255);
  //eyes
  ellipse(205,225, 40, 30);
  ellipse(295,225, 40, 30);
  //eye color
  fill(95,44,22);
  ellipse(205,225, 25, 25);
  ellipse(295,225, 25, 25);
  //pupils
  fill(0,0,0);
  circle(205,225, 10);
  circle(295,225, 10);
  //sombrero
  fill(249,230,204);
  ellipse(250,145, 300,100);
  arc(250,150, 100,250,PI, 0);
  //pokeball
  fill(255,0,0);
  arc(250, 100, 75, 75, PI, 0);
  fill(255,255,255);
  arc(250,100, 75,75,0,PI,CHORD);
  fill(0,0,0);
  ellipse(250,100,30,30);
  fill(255,255,255);
  ellipse(250,100,15,15);
  //teeth
  fill(255,255,255);
  arc(225,300,10,10,0,PI);
  arc(235,300,10,10,0,PI);
  arc(245,300,10,10,0,PI);
  arc(255,300,10,10,0,PI);
  arc(265,300,10,10,0,PI);
  arc(275,300,10,10,0,PI);
  //pizza slice
  fill(255,222,111);
  triangle(250,320, 395,305, 395,390);
  fill(242,186,120);
  ellipse(395,347.5, 9,85);
  fill(155,41,23);
  circle(290,330,7);
  circle(270,325,7);
  circle(305,320,7);
  circle(325,345,7);
  circle(335,323,7);
  circle(355,344,7);
  circle(363,332,7);
  circle(378,365,7);
  circle(375,320,7);
  //lines
  strokeWeight(3);
  if(mouseIsPressed==true){
    stroke(255,255,255);
    line(0,0, mouseX,mouseY);
    stroke(0,255,0);
    line(0,500,mouseX,mouseY);
    stroke(255,0,0);
    line(500,0, mouseX,mouseY);
    stroke(255,255,255);
    line(500,500, mouseX,mouseY);
  } else {
    stroke(0,255,0);
    line(0,0, mouseX,mouseY);
    stroke(255,255,255);
    line(0,500,mouseX,mouseY);
    line(500,0, mouseX,mouseY);
    stroke(255,0,0);
    line(500,500, mouseX,mouseY);
  }
}

LO1: My Inspiration

Before starting this course I had rather limited exposure to interactive projects. One project that I saw and was in awe of was my roommate’s interactive desktop wallpaper (no longer available on website).

My roommate had this “clock” that went through the different phases of the day and it did so beautifully. I always wondered what went into creating complex projects like this. At the time I was taking 15-112 so instead of feeling that seeing something amazing would be impossible, I was thinking about what went into its creation how it came to life.

When I saw it for the first time it wasn’t even the clock function that caught my attention – it was the intricate skyline/scenery and how the shadows and light glossed over the screen as it traveled through time. It was inspirational and got me to think about what the possibilities could be if I could learn how to create projects like these.

LO1-My Inspiration

The word “computational projects” was first started off as questioning myself what it defines as. Computational defines as “the use of computers”, therefore I assumed any program or product that has been created by the technical ability of computers such as coding.

            Facebook.com; an online social networking service, allows users to sign up for free profiles and it connects friends, family and people through online. It also allows users to share pictures, music, videos, and posts to anyone who has signed up in the website.

            The founder of Facebook is a well-known billionaire, Mark Zuckerberg. Zuckerberg has started off making the website with a group of his classmates (Eduardo Savarin, Dustin Moskovitz and Chris Hughes) who he has met in Harvard. His classmates included a programmer, spokesman, and investor in the website.

Zuckerberg got the idea of Facebook by first making a site in Harvard which helped University students get to know one another better through online. It only took 2 weeks for Zuckerberg to build the first version of Facebook. However, this did not come at ease since he was accused for stealing the “idea” of an intended social networking site called Harvard connection.

            Facebook.com was developed by a program called PHP. PHP stands for Hypertext Preprocessor and it’s a scripting language used for the development of web applications.

            Facebook’s future goal still lies in the reason why they built the website: connection. The main objective of Facebook is to give people the power to build community and bringing the world closer together. I admire the power Facebook brings to the world- enabling users to connect with the world easier than ever before and bringing comminutes together.

LO – My Inspiration

Looking Outward Assignment 1 Basics

One of my professors from the previous few years is currently a computational design student in the architecture program after working in the field for many years. The project that I am speaking about is one in which he was able to generate different swatches of neighborhood in Grasshopper for Rhino, which would fit into the urban
context of the neighborhood very well, yet not seem like it had been gridded like traditional urban planning. I really admire the project because it shows that the power of architecture (especially in relation to computationally generated architecture) is greater than just at the scale of the house. I believe he did it alone and took a semester. He used a lot of custom software. Was inspired by others in the field of Computational Design. I think it points to a future where computers can provide a baseline for how to design or rework parts of cities where we can quickly propose a multitude of opportunities for the neighborhood. The project is called Urban Synthesizer by Jinmo Rhee.

Source: http://jinmorhee.net/jinmorhee_3-multimedia/uss.html

LO1 – My Inspiration

December 2017, my family and I traveled to Washington D.C. as a holiday getaway. At the same time, the ARTECHOUSE was holding an exhibition of the wonderful works of Adrien M and Claire B. The two artists are known for their digital creations as well as living art forms. Their work is presented through stage performances or installations. My family and I were able to experience a live performance called HAKANAI. The performance consisted of a single dancer being surrounded by moving digital images that were formulated into a landscape. It presented the interaction between the dancer and the “magical environment”. The name of the performance translates to ephemeral, which means to not last for a long time. The digital solo performance presented the nature of existence, between reality and imagination.
The performance also consisted of digital images, electronic music, live music, proximity sensors, and environmental/nature-like sounds. And according to Claire B., everything about the performance is live. With the usage of four screens, creating a cube, the projectors produce 360 degrees images that respond to the sound as well as the dancer’s movement. The way the artists were able to intertwine art, technology, human, and music is very amazing. As an architecture student, there has always been a need to somehow create art beyond a piece of paper. However, I also wanted to discover how humans interact with art. The way the dancer was able to interact with the digital images reminds me of the interaction between humans and buildings/structures.