PROJECT 02- VARIABLE FACE

JUNE_VARIABLEFACE
var face=1;
var backColor=1;
var glasses=1;
var mouth=1;


function setup() {
    createCanvas(400,400);
    background(100);
 }


function draw() {

//background
	if (backColor==1) {
		background(136,160,150);
	} else if (backColor==2) {
		background(53,61,47);
	} else {
		background(32,42,37);
	}


//face
	rectMode(CENTER);
	var facex=(width/2);
	var facey=(height/2);
	if (face==1) {
		noStroke();
		fill(255);
		rect(facex,facey,width/3,height/2.5);
	} else if (face==2) {
		noStroke();
		ellipse(facex,facey,width/3,height/2);
	} else {
		noStroke();
		rect(facex,facey,width/3.5,height/2.2,40);
	}

//glasses
	print(glasses);
	if (glasses==1) {
		stroke(5);
		strokeWeight(0);
   	 	fill(0);
		ellipse(facex-25,facey-30,30,30);
		ellipse(facex+25,facey-30,30,30);
		strokeWeight(2.5);
		stroke(0);
		line(facex-25,facey-30,facex+25,facey-30);
	} else if (glasses==2) {
		fill(0);
		stroke(0);
		strokeWeight(3);
		rect(facex-25,facey-30,30,25,10);
		rect(facex+25,facey-30,30,25,10);
		line(facex-25,facey-30,facex+25,facey-30);
	} else {
		stroke(0);
		strokeWeight(10);
		point(facex-25,facey-30);
		point(facex+25,facey-30);
	}

//nostrils
	stroke(0);
	strokeWeight(2+(1*face));
	point(facex-5,facey+10);
	point(facex+5,facey+10);

//mouth
	fill(129,93,109);
	noStroke();
	if (mouth==1) {
		rect(facex,facey+40,15,30,5);
	} else if (mouth==2) {
		ellipse(facex,facey+40,30,15);
	} else {
		ellipse(facex,facey+40,30,30);
	}

//hair strand
	noFill();
	stroke(100);
	strokeWeight(5);
	curve(facex,facey-70,facex,facey-70,facex+50,facey-(100-(5*glasses)),facex+50,facey-(120+(20*glasses)));

//label
	fill(255);
	noStroke();
    textSize(6);
    textAlign(CENTER);
    text("JUNE LEE / SECTION C",width/2,25);
}

function mousePressed() {
	face=(int(random(1,4)));
	backColor=(int(random(1,4)));
	glasses=(int(random(1,4)));
	mouth=(int(random(1,4)));
}


I enjoyed doing this project as I was able to explore different functions with the mousePressed() function on p5.js. By defining some variables, I was able to type code in relation to other measurements existing on the canvas.

Looking Outwards 02 – Generative Art

One of the books from the early series of ‘Curious George’

Behind the childhood animation, ‘Curious George’, there is an untold love story of the authors Hans and Margret Rey. In celebration of the 75th anniversary of ‘Curious George’, filmmaker Ema Ryan Yamazaki decided to put together a mixed-media documentary that tells the love story of the authors. When I was a little girl, I absolutely enjoyed reading the series and watching the TV show. Before reading this artile, I did not know that the animation was created by two German immigrants who were also a married couple as well. Children would think nothing more of the series of ‘Curious George’. However, as adults, I think it becomes very important to learn where the inspiration of the animation comes from.

Created by artist Jacob Kafka

As the filmmaker explained how ‘Curious George’ was a reflection of their life experiences and personalities, I was very fascinated by the connection. It is amazing how one can bring a story to life through a creative animation. However, the process of creating this animation as well as incorporating the same style of ‘Curious George’ is a load of work. Since the project itself consists of 15,000 hand-drawn drawings, Yamazaki had been trying to raise the funds so that more people can help. To this very day, it still amazes me how a set of drawings can be transformed into a motion picture. As a filmmaker, Yamazaki’s artistic sensibilities was able to develop the idea of presenting the story of Hans and Margret Rey through their own style. Choosing the same style that was used for ‘Curious George’ creates such a strong connection because it gives everyone a reminder of the animation.

Project-02: Variable Faces

sketchDownload
//Isabel Xu
//Section A
var face_width = 200;
var face_length = 200;
var hair_length = 600
var hair_color = 132;
var eye_width = 30
var eye_size = 20


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

