Month: September 2017

hschung-LookingOutwards-02

I looked at the generative artwork of Tina Frank, specifically a performance she did live in Basel, on September 12, 2015. The performance consisted of a constantly changing background accompanying rather abstract, synth-electronic-like music. According to Frank’s website, all the images were created live by using audio frequencies played through a synchronator. The music she was creating was fed into a computer, which then made visuals in the form of a digital video, which was projected.
I think the beauty of this project is that it creates many works of ephemeral art, and that it uses technology so creatively. Looking at the wildly contrasting pictures of the projected video makes me reflect on how each moment a person experiences this performance is so unique and isn’t repeated again. The fluctuations of the sounds and sights mix to make a constantly changing piece of art. I think it’s impressive and an interesting contrast to typical, “classic” art, such as paintings or drama plays.

(I tried to embed the video, but they have restricting permissions, so I was unable to do so.)
http://www.tinafrank.net/audiovisual-art/av-performance-coh-frank/

COH & FRANK, live at HeK, Basel from Tina Frank on Vimeo.

jooheek-Project02-Variable-Face

sketch

//Joo Hee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project-02

function setup() {
    createCanvas(640, 480);
}

var faceSize = 200;
var cheekSize = 230;
var earsSize = 50;
var eyeHeight = 50;
var eyeWidth = 30;
var hippoR = 149;
var hippoG = 186;
var hippoB = 198;
var backgroundR = 0;
var backgroundG = 77;
var backgroundB = 104;

function draw() {
	background(backgroundR, backgroundG, backgroundB);

	noStroke();
	//hippo ears
	var earsRX = width/2 - faceSize*0.25;
	var earsLX = width/2 + faceSize*0.25;
	var earsY = height/2 - faceSize*0.25;

	fill(hippoR, hippoG, hippoB);
	ellipse(earsRX, earsY, earsSize, earsSize);//outer ear right

	fill(hippoR, hippoG, hippoB);
	ellipse(earsLX, earsY, earsSize, earsSize);//outer ear left

	fill(hippoR-20, hippoG-20, hippoB-20);
	ellipse(earsRX, earsY, earsSize*0.8, earsSize*0.8);//inner ear right

	fill(hippoR-20, hippoG-20, hippoB-20);
	ellipse(earsLX, earsY, earsSize*0.8, earsSize*0.8);//inner ear left


	//hippo face
	fill(hippoR, hippoG, hippoB);
	ellipse(width/2, height/2, faceSize, faceSize*0.75);

	//hippo Eye
	var eyeRX = width/2 + faceSize*0.25;
	var eyeLX = width/2 - faceSize*0.25;
	
	fill(255, 255, 255);
	ellipse(eyeLX, height/2, eyeWidth, eyeHeight);//left eye white

	fill(255, 255, 255);
	ellipse(eyeRX, height/2, eyeWidth, eyeHeight);//right eye white

	fill(0, 0, 0);
	ellipse(eyeLX, height/2, eyeWidth/2, eyeHeight/2);//left eye black

	fill(0, 0, 0);
	ellipse(eyeRX, height/2, eyeWidth/2, eyeHeight/2);//right eye black
	
	//hippo cheek
	fill(hippoR+20, hippoG+20, hippoB+20);
	ellipse(width/2, 325, cheekSize, cheekSize*0.75);

	//hippo nose
	var noseRX = width/2 - cheekSize*0.25;
	var noseLX = width/2 + cheekSize*0.25;
	var noseY = height/2 + cheekSize*0.25;
	
	fill(hippoR+40, hippoG+40, hippoB+40);
	ellipse(noseRX, noseY, earsSize, earsSize);//hippo noseright light

	fill(hippoR+40, hippoG+40, hippoB+40);
	ellipse(noseLX, noseY, earsSize, earsSize);//hippo noseleft light

	fill(hippoR-10, hippoG-10, hippoB-10);
	ellipse(noseRX, noseY, earsSize*0.6, earsSize*0.6);//hippo noseright dark

	fill(hippoR-10, hippoG-10, hippoB-10);
	ellipse(noseLX, noseY, earsSize*0.6, earsSize*0.6);//hippo noseleft dark

}

function mousePressed() {
	faceSize = random(70, 270);
	cheekSize = random(100, 300);
	earsSize = random(50, 100);
	eyeHeight = random(50, 150);
	eyeWidth = random(30, 130);
	hippoR = random(0, 255);
	hippoG = random(0, 255);
	hippoB = random(0, 255);
	backgroundR = random(0, 255);
	backgroundG = random(0, 255);
	backgroundB = random(0, 255);
	clear();

}

For this project, I wanted to do something simple yet fun to do, which is why I chose to do an animal, specifically a hippo. I think this assignment really let me understand how and why variables are used.

Looking Outwards 02 – Yugyeong Lee

