Month: September 2019

Ilona Altman – Looking Outwards – 02

The work, Condensation Cube

I was interested in the definition of a generative piece not necessarily having to be technological. Though technology and coding allows for systems to change depending on their environment, so can some physical structures. This piece is called Condensation Cube, and it was made by Hans Haacke in 1963. It is composed of sheets of plexiglass combined to make a square container, as well as some water and air. This piece is generative as within the system of this box, which can exist in a space with variable temperature, the pattern of the condensation changes. The artwork depends entirely on the place it exists in.

I find this piece interesting and beautiful, as its brings a natural process into focus. It makes me think about how all art in a way changes depending on the context in which it is placed.

https://www.macba.cat/en/condensation-cube-1523

Sydney Salamy: Looking Outwards-02


The project is called “A DECISION MACHINE SUITE” by Roman Verostko. It features a number of machines of simple rectangles of varying sizes and positions. Despite these variations, all the machines have one thing in common: blinking lights. They each have two lights that blink on and off, representing an answer to a question. The names of the machines are the questions, and range from “The Vatican: Right or Wrong?” and “Hamlet: To Be or Not To Be?” to just “Generic Decider: Red or Green?”. Whichever light is kept on is random, thus the answer cannot be predetermined. The project is a nod to Norbert Wiener (the “Father of Cybernetics”), who played a role in the information revolution of the 1900s and who noticed that even physics has uncertainty and chance.

 

  • I admire how the project is so simple yet is based around offering answers to some complex questions. I guess I like this because these questions, at least some of them, are highly debated and have been for years, and so to leave the answers all up to a small little machine that picks lights at random is just very interesting and entertaining to me. I know I shouldn’t say this in an assignment, but it’s almost like a giant middle finger to all the great thinkers who have spent so much time thinking them over, only to have people do a complicated version of a coin toss for the answer. I also find the machine designs very interesting. Verostko decided to incorporate their questions into them. The “Red or Green” one is obvious, with each color being displayed behind one of the lights, and “Wall Street” is similar except with a “B” and “S”. But the others are a bit more subtle. “The Vatican” holds gold leafed lamp reflectors, and is shaped almost like a cross except without the top part (although I’m not sure if the cross was intentional). “The Whitehouse” includes its own colors, except they are black and white and are balloting marbles. More impressive than that, the wood the circuits rest on is actually from the Whitehouse from when it was renovated in the 40s. I admire the designs because Verostko could have just had a consistently simple design for all his machines, but instead he chose to spice things up and make them more interesting. The designs don’t just improve their look, but also gives the viewers something deeper to look into.
  • Based off his the website hosting online versions of his work, it seems like his schematic was based on some else’s manual. The drawing he made of  the circuit made it seem like it was very simple. However, what makes this project more interesting is that the online version doesn’t use circuits since its online. It just uses regular code, which he said Tamara Temple helped him with. The algorithm would probably be very simple as well, since its just two lights going on and off and a button which stops them. 
  • I don’t know much about the algorithm, but the circuits for the real machines have artistic sensibilities attached to them. For instance, the circuit for “White House” was placed on an actual piece of the White House. Also, the colorful wiring served both practical and aesthetic purposes.
  • “A DECISION MACHINE SUITE” by Roman Verostko, 1983-1995

“Decision Machine Suite” by Roman Verostko

 

Screenshot of the “Decision Machine Suite” by Roman Verostko

 

Cathy Dong – Project 2 – Variable Face


sketch

/* Cathy Dong
   Section D
   yinhuid
   Project 2-Variable Face
*/

//Basics
var bodyG = 219;
var bodyB = 96;
var headW = 178;
var headH = 79;
var eyeW = 120;
var eyeH = 100;
var eyeR = 30;
var mX = 320;
var mY = 350;
var mW = 30;
var mH = 20;
var speedX = 1;
var startX = 0;
var speedY = 1;
var startY = 0;
var bananaX = 0;
var bananaY = 51;


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