function draw() {

  background(220);

  //hair
  noStroke();
  fill(hair_color, 117, 82);
  rect(81,88,260,hair_length,100,100,45,45);

  //face
  fill(247, 194, 150);
  noStroke();
  ellipse(width/2,240,face_width,face_length);
  //ears
  ellipse(width/2-(face_width/2),275,30,40);
  ellipse(width/2+(face_width/2-10),275,30,40);

  
  //upper body
  fill(247, 194, 150);
  noStroke();
  beginShape();
  vertex(width/2-35, 260);
  vertex(width/2-35, 430);
  vertex(width/2-175, 470);
  vertex(width/2-225, 550);
  vertex(width/2-225, 650);
  vertex(width/2+225, 650);
  vertex(width/2+225, 550);
  vertex(width/2+175, 470);
  vertex(width/2+35, 430);
  vertex(width/2+35, 260);
  endShape();
  

  //lips
  fill(190,111,82);
  noStroke();
  beginShape();
  curveVertex(width/2-20,240+(face_length/2)-45);
  curveVertex(width/2-15,240+(face_length/2)-35);
  curveVertex(width/2+15,240+(face_length/2)-25);
  curveVertex(width/2+30,240+(face_length/2)-35);
  curveVertex(width/2+50,240+(face_length/2)-45);
  endShape();
  
  beginShape();
  curveVertex(width/2-20,240+(face_length/2)-25);
  curveVertex(width/2-15,240+(face_length/2)-35);
  curveVertex(width/2+15,240+(face_length/2)-40);
  curveVertex(width/2+30,240+(face_length/2)-35);
  curveVertex(width/2+50,240+(face_length/2)-25);
  endShape();

  //nose
  noStroke();
  fill(190,111,82);
  beginShape();
  vertex(width/2+2, 240+(face_length/2)-75);
  vertex(width/2, 240+(face_length/2)-60);
  vertex(width/2+20, 240+(face_length/2)-60);
  vertex(width/2+18, 240+(face_length/2)-75);
  endShape(CLOSE);
  
  beginShape();
  curveVertex(width/2, 240+(face_length/2)-60);
  curveVertex(width/2, 240+(face_length/2)-60);
  curveVertex(width/2+10, 240+(face_length/2)-55);
  curveVertex(width/2+20, 240+(face_length/2)-60);
  curveVertex(width/2+20, 240+(face_length/2)-60);
  endShape();


  //eyes
    fill(255);
    ellipse(width / 2 - face_width * 0.25 +10,245 , eye_width, eye_size);
    ellipse(width / 2 + face_width * 0.25 +10, 245, eye_width, eye_size);
    //pupils
    fill(76,50,36);
    noStroke();
    ellipse((width / 2 - face_width * 0.25 +10)+3, 244 , eye_width/2,eye_size*0.8);
    ellipse((width / 2 + face_width * 0.25 +10)+3,244, eye_width/2., eye_size*0.8);

  

  //garment with transparency
  fill(150,190);
  noStroke();
  strokeWeight(3);
  beginShape();
  curveVertex(width/2-45,405);
  curveVertex(width/2-35,425);
  curveVertex(width/2-57,435);
  curveVertex(width/2-175, 460);
  curveVertex(width/2-225, 550);
  curveVertex(width/2-205, 650);
  curveVertex(width/2+195, 650);
  curveVertex(width/2+225, 550);
  curveVertex(width/2+175, 460);
  curveVertex(width/2+57,435);
  curveVertex(width/2+35,425);
  curveVertex(width/2+45,405);
  endShape(CLOSE);

  //garment on top layer
  fill(250);
  noStroke();
  beginShape();
  vertex(width/2,610)
  vertex(width/2-50,430)
  vertex(width/2-170,430)
  vertex(width/2-180,470)
  vertex(width/2-180,650)
  vertex(width/2+180,650)
  vertex(width/2+180,470)
  vertex(width/2+170,430)
  vertex(width/2+50,430)
  endShape();

  //earrings *line
  stroke(2); //line
  strokeWeight(1);
  strokeCap(SQUARE);
  line(width/2-(face_width/2),290,width/2-(face_width/2),385);
  line(width/2+(face_width/2)-10,290,width/2+(face_width/2)-10,385);
  
  //earrings *rounds
    if (mouseIsPressed) {
        fill(99,234,232);
    } else {
        fill(249,239,80);
    }
    
    ellipse(width/2-(face_width/2),385,50,50);
    ellipse(width/2+(face_width/2)-10,385,40,40);
  
  
  
  }


function mousePressed() {
    hair_length = random(320, 431);
    face_width = random(180, 205);
    face_length = random (190,220)
    hair_color = random(50,132);
    eye_width = random(35,50);
    eye_size = random(25,35);
   

   
}