As use of algorithm and integration of parametric design are deeply rooted into the design process in architecture, Aryan Shahabian, a researcher at the University of Applied Arts in Vienna, developed an algorithm that can create over a billion distinct combinations of interlocking 3D objects inspired by Japanese joineries. Japanese architecture and contrstruction, from its past, has been known for its complex wood joineries that interlock and form bonds without the use of nails, screws or adhesives. This development of the new algorithm open up opportunities to allow artists to create free from structure with no reliance of use of nails and generate art through mastering complex wood joineries. This program would also naturally lead to easier fabrication when combined with machines such as laser cutters, CNC machines, and 3D printing. As an architecture student who have experienced several projects dealing with joinery system, this program would definitely help young architects like our selves to understand these complex joineries better as well as integrate it into the design process to allow flow of variety of different, unique forms.

link to article: http://www.archdaily.com/874153/this-satisfying-algorithm-combines-japanese-inspired-joints-to-generate-any-form

Ikrsek-Looking Outwards-03

Recently, Iris van Herpen had a show in the Carnegie Museum of art featuring a variety of futuristic looking, digitally fabricated fashion.
She is a fashion designer that wishes to marry code and fashion to create non-traditional clothing that seems to combat how we feel clothing should act and look in a wonderfully sci-fi way. She utilizes programming and code to 3-d print designs that seem to defy gravity and what we generally believe to be achievable in terms of physical form. The flexibility of the clothing itself comes from how it is printed; Iris used Stratasy’s Object Connex multi-material 3-d printer which allows for many different physical properties such as hardness/softness and movability to be built into the clothing item. Code controls what would otherwise be carefully carried out hand-embroidery and weaving/needlework, speaking to the endless possibilities ahead. Much of the pieces also completely eliminate seams and cuts, creating smooth, form-fitting architectural pieces of clothing through the delicate weaving and layering commanded by the code. The pictures really speak for themselves in this case, and it’s much more clear/easy to just show as opposed to trying to explain the strange phenomenon she creates visually with her coded clothing…

 

 

 

 

hdw – Project 2 – Variable Face

sketch

var picker = 1
var types = [1, 2, 3, 4, 5];
var backgroundR = 255
var backgroundG = 255
var backgroundB = 255

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

function draw(){
    background(255);
    fill(backgroundR-30,backgroundG-30,backgroundB,100);
    noStroke();
    rect(0,0,height,width);

  var head = width * 2/5;
  var eyes = width * 1/10;
  var lips = width * 1/30;

  //shadow
  noStroke();
  fill(backgroundR+10,backgroundG+10,backgroundB+10);
  ellipse(width*.4,height*.6,head,head);


  if(picker == 1){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    ellipse(width*2/5,height*.5,eyes,eyes);
    arc(width*3/5,height*.5,eyes,eyes,0,180);
    //lips
    noStroke();
    fill(255,0,0);
    ellipse(width*.5,height*.6,lips,lips);
    ellipse(width*.5,height*.6+lips,lips,lips);
    }

  if (picker == 2){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,340,160);
    arc(width*3/5,height*.5,eyes,eyes,340,160);
    //lips
    noStroke();
    fill(255,0,0);
    ellipse(width*.5+5,height*.6+1+10,.7*lips,.7*lips);
    ellipse(width*.5,height*.6+lips*.7*.5+lips*.5+10,lips,lips);
    }

  if (picker == 3){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,20,200);
    arc(width*3/5,height*.5,eyes,eyes,20,200);
    //lips
    stroke(250,0,0);
    arc(width*.5-5,height*.6+10,lips,lips,210,60);
    }

  if (picker == 4){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,180,0);
    arc(width*3/5,height*.5,eyes,eyes,180,0);
    //lips
    noFill();
    stroke(255,0,0);
    strokeWeight(10);
    arc(width*.5,height*.6,2*lips,2*lips,0,180);
    //ellipse(width*.5,height*.6+lips,lips,lips);
  }

  if(picker == 5){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    ellipse(width*2/5,height*.5,eyes,eyes);
    ellipse(width*3/5,height*.5,eyes,eyes);
    //lips
    stroke(255,0,0);
    strokeWeight(10);
    noFill();
    ellipse(width*.5,height*.6+.5*lips,lips,lips);
    }

  //blush
  fill(255,backgroundG,backgroundB);
  noStroke();
  ellipse(width*2/5,height*.6, 2*lips, 2*lips);
  ellipse(width*3/5,height*.6, 2*lips, 2*lips);
}

function mousePressed(){
    picker = random(types);
    backgroundR = random(0,250);
    backgroundG = random(0,250);
    backgroundB = random(0,250);
}

Process:

Made some initial concept sketches. Used mmiller5’s project 02 as a reference for the use of variables and commands of the five fixed variable faces. Stella Han helped me figure out where to put the variables for var types and var picker, because I initially posted them in the draw function and not as a global variable. Soonho Kwon helped me figure out how to get the background and shadow opacity to behave. Initially the shadow didn’t show up because I had it set to a variable opacity in the same colors as the background. I reversed the opacity so that the background had less intensity and created a white filler first so the color would show.

ikrsek-Section C-Project-02-Variable-Face

