Month: August 2017

hdw – Project 1 – Face

helen’s-face

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

function draw() {
    background(255);

    //hair
    fill(0);
    noStroke();
    //arc(250,250,200,260,150,360);
    ellipse(250,250,202,250,150);

    //right hair
    noFill();
    stroke(0);
    strokeWeight(1);
    arc(399,265,100,190,100,180);
    arc(330,320,60,120,280,40);

    //face
    fill(255,232,200);
    noStroke();
    //ellipseMode(center)
    arc(250,250,200,210,180,360);
    arc(250,250,200,270,360,180);

    angleMode(DEGREES);

    //left hair cont
    noFill();
    stroke(0);
    strokeWeight(1);
    arc(130,180,100,150,340,100);
    arc(130,180,133,200,340,100);

    //blush
    if (mouseIsPressed) {
      fill(255,167,151,255);
      noStroke();
      ellipse(310,300,50,50);
      ellipse(190,300,50,50);
    } else {
      fill(255,167,151,150);
      noStroke();
      ellipse(310,300,50,50);
      ellipse(190,300,50,50);
    }

    //glasses
    fill(255,232,200,0);
    stroke(0);
    strokeWeight(1);
    ellipse(200,260,76,76);

    stroke(0);
    strokeWeight(1);
    arc(250,260,24,15,180,360);

    stroke(0);
    strokeWeight(1);
    ellipse(300,260,76,76);

    line(150,260,161,260);
    line(349,260,338,260);

    //eyes
    if (mouseIsPressed) {
      noFill();
      stroke(0);
      strokeWeight(2);
      arc(200,260,30,30,160,340);
      arc(300,260,30,30,200,20);
    } else {
      noFill();
      stroke(0);
      strokeWeight(2);
      arc(200,260,30,30,200,0);
      arc(300,260,30,30,180,340);
    }

    //nose
    noFill()
    stroke(255,131,122);
    strokeWeight(1);
    arc(250,300,30,30,20,160);

    //mouth
    if (mouseIsPressed) {
      fill(255,167,151);
      noStroke();
      ellipse(250,343,25,13);

      noFill();
      stroke(255,131,122,200);
      strokeWeight(2);
      arc(250, 325, 50, 36, 0, 180);

    } else {
      fill(255,167,151);
      noStroke();
      ellipse(250,343,25,13);

      noFill();
      stroke(255,131,122,200);
      strokeWeight(2);
      arc(250, 325, 50, 36, 20, 160);

    }

}

I’ve never coded before this class so I was worried about the project going in. After the preliminary Mondrian exercise, I was comfortable with playing around with code. I started by making some sketches on my sketchbook before I settled on a form I enjoyed, then changed some of it when I coded it.

I had a lot of fun making it, so after I finished I played around with it some more. After Wednesday’s lecture, I added a clickable function.

mmirho – Project01 – Face

I struggled a bit, and tried to be original in my formation of the face, though not very detailed. I ended up focusing too much on minor details, and had to rework how I structured the head.

I think I could have done better, but I did my best to be simple in how I structured the art.

Face

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

function draw() {

    fill(255, 224, 189); //skin color
    noStroke();

    //Head
    rectMode(CENTER);
    ellipse(width/2, (height/2), 140, 160);

    //Cut off the top of head
    fill(250);
    rect(width/2, (height/2)-150, 140, 160); 
    fill(255,224,189);

    //Ears
    arc((width/2)-50,(height/2),60,50,3*PI/2+PI,3*PI/2,OPEN);
    arc((width/2)+50,(height/2),60,50,3*PI/2,3*PI/2,OPEN);

    //Mouth
    stroke(0);
    line(250, 310, 220, 300);
    noStroke();

    //Nose
    fill(0);
    triangle(250, 255, 265, 285, 250, 285);
    fill(255, 224, 189);
    triangle(247, 253, 262, 283, 247, 283);

    //Hair
    fill(255, 226, 60);
    triangle(237, 195, 197, 195, 240, 155);
    triangle(257, 195, 217, 195, 260, 155);
    triangle(277, 195, 237, 195, 280, 155);
    triangle(297, 195, 257, 195, 300, 155);

    //Eyes
    fill(0);
    stroke(0);
    strokeWeight(3);
    fill(255);
    ellipse((width/2)+30, (height/2)-10, 25, 15);
    ellipse((width/2)-30, (height/2)-10, 25, 15);

    //Irises
    fill(0,0,200); 
    stroke(0);
    ellipse((width/2)+32, (height/2)-10, 12, 14);
    ellipse((width/2)-28, (height/2)-10, 12, 14);

    //Pupils
    noStroke(); 
    fill(0);
    ellipse((width/2)+32, (height/2)-10, 5, 5);
    ellipse((width/2)-28, (height/2)-10, 5, 5);


}