function draw() {
	background(233, 229, 228);

	//hair variables
	hairLx = width / 2 - headW / 2;
	hairRx = width / 2 + headW / 2;
	hairY = headH + 20;

	//eye variables
	ballLx = 315 - eyeW / 2;
	ballRx = 325 + eyeW / 2;
	ballY = 213;

	//body shape
	stroke(0);
	strokeWeight(.5);
	fill(251, bodyG, bodyB);
	beginShape();
	curveVertex(146, 480);
	curveVertex(171, 349);
	curveVertex(174, 200);
	curveVertex(hairLx, hairY);
	curveVertex(width / 2, headH);
	curveVertex(hairRx, hairY);
	curveVertex(466, 200);
	curveVertex(469, 349);
	curveVertex(494, 480);
	curveVertex(494, 480);
	endShape(CLOSE);

	//cloth
	stroke(8, 30, 56);
	strokeWeight(1);
	fill(94, 126, 163);
	beginShape();
	curveVertex(211, 480);
	curveVertex(212, 448);
	curveVertex(186, 423);
	curveVertex(160, 385);
	curveVertex(167, 358);
	curveVertex(188, 394);
	curveVertex(221, 418);
	curveVertex(320, 429); //cloth mid point
	curveVertex(419, 418);
	curveVertex(452, 394);
	curveVertex(473, 358);
	curveVertex(480, 383);
	curveVertex(454, 423);
	curveVertex(441, 448);
	curveVertex(443, 480);
	curveVertex(443, 480);
	endShape(CLOSE);

	//pocket
	stroke(48, 77, 112);
	strokeWeight(2);
	fill(68, 100, 143);
	beginShape();
	curveVertex(277, 480);
	curveVertex(276, 460);
	curveVertex(320, 468);
	curveVertex(364, 460);
	curveVertex(363, 480);
	curveVertex(363, 480);
	endShape(CLOSE);

	//button
	stroke(48, 77, 112);
	strokeWeight(2);
	fill(68, 100, 143);
	circle(219, 435, 20);
	circle(219, 435, 10);
	circle(430, 435, 20);
	circle(430, 435, 10);

	//Left hair
	stroke(0);
	strokeWeight(5);
	noFill();
	line(width / 2, headH, hairLx, hairY);
	line(width / 2, headH, hairLx - 30, hairY + 20);
	line(width / 2, headH, hairLx + 50, hairY - 20);

	//Right Hair
	stroke(0);
	strokeWeight(5);
	noFill();
	line(width / 2, headH, hairRx, hairY);
	line(width / 2, headH, hairRx + 30, hairY + 20);
	line(width / 2, headH, hairRx - 50, hairY - 20);

	//Eye
	stroke(0);
	strokeWeight(.5);
	fill(225);
	ellipse(315 - eyeW / 2, 233, eyeW, eyeH);
	ellipse(325 + eyeW / 2, 233, eyeW, eyeH);

	//Eyeball
	ballLx = mouseX;
	ballLx = constrain(ballLx, 315 - eyeW + eyeR, 315 - eyeR);
	ballRx = mouseX;
	ballRx = constrain(ballRx, 325 + eyeR, 325 + eyeW - eyeR);
	ballY = mouseY;
	ballY = constrain(ballY, 233 - eyeH / 2 + eyeR, 233 + eyeH / 2 - eyeR);
	//dark
	noStroke();
	fill(80, 67, 60);
	circle(ballLx, ballY, eyeR);
	circle(ballRx, ballY, eyeR);
	//light
	noStroke();
	fill(53, 40, 33);
	circle(ballLx, ballY, eyeR / 2);
	circle(ballRx, ballY, eyeR / 2);

	//glass
	stroke(148, 148, 148);
	strokeWeight(20);
	noFill();
	ellipse(255, 245, 125, 131);
	ellipse(385, 245, 125, 131);

	//glass shadow
	stroke(175, 174, 175);
	strokeWeight(10);
	noFill();
	ellipse(255, 245, 125, 131);
	ellipse(385, 245, 125, 131);

	//glass belt
	stroke(96, 75, 58);
	strokeWeight(2);
	fill(62, 58, 54);
	rect(165, 230, 23, 27);
	rect(456, 230, 20, 27);

	//Mouse
	stroke(0);
	strokeWeight(.5);
	fill(225);
	triangle(mX, mY, mX - mW / 2, mY - mH, mX + mW / 2, mY - mH);

	//BANANA TEXT
	stroke(198, 143, 79);
	strokeWeight(3);
	fill(225, 181, 143);
	if (keyIsPressed) {
		if ((key == 'a') || (key == 'A')) {
			speedX = -1;
		}
		if ((key == 's') || (key == 'S')) {
			speedX = 1;
		}
		if ((key == 'w') || (key == 'W')) {
			speedY = -1;
		}
		if ((key == 'z') || (key == 'Z')) {
			speedY = 1;
		}
	} 

	textSize(100);
	text('BANANA', startX, startY);
	startX += speedX;
	startY += speedY;
	startX = constrain(startX, 0, width - 450);
	startY = constrain(startY, 80, height - 10);


	//Banana fruit
	bananaX = mouseX;
	bananaX = constrain(bananaX, 0, width - 107);
	bananaY = mouseY;
	bananaY = constrain(bananaY, 52, height - 27);
	stroke(206,154,8);
	strokeWeight(1);
	fill(255, 226, 0);
	beginShape();
	curveVertex(bananaX, bananaY);
	curveVertex(bananaX + 54, bananaY - 3);
	curveVertex(bananaX + 78, bananaY - 16);
	curveVertex(bananaX + 90, bananaY - 31);
	curveVertex(bananaX + 90, bananaY - 48);
	curveVertex(bananaX + 98, bananaY - 50);
	curveVertex(bananaX + 97, bananaY - 33);
	curveVertex(bananaX + 103, bananaY - 31);
	curveVertex(bananaX + 107, bananaY - 22);
	curveVertex(bananaX + 90, bananaY + 11);
	curveVertex(bananaX + 62, bananaY + 24);
	curveVertex(bananaX + 47, bananaY + 27);
	curveVertex(bananaX + 25, bananaY + 23);
	curveVertex(bananaX + 13, bananaY + 20);
	curveVertex(bananaX + 3, bananaY + 8);
	endShape(CLOSE);

}