sketch

//Isadora Krsek
//Section B
//Ikrsek@andrew.cmu.edu
//Project-2

//face variables
var headWidth = 120
var headHeight = 140
var skinR = 230
var skinG = 168
var skinB = 150
var eyeR = (30);
var eyeG = (5);
var eyeB = (0);
var earR = (210);
var earG = (160);
var earB = (133);
var earWidth = (26);
var earHeight = (50);
var eyeWidth = (30);
var eyeHeight = (20);
var irisR = (35);
var irisG = (27);
var irisB = (40);
var irisWidth = (15);
var irisHeight = (18);
var blushR = (188);
var blushG = (119);
var blushB = (187);
var blushSize = (20);
var blushOpa = (150);
var noseR = (140);
var noseG = (90);
var noseB = (80);
var upLipR = (170);
var upLipG = (86);
var upLipB = (80);
var loLipR = (189);
var loLipG = (100);
var loLipB = (103);
var browR = (30);
var browG = (20);
var browB = (20);
//nose variables
var noseVertX3 = (2);
var noseVertX4 = (4);
var noseVertX6 = (4);
var noseVertY2 = (30)
var noseVertY3 = (6);
var noseVertY4 = (4);
var noseVertY6 = (6);
var noseVertY7 = (0);
//lip variables
//upper & lower
var v2 = (8);
var v3 = (6);
var v4 = (6);
var v5 = (8);
var v1andv4 = (4);
var v2andv3 = (1);
//just lower
var loLipY = (6);
//brow variables
var browVX2and4 = (10);
var browVX3 = (22);
var browVY2 = (10);
var browVY4 = (4);

function setup() {
    createCanvas(640,480);
    background(188,216,220);
}

function mom() {
    noStroke();
    angleMode(DEGREES);
  //hair back
    fill(23,21,28);
    ellipse(518,150,150,210);
    fill(188,216,220);
    rect(420,155,210,200);
  //ears
    fill(205,174,156);
    ellipse(462,142,25,45);
    ellipse(575,142,25,45);
  //complexion
    fill(220,191,168);
  //head
    ellipse(518,136,113,167);
  //hair bangs
    fill(255);
    stroke(255);
    //ellipse(500,50,5,5);
    //ellipse(518,85,5,5);
    
    stroke(23,21,28)
    fill(23,21,28);
    beginShape();
      curveVertex(500,55);
      curveVertex(514,85);
      curveVertex(533,96);
      curveVertex(570,98);
      curveVertex(540,52);
    
    endShape(CLOSE);
    noStroke();
  //blush 
    fill(233,208,187,172);
    ellipse(482,160,20,20);
    ellipse(552,160,20,20);
  //eye bags 
    fill(197,153,145);
    push();
    translate(487,132);
    rotate(176);
    ellipse(0,0,39,32);
    pop();
    push();
    translate(549,132);
    rotate(8);
    ellipse(0,0,39,32);
     pop();
  //eyes
    fill(240,220,216);
    push();
    translate(488,129);
    rotate(176);
    ellipse(0,0,30,18);
    pop();
    push();
    translate(548,129);
    rotate(8);
    ellipse(0,0,30,18);
    pop();
  //iris
    fill(35,7,0);
    ellipse(488,126,20,14);
    ellipse(548,126,20,15);
  //eyebrows: left, then right 
    beginShape();
     fill(23,21,28);
     stroke(23,21,28);
     strokeWeight(1);
     vertex(473,111); //outer base
     curveVertex(480,106); //triangle peak 
     curveVertex(502,112); // innermost point
     curveVertex(480,109)  //under-arch 
    endShape(CLOSE);
    beginShape();
     fill(23,21,28);
     stroke(23,21,28);
     strokeWeight(1);
     vertex(560,111);
     curveVertex(550,106);
     curveVertex(528,112);
     curveVertex(550,109);
    endShape(CLOSE);
  //nose
    beginShape();
     noFill();
     stroke(135,80,46);
     strokeWeight(3.2);
     vertex(508,130);
     vertex(508,170);
     vertex(514,176);
     vertex(520,172);
     vertex(523,170);
     vertex(523,165);
    endShape();
  //lips
    //upper
    beginShape();
     fill(164,98,76);
     stroke(164,98,76);
     strokeWeight(1);
     curveVertex(500,190);
     curveVertex(507,186);
     curveVertex(515,189);
     curveVertex(523,186);
     vertex(532,190);
    endShape(CLOSE);
    //lower
    beginShape();
     fill(194,115,95);
     stroke(194,115,95);
     strokeWeight(1);
     curveVertex(500,190);
     vertex(532,190);
     curveVertex(515,194);
    endShape(CLOSE);
}

