Month: August 2018

Connor McGaffin – Project-01-Face

sketch

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

}

function draw() {
background(255, 214, 89);
//shirt
	//dark blue
	fill(8,27,64);
	strokeWeight(0);
	rect(150, 450, 300, 200, 50);
	//neck
	fill(237,175,130);
	triangle(250,450,350,450,300,500);
	rect(250,425,100,25);
	//collar
	fill(36,45,64);
	triangle(300,500,250,430,230,450);
	triangle(300,500,350,430,370,450);
//hair
	fill(97,62,39);
	ellipse(300,150,300,200);
	ellipse(150,205,50,150);
	ellipse(450,205,50,150);
//head
	fill(237,186,149);
	triangle(300,450,150,400,450,400);
	rect(150,150,300,250);
	ellipse(150,295,50,80);
	ellipse(450,295,59,80);
	//more hair
	fill(97,62,39);
	ellipse(315,150,270,75);
	triangle(150,150,180,150,150,170);
	//eyebrows
	rect(200,215,60,15);
	rect(342,215,60,15);
	//nose
	fill(237,175,130);
	triangle(300,250,280,340,320,340);
	ellipse(300,335,40,40);
	//eyes
	fill(250);
	ellipse(230, 280, 80, 80);
	ellipse(370,280,80,80);
	fill(0);
	ellipse(230,280,30,30);
	ellipse(370,280,30,30);
	fill(237,186,149);
	//rect(200,230,200,15);
	//mouth
	fill(250);
	triangle(230,370,370,370,300,420);

	//mole
	strokeWeight(5);
	fill(98,63,39);
	point(330,447);
	//teeth
	line(260,390,300,390);
	//dimples
	noLoop();
	stroke(237,175,130);
	line(200,360,200,370);
	line(400,360,400,370);
	



}

Creating this self portrait was rather rewarding. I oftentimes struggled keeping track of the coordinates I was using, and I had to reorganize my code multiple times to sort this out. If I had more time, I would like to learn how to animate this portrait, just so that it feels more human and less static.

Rjpark – Project 01 – Face

rjpark_selfportrait

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