ashleyc1- Project 1- Face

ashley-sketch

//Ashley Chan
//ashleyc1@andrew.cmu.edu
//Session C

function setup() {
    createCanvas(400, 400);
    background(144, 236, 255);

}

function draw() {

 //hair

     noStroke();
     fill(125, 12, 148);
     rect(75, 20, 250, 600, 100);

     fill(253, 208, 117);
     triangle(190, 75, 200, 20, 200, 75)

 //neck

     fill(232, 185, 90);
     rect(175, 280, 50, 50);



 //face
     noStroke();
     fill(253, 208, 117);
     ellipse(200, 175, 200, 225);


 //glasses

     stroke(0);
     noFill();
     strokeWeight(5);
     rect(220, 150, 90, 50);

     strokeWeight(5);
     rect(90, 150, 90, 50);

     fill(0);
     rect(180, 160, 40, 8);

 //eyes

     fill(0);
     ellipse(140, 170, 25, 25);
     ellipse(250, 170, 25, 25);

     fill(255);
     ellipse(145, 165, 15, 15);
     ellipse(255, 165, 15, 15);


 //eyebrows

     fill(0);
     strokeWeight(1);
     curve(200, 126, 100, 126, 180, 124, 180, 250);

     translate(125, 0);
     curve(700, 250, 175, 124, 100, 126, 200, 126);
 	

//lips
     arc(75, 250, 30, 30, 0, PI);

//body
	
    noStroke();
    fill(243, 213, 15);
    rect(-25, 300, 200, 200, 60);

    fill(232, 185, 90);
    arc(75, 300, 50, 50, 0, PI);

}

Reflection:

My process consisted mostly of trial and error when is came to alignment and figuring out the effects of altering specific coordinates. I need to get better at anticipating what factors affect what so I’m not wasting time plugging in random numbers. But overall, I’m happy with the result and I think this is a pretty direct reflection of what I look like.

daphnel-Project01-Face

It was a hard process for me to create this self portrait as I have never coded before; it was a series of trial and error in order to get things in the right order and place. I drew inspiration from the students who submitted their self portraits before me and just focused on trying to make the objects connect.

sketch

function setup() {
    createCanvas(500, 500);
    background(150,100,100);
    angleMode(DEGREES)
    smooth();
}

function draw() {

    //hair
    strokeWeight(0);
    fill(10,50,100);
    ellipse(250,165,220,220);
    rect(145,165,210,300);

    //ears
    strokeWeight(0);
    fill(255,230,200);
    ellipse(150,210,30,45);
    ellipse(350,210,30,45);

    //head
    strokeWeight(0);
    fill(255,230,200);
    ellipse(250,190,190,200);

    //hair(front)
    strokeWeight(0);
    fill(10,50,100);
    ellipse(285,120,110,100);

    //glasses
    strokeWeight(5);
    fill(255,230,200);
    ellipse(205,200,60,60);
    ellipse(295,200,60,60);
    line(242,205,257,205);

    strokeWeight(5);
    noFill();
    arc(180,198,60,20,150,175);
    arc(330,198,60,20,25,78);

    //smile
    arc(266,250,40,30,20,90);

    //eyes
    strokeWeight(0);
    fill(256);
    ellipse(204,202,30,30);
    ellipse(295,202,30,30)

    //pupils
    strokeWeight(0);
    fill(0);
    ellipse(204,202,15,15);
    ellipse(295,202,15,15)

    //eyelash
    strokeWeight(2)
    fill(0)
    line(190,190,186,186)
    line(304,186,308,181)

}

yushano-project-01-Face

sketch

function setup() {
    createCanvas(600, 600);
    background(255,248,220);
}

function draw() {
	//face
	stroke(255,218,185);
	strokeWeight(3);
	fill(255,229,204);
	rect(225,175,150,200,60);
	stroke(0);
	strokeWeight(2);
	ellipse(270,295,45);
	ellipse(335,295,45);
	line(291,290,314,290);
	line(240,280,248,290);
	line(356,290,360,280);
	strokeWeight(10);
	line(255,270,286,270);
	line(320,270,350,270);
	ellipse(270,290,2);
	ellipse(335,290,2);
	strokeWeight(5);
	line(303,288,303,317);
	strokeWeight(3);
	fill(238,44,44);
	quad(280,345,303,335,326,345,303,355);
	//hair
	stroke(105,105,105);
	strokeWeight(3);
	fill(160,160,160);
	rect(200,250,40,200);
	rect(360,175,40,275);
	triangle(200,175,400,175,200,300);

}