function mousePressed(){
	bodyG = random(220, 95);
	bodyB = random(95, 220);
	headW = random(150, 200);
	headH = random(75, 100);
	eyeW = random(100, 130);
	eyeH = random(100, 110);
	eyeR = random(20, 40);
	mX = random(315, 325);
	mY = random(340, 380);
	mW = random(25, 50);
	mH = random(15, 45);
}

I had fun making minions. I sketched out the basic shapes based on a picture. The idea is to let his eye balls follow the banana, and make his face features and body color change with mouse click. The text “BANANA” move when pressing “w,” “a,” “z,” and “s,” capitalized or not.

CJ Walsh – Looking Outwards – 02

Blooms by John Edmark

The generative art that I was super drawn to was the work of John Edmark. I have seen his projects, and every time things he has created amaze me. What interests me is the combination of media and the way he is able to confuse the viewers, while also instilling a sense of wonder. In some artworks, when the work is confusing it is hard to keep a viewers interest. But, his work leaves us wanting to know more. The other important element is the use of different media. His work utitilizes 3D making, light, movement and often sound edited over the finished videos.

His work is made using the golden ratio, the algorithmic ratio that is present in spirals within natural objects, ie. pinecones. Once he generates the forms, he coordinates the rate at which the object spins and the rate of the strobe to create the illusion of movement. Each of his objects utilizes unique and specific rates and combinations of forms within the golden ratio.

He outlines in his artist statement that a lot of his work explores patterns of space and growth, so it makes sense that utilizing a natural ratio is of interest to him. In my opinion, the work truly speaks to the creation of an innovative process and its exciting to see a piece of artwork that is unique from other works I have seen.

Artist Website: http://www.johnedmark.com/

SooA Kim– Project 02 – Variable Face


sketch

I had fun sketching this Ghibli character called Kaonashi or “no face”. It was a good exercise for me to learn how mouthPressed function and random() work by changing the size and color using different variables. 

Reference photos:

 

 

/*
SooA Kim
Section D
sookim@andrew.cmu.edu
Project-02-Variable-Face
*/

var eye = 40;
var eyeH = 300;
var faceW = 240;
var mouthH = 10;
var color1 = 255;
var tri1 = 150;
var tri2 = 148;
var tri3 = 184;
var mouthOpen = 1;