function draw() {
    fill(85, 65, 45);
    noStroke();
    ellipse(300, 200, 320, 320); // hair //
    rect(140, 200, 320, 500);
    ellipse(160, 210, 50, 55); // left curls //
    ellipse(156, 240, 50, 55);
    ellipse(153, 270, 50, 55);
    ellipse(150, 300, 50, 55);
    ellipse(150, 330, 50, 55);
    ellipse(150, 360, 50, 55);
    ellipse(150, 390, 50, 55);
    ellipse(150, 420, 50, 55);
    ellipse(150, 450, 50, 55);
    ellipse(150, 480, 50, 55);
    ellipse(150, 510, 50, 55);
    ellipse(150, 540, 50, 55);
    ellipse(150, 570, 50, 55);
    ellipse(150, 600, 50, 55);
    ellipse(440, 210, 50, 55); // right curls //
    ellipse(444, 240, 50, 55);
    ellipse(447, 270, 50, 55);
    ellipse(450, 300, 50, 55);
    ellipse(450, 330, 50, 55);
    ellipse(450, 360, 50, 55);
    ellipse(450, 390, 50, 55);
    ellipse(450, 420, 50, 55);
    ellipse(450, 450, 50, 55);
    ellipse(450, 480, 50, 55);
    ellipse(450, 510, 50, 55);
    ellipse(450, 540, 50, 55);
    ellipse(450, 570, 50, 55);
    ellipse(450, 600, 50, 55);

    fill(200, 180, 200);
    noStroke();
    triangle(210, 50, 250, 45, 245, 70); // hair part //

    fill(240, 200, 160);
    noStroke();
    ellipse(300, 230, 240, 280); // face //

    fill(240, 200, 160);
    noStroke();
    arc(250, 400, 100, 100, PI + QUARTER_PI + QUARTER_PI, PI - QUARTER_PI); // neck //
    arc(350, 400, 100, 100, QUARTER_PI, PI + QUARTER_PI + QUARTER_PI);
    rect(215, 435, 170, 70);
    rect(270, 365, 70, 70);
    
    fill(240, 200, 160);
    noStroke();
    ellipse(180, 230, 50, 50); // ears //
    ellipse(420, 230, 50, 50);

    fill(240, 240, 240);
    noStroke();
    ellipse(170, 240, 10, 10); // earrings //
    ellipse(430, 240, 10, 10)

    fill(255, 255, 255);
    noStroke(0);
    ellipse(250, 200, 50, 30); // eyes //
    ellipse(350, 200, 50, 30);

    fill(85, 65, 45);
    noStroke();
    ellipse(250, 200, 25, 25); // iris //
    ellipse(350, 200, 25, 25);

    stroke(0, 0, 0);
    strokeWeight(10);
    point(250, 200); // pupils
    point(350, 200);

    noFill();
    stroke(85, 65, 45);
    strokeWeight(8);
    curve(120, 240, 215, 165, 280, 165, 270, 210); // eyebrows //
    curve(220, 270, 320, 165, 385, 165, 280, 150);

    fill(255, 255, 255);
    stroke(230, 130, 130);
    strokeWeight(8);
    arc(300, 300, 85, 70, 0, PI); // mouth //
    line(257.5, 300, 342.5, 300);

    noFill();
    stroke(0);
    strokeWeight(5);
    arc(300, 260, 25, 25, PI + QUARTER_PI + QUARTER_PI, PI - QUARTER_PI - QUARTER_PI); // nose//

    noFill();
    stroke(160, 80, 45);
    strokeWeight(5);
    ellipse(250, 205, 80, 60); // glassess //
    ellipse(350, 205, 80, 60);
    line(290, 205, 309, 205);
    line(209, 205, 179, 200);
    line(390, 205, 420, 200);

    fill(0);
    noStroke();
    triangle(215, 435, 300, 492, 120, 492); // shirt //
    triangle(385, 435, 300, 492, 480, 492);
    rect(120, 492, 360, 110);
    ellipse(125, 566, 50, 150);
    ellipse(475, 566, 50, 150);
}

In this project, I focused on using many unique graphic elements to create my self-portrait. I tried to apply most of the functions that we’ve learned in class.

Julie Choi Project-01-Face

juliechoi_portrait

function setup() {
    createCanvas(600,700); //function calls (parameter)
  background(209, 170, 130); //(r,g,b)
}

function draw() {
  noStroke();

  //eyelashes
  //line(600,180,600,200);

  //eyes

  fill(179,131,82);
  ellipse(200,250,100,100);

  fill(179,131,82);
  ellipse(400,250,100,100);

  fill(255,255,255);
  ellipse(200,258,85,85);

  fill(255,255,255);
  ellipse(400,258,85,85);

  fill(29,18,6);
  ellipse(200,250,70,70);

  fill(29,18,6);
  ellipse(400,250,70,70);

  //nose
  fill(195,128,101);
  //arc(300, 330, 80, 80, 0, PI + QUARTER_PI, CHORD);

  arc(300, 330, 80, 80, 0,PI, PI + QUARTER_PI);

  //mouth
  fill(204,98,98);
  ellipse(275,455,100,100);

  fill(204,98,98);
  ellipse(325,455,100,100);

  fill(55,38,21);
  ellipse(300,470,150,100);

  fill(209,170,130);
  rect(200,460,200,200);

  fill(204,98,98);
  ellipse(300,465,140,50);

  fill(55,38,21);
  ellipse(300,460,150,30);

  fill(55,38,21);
  ellipse(300,450,135,30);

  //hair
  fill(55,38,21); //dark brown
  ellipse(100,0,600,250);//right hair

  ellipse(600,50,500,350);//left hair
  fill(55,38,21); //dark brown

  ellipse(-30,200,250,600);//right hair
  fill(55,38,21); //dark brown

  ellipse(650,200,250,900);//right hair
  fill(55,38,21); //dark brown

  //triangles
  fill(255,255,255);
  triangle(0,700,50,600,100,700);

  fill(255,255,255);
  triangle(100,700,150,600,200,700);

  fill(255,255,255);
  triangle(200,700,250,600,300,700);

  fill(255,255,255);
  triangle(300,700,350,600,400,700);

  fill(255,255,255);
  triangle(400,700,450,600,500,700);

  fill(255,255,255);
  triangle(500,700,550,600,600,700);

  //details
  ellipse(245,380,10,10);

  //rect(150,0,464,450); //(int x, int y, int width, int length)

  }

 