I designed my self-portrait to concentrate on squares, which makes it very cartoon-like.

mjnewman LookingOutwards-01

Patatap is a website created in 2014 (previously a concert piece as far back as 2012) that uses the keyboard of the user’s computer to play corresponding sounds to each key. In addition, the developer, Jono Brandel, teamed up with Lullatone, a Japanese musical duo, to come up with fun and unique sounds for each key. What I admire most about this project is that it goes beyond a simple beat making website, it also uses animated graphics to go along with each sound and allows the user to have a synesthetic experience.

There might be an opportunity in the future to possibly add tutorials on the website for musical novices like myself, who don’t necessarily understand music as well as others. However, overall, Patatap uses color and shapes in a whimsical and entertaining way that it is able to achieve the goal of a fun and inspiring toy on the Internet that doesn’t take itself too seriously. According to Brandel’s portfolio site, he was inspired by painters such as Piet Mondrian and Wassily Kandinsky and animators Norman McLaren and Oskar Fischinger and to me that inspiration was evident in his treatment of the product.

After some digging, I was not able to find the exact information as to how Brandel made the website. However, I don’t think it’s totally off the table that Brandel was able to make Patatap with Javscript. He uses simple animations, shapes, lines, and points to construct the visual elements of the website that are involved with Javascript.

Here are some examples of beats users were able to make:

HaeWanPark-LookingOutwards-1

Ok Go Tour Visual by Reza Ali 

Reza Ali, a computational designer and engineer was asked to create six pieces of music videos by Ok Go, a rock band from Chicago. These videos were planned to be presented in OK Go’s summer/spring 2014-2015 concert. So, Reza created the motion graphic sequence videos that go along with the Ok Go’s music during a month. The sequences display geometric shape and pattern within generative systems. He utilized his custom software called ‘Rezanator’ in this project. His works were inspired by optical illusion, visual music, OP Art, hyper-sensory immersive media, and synaesthesia.

The Writing’s on the Wall Music Video by Reza Ali / Optical illusion

Reza took a special process to design these videos based on the context. In the concert, Two large V shape of project screen was installed behind the band. He tried to accord with this screen arrangement. So, during this project, he worked on not only a regular screen but also two screens that he put together in a V. As a result, he created a design that V screen enhances the visual effects in a music video.

Development Process of graphic sequence

I pretty much enjoyed how those simple geometric elements in his videos create decent visual effects. For me, the one with optical illusion is especially mesmerizing. All the video pieces even go along with this their music really well.

http://www.syedrezaali.com/#/okgo/

 

rsp1-project01-face

My process included starting out researching some inspiration and I happened to stumble upon the works of Stanley Chow. I really liked how simple and straight forward his portraits looked, and wanted to emulate that to some extent. This was my first time coding anything, but found that the more I continue to use the lines of code for the specific shapes, the easier it became to remember what I needed in order to fulfill the tasks that I had in mind. I found that the hard part was the tedious task of trying to find the exact coordinates and calculations that I needed to find the right placements for my shapes.

sketch

function setup() {
    createCanvas(500,500);
    background(105);		//background(246,223,255);
}

function draw() {
  //hair
  noStroke();
  fill(57,26,14);
  ellipse(250,160,180,180);
  rect(160,150,180,100);

  //ears
  noStroke();
  fill(249,228,205);
  ellipse(305,190,50,50)

  noStroke();
  fill(249,228,205);
  ellipse(192,190,50,50)

  //face
  noStroke();
  fill(249,228,205);
  rect(185,100,130,165,57);

 //chin
  noStroke();
  fill(249,228,205);
  triangle(250,275,285,258,213,257);  

  //ears(inside)
  noStroke();
  fill(210,195,172);
  arc(185,190,20,20,PI/2,3*PI/2,OPEN); 

  noStroke();
  fill(210,195,172);
  arc(313,190,20,20,3*PI/2,PI/2,OPEN); 
  
  //eyes
  noStroke();
  fill(0,0,0);
  ellipse(285,180,20,20);

  noFill();
  strokeWeight(1);
  stroke(0,0,0);
  arc(286,180,30,30,PI,PI+TWO_PI);

  noFill();
  stroke(0,0,0);
  arc(220,180,30,30,PI,PI+TWO_PI);

  noStroke();
  fill(249,228,205);
  ellipse(300,175,7,13);

  noStroke();
  fill(249,228,205);
  ellipse(206,175,7,13);

  noStroke();
  fill(0,0,0);
  ellipse(220,180,20,20);
	
  triangle(293,174,300,176,290,185);

  translate(-85,-3);
  triangle(290,178,300,175,295,182);

  //nose
  noStroke();
  fill(210,195,172);
  ellipse(338,215,20,10);

  //lips
  strokeWeight(2);
  fill(202,119,107);
  arc(338,240,25,25,7*PI/6,11*PI/6);

  fill(249,228,205);
  triangle(338,232,325,225,350,225);

  //eyebrows
  noStroke();
  fill(0);
  rect(347,155,28,7,10);

  triangle(300,162,299,155,293,163);

  noStroke();
  fill(0);
  rect(297,155,28,7,10);

  triangle(372,162,373,155,379,163);

   //bangs
 noStroke();
 fill(57,26,14);
 arc(280,110,98,100,106,2,CHORD);

}