function dad(){
    noStroke();
    //ears
    fill(212,152,133);
    ellipse(75,148,35,50);
    ellipse(226,148,35,50);
    //complexion
    fill(221,167,148);
    //head
    ellipseMode(CENTER);
    ellipse(150,150,152,170);
    //blush
    fill(188,119,112,150)
    ellipse(102,168,40,40);
    ellipse(192,168,40,40);
    //eyes
    fill(240,220,216);
    push();
    translate(112,135);
    rotate(4);
    ellipse(0,0,31,22);
    pop();
    push();
    translate(182,135);
    rotate(174);
    ellipse(0,0,31,22);
    pop();
    //iris
    fill(44,27,40);
    ellipse(182,133,15,18);
    ellipse(112,133,15,18);
    //eyebrows
    beginShape();
     fill(33,6,2);
     stroke(33,6,2);
     strokeWeight(1);
     vertex(93,123); //outer base
     curveVertex(105,106); //triangle peak 
     curveVertex(123,123); // innermost point
     curveVertex(105,120)  //under-arch 
    endShape(CLOSE);
    beginShape();
     fill(33,6,2);
     stroke(33,6,2);
     strokeWeight(1);
     vertex(200,123);
     curveVertex(185,106);
     curveVertex(170,123);
     curveVertex(185,120);
    endShape(CLOSE);
    //nose
    beginShape();
     noFill();
     stroke(164,93,83);
     strokeWeight(3.2);
     vertex(134,130);
     vertex(134,160);
     vertex(132,165);
     vertex(144,171);
     vertex(160,167);
     vertex(163,165);
     vertex(163,160);
    endShape();
    //lips
      //upper
    beginShape();
     fill(180,80,91);
     stroke(180,80,91);
     strokeWeight(1);
     curveVertex(130,190);
     curveVertex(137,182);
     curveVertex(145,185);
     curveVertex(153,182);
     vertex(162,190);
    endShape(CLOSE);
      //lower
    beginShape();
     fill(189,93,103);
     stroke(189,93,103);
     strokeWeight(1);
     curveVertex(130,190);
     vertex(163,190);
     curveVertex(155,200);
     curveVertex(139,200);
    endShape(CLOSE);
    //butt chin 
    stroke(164,93,83);
    strokeWeight(2);
    line(148,220,148,228);
    //glasses
    noFill();
    stroke(56);
    strokeWeight(3.1);
    ellipse(108,142,50,50);
    ellipse(185,142,50,50);
    curve(110,142,131,132,160,132,155,142);
      
    
}

function words(){
  textSize(30);
  fill(255)
  noStroke();
  text("Dad",122,275);
  text("Mom",490,270);
  textSize(24);
  text("..what I could've looked like...",180,474)
  
  
}

function draw() {
    var noseStartX = (width/2-5);
    var noseStartY = (height/1.3 - headHeight/7);
    var LipStartX = (width/2-15);
    var LipStartY = (height/1.3 + headHeight/4);
    var LeftBrowStartX = (width/2-46);
    var LeftBrowStartY = (height/1.4-headHeight/12);
    var RightBrowStartX = (width/2+46);
    var RightBrowStartY = (height/1.4-headHeight/12);
    
    mom();
    dad();
    noStroke();
    
    //OFFSPRING TIME
     //baby's ears
    fill(earR,earG,earB);
    ellipse(width/2-(headWidth/2),height/1.3,earWidth,earHeight); //left ear
    ellipse(width/2+(headWidth/2),height/1.3,earWidth,earHeight); //right ear 
     //baby's head
    fill(skinR,skinG,skinB);
    ellipse(width/2,height/1.3,headWidth,headHeight);
     //eyes 
    fill(240,220,216); //whites of the eyes
    ellipse(width/2-(headWidth/5),(height/1.3 - headHeight/7),eyeWidth,eyeHeight); //left whites of the eyes
    ellipse(width/2+(headWidth/5),(height/1.3 - (headHeight/7)),eyeWidth,eyeHeight); //right whites of the eyes 
    fill(irisR,irisG,irisB); //iris color
    ellipse(width/2-(headWidth/5),(height/1.3 - headHeight/7),irisWidth,irisHeight);
    ellipse(width/2+(headWidth/5),(height/1.3 - headHeight/7),irisWidth,irisHeight);
     //baby's cheeks
    fill(blushR,blushG,blushB,blushOpa);
    ellipse(width/2-(headWidth/5)-20,(height/1.3 - headHeight/7)+30,blushSize,blushSize); //left cheek 
    ellipse(width/2+(headWidth/5)+20,(height/1.3 - headHeight/7)+30,blushSize,blushSize); //right cheek 
     //baby's nose
    beginShape();
     noFill();
     stroke(noseR,noseG,noseB);
     strokeWeight(3.2);
     vertex(noseStartX,noseStartY);
     vertex(noseStartX,noseStartY+noseVertY2);
     vertex(noseStartX-noseVertX3,noseStartY+noseVertY3+noseVertY2);
     vertex(noseStartX+noseVertX4,noseStartY+noseVertY3+noseVertY4+noseVertY2);
     vertex(noseStartX+noseVertX4+noseVertX3,noseStartY+noseVertY3+noseVertY2);
     vertex(noseStartX+noseVertX4+noseVertX6,noseStartY+noseVertY2);
    endShape();
     //baby's mouth
       //upper
    beginShape();
      fill(upLipR,upLipG,upLipB);
      stroke(upLipR,upLipG,upLipB);
      strokeWeight(1);
      vertex(LipStartX,LipStartY);
      curveVertex(LipStartX+v2,LipStartY-v1andv4);
      curveVertex(LipStartX+v2+v3,LipStartY+v2andv3);
      curveVertex(LipStartX+v2+v3+v4,LipStartY-v1andv4);
      curveVertex(LipStartX+v2+v3+v4+v5,LipStartY);
    endShape(CLOSE)
       //lower
    beginShape();
      fill(loLipR,loLipG,loLipB);
      stroke(loLipR,loLipG,loLipB);
      strokeWeight(1);
      vertex(LipStartX,LipStartY);
      vertex(LipStartX+v2+v3+v4+v5,LipStartY)
      curveVertex(LipStartX+v2+v3+v4,LipStartY+loLipY);
      curveVertex(LipStartX+v2,LipStartY+loLipY);
    endShape(CLOSE)
     //baby's eyebrows
       //left
    beginShape();
     fill(browR,browG,browB)
     stroke(browR,browG,browB);
     strokeWeight(2);
     vertex(LeftBrowStartX,LeftBrowStartY);
     vertex(LeftBrowStartX+browVX2and4,LeftBrowStartY-browVY2);
     curveVertex(LeftBrowStartX+browVX2and4+browVX3,LeftBrowStartY);
     curveVertex(LeftBrowStartX+browVX2and4,LeftBrowStartY-browVY4);
    endShape(CLOSE);
      //right
    beginShape();
     fill(browR,browG,browB)
     stroke(browR,browG,browB);
     strokeWeight(2);
     vertex(RightBrowStartX,RightBrowStartY);
     vertex(RightBrowStartX-browVX2and4,RightBrowStartY-browVY2);
     curveVertex(RightBrowStartX-browVX2and4-browVX3,RightBrowStartY);
     curveVertex(RightBrowStartX-browVX2and4,RightBrowStartY-browVY4);
    endShape(CLOSE);
  
    words();
}