If anyone knows how I look like, they would say that I don’t look anything like this. As if I wore a paper bag, this is a portrait is a representation of how I thought my appearance looked when I was a teenager still growing up. I had fun with the assignment because I had a lot of freedom to explore with different elements.

YingyangZhou-LookingOutwards-1

FOLK website

FOLK home page

 

FOLK is a strategy agency specializing in the development of solutions to connect with people and influence their behavior.

The website of FOLK is straightforward, interactive and impressive. By developing the key  design element ‘frame’ which stands for the concept of helping and surrounding their customers through the entire strategic process), the website enable user to interact with the frame.

FOLK team page

 

The secondary web page is also interactive has multiple hierarchy of motions.

The website is design by Phoenix The Creative Studio based in Quebec. According to the website of the studio, it constitutes of a crew of 6 people. The web design requires knowledge of  HTML5, CSS3, JavaScript and OOP (object-oriented programming), the ability to work with external JS libararian, animation library and PHP7 would help too.

PHOENIX home page

Jennifer Kong-Project01-Face

jkong1-selfie

/* 
Jennifer Kong
Section B
jkong1@andrew.cmu.edu
Project-01-Face
*/

// NOTE: a version of this exact code can be found on openprocessing. 
// https://www.openprocessing.org/sketch/584143
// I made that/the below code when I didn't have my personal laptop with me and needed to save my work somewhere.
// so I promise I'm not plagarising! 
// If needed to prove that code is mine, I can give log-in credentials to the account on openprocessing. 


function setup() {
    createCanvas(600, 800);
    background(255);
    fill(255, 193, 194); // cute pink sphere 
    noStroke();
    ellipse(300,300,500,500);

}

function draw() {
    makeHair();
    makeFace();
    makeEyes();
    makeBrows();
    makeMole();
    makeCowLick();
    makeNose();
    makeHairSweep();
    makeGlasses();
    makeMouth();
}
    
function makeHair() {
    // hair
    stroke(71, 57, 55);
    strokeWeight(150);
    line (250, 250, 173, 500);
    line (340, 255, 440, 475);

}

function makeFace() {
    //face
    noStroke();
    fill(255, 228, 175);
    ellipseMode(CORNER);
    ellipse(400, 347, 28, 40); // ear
    ellipse(179, 287, 223, 203); // top head
    ellipse(179, 204, 233, 229); // bottom head

}

function makeHairSweep() {
    // hair sweep
    fill(71, 57, 55);
    quad(270, 200, 323, 280, 430, 340, 380, 208);

}

function makeBrows () {
    triangle(328, 314, 348, 298, 350, 305); // right brow
    triangle(240, 320, 229, 304, 210, 305); // left brow 

}

function makeCowLick () {
    //shout out to processing.org/tutorials/curves/ for the explanation
    beginShape();
    curveVertex(290, 145); 
    curveVertex(290, 145);
    curveVertex(300, 172);
    curveVertex(299, 200); 
    curveVertex(299, 200); 
    endShape();

}

function makeNose () {
    // nose 
    fill (224, 180, 168);
    triangle(271, 399, 254, 414, 276, 422); 

}

function makeEyes () {
    // eyes
    fill(71, 57, 55);
    ellipse(206, 338, 28, 45);
    ellipse(325, 337, 34, 46);

}