aranders-Project01-face

portrait

function setup() {

  createCanvas(400, 400);
  background(184, 176, 245);

  fill(243, 224, 189);
  ellipse(200, 200, 165, 200);

  fill(243, 224, 189);
  rect(185, 300, 30, 35);

  fill(255);
  ellipse(165, 210, 40, 30);

  fill(255);
  ellipse(235, 210, 40, 30);

  fill(0);
  ellipse(165, 210, 30, 30);

  fill(0);
  ellipse(235, 210, 30, 30);

  noFill();
  triangle(190, 250, 200, 235, 210, 250);

  fill(241, 173, 168);
  arc(200, 265, 30, 20, 0, PI, OPEN);

  line(145, 180, 183, 175);

  line(217, 175, 255, 180);

  fill(226, 108, 108);
  strokeWeight(4);
  rect(150, 335, 100, 65);

  fill(0);
  quad(105, 145, 200, 95, 200, 125, 105, 200);

  fill(0);
  quad(200, 95, 295, 145, 295, 200, 200, 125);

  fill(0);
  rect(105, 190, 20, 100);

  fill(0);
  rect(275, 190, 20, 100);

  point (162, 243);

  }

function draw() {
}

I am pleased with my finished project even though it is not the most beautiful I have ever seen. It was a time-consuming process for me because I tend to be a perfectionist, but I am happy with it.

Anna Anderson
Section 1
aranders@andrew.cmu.edu
Project 1

mecha-project01-face

sketch

function setup() {
    createCanvas(500,500);
    background(255);
    noStroke();
    fill(75,49,52);
    ellipse(250,255,450,450);

//hair
    noStroke();
    fill(150,106,70);
    rect(150,200,170,170);
//neck
    noStroke();
    fill(220,167,139);
    rect(225,350,52,30);

//shirt
    noStroke();
    fill(255);
    arc(250, 415, 140, 90, PI, 0, CHORD);

//neck
    fill(220,167,139);
    noStroke();
    arc(251, 370, 52, 30, 0, PI, CHORD);

//hair (bottom)
    fill(211,188,126);
    noStroke();
    triangle(130,230,120,370,200,370);
    triangle(370,230,300,370,380,370);
       
//face
    noStroke();
    fill(255,218,190);
    ellipse(250,230,240,270);

//shading
    noStroke();
    fill(220,167,139);

//eyes
    noStroke();
    fill(58,26,20);
    ellipse(214,260,15,15);
    noStroke();
    fill(58,26,20);
    ellipse(286,260,15,15);

//nose
    noStroke();
    fill(220,167,139);
    triangle(250,265,235,300,265,300);

//mouth
    stroke(58,26,20);
    strokeWeight(2.2);
    fill(255);
    ellipse(250,325,30,15);

//hair (top)
    fill(211,188,126);
    noStroke();
    arc(250,230,250,270,PI+.9, QUARTER_PI-0.8, OPEN);
    arc(250,230,250,270,PI+.2, QUARTER_PI-2.3, OPEN);

    arc(320,142,260,190,QUARTER_PI+.1, PI+0.07, OPEN);
    arc(139 ,130,140,150,QUARTER_PI-.7, PI-1.4, OPEN);

//eyebrows
    stroke(58,26,20);
    noFill();
    arc(300, 208, 60, 60, HALF_PI, PI-0.7);
    stroke(58,26,20);
    noFill();
    arc(210, 200, 60, 60, PI-2.1, PI-1.2);
}

function draw() {
}

In order to create this sketch, I decided to block out my face into basic shapes that I would be able to recreate with code. I began with a simple ellipse and moved on to create the expression and the hair. I used a lot of trial and error (especially for the arc objects) for the placement, sizes, and angles while trying to stick to a minimal color palette.