function mousePressed(){
/*each of the ranges are based on the proportions/tones of 
the parents who bestow similarities to themselves onto their children*/
    background(188,216,220);
    headWidth = random(113,162);
    headHeight = random(137,170);
    //range for skin color
    skinR = random(220,221);
    skinG = random(167,191);
    skinB = random(148,170);
    //range for eye color
    eyeR = random(35-44);
    eyeG = random(7-27);
    eyeB = random(0-48);
    //range for ear color
    earR = random(205,212);
    earG = random(152,174);
    earB = random(133,156);
    //range for ear size
    earHeight = random(45,50);
    earWidth = random(25,35);
    eyeWidth = random(20,31);
    eyeHeight = random(18,22);
    //range for iris color
    irisR = random(35,80);
    irisG = random(7,27);
    irisB = random(0,40);
    //range for iris size 
    irisWidth = random(8,20);
    irisHeight = random(8,18);
    //range for blush color
    blushR = random(188,233);
    blushG = random(119,208);
    blushB = random(112,187);
    //range for blush size (the value will be the same for width and height bc it is a circle)
    blushSize = random(20,40);
    //range for opacity 
    blushOpa = random(140,172);
    //range for nose colors
    noseR = random(135,164);
    noseG = random(80,93);
    noseB = random(46,83);
    //range for nose sizes
    noseVertX3 = random(0,12);
    noseVertX4 = random(0,10);
    noseVertX6 = random(3,8);
    noseVertY2 = random(30,40)
    noseVertY3 = random(5,6) // + you add to vert y2
    noseVertY4 = random(0,6) // + you add to vert y3
    noseVertY6 = random(22,48)
    noseVertY7 = random(0,5)
    //range for upper lip colors 
    upLipR = random(164,180); 
    upLipG = random(80,98);
    upLipB = random(76,91);
    //ranger for upper lip sizes
    v1andv4 = random(1,8);
    v2andv3 = (.15,.5)
    //range for lower lip colors
    loLipR = random(189,194);
    loLipG = random(93,115);
    loLipB = random(95,103);
    //ranger for lower lip sizes
    loLipY = random(3,10);
    //range for brow colors 
    browR = random(23,80);
    browG = random(6,2);
    browB = random(2,28);
    //range for brow sizes
    browVX2and4 = random(7,22);
    browVX3 = random(18,22);
    browVY2 = random(5,17);
    browVY4 = random(3,4);
}

I’ve always wondered about different ways I could’ve looked based on my parent’s appearances, and so I took the opportunity to simulate something like that in this project. I first took the time to draw out each of my parents in p5.js and then randomized the measurements of those characteristics so that everytime you click the mouse, another possibility appeared. Overall, I am mostly glad I don’t look like most of the “offspring” possibilities.

ziningy1 – Section C- Project 02- Variable Face

ziningy1-variable face



 
//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-02 variable face 