function makeMole () {
    // mole
    noStroke();
    fill(71, 57, 55);
    ellipse(191, 388, 6, 6);

}

function makeGlasses () {
    //glasses
    fill(255, 255, 255, 100);
    rect(300, 355, 92, 57, 20);
    rect(164, 355, 92, 57, 20);
    strokeWeight(5);
    stroke(71, 57, 55);
    line(253, 370, 300, 370);
    line(390, 360, 415, 345); 

}

function makeMouth () {
    // mouth
    strokeWeight(3);
    line(256, 449, 278, 440);
    line(278, 440, 305, 450);  
    
}

Drawing in photoshop with plotted shapes.

The process was fun. I drew a sketch and uploaded to photoshop to find the exact coordinates of the the drawn features. My coding is a bit rusty but I still learned something new!

ChristineSeo-Project-01-Face

sketch

//Christine Seo
//Section C
//mseo1@andrew.cmu.edu
//Project-01-Face

function setup() {
    createCanvas(600, 600);
    background(226, 213, 248);
}

function draw() {

	// background color change
	 background (226, 213, 248); // lilac
    if (mouseX < (width / 1.5)) {
      background(0); // black
    }

    //backlight
	fill(226, 213, 248);
	strokeWeight(0);
    ellipse(292,300,490,582);

	//body shirt
	fill(255, 235, 135);
	strokeWeight(0);
	rect(175, 325, 235, 235, 220, 315, 10, 10)

	//neck
	fill(250, 219, 129);
	strokeWeight(0);
	ellipse(295,355,47,47);

	//face
	fill(250,238,212);
	strokeWeight(0);
	ellipse(295,250,290,220);

	//eyes black base
	fill(158,133,83);
	strokeWeight(2);
	ellipse(227,255,47,47);
	ellipse(357,255,47,47);

	fill(0);
	strokeWeight(0);
	ellipse(227,250,49,49);
	ellipse(357,250,49,49);

	//eyelashes
	strokeWeight(0);
	fill(0);
	ellipse(378,236,18,3);

	strokeWeight(0);
	fill(0);
	ellipse(378,242,18,3);

	strokeWeight(0);
	fill(0);
	ellipse(204,236,18,3);

	strokeWeight(0);
	fill(0);
	ellipse(204,242,18,3);

	//eyes whites 
	fill(999);
	strokeWeight(0);
	ellipse(239,250,8,8);

	fill(999);
	strokeWeight(0);
	ellipse(369,250,8,8);

	fill(999);
	strokeWeight(0);
	ellipse(222,240,12,12);

	fill(999);
	strokeWeight(0);
	ellipse(354,240,12,12);

	//nose
	noFill();
	strokeWeight(2);
	curve(285, 332, 285, 261, 308, 260, 308, 296);

	//mouth
	noFill();
	strokeWeight(3);
	curve(280,160,330,310,250,310,250,160);

	//bangs
	strokeWeight(0);
	fill(131,93,29);
	rect(149,148,280,65,60);

	strokeWeight(0);
	fill(131,93,29);
	ellipse(292,148,271,125);

	//bangs triangle
	fill(250,238,212);
	strokeWeight(0);
	triangle(210, 225, 228, 160, 236, 215);

	//side bangs
	fill(131,93,29);
	strokeWeight(0);
	ellipse(158,240,30,182);

	fill(131,93,29);
	strokeWeight(0);
	ellipse(426,240,30,182);

	//cheeks
	fill(252, 192, 253,220);
	strokeWeight(0);
	ellipse(190,280,47,20)

	fill(252, 192, 253,220);
	strokeWeight(0);
	ellipse(393,282,47,20)

	//eyebrows
	strokeWeight(0.5);
	fill(127, 93, 48);
	ellipse(365,216,38,4);

	strokeWeight(0.5);
	fill(120, 93, 40);
	ellipse(218,216,38,4);

	//shirt pocket
	beginShape(TRIANGLE_STRIP);
	strokeWeight(0);
	fill(179, 213, 248);
	vertex(245, 505);
	vertex(275, 450);
	vertex(285, 505);
	vertex(295, 450);
	vertex(305, 505);
	vertex(315, 450);
	vertex(345, 505);
	endShape();

	//arms
	strokeWeight(0);
	fill(250, 219, 129);
	rect(180,410,40,145,60);

	strokeWeight(0);
	fill(250, 219, 129);
	rect(365,410,40,145,60);

	//ponytail
	fill(131,93,29);
	triangle(255, 15, 293, 100, 321, 15);

	translate(width / 2.55, height / 6.6);
	rotate(TWO_PI / -8);
	beginShape();
	fill(179, 213, 248);
	vertex(20, 20);
	vertex(40, 20);
	vertex(40, 40);
	vertex(60, 40);
	vertex(60, 60);
	vertex(20, 60);
	endShape(CLOSE);


}