function setup() {
    createCanvas(480, 640);
    background (25, 170, 180);
}

function draw() {
    //blackcoat
    strokeWeight(3); 
    fill("black");
    beginShape();
    curveVertex(25, 640);
    curveVertex(25, 640);
    curveVertex(30, 500);
    curveVertex(100, 220);
    curveVertex(240, 120);
    curveVertex(380, 220);
    curveVertex(450, 500);
    curveVertex(455, 640);
    curveVertex(455, 640);
    endShape();

    //face 
    noStroke();
    fill(color1);
    ellipse(240, 330, faceW, 340); 
  
    //eyes
    fill(0);
    ellipse (180, eyeH, eye, eye/2);
    ellipse (300, eyeH, eye, eye/2);
    //shadow?
    ellipse (180, 330, 35, 8);
    ellipse (300, 330, 35, 8);

     //mouth
     ellipse (240, 450, mouthH * 5, mouthH);
  
    //top triangles
    fill(tri1, tri2, tri3);
    triangle (160, 270, 175, 230, 190, 270);
    triangle (290, 270, 300, 230, 320, 270);
    //bottom triangles
    triangle(160, 350, 175, 420, 190, 350);
    triangle(290, 350, 300, 420, 320, 350);  
    ellipse(240, 475, 30, 10);
  
    //mouth2 open
    if (mouthOpen >= 1) {
        fill(0); //black
    }
    else {
        fill(255);   
        ellipse(240, 560, 250, 100);
        fill("red");
        ellipse(240, 560, 250, 55);
        stroke(1);
        line(130, 510, 130, 547);
        line(150, 510, 150, 540);
        line(180, 510, 180, 537); 
        line(210, 510, 210, 533);
        line(240, 510, 240, 533);
        line(270, 510, 270, 533);
        line(300, 510, 300, 535);
        line(330, 525, 330, 540);
        line(350, 525, 350, 547);
        line(130, 573, 130, 620);
        line(150, 580, 150, 620);
        line(180, 585, 180, 620);
        line(210, 587, 210, 620);
        line(240, 587, 240, 620);
        line(270, 586, 270, 620);
        line(300, 585, 300, 620);
        line(330, 580, 330, 620);
        line(350, 573, 350, 620);
    }
}
  
function mousePressed(){
    eye = random(5, 40);
    faceW = random (180, 300);
    mouthH = random(5, 25);
    eyeH = random(305, 320);
    tri1 = random(150, 255);
    tri2 = random(0, 255);
    tri3 = random(0, 255);
    mouthOpen = random(0, 4);
    color1 = random(0, 255);
}

Aaron Lee – Project-02 – Variable Faces

sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-02-variable faces
*/

//variables
var x = 5;
var y = 5;
var r = 255;
var g = 255;
var b = 255;
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;


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


function draw() {
   background(r,g,b);

   //eyes
   var eyeLX = width / 2 - faceWidth * 0.35;
   var eyeRX = width / 2 + faceWidth * 0.35;
   ellipse(eyeLX, height / 2 + x, eyeSize, eyeSize + x);
   ellipse(eyeRX, height / 2 + y, eyeSize, eyeSize + y);

   //face
   noFill();
   beginShape();
   curveVertex(width / 2, 160);
   curveVertex(width / 2, 160);
   curveVertex(width - 160  + x, 200 + x);
   curveVertex(width - 120 + x, height / 2 + x);
   curveVertex(width - 160 + x, height - 200 + x);
   curveVertex(width / 2, height - 160 + x);
   curveVertex(160 + x, height - 200 + x);
   curveVertex(120 + x, height / 2 + x);
   curveVertex(160 + x, 200 + x);
   curveVertex(width / 2, 160);
   curveVertex(width / 2, 160);
   endShape();

   //hat
   fill(50);
   rect(width / 5 + x, height / 8 + 50 + x, width / 2 + 50 + y, 100 + y);

   //nose
   noFill();
   beginShape();
   curveVertex(width / 2, height /2);
   curveVertex(width / 2, height /2);
   curveVertex(width / 2 + x, 350 + x);
   curveVertex(width / 2, 370);
   curveVertex(width / 2, 370);
   endShape();

   //mouth
   noFill();
   beginShape();
   curveVertex(width / 2 - 20, height - 230);
   curveVertex(width / 2 - 20, height - 230);
   curveVertex(width / 2 - 10 + y, height - 230 + y);
   curveVertex(width / 2 + 10 + x, height - 230 + x);
   curveVertex(width / 2 + 20, height - 230);
   curveVertex(width / 2 + 20, height - 230);
   endShape();
}