//variables 

//face 
var faceWidth=90;
var fX=185
var fY=190

//mouth
var mWidth=120
var mHeight=40 

//head 
    var aX=220 
    var aY=190
    var bX=320
    var bY=180
    var cX=350
    var cY=100
    var dX=230
    var dY=60
    var eX=170
    var eY=120
    var gX=180
    var gY=190

     //head 

    var aX=220 
    var aY=190
    var bX=320
    var bY=180
    var cX=350
    var cY=100
    var dX=230
    var dY=60
    var eX=170
    var eY=120
    var gX=180
    var gY=190

    //eye
    var eyeSize=32;
    var eyeX=197;
    var eyeY=135;

    //nose 
    var Nax=180
    var Nay=160
    var Nbx=173
    var Nby=193
    var Ncx=192
    var Ncy=200


function setup() {
    createCanvas(500, 350);
}
 
function draw() {
    background(50);

     //face
    noStroke();
    fill(120);
    
   
    rect(fX,fY,faceWidth,faceWidth-25,10);

    fill(50);
    noStroke();

    triangle(fX+faceWidth,fY+30,fX+faceWidth,fY+faceWidth-25,fX+30,fY+faceWidth-25,50);


    //mouth
    

    noStroke
    fill(30)
    arc(fX,fY+22,mWidth,mHeight,0, HALF_PI);

   
    //head 
    noStroke();
    fill(175);

    beginShape();
    curveVertex(0, 0);
    
    curveVertex(aX, aY);
    curveVertex(bX,bY)
    curveVertex(cX, cY);
    curveVertex(dX, dY);
    curveVertex(eX, eY);
    curveVertex(gX, gY);
    
    
    curveVertex(0, 0);
    endShape();


     //eye
    noStroke; 
    fill(120)
    
    ellipse(eyeX,eyeY,eyeSize,eyeSize+10);

    fill(220)

    ellipse(random(-4,4)+eyeX,random(-6,6)+eyeY+5,eyeSize-16,eyeSize-15); 

   

    //nose 
    
    noStroke;
    fill(250);
    triangle(Nax,Nay,Nbx,Nby+random(-10,10),Ncx,Ncy);




    }



function mousePressed() {

    //head

    aX=random(190,240);
    aY=random(180,210);

    bX=random(280,360);
    bY=random(160,200);
    
    cX=random(320,380);
    cY=random(50,120);

    dX=random(210,250);
    dY=random(40,80);
    eX=random(150,210);
    eY=random(110,140);
    gX=random(150,190);
    gY=random(170,200);

    //face

    faceWidth=random(80,110);
    fX=random(160,200);
    fY=random(180,220);

    //mouth 
    mHeight=random(10,80);
    mWidth=random(40,160);

    //eye
    eyeSize=random(16,60);
    eyeX=random(189,207);
    eyeY=random(125,145);

    //nose 

    Nax=random(175,185);
    Nay=random(150,170);
    Nbx=random(45,173);
    Nby=random(153,213);
    Ncx=random(187,197);
    Ncy=random(190,210);







}

When I first think of the assignment making the variable face, I had this idea of making this funky skull that can deform through clicking. The function itself is not difficult to learn, yet how to set the variables correctly took me some time to get used to. I also focused on how I would like the skull head to deform, such as the I designed the nose to transform longer and shorter instead of up and down. I also found the method of using “random’ to make the shaking shapes is pretty effective. The shaking eyes make the skull face funnier and less static.

juyeonk – project02 – face

sketch

var eyeSize = 20;
var upperfaceWidth = 180;
var lowerfaceWidth = 160;
var faceHeight = 240;
var eyelength = 25;
var eyewidth = 25
var earheight = 50;
var noseheight = 70;
var nostrilsize = 15;
var hornheight = 90;
var faceR = 0;
var faceG = 0;
var faceB = 0;