Although in the beginning I had a difficult time to locate each element to the coordinates I wanted, I successfully managed to bring out my characteristics in the self portrait. Since this was my first time coding, I had a lot of fun exploring different functions and elements!

Looking Outwards-01 Sophia Kim

https://video-images.vice.com/articles/599c68301cb85d42513c73f8/lede/1503422891712-1487003242956-blob.jpeg?crop=1xw%3A0.8431xh%3B0xw%2C0.0515xh&resize=2000%3A*

While studying fine arts in high school, I have always been inspired to go “above and beyond” and combine different mediums of art to amaze the viewers. Because of this inspiration, I have been intrigued by different interactive art projects that combine various art forms.

I found Adrien M and Claire B’s interactive installation, “Hakanaï,” to be very inspirational and fascinating because it combined technology, dance, and art to work in harmony, creating a hybrid of the physical and digital world. I admired how Adrien M and Claire B strayed away from the traditional form of art and made it interactive, so that the audience can have a personal experience. Also, it was very interesting that the installation was generated live and had each iteration (the performance has approximately six iterations) to be unique from one another.

Adrien M and Claire B are the creators of the installation. They invited different dancers to perform with their installation. They used video projection mapping, CGI, and sensors to depict every motion the dancer makes. Adrien and Claire created Hakanaï based on the beauty of nature. It took the creators many years to develop the software and many years of practicing with the performers.

ChristineSeo-LookingOutwards-1

Pixi is a digital organism, a light installation, by a group of artists in collective WERC, supported by a province in the Netherlands commissioned by staatsbosbeheer. Pixi is inspired by patterns in the nature, such as a flock of birds or a swarm of bees, where they react to each other and their movements, which leads the Pixi to be self sufficient and group intelligent. However, Pixi also reacts to its surroundings, so if there is a person that passes by, the lights will turn on along with the person as well. The Pixi adopts location-specific behavior: Pixies communicate wirelessly with each other, over radio waves, and has sensors that react to heat and temperature as well. The software was written in Arduino, used Fast LED lights, and battery where they only turn on at night. The battery also saves energy levels compared to other lights in the environment!

Nature plays a great role in this installation because Pixies are placed on to trees in a forest. In the piece, I thought there was a very interesting interaction between digital technology and nature. Since the society today is  very involved in technology, the environment is suffering every minute. Pixi is also very environmentally friendly, and could be carried out in the real world to save energy. So, one critique I would have is to carry this on to different areas, or even different parts of the world, not only just in one forest in Netherlands. This way, people would be more involved in the piece. In addition, this installation is not only visually pleasing, but also has a great interaction with the surrounding and people.

WERC also worked on Waterstaat 3 years ago, which was another light installation in nature that reacted to music in festivals. Although this installation was on water instead of in a forest, I believe Pixi was influenced by this older work. They were able to further their conceptual sense and make another installation that actually helped the environment and have a meaningful interaction with nature and people through technology.

Pixi – Nature aware, self-sufficient, digital organism ‘breathes’ in the forest

http://www.werccollective.com/pixi/#/