I really enjoy how the mousePressed() function realize an interaction with the player while the domain argument allows the changing color to set within a color scheme. The variables for the face part visualize a perception of mine on how everyone looks drastically different in varieties of focus lens in different cameras. 

The mouseisPressed() function makes the earrings pop out from the other variables.

LO2- GENERATIVE ART

Guto Requena- Samba Stool 2014

https://gutorequena.com/samba-stool

Generative design helps designers in going through a big number of possible combinations in a short amount of time. By allowing computers to run possibilities that are of parametric design and accuracy, the architect is able to devote the remaining time to design more thoroughly. This also creates multiple solutions for the same project that the architect might have been unable to think of or foresee. 

I admire furniture design, in general. However, the Samba Stool allows music to become a mix of design with music. By analyzing classic samba songs through vocals, vass, treble, rhythm, etc, frequency curves were generated. Requena organizes these curves into an organic and smooth surface on a digital file.

Guto Requena’s generative design is then sculpted on a CNC machine to create a marble stool. Digital simulations and geometric manipulation allowed a variety of possibilities of shapes and designs in this process and has allowed a cultural and aesthetic manifestation of design. 

Project 02 – Variable Faces

For this project, I used Photoshop to draw out the animation character as well as getting the correct parameters for each shape. I was inspired by the physical features and stylistics of the Animal Crossing villagers. Therefore, I wanted to try creating my own character.

blue puffy
//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project-02

function setup() {
    createCanvas(640, 480);
    background(251, 252, 212);
}

var eyeWidth = 50;
var eyeHeight = 67;
var pupilWidth = 27;
var pupilHeight = 27;
var pupilX = 342
var pupilY = 234
var faceWidth = 324;
var faceHeight = 230;
var cheekWidth = 44;
var cheekHeight = 21;
var noseWidth = 60;
var noseHeight = 34;
var mouthWidth = 18;
var mouthHeight = 13;
var hairWidth = 107;
var hairHeight = 88;

function draw() {
    
    //face
    noStroke();
    fill(203, 227, 217);
    ellipse(323, 281, faceWidth, faceHeight);

    //left cheek
    noStroke();
    fill(237, 205, 201);
    ellipse(207, 323, cheekWidth, cheekHeight);

    //right cheek
    noStroke();
    fill(237, 205, 201);
    ellipse(439, 323, cheekWidth, cheekHeight);

    //mouth
    noStroke();
    fill(1, 56, 72);
    ellipse(344, 364, mouthWidth, mouthHeight);

    //nose
    noStroke();
    fill(1, 56, 72);
    rect(294, 300, noseWidth, noseHeight);

    //left eye
    noStroke();
    fill(255);
    ellipse(243, 279, eyeWidth, eyeHeight);

    //right eye
    noStroke();
    fill(255);
    ellipse(403, 279, eyeWidth, eyeHeight);

    //yc = pupils (up & down)
    let topEye = 257;
    let bottomEye = 279;
    let mouse = mouseY;
    let yc = constrain(mouseY, bottomEye, topEye);

    //left pupil
    noStroke();
    fill(89, 57, 39);
    ellipse(243, yc, pupilWidth, pupilHeight);

    //right pupil 
    noStroke();
    fill(89, 57, 39);
    ellipse(403, yc, pupilWidth, pupilHeight);

    //hairA
    noStroke();
    fill(32, 69, 255);
    ellipse(154, 243, hairWidth, hairHeight);

    //hairB
    noStroke();
    fill(32, 69, 255);
    ellipse(216, 189, hairWidth, hairHeight);

    //hairC
    noStroke();
    fill(32, 69, 255);
    ellipse(311, 173, hairWidth, hairHeight);

    //hairD
    noStroke();
    fill(32, 69, 255);
    ellipse(403, 189, hairWidth, hairHeight);

    //hairE
    noStroke();
    fill(32, 69, 255);
    ellipse(486, 235, hairWidth, hairHeight);

    //hairF
    noStroke();
    fill(32, 69, 255);
    ellipse(154, 166, hairWidth, hairHeight);

    //hairG
    noStroke();
    fill(32, 69, 255);
    ellipse(247, 121, hairWidth, hairHeight);

    //hairH
    noStroke();
    fill(32, 69, 255);
    ellipse(311, 92, hairWidth, hairHeight);

    //hairI
    noStroke();
    fill(32, 69, 255);
    ellipse(444, 121, hairWidth, hairHeight);

    //hairJ
    noStroke();
    fill(32, 69, 255);
    ellipse(185, 111, hairWidth, hairHeight);

    //hairK
    noStroke();
    fill(32, 69, 255);
    ellipse(365, 121, hairWidth, hairHeight);

    //hairL
    noStroke();
    fill(32, 69, 255);
    ellipse(483, 166, hairWidth, hairHeight);
}