function mousePressed() {
    // when the user clicks, these variables are reassigned
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    x = random(-30,30);
    y = random(-30,30);
    r = random(0,255);
    g = random(0,255);
    b = random(0,255);
}

I utilized curveVertx () command to create smooth transitions of the curves.

Claire Yoon-Project-02-Variable-Face

sketch

/*Claire Yoon
  Section E
  claireyo@andrew.cmu.edu
  Assignment-02
  */
  // variables for face.
    var eyeSize = 35;
    var pupilSize = 25;
    var faceWidth = 110;
    var faceHeight = 110;
    var facecolorR = 255
    var facecolorG= 204;
    var facecolorB= 77;
    var brow = 185;
    var mouthx= 60
    var mouthy= 40

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

  function draw() {
    background(249);
    noStroke (0)
    //face
    fill(250, facecolorG, facecolorB)
    ellipse(width / 2, height / 2, faceWidth*2,  faceHeight*2);

    //outer eye
    fill("white")
    var eyeLX = width / 2 - faceWidth * 0.40;
    var eyeRX = width / 2 + faceWidth * 0.40;
    ellipse(eyeLX, height / 2.05, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2.05, eyeSize, eyeSize);

    //pupil
    fill(103, 70, 0)
    var pupilLX = width / 2 - faceWidth * 0.40;
    var pupilRX = width / 2 + faceWidth * 0.40;
    ellipse(pupilLX, height / 2.05, pupilSize, pupilSize);
    ellipse(pupilRX, height / 2.05, pupilSize, pupilSize);

    //blush
    fill(238, 134, 154)
    var eyeLX = width / 2 - faceWidth*0.7;
    var eyeRX = width / 2 + faceWidth*0.7;
    ellipse(eyeLX, height / 1.8, eyeSize, eyeSize);
    ellipse(eyeRX, height / 1.8, eyeSize, eyeSize);

    //eyebrow
    stroke(103, 70, 0);
    strokeWeight(9);
    noFill();
    beginShape();
    curveVertex(250, 200);
    curveVertex(250, 200);
    curveVertex(270, brow);
    curveVertex(300, brow);
    curveVertex(300, brow);
    endShape();

    stroke(103, 70, 0);
    strokeWeight(9);
    noFill();
    beginShape();
    curveVertex(340, brow);
    curveVertex(340, brow);
    curveVertex(370, brow);
    curveVertex(390, 200);
    curveVertex(390, 200);
    endShape();

    //mouth
    stroke(103, 70, 0);
    strokeWeight(9);
    noFill();
    arc(width / 2, height / 1.8, mouthx, mouthy, TWO_PI, PI);
  }

  function mousePressed() {
      // when the user clicks, these variables are reassigned
      // to random values within specified ranges. For example,
      // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(100, 130);
    faceHeight = random(100, 130);
    facecolorG = random(76, 250);
    facecolorB = random(36, 120);
    eyeSize = random(0,50)
    pupilSize = random(20, 30);
    brow = random(180,200)
    mouthx = random(40,80)
    mouthy= random(30,70)
  }

I gained inspiration from the emoji and set some values for things such as the eyebrows, eyes and the color of the face to show the difference in emotions when clicking on it.

Kristine Kim-Project 02-Variable-Face


sketch

//Kristine Kim
//Section D
//younsook@andrew.cmu.edu
//Project-02-variable-Face

var headW = 350;
var headH = 300;
var head_colorR = 250;
var head_colorG = 250;
var head_colorB = 150;
var eyesize = 100;
var pupilsize = 60;
var blushW = 60;
var blushH = 30;
var blush_colorR = 250;
var blush_colorG = 180;
var blush_colorB = 242;
var buttons = 50;
var buttons_colorR = 231;
var buttons_colorG = 129;
var buttons_colorB = 247;
var eyebrowLU = 30;
var eyebrowLD = 100;
var eyebrowRU = 450;
var eyebrowRD = 100;
var backgroundR = 242;
var backgroundG = 161;
var backgroundB = 90;


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