Hannah Cai—Project-01-Face

/* Hannah Cai
Section C
hycai@andrew.cmu.edu
Project-01-Face
*/

function setup() {
  createCanvas(600,600);
  a = width / 2;
  b = width / 2;
  c = width / 2;
}

function draw() {
  scale(0.5, 0.5);

  background(202,248,255);

  // clouds
  strokeWeight(0);
  fill(255,255,255);
  rectMode(CENTER);
  rect(324 - a,250,500,222,111,111,111,111);
  a = a - 2.5;
  if (a < -1150) {
  a = 600;
  }
  rect(1117 - b,866,316,175,87,87,87,87);
    b = b - 4;
  if (b < -400) {
  b = 1500;
  }
  rect(955 - c,623,194,71,35,35,35,35);
    c = c - 3;
  if (c < -350) {
  c = 1200;
  }

  // hair
  strokeWeight(0);
  fill(35,36,40);
  rectMode(CENTER);
  rect(553,595,529,812,209,144,144,144);

  // shirt
  fill(255,214,174);
  rect(582,1153,729,542,187,187);
  noFill();
  stroke(255,159,159);
  strokeWeight(5)
  angleMode(DEGREES)
  arc(579,884,153,150,360,180);

  // face base
  strokeWeight(0);
  fill(255,240,202);
  rectMode(CENTER);
  rect(547,479,394,456,119,117,197,197);
  rect(578,764,121,237);
  ellipse(578,878,120,120)

  // hair 2
  strokeWeight(0);
  fill(35,36,40);
  ellipse(359,294,71,71);
  quad(433,229,748,247,758,432,391,279);

  // face details
    // nose, ears
  noFill();
  stroke(255,159,159);
  strokeWeight(5);
  angleMode(RADIANS)
  arc(644,465,152,152,PI + HALF_PI,HALF_PI);
  arc(656,448,74,75,PI + HALF_PI,HALF_PI);
  arc(657,500,30,29,HALF_PI,PI + HALF_PI);
  arc(392,519.5,49,49,HALF_PI,PI + HALF_PI);
  angleMode(DEGREES)
  arc(380,434,125,124,270,80);
    // eyes
  strokeWeight(0);
  fill(255,255,255);
  rect(525,436,75,40,20,20,20,20);
  rect(374,439,47,40,20,20,20,20);
  fill(35,36,40);
  rect(532,421,70,11,5,5,5,5);
  rect(378,424,40,11,5,5,5,5);
  ellipse(502,438,33,44);
  ellipse(361,439,23,40);
    // eyebrows
  rect(555,371,104,19,10,10,10,10);
  rect(359,374,49,19,10,10,10,10);
    // cheek
  fill(255,221,197);
  ellipse(543,563,145,145);
    // mouth
  fill(255,159,159);
  triangle(405,607,421,621,399,621);
  strokeCap(ROUND);
  stroke(255,159,159);
  strokeWeight(10);
  line(405,607,421,621);
  line(421,621,399,621);
  line(399,621,405,607);

    // moles
  strokeWeight(0)
  fill(35,36,40);
  ellipse(503,623,5,5);
  ellipse(586,533,2.5,2.5);
  ellipse(452,626,2.5,2.5);

  // fin!
}

process:
1. tried sketching in p5, it was too slow and quite confusing so I stopped after a while
2. made a sketch in Illustrator instead
3. started sketching in p5, referencing my Illustrator sketch
4. learned that I could view coordinates, W/H, and even corner radius in Illustrator
5. filled out all the data in p5
6. I wanted to make something interactive/live, so I added some movement in the clouds (had to research and do a lot of trial and error with this)

I had a lot of fun with the entire process of making this! It was definitely out of my comfort zone, and I got stuck in many areas, but that just makes me feel more satisfied now that I’ve finally gotten my project the way I want it to be. I can’t believe I’m actually writing code, I was always really intimidated by the idea of coding. I feel like I’ve become a lot more comfortable with p5/coding already though, even though this is just the first project.