Category: SectionD

Sarah Choi – Looking Outwards – 02

I chose Karl Sims’ Flow, a 2018 interactive exhibit showcased at the MIT Stata Center in Cambridge, Massachusetts. The project used “various fluid flow, particle systems, and image processing simulations” which reacted to the audience’s movements incorporated with special effects in order to let the viewers feel as if they are simulated into the environment the art is trying to portray. I love the color and visual effects used in this exhibit because it brings out inspirations from different forms of nature, showcasing the aspect of fluid flow of gravitational, light, and liquid effects. I assume that the algorithm that generated the work is a mixture of patterns and randomization. The natural motions of nature such as the circular direction of gravity or ripples from waves all follow a consistent pattern; while the dispersion of colors getting mixed follow a more random algorithm. However, Karl Sims depicted his artistic creation through the interaction of his audience. Through this exhibit, he allowed his viewers to appreciate natural patterns of everyday life which aren’t necessarily seen through the naked eye. 

http://www.karlsims.com/flow.html

Flow by Karl Sims

MIT Stata Center 2018

Sarah Choi Project-02-Variable-Face

project-02-variable-face

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Assignment-02-A

var noseSize = 20;
var nostrilHeight = 180;
var nostrilWidth = 120;
var eyes = 20

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

function draw() {
    background(250, 157, 157);

    //nose
    stroke(253, 212, 212);
    ellipse(width / 2, height / 2, nostrilHeight,  nostrilWidth);
    stroke(255);
    var nostrilL = width / 2 - nostrilHeight * 0.25;
    var nostrilR = width / 2 + nostrilHeight * 0.25;
    ellipse(nostrilL, height / 2, noseSize, noseSize);
    ellipse(nostrilR, height / 2, noseSize, noseSize);

    //eyes
    noFill();
    strokeWeight(5);
    var eyesL = width / 2 - nostrilHeight * 0.3;
    var eyesR = width / 2 + nostrilHeight * 0.3;
    arc(eyesL, height / 3, noseSize * 1.1, noseSize * 2, PI, TWO_PI);
    arc(eyesR, height / 3, noseSize * 1.1, noseSize * 2, PI, TWO_PI);
    
    //legs
    var legsL = width / 3.5;
    var legsR = width /1.5;
    arc(legsL, height / 1.2, noseSize + 10, noseSize + 20, 0, PI, OPEN);
    arc(legsR, height / 1.2, noseSize + 10, noseSize + 20, 0, PI, OPEN);
    var legsLB = width / 3
    var legsRB = width / 1.4
    arc(legsLB, height / 1.2, noseSize + 10, noseSize + 20, 0, PI, OPEN);
    arc(legsRB, height / 1.2, noseSize + 10, noseSize + 20, 0, PI, OPEN);

    //tail
    bezier(125, 200, 130, 160, 180, 180, 110, 190);
    bezier(125, 200, 125, 220, 190, 170, 150, 190);
    bezier(150, 190, 110, 220, 160, 220, 160, 210);
}

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.
    nostrilHeight = random(100, 200);
    nostrilWidth = random(75, 150);
    noseSize = random(5, 30);
    eyesL = random(10, 30);
    eyesR = random(10, 30);
    legsL = random(10, 30);
    legsR = random(10, 40);
}

I played around from the template, and I started getting more ideas. I wanted to create an animal and the first thing I thought of was a pig. This is an outline of prominent features of pigs I wanted to portray.

Cathy Dong – Looking Outwards – 02

This ongoing project is called “Quantum Fluctuations: Experiments in Flux,” and created by Markos Kay. Markos Kay is a visual artist, creative director, illustrator, and lecturer in London. The artwork is made by enlarging and observing the quantum world. Kay “measures the spoils of a proton collision and compares the findings with data collected from supercomputer simulations.” Quantum simulations become the paint brush which helps visualize the proton collision, a process that cannot be seen with bare eyes. The art pieces are chaotic, ambiguous, and exciting.

With visual particle simulations, Kay records and documents the beauty by selecting moments with his own instinct. In this case, it is hard to say who is the real artist, Kay or the quantum.

source: http://www.mrkism.com/quantum.html

Sarah Choi Project-01-Face

Project-01-Face

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-01-Face

function setup() {
  createCanvas(600, 600);
  background(38, 53, 186);
}
  
function draw() {
  //face
  fill(255, 240, 209);
  ellipse(300,290,300,400);

  //eyebrows
  noFill();
  strokeWeight(8);
  stroke(31,28,14);
  arc(225, 237, 120, 10, PI, TWO_PI);
  arc(385, 237, 120, 10, PI, TWO_PI);

  //eyes
  fill(255);
  strokeWeight(1);
  arc(250, 277, 60, 60, PI, TWO_PI);
  arc(360, 277, 60, 60, PI, TWO_PI);
  arc(250, 280, 60, 60, PI, TWO_PI);
  arc(360, 280, 60, 60, PI, TWO_PI);
  strokeWeight(0);
  line(220, 280, 280, 270);
  line(330, 280, 390, 270);
  strokeWeight(1);
  fill(0);
  circle(250, 266, 28, 28);
  circle(360, 266, 28, 28);
  fill(38, 34, 14);
  circle(250, 266, 25, 25);
  circle(360, 266, 25, 25);
  fill(0);
  circle(250, 266, 10, 10);
  circle(360, 266, 10, 10);
  stroke(255);
  line(254, 258, 256, 260);
  line(364, 258, 366, 260);

  //nose
  noFill();
  stroke(0);
  arc(308, 348, 60, 60, PI, PI + QUARTER_PI);
  arc(308, 348, 60, 60, TWO_PI-QUARTER_PI, TWO_PI);
  line(300, 348, 297, 351);
  line(318, 348, 320, 351);

  //mouth
  arc(315, 375, 80, 80, QUARTER_PI, PI-HALF_PI);
  line(280,415,315,415)

  //hair
  fill(31,28,14);
  quad(300, 80, 120, 230, 120, 420, 120, 450);
  quad(320, 80, 480, 230, 470, 420, 470, 450);
  arc(200, 355, 200, 470, HALF_PI, PI+ HALF_PI,CHORD);
  arc(400, 355, 200, 470, PI+ HALF_PI, HALF_PI,CHORD);

  //hat
  fill(177, 151, 216);
  strokeWeight(0);
  rect(190, 50, 220, 70);
  ellipse(300, 150, 440, 100);
  ellipse(300, 50, 220, 50);
  noFill();
  strokeWeight(5);
  stroke(164, 137, 204);
  arc(300, 72, 160, 20, TWO_PI, PI);
  arc(193, 144, 180, 70, HALF_PI, PI);
  arc(345, 124, 140, 40, TWO_PI, PI - HALF_PI);
  stroke();
  line(180, 50, 200, 150);
  line(420, 50, 400, 150);
}

First, I approached this project as a way to play around with different types of shapes with a little bit more quality for design. I was able to overlap shapes and especially put in more detail in objects and facial characters such as the hat and eyes to make it more realistic.

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);
}

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.