function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(96, 158, 81);
    
    var lefteyeposition = width/2 - upperfaceWidth*0.25;
    var righteyeposition = width/2 + upperfaceWidth*0.25;
    var eyeposition = height/2 - faceHeight*0.25;
    
    //face of the horse
    noStroke();
    fill(109 + faceR, 83 + faceG, 43 + faceB);
    quad(width/2 - upperfaceWidth/2, height/2 - faceHeight/2, width/2 + upperfaceWidth /2, height/2 - faceHeight/2, width/2 + lowerfaceWidth/4, height/2 + faceHeight/2, width/2 - lowerfaceWidth/4, height/2 + faceHeight/2);
    
   
    //left ear
    fill(109 + faceR, 83 + faceG, 43 + faceB);
    triangle(width/2 - upperfaceWidth/2, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.25 * upperfaceWidth, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.125 * upperfaceWidth, earheight);
    
    //left inner ear
    fill(0);
    triangle(width/2 - upperfaceWidth/2 + 5, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.25 * upperfaceWidth - 5, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.125 * upperfaceWidth, earheight * 1.25);
    
    //right ear
    fill(109 + faceR, 83 + faceG, 43 + faceB);
    triangle(width/2 + upperfaceWidth/2, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.25 * upperfaceWidth, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.125 * upperfaceWidth, 50);
    
    //right inner ear
    fill(0);
    triangle(width/2 + upperfaceWidth/2 - 5, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.25 * upperfaceWidth + 5, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.125 * upperfaceWidth, earheight * 1.25);
    
    //left eye
    fill(0);
    ellipse(lefteyeposition, eyeposition, eyewidth, eyelength);
    
    //right eye
    fill(0);
    ellipse(righteyeposition, eyeposition, eyewidth, eyelength);
    
    //nose
    fill(56, 45, 27);
    ellipse(width/2, height/2 + faceHeight/2, lowerfaceWidth * 0.7, noseheight);
    
    //left nostril
    fill(0);
    ellipse(width/2 - 0.1 * lowerfaceWidth, height/2 + faceHeight/2, nostrilsize, nostrilsize * 1.3);
    
    //right nostril
    fill(0);
    ellipse(width/2 + 0.1 * lowerfaceWidth, height/2 + faceHeight/2, nostrilsize, nostrilsize * 1.3);
    
    
    //unicorn
    //unicorn's horn
    fill(255);
    triangle(width/2, height/2 - faceHeight/2 - hornheight, width/2 - 0.1 * upperfaceWidth, height/2 - faceHeight/2, width/2 + 0.1 * upperfaceWidth, height/2 - faceHeight/2);
    
    

    
    
}
 

function mousePressed() {
    hornheight = random(0, 100);
    upperfaceWidth = random(180, 220);
    lowerfaceWidth = random(140, 240);
    faceHeight = random(220, 260);
    nostrilsize = random(15, 20);
    eyewidth = random(20, 50);
    eyelength = random(20, 30);
    faceR = random(0, 40);
    faceG = random(0, 40);
    faceB = random(0, 40);
}

I tried to program it so that the species of the horse would change when you click on it.
At first I tried to input three types of horses: a regular one, a unicorn, and a pegasus to make the horn pop up if the horse is a unicorn and make the wings pop up if the horse is a pegasus. But I had some trouble incorporating conditionals with the mouthpressed function, so I had to be satisfied with the changes in color of the horse’s skin and the and the sizes of its features. I made the range for the value of the hornheight 0-100 so that the horse would sometimes look like it doesn’t have a horn, but I hope I could make that happen by using conditionals.

Project 02 – Yugyeong Lee

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Project-02

var colorR = 100;
var colorG = 150;
var faceWidth = 200;
var faceHeight = 200;
var eyeSize = 20;
var blushSize = 35;
var noseWidth = 10;
var noseHeight = 10;
var mouthWidth = 70;
var mouthHeight = 45;
var colorR2 = 100;
var hairDecorationType = 1;

function setup() {
    createCanvas(640, 480);
}

function draw() {
	//Background 
    background(colorR, colorG, 200);
	noStroke();
    fill(255);
    ellipse(width/2, height/2, 300, 350);

    //Face
    fill(242, 214, 180);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    ellipse(width/2+100, height/2, 40, 40);
    ellipse(width/2-100, height/2, 40, 40);

    //Eyes
    var eyeLX = width/2-faceWidth*0.18;
    var eyeRX = width/2+faceWidth*0.18;
    fill(255);
    ellipse(eyeLX, height/2, eyeSize+12, eyeSize+12);
    ellipse(eyeRX, height/2, eyeSize+12, eyeSize+12);
    fill(0);
    ellipse(eyeLX+2.5, height/2, eyeSize, eyeSize+3);
    ellipse(eyeRX-2.5, height/2, eyeSize, eyeSize+3);
    fill(255);
    ellipse(eyeLX+3, height/2, eyeSize-15, eyeSize-15);
    ellipse(eyeRX-3, height/2, eyeSize-15, eyeSize-15);

    //Blush
    var blushLX = width/2-faceWidth*0.32;
    var blushRX = width/2+faceWidth*0.32;
    fill(250, 185, 225, 150);
    ellipse(blushLX, height/2+faceHeight*0.15, blushSize*1.2, blushSize); 
    ellipse(blushRX, height/2+faceHeight*0.15, blushSize*1.2, blushSize);

    //Hair
    stroke(0);
    strokeWeight(5);
    noFill();
	beginShape();
	curveVertex(width/2, height/2-100);
	curveVertex(width/2, height/2-100);
	curveVertex(width/2-15, height/2-125);
	curveVertex(width/2-15, height/2-135);
	curveVertex(width/2-10, height/2-145);
	curveVertex(width/2, height/2-150);
	curveVertex(width/2+20, height/2-140);
	curveVertex(width/2+10, height/2-130);
	curveVertex(width/2+10, height/2-130);
	endShape();

	//Nose
    var noseX = width/2
    var noseY = height/2+faceHeight*.12
    stroke(150, 120, 90, 100);
    strokeWeight(3);
    noFill();
    arc(noseX, noseY, noseWidth, noseHeight, PI, TWO_PI);

    //Mouth
	fill(222, 86, 88);
	noStroke();
	arc(width/2, height/2+faceHeight*.2, mouthWidth, mouthHeight, TWO_PI, PI);

    //Tooth
	fill(255);
    strokeWeight(1);
	rect(width/2-.2*mouthWidth, height/2+40, .2*mouthWidth, .2*mouthHeight);
	rect(width/2+1, height/2+40, .2*mouthWidth, .2*mouthHeight);

	hairDecoration();
}