function draw() {
    background(backgroundR,backgroundG,backgroundB);
//body
    fill ('#74eda7');
    noStroke();
    triangle(width/2, height/4.5, 480,640,0,640);
// head
    fill (head_colorR, head_colorG, head_colorB);
    noStroke();
    rectMode(CENTER);
    rect(width/2, height/2.5, headW, headH);
    //rect(width/7.5, height/6, headW, headH);
//eyes    
    var eyeL = width/2 - headW*0.25;
    var eyeR = width/2 + headW*0.25;
    fill('white');
    stroke(255, 204, 0);
    strokeWeight(6);
    ellipse(eyeL,height/2.75, eyesize, eyesize);
    ellipse(eyeR,height/2.75, eyesize, eyesize);
// pupil
    var pupilL = width/2 - headW*0.25;
    var pupilR = width/2 + headW*0.25;
    fill ('#3d4540');
    noStroke();
    ellipse(pupilL, height/2.75,pupilsize, pupilsize);
    ellipse(pupilR, height/2.75,pupilsize, pupilsize);
// left eyebrow 
    stroke('black');
    strokeWeight('20');
    noSmooth();
    line(eyebrowLU,70,190,160);
    line(190,160,30,eyebrowLD);
// right eyebrows
    line(300, 160, 450,eyebrowRD);
    line(eyebrowRU,70,300,160);
//mouth
    fill('#eb876c');
    noStroke();
    quad (width/2-50, height/2, width/2+50,height/2, width/2 +100, height/2+ 100, width/2 -100, height/2+100);
//teeth
    fill('white');
    stroke('#dbdbdb');
    strokeWeight('5');
    rect(width/2-25,height/1.85,50,50);
    rect(width/2+25,height/1.85,50,50);
//blush
    var blushLeft = width/2.25- headW*0.25;
    var blushRight = width/1.8 + headW*0.25;
    stroke('#f25a5a');
    strokeWeight('5');
    fill(blush_colorR,blush_colorG,blush_colorB);
    ellipse(blushLeft, height/2, blushW, blushH);
    ellipse(blushRight, height/2, blushW, blushH);
//buttons
    stroke('#d1d1d1');
    strokeWeight('3');
    fill(buttons_colorR, buttons_colorG,buttons_colorB);
    ellipse (width/2, height/1.4, buttons, buttons);
    ellipse (width/2, height/1.2, buttons, buttons);
    ellipse (width/2, height/1.05, buttons, buttons);

}
//mousepressed
function mousePressed(){
    headW = random(275,430);
    headH = random(250,350);
    head_colorR = random(0,400);
    head_colorG = random(0,300);
    head_colorB = random(0,400);
    blush_colorR = random(0,400);
    blush_colorG = random(0,500);
    blush_colorB = random(0,400);
    eyesize = random(85,230);
    pupilsize = random(20,85);
    blushH = random(30,70);
    blushW = random(60,100);
    buttons_colorR = random(0,300);
    buttons_colorG = random(0,400);
    buttons_colorB = random(0,200);
    buttons = random(40,70);
    backgroundR = random(0,200);
    backgroundG= random(0,200);
    backgroundB = random(0,200);

   
}

 

I started this project first by sketching an imagery character. Last project, I used Adobe illustrator to help me point out coordinates but this time, I wanted to challenge myself but starting on a blank canvas. It was more challenging and time consuming than last time but definitely helped me understand the concept of coding and building my own code. 

Shannon Ha – Project 02 – Variable Face

sketch

var bunW = 106;
var bunH = 88;

var bangsShowH = 166;
var bangsShowW = 305;

var bangsHideH = 83;
var bangsHideW = 305;

var faceWidth = 329;
var faceHeight = 267;

var eyesW = 44;
var eyesH = 31;

var pupilsA = 12;
var pupilsB = 12;
var pupilsXL = 235;
var pupilsY = 259;
var pupilsXR = pupilsXL + 140;


var mouthW = 74;
var mouthH = 21;
var mouthX = 336;
var mouthY = 341;