function mousePressed() {
	faceWidth = random(200, 400);
	faceHeight = random(100, 300);
	cheekWidth = random(44, 54);
	cheekHeight = random(54, 64);
	noseWidth = random(45, 85);
	noseHeight = random(24, 44);
	mouthWidth = random(8, 28);
	mouthHeight = random(3, 23);
	pupilWidth = random(17, 47);
	pupilHeight = random(47, 57);
	hairHeight = random(90, 200);
}

Project 02 – Variable Face

I made this out of curiosity: I wondered what certain aspects of the face would look like with different parameters, and messed around with them until I got this. The ears were the most interesting part to work on; I enjoyed working the variables and trying to get them go move with the face shape

sketch

//Diana McLaughlin, dmclaugh, Section A

var earWidth = 40
var earHeight = 60
var faceWidth = 300
var faceHeight = 350
var eyeHeight =35
var eyeWidth = 35
var pupil = 15
var browlx = 242
var browy =175 
var browlx2 = 277
var browy2 = 180
var browrx = 367
var browrx2 = 402
var mouthWidth = 90
var mouthHeight = 30
var nose =35

function setup() {
    createCanvas(640, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(0, 0, 255);
    fill(0, 200, 0);
    ellipse((width/2 - faceWidth/2), (height/2), earWidth, earHeight); //left ear
    ellipse((width/2 + faceWidth/2), (height/2), earWidth, earHeight); //right ear
    ellipse((width/2), (height/2), faceWidth, faceHeight); //head
    fill(255);
    ellipse((width/2 - 60), (height/2 - 30), eyeHeight, eyeWidth);
    ellipse((width/2 + 60), (height/2 - 30), eyeHeight, eyeWidth);
    fill(1);
    circle((width/2 - 60), (height/2 - 30), pupil);
    circle((width/2 + 60), (height/2 - 30), pupil); //eyes
    line(browlx, browy, browlx2, browy2);
    line(browrx, browy2, browrx2, browy); //eyebrows
    fill(255, 0, 0);
    ellipse((width/2), (height*.67), mouthWidth, mouthHeight); //mouth
    fill(200, 0, 150);
    circle((width/2), (height/2), nose); //nose
}

function mousePressed() {
	earWidth = random(25, 80);
	earHeight = random(25, 100);
	faceWidth = random(200, 450);
	faceHeight = random(200, 450);
	eyeHight = random(20, 55);
	eyeWidth = random(20, 55);
	pupil = random(5, 25);
	browy = random(165, 185);
	browy2 = random(165, 185);
	mouthWidth = random(50, 110);
	mouthHeight = random(20, 45);
	nose = random(20, 40);


}	

Project 2: Variable Faces

soot sprite
//Jessie Chen
//Section D
var sprite = 220;
var eyeWidth = 82;
var eyeHeight = 82;
var irisX = 240;
var irisY = 320;
var aX = 380;
var aY = 380;
var bX = 440;
var bY = 300;
var cX = 40;
var cY = 340;
var dX = 80;
var eX = 225;
var eY = 500;
var fX = 280;

let r, g, b;
r = random(255);
g = random(255);
b = random(255);

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

function draw() {
    var x1 = width / 2;
    var y1 = height / 2;
    background(243, 231, 211);
    //hair
    stroke(0);
    strokeWeight(5)
    radius = 122 + length;
    for (angle = 0; angle <360; angle=angle+ 6) {
        x = cos(radians(angle)) * radius + 240;
        print("x = " + x.toString())
;
        y = sin(radians(angle)) * radius + 320;
        print("y = " + y.toString());
        line(x1, y1, x , y);
    }
    //head
    fill(45);
    ellipse(x1, y1, sprite, sprite);
    //eye
    fill(255);
    var leftEye = width / 2 - 50;
    var rightEye = width / 2 + 50;
    ellipse(leftEye, height / 2, eyeWidth, eyeHeight);
    ellipse(rightEye, height / 2, eyeWidth, eyeHeight);
    //iris
    fill(0);
    ellipse(irisX - 50, irisY, 20, 20);
    ellipse(irisX + 50, irisY, 20, 20);
    //right arm
    noFill();
    stroke(0);
        beginShape();
        curveVertex(350, 320);
        curveVertex(350, 320);
        curveVertex(aX, aY);
        curveVertex(bX, bY);
        curveVertex(bX, bY);
        endShape();
    //left arm
    noFill();
    stroke(0);
        beginShape();
        curveVertex(130, 320);
        curveVertex(130, 320);
        curveVertex(cX, cY);
        curveVertex(dX, bY);
        curveVertex(dX, bY);
        endShape();
    //left leg
    noFill();
    stroke(0);
        beginShape();
        curveVertex(200, 422);
        curveVertex(200, 422);
        curveVertex(eX, eY);
        curveVertex(140, 600);
        curveVertex(140, 600);
        endShape();
    //right leg
    noFill();
    stroke(0);
        beginShape();
        curveVertex(280, 422);
        curveVertex(280, 422);
        curveVertex(fX, eY);
        curveVertex(350, 610);
        curveVertex(350, 610);
        endShape();
    //star
    stroke(r, g, b);
    fill(r, g, b);
    strokeJoin(ROUND);
    triangle(230, 120, 250, 120, 240, 103);
    triangle(230, 120, 210, 120, 220, 137);
    triangle(250, 120, 270, 120, 260, 137);
    triangle(230, 150, 210, 150, 220, 135);
    triangle(250, 150, 270, 150, 260, 135);
    triangle(230, 150, 250, 150, 240, 167);
    ellipse(240, 135, 28, 25);

}

function mousePressed() {
    //eye
    eyeWidth = random(75, 88);
    eyeHeight = random(75, 88);
    //iris
    irisX = random(230, 250);
    irisY = random(310, 330);
    //hair
    length = random(5, 13);
    //legs
    aX = random(340, 440);
    aY = random(290, 350);
    bX = random(285, 300);
    bY = random(140, 160);
    cX = random(30, 150);
    cY = random(275, 230);
    dX = random(100, 210);
    eX = random(180, 200);
    eY = random(520, 560);
    fX = random(280, 300);
    //star color
    r = random(255);
    g = random(255);
    b = random(255);
}

This was inspired by the soot sprites from the anime “Spirited Away.” This piece was really challenging since I had to use trig to figure out an equation.

LookingOutwards-02

For a piece of generative art that I found inspirational, I chose the work “Strich” by Leander Herzog. The work itself is very visually pleasing in its graphic simplicity. There are the same six colors no matter how you interact with it. That being said, it is an interactive work, similar to this weeks project in which one clicks their mouse for a different visual. In this work however, the work will continue to move and develop until the mouse is clicked again. Besides the mouse click aspect, it seems that the forms being constantly generated are random. Lines of one of the six colors, appear, and then they expand their width across the screen in a direction. I find it especially cool that in his case that he applies complex algorithms to very basic geometries, rather than using an algorithm to generate highly complex geometries.

http://www.leanderherzog.ch/strich/

Project-02-Variable Face

sketch9.12.2Download
// Amyas Ryan Section A
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthSize = 60;
var browSize = 30;

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

function draw() {
    background(226, 146, 170);
    fill(60, 200, 72);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var mouth = width / 2
    var browL = width / 2 - faceWidth * 0.25;
    var browR = width / 2 + faceWidth * 0.25;
    arc(240, 360, 60, 40, 0, 180);
    fill(255, 255, 255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(30, 170, 42);
    ellipse(mouth, height / 2 + 100, mouthSize + 20, mouthSize);
    fill(0, 0, 0);
    rect(browL, height / 2 - 40, browSize, browSize / 2);
    rect(browR - 10, height / 2 - 40, browSize, browSize / 2);
}

function mousePressed() {
    faceWidth = random(150, 300);
    faceHeight = random(300, 500);
    eyeSize = random(10, 30);
    mouthSize = random(20, 70);
    browSize = random(10, 40);
}

LO-2

I was interested in Mitchell Whitelaw’s Succession. It is a beautiful, haunting work that I think takes a modern approach to documenting and presenting history. I find the combination of each fossil element to have the striking effect of confusing viewers and forcing them to take time to pick apart and understand each element. Each part of the composite it displays is shown below the entire image so viewers may deconstruct the composite to better understand the work. Whitelaw’s description presents the mechanics of the code, which selects five images from a database of two thousand and combines them. I suppose there is something which controls how the images fit together, most likely which controls each layer, as there is a foreground and many layers of backgrounds, and an algorithm for transparency as well. It’s a very deep work which presents Whitelaw’s own respect for the culture as all of the pieces of the composite are presented as vital, and even pieces of the composite are recognized below. His description includes his artistic goal for the piece: to present new views on industrial capitalism and find new ways to document and look backwards.

https://mtchl.net/succession/#

A generated image from Succession (Whitelaw, 2014)