function ribbon() {
	//Ribbon
	fill(colorR2, 100, 200);
	triangle(width/2, height/2-100, width/2+40, height/2-70, width/2+40, height/2-130);
	triangle(width/2, height/2-100, width/2-40, height/2-70, width/2-40, height/2-130);
	fill(colorR2-50, 100, 200);
	ellipse(width/2, height/2-100, 25, 25);
}

function hairTie() {
	//Hair Tie
	fill(colorR2, 200, 100);
	ellipse(width/2-16, height/2-100, 35, 35);
	ellipse(width/2+16, height/2-100, 35, 35);
}

function hairDecoration() {
    if (hairDecorationType === 1) {
        ribbon();
    }
    else if (hairDecorationType === 2) {
        hairTie();
    }
}

function mousePressed() {
    colorR = random(190, 255);
    colorG = random(0, 190);
    eyeSize = random(15, 30);
    blushSize = random(20, 40);
    noseWidth = random(10, 17);
    noseHeight = random(5, 10);
    mouthWidth = random(40, 80);
    mouthHeight = random(40, 60);
    colorR2 = random(0, 255);
    hairDecorationType = Math.floor((random()*2)+1);
}

I wanted to create an interactive baby face with changing eyeSize, noseSize, blushSize, mouthSize, and hairDecoration. Some of the elements such as hair and face, remain the same throughout.

adev—Project 03—Variable—Face

adev_Project_02

var skinR = 201;
var skinG = 143;
var skinB = 101;

var rectX = 350;
var rectY = 200;
var rectWidth = 150;
var rectHeight = 230;

var mouthW = 50;
var mouthH = 50;

var eyeW = 40;
var eyeH = 20;

var pt = 18;

var personas = ["JOE likes raw vegetables and long walks on the beach", "JOEY like iced green tea and planning weddings", "JOESEPH likes tofu turkey and Nathan Lane movies", "JOLENE likes peanut butter cups and Tibetan arts and crafts", "JOANNE likes lavendar hand cream and red neon lights", "JOESEPHINE likes spicy oats and museum gift shops", "JOAN likes candied pineapple and matcha espresso fusions", "JOEL likes caramel custard and hot wheels", "JOHANNES likes exposed red brick walls and blue turtlenecks"];

var index = 0;
 
function setup() {
 createCanvas (640,480);    
 background(255,233,10);
}

function draw() {
    
    background(255,233,10); 
    
    //body
    fill(skinR, skinG, skinB);
  stroke (220,120,40);
    strokeWeight(10);
    rect(rectX, rectY, rectWidth, rectHeight);
    
    //mouth
     fill (255,0,0); 
    noStroke();
  arc(rectX + 40, rectY+50, 
  mouthW + 10, mouthH +40, 0, 2*HALF_PI);
    
    //teeth
     fill (240); 
  arc(rectX + 40, rectY+50, 
  mouthW + 10, mouthH - 20, 0, 2*HALF_PI);
    
    //eye1
    fill(255);
    noStroke();
    ellipse(rectX+30, rectY+20, eyeW, eyeH);
    fill(0);
    noStroke();
    ellipse(rectX+30, rectY+20, eyeH, 15);
    
    //eye2 
    fill(255);
    noStroke();
    ellipse(rectX+90, rectY+20, eyeW, eyeH);
    fill(0);
    noStroke();
    ellipse(rectX+90, rectY+20, eyeH, 15);
    
    //personas
  fill(50);
  textFont("Georgia");
  textSize(pt);
   
  text(personas[index], 100,  100);
    
}
    
    
function mousePressed (){
    //changing skin colour
    skinR = random(200,80);
    skinG = random (90,90);
    skinB = random (101,40);
    
    //changing body proportions
    rectX = random(150,450);
    rectY = random(150,300);
    rectWidth = random (150,200);
    rectHeight = random (150, 400);
    
    //changing eye proportions
    eyeW = random (30,70);
    eyeH = random (20,30);
    
    //changing mouth proportions
    mouthH = random (10,200);
    mouthW = random (10,200);
    
    //persona generator 
    index = index + 1;
    if (index == personas.length) {
    index = 0;
  }
    
  }

I wanted to have fun with the Project and so I decided to make characters out of my different faces. I like how each face has a fun, kind of weird but unique personality. I thought they all looked like “Joes” so I made them all pretty similar. I started off wanting to do really complicated things that I had to simplify but it was a good opportunity to play with p5.js, experiment and learn about arrays.