var backgroundR = 102;
var backgroundG = 45;
var backgroundB = 145;

var haircolor = 0;

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

function draw() {

//background
    background(backgroundR,backgroundG,backgroundB);

//face
    fill(240,199,156);
    noStroke();
    ellipse(320 , 267, faceWidth,  faceHeight);

//bun hair
    fill(haircolor);
    noStroke();
    ellipse(208,143,bunW,bunH);
    ellipse(431,143,bunW,bunH);

//bangs hair
    fill(haircolor);
    noStroke();
    ellipse(320,192,bangsShowW,bangsShowH);

    rectMode(RADIUS);
    noStroke();
    fill(240,199,156);
    rect(321,252,bangsHideW/2,bangsHideH/2);

//hair pins
    stroke(238,28,72);
    strokeWeight(3);
    line(172,175,254,120);
    line(386,120,467,175);

//eyes
    fill(255);
    noStroke();
    ellipse(243,256,eyesW,eyesH);
    ellipse(381,256,eyesW,eyesH);

//pupils
    fill(0);
    ellipse(pupilsXL,pupilsY,pupilsA,pupilsB);
    ellipse(pupilsXR,pupilsY,pupilsA,pupilsB);

//nose
    fill(170,134,77);
    ellipse(304,291,30,21);
    fill(240,199,156);
    ellipse(305,285,30,21);

//mouth
    fill(0);
    ellipse(mouthX,mouthY,mouthW,mouthH);
}

function mousePressed() {
    faceWidth = random(245,348);
    faceHeight = random(272,309);
    bangsHideW = random(236,250);
    bangsHideH = random(50,100);
    haircolor = random(0,255);
    eyesW = random(44,60);
    eyesH = random(31,52);
    pupilsXL = random(229,260);
    pupilsY = random(248,267);
    pupilsA = random(11,29);
    pupilsB = random(11,30);
    mouthX = random(284,378);
    mouthY = random(338,364);
    mouthW = random(33,92);
    mouthH = random(15,63);
    backgroundR = random(0,225);
    backgroundG = random(0,225);
    backgroundB = random(0,225);
}

For this project, I explored how to make a variety of expressions using random variables. At first it was a challenge to figure out the relationships between each variable, but it got easier after I made several errors.

CJ Walsh – Project 02 – Variable Faces

sketch

var headHeight = 236;
var headWidth = 213;
var hairHeight = 236;
var hairWidth = 213;
var eyeHeight = 26.5;
var eyeWidth = 26.5;
var mouthHeight = 14.389;
var mouthWidth = 93.842;
var eyeY = 225;

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

function draw() {
	background('#9BE58C');
	// hair
	fill('#664E42');
	ellipse (320 + hairWidth/2, 240, 200, 200);
	ellipse (320 - hairWidth/2, 240, 200, 200);
	// hair
	fill('#664E42');
	ellipse (320, 240, hairWidth*1.5, hairHeight*1.5);
	 var eyeLX = width / 2 - headWidth * 0.25;
    var eyeRX = width / 2 + headWidth * 0.25;
	// head 
	fill ('#E1C1B5');
	ellipse (320, 240, headWidth, headHeight);
	// eyes 
	fill ('#77A7D9');
	ellipse (eyeLX, eyeY, eyeWidth, eyeHeight);
	ellipse (eyeRX, eyeY, eyeWidth, eyeHeight);
	// mouth 
	fill ('#D880AA');
	ellipse (320, 285, mouthWidth, mouthHeight);
}


function mousePressed() {
	headWidth = random (100, 300);
	headHeight = random (100, 300);
	eyeHeight = random (10, 50);
	eyeWidth = random (10, 40);
	mouthHeight = random (5, 50);
	mouthWidth = random (20, 70);
	eyeY = random (180, 250);
	hairHeight = random (100, 350);
	hairWidth = random (100, 350);
}

My inspiration started out as being inspired by my self portrait from last week. I wanted to make simple faces that when changed randomly would create fun combinations and expressions. I used Illustrator to sketch out examples of my ideas and used those sketches as my starting ellipses in my code. I thought adding some ellipses around the face could create some fun structures that looked like hair. After finishing my work, I realized it reminded a lot of Adventure Time when the humans wear their animal hats.