Month: September 2018

Jamie Dorst Project 02 Variable Faces

sketch

/*
Jamie Dorst
Section A
jdorst@andrew.cmu.edu
project-02
*/

// variables
var eyeSize = 20;
var faceWidth = 150;
var faceHeight = 180;
var r, g, b
var faceCorners = 120
var irisSize = 15;
var eyeR, eyeG, eyeB
var pupilSize = 12
var mouthWidth = 50
var mouthHeight = 25
var noseWidth = 15
var noseHeight = 10
var mouthR, mouthG, mouthB
 
function setup() {
    createCanvas(640, 480);

    // choose random canvas starting color
    r = random(255);
    g = random(255);
    b = random(255);

    // choose random eye starting color
    eyeR = random(255);
    eyeG = random(255);
    eyeB = random(255);

    // choose random mouth starting color
    //reddish hue
    mouthR = random(51, 255);
    mouthG = random(204);
    mouthB = random(204);
}
 
function draw() {
    noStroke();
    background(r, g, b);

    // face
    fill('#EAC086');
    rectMode(CENTER);
    rect(width / 2, height / 2, faceWidth, faceHeight, faceCorners, faceCorners, faceCorners, faceCorners);

    // eyes
    // whites
    fill('white');
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    // iris
    fill(eyeR, eyeG, eyeB);
    ellipse(eyeLX, height / 2, irisSize, irisSize);
    ellipse(eyeRX, height / 2, irisSize, irisSize);
    // pupil
    fill('black');
    ellipse(eyeLX, height / 2, pupilSize, pupilSize);
    ellipse(eyeRX, height / 2, pupilSize, pupilSize);

    // mouth
    noFill();
    strokeWeight(4);
    strokeCap(ROUND);
    stroke(mouthR, mouthG, mouthB);
    arc(width / 2, height / 2 + .25 * faceHeight, mouthWidth, mouthHeight, 0, PI);

    // nose
    stroke(51);
    strokeWeight(2);
    arc(width / 2, height / 2 + .1 * faceHeight, noseWidth, noseHeight, 0, PI);
}
 
function mousePressed() {
    // randomize sizes, colors upon click
    faceHeight = random(120, 220);
    faceWidth = random(100, faceHeight);
    eyeSize = random(10, 30);
    r = random(255);
    g = random(255);
    b = random(255);
    faceCorners = random (80, 140);
    irisSize = random(5, eyeSize - 1);
    eyeR = random(255);
    eyeG = random(255);
    eyeB = random(255);
    pupilSize = random(1, irisSize - 1);
    mouthWidth = random(5, 90);
    mouthHeight = random(2, 40);
    noseWidth, noseHeight = random(5, 25);
    mouthR = random(51, 255);
    mouthG = random(0, mouthR - 50);
    mouthB = random(0, mouthR - 50);

}

For this project, I started with the template that was given and added some of my code from last week’s face project to create a base face. Then I added in some variables, thought about what to change, and ended up finding a way to have sizes change but keep them relatively proportional (ie. have the size of the pupil change but not have it be bigger than the iris). I also found it fun to change colors and learn how to randomize something like that where it’s not as simple as a range of two numbers.

susiel-project02-variableFACE

sketch

/* 
Susie Lee
Section E
susiel@andrew.cmu.edu
Project-02
*/
//snowman feature variables
	//sky+shadow colours
var cR=231;
var cG=234;
var cB=241;
	//arm stroke thickness
var ARM=5;
	//blueberry buttons
var button=20;
	//snowman body
var bodyWidth = 170;
var bodyHeight = 150;
	//snowman face
var faceWidth = 100;
var faceHeight = 100;
var eyeSize=10;
var eyeBROW=20;
	//carrot colours
var carrotR= 255;
var carrotG= 143;
var carrotB= 28;


//setting landscape
function setup() {
    createCanvas(480, 640);
}

//setting base snowman
function draw() {
	noStroke();
    //skyRandom+Ground
    background(cR, cG, cB);
    fill(255);
    ellipse(240,640,800,600);
    //snowmanSHADOW
    fill(240, 246, 247,95);
    ellipse(width/2,(height/2)+bodyHeight/2,bodyHeight,bodyWidth);
    //snowmanARMS
    stroke(146, 109, 57);
    strokeWeight(ARM);
    line(width/2, height/2, width/3, height/2-bodyHeight/1.75);
    line(width/2, height/2, width/2+width/6, height/2-bodyHeight/1.75);
    //snowmanBody
    noStroke();
    fill(255);
    ellipse(width/2, height/2, bodyWidth, bodyHeight);
    //buttons
    fill (43, 62, 133);
    var buttonTOP = (height/2) - bodyHeight*0.25;
    var buttonMIDDLE = (height/2);
    var buttonBOTTOM = (height/2) + bodyHeight * 0.25;
	ellipse(width/2, buttonTOP, button, button);
    ellipse(width/2, buttonMIDDLE, button, button);
    ellipse(width/2, buttonBOTTOM, button, button);
    //snowmanHEAD SHADOW
    fill(cR,cG,cB,85);
    ellipse(width/2, height/2-bodyHeight/1.9, faceWidth, faceHeight);
    //snowmanHEAD
    fill(255);
    ellipse(width/2, height/2-bodyHeight/1.75, faceWidth, faceHeight);
    //snowmanFACE
    	//eyes
    fill(0);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2-bodyHeight/1.75, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2-bodyHeight/1.75, eyeSize, eyeSize);
    	//eyebrow
    var eyebrowL = width / 2 - faceWidth * 0.25;
    var eyebrowR = width / 2 + faceWidth * 0.25;
    rect (eyebrowL-10, height / 2-bodyHeight/1.5, eyeBROW, eyeBROW/3);
    rect (eyebrowR-10, height / 2-bodyHeight/1.5, eyeBROW, eyeBROW/3);
    	//nose
    fill(carrotR, carrotG, carrotB);
    triangle (width/2, height/2-bodyHeight/1.75, width/2-10, height/2-bodyHeight/2, width/2+30, height/2-bodyHeight/2);

}

function mousePressed(){
	cR=random(220,240);
	cG=random(230,240);
	cB=random(230, 245);
	ARM=random(5,10);
    bodyWidth = random(75,150);
    bodyHeight=random(100,200);
    button=random(10,30);
    faceWidth = random (75,150);
    faceHeight = random(75, 150);
    carrotR=random(200,255);
    carrotG=random(140,200);
    carrotB=random(25,60);

}

Sketch

Rather than building on the last project, I wanted to create a variable snowman. This is because I love building snowmen. Since the 8th grade, my current college housemate and I build a snowman on the same day every year (weather permitting). I was inspired aesthetically by one of the snowman I built back in high school. His name is Pingu, a 2 mound snowman with blueberries for buttons, and a carrot nose that is a tad too large for him.

 

Jenna Kim (Jeeyoon Kim)- Project 2- Variable Faces

jennakim2

/* Jenna Kim (Jeeyoon Kim)
Section E
jeeyoonk@andrew.cmu.edu
Project 2
*/

// variability
var faceX = 318;
var faceY = 257;
var faceWidth = 250;
var faceHeight = 200;

var faceColorR = 255;
var faceColorG = 177;
var faceColorB = 162;

var eyeX = 279;
var eyeY = 240;
var eyeColorR = 255;
var eyeColorG = 163;
var eyeColorB = 46;
var eyeWidth = 25;

var earX = 195;
var earY = 253;
var earWidth = 50;
var earHeight = 50;

var noseX1 = 322;
var noseY1 = 244;
var noseX2 = 302;
var noseY2 = 272;
var noseX3 = 340;
var noseY3 = 272;

var musX = 300;
var musY = 280;
var musWidth = 40;
var musHeight = 10;

var hatX = 318;
var hatY = 158;
var hatcircleX = 320;
var hatCircleY = 140;

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

function draw() {
    background(faceWidth, 230, faceHeight);  
    
    //face
    noStroke();
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(faceX, faceY, faceWidth, faceHeight);

    //left eye
    noStroke();
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeX, eyeY, eyeWidth, eyeWidth);

    //right eye
    noStroke();
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeX + 80, eyeY, eyeWidth, eyeWidth);

    //left ear
    noStroke();
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(earX, earY, earWidth, earHeight);

    //right ear
    noStroke();
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(earX * 2.3, earY, earWidth, earHeight);

    //nose
    noStroke();
    fill(200);
    triangle(noseX1, noseY1, noseX2, noseY2, noseX3, noseY3);

    //mustache
    noStroke();
    fill(0);
    rect(musX, musY, musWidth, musHeight);

    //hat
    noStroke();
    fill(0);
    ellipse(hatX, hatY, faceWidth * 1/2, faceHeight * 1/7);
    noStroke();
    fill(0);
    ellipse(hatcircleX, hatCircleY, earX * 0.1, earY * 0.1);
}

function mousePressed() {
    //random eye color
    eyeColorR = random(0, 255);
    eyeColorG = random(0, 255);
    eyeColorB = random(0, 255);

    // random eye size
    eyeWidth = random(10, 40);

    //random ear size
    earWidth = random(45, 75);
    earHeight = random(45, 75);

}

It was fun to combine what we learned last week and this week to create a
face. “function mousePressed() {}” will definitely be an important tool
for my future design projects.

Sarah Yae – Project 02 – Variable Face

sketch

//Sarah Yae
//Section B
//smyae@andrew.cmu.edu
//Project-02

var faceX = 240
var faceY = 320
var facecolor = 255

var earX = 180
var earY = 200
var earlength = 60
var earwidth = 60

var eyeX = 200
var eyeY = 300
var eyecolor = 120

var noseX = 240
var noseY = 340
var nosewidth = 10

var mouth = 80
var mouthx1 = 200
var mouthx2 = 280

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

function draw() {
	background (255,229,204);

//draws the face in first frame
	noStroke();
	fill(facecolor);
	ellipse (faceX, faceY,230,230);

//draws the left ear in first frame
	noStroke();
	fill(facecolor);
	ellipse (earX, earY, earwidth, earlength);

//draws the right ear in first frame
    noStroke();
    fill(facecolor);
    ellipse (earX + 120, earY, earwidth, earlength);

//draws the left eye in first frame
    noStroke();
    fill (eyecolor);
    ellipse (eyeX, eyeY, 40, 40);

//draws the right eye in first frame
    noStroke();
    fill(eyecolor);
    ellipse (eyeX + 80, eyeY,40,40);

//draws the nose in first frame 
    noStroke();
    fill (204,204,255);
    ellipse (noseX, noseY, nosewidth, 30);

//draws the mouth in first frame 
    noStroke();
    fill (255,204,204);
    triangle (mouthx1,370,mouthx2,370,240,400);

}

function mousePressed() {

//face changes color
    faceX = 240;
    faceY = 320;
    facecolor = random(140,255);

//ears changes size (lengths and widths)
    earX = 180;
    earY = 200;
    earlength = random(50,130);
    earwidth = random(50,100);

//eyes changes color 
    eyeX = 200;
    eyeY = 300;
    eyecolor = random (10,120);

//nose changes size (width)
    noseX = 240;
    noseY = 340;
    nosewidth = random(10,40);

//mouth changes size (width)
    mouth = 80;
    mouthx1 = random (180,220);
    mouthx2 = random (260,300);

}

I wanted to create a cute, fantasy creature. By pressing the mouse, you can see my animal switch up from a mouse, a bunny, a bear, etc… you name it!

Eliza Pratt – Looking Outwards 02


LIA’s mechanical plotter drawings demonstrate how generative art can be used to create expressive works that still retain the signature of the artist. Using code written in Processing (a software program developed for the arts) and Micron pen fastened to a plotter, LIA creates beautiful works that vary in shape and composition. Not only do I admire LIA as a female creative programmer, but these “drawn” prints feel eloquently reminiscent of traditional printmaking practices. Much like in printmaking, the art of printing the work is equally as important as the image itself, and the copies that result from this process are inherently one-of-a-kind. Though created with code and executed by machine, the shapes and compositions of these works show evidence of human thought and creativity. While these drawings may lack the nuances of traditional art, LIA’s personality and expressiveness still clearly shines through.

Han Yu Project 2 Variable Face

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project-02

var facew = 200
var faceh = 200
var color1 = 219 
var color2 = 255
var color3 = 238
var eyesize = 5
var pupildiff = 40
var mouthopen = 10

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

function draw() {
	background(219,255,238);
	//bubbles
	noFill();
	ellipse(500,80,180,120);
	ellipse(480,180,50,35);
	//word
    textSize(35);
    strokeWeight(4);
	text("wut?",470,100);
	//face
	fill(219,255,238);
	stroke(249,192,180);
	strokeWeight(6);
	rect(width*0.2,height*0.15,facew,faceh,10);
	//body
	rect(width*0.4,height*0.15+faceh,facew*0.7,300,10);
	//book
	fill(color1,color2,color3);
	rect(width*0.4*0.8,(height*0.15+faceh)*1.3,facew*0.7*0.8,200,10);
	//eye
	fill(249,192,180);
	stroke(249,192,180);
	strokeWeight(6);
	ellipse(width*0.2+facew/5,height*0.15+faceh/4,eyesize,eyesize);
    ellipse(width*0.2+facew/5+pupildiff,height*0.15+faceh/4,eyesize,eyesize);
	//mouth
	fill(254,225,124);
	rect(width*0.2+facew/4,height*0.15+faceh/3,facew/2,faceh/2+mouthopen,10);
	//teeth
	fill(255);
	rect(width*0.2+facew/3.5,height*0.15+faceh/3,facew/8,faceh/10,10);
	rect(width*0.2+facew/3.5+(facew/2)*0.6,height*0.15+faceh/3,facew/8,faceh/10,10);
}


function mousePressed() {
    facew = random(150,300);
    faceh = random(150,280);
    color1 = random(165,255);
    color2 = random(165,255);
    color3 = random(195,255);
    eyesize = random(5,22);
    pupildiff = random(40,100);
    mouthopen = random(-50,20);
}

I was inspired by Domo the brown monster when I first started my project. But later I decided to make a meme-like character with a melodramatic expression while doing something. Overall, I feel like this project is challenging but enjoyable.

Victoria Reiter Project-02-Variable-Face

sketch

/*Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-02-Variable-Face
*/

// defines coordinate position of freckle
var freckleX = 285;
var freckleY = 335;
// defines an increment value to be used under function mouseClicked()
var increment = 5;
// defines dimensions of pupils
var pupilWidth = 30;
var pupilHeight = 30;
// defines dimensions of the whites of the eyes
var whiteEyeWidth = 80;
var whiteEyeHeight = 80;
// defines dimensions of the irises of the eyes
var irisWidth = 55;
var irisHeight = 55;
// defines coordinates of the "point" of the nose
var pointyNoseX = 220;
var pointyNoseY = 325;
// defines y coordinates of the ears and inner ears
var earY = 260;
var innerEarY = earY + 5;
// defines dimensions of the mouth
var mouthWidth = 110;
var mouthHeight = 70;
// declares RGB values for hair
var hairColorR = 255;
var hairColorG = 255;
var hairColorB = 0;
// declares RGB values for irises of eyes
var irisColorR = 0;
var irisColorG = 102;
var irisColorB = 102;
// declares RGB values for hat
var hatColorR = 0;
var hatColorG = 76;
var hatColorB = 153;
// declares RGB values for hat band
var hatBandColorR = 0;
var hatBandColorG = 0;
var hatBandColorB = 51;

function setup() {
    // establishes canvas
    createCanvas(640, 480);
    background(220);
    // establishes background color
    background('rgb(153, 255, 204)');
    // writes a short message
    text("~V's Self-Portrait~", 10, 15);
}
function draw() {
    // reestablishes background now in dunction (draw)
    background(220);
    background('rgb(153, 255, 204)');
    noStroke();
    // Skin color
    fill('rgb(255,204,153)'); 
    //head
    ellipse(250, 285, 270, 290); 
    //ears
    ellipse(385,earY,50,70);
    ellipse(115,earY,50,70);
    noStroke();
    // inner ear color
    fill('rgb(255, 153, 153)'); 
    //inner ears
    ellipse(390,earY,30,50);
    ellipse(110,earY,30,50);
    //nose
    triangle(255,331,240,350,pointyNoseX,pointyNoseY);
    noStroke();
    // cheek blush color
    fill(255,204,204); 
    // cheek blush
    ellipse(185,335,60,25);
    ellipse(315,335,60,25);
    noStroke();
    // hairColor
    fill(hairColorR,hairColorG,hairColorB); 
    // hair
    quad(145,175,190,175,165,265,125,230);
    quad(180,175,215,175,245,260,230,245);
    quad(260,175,305,175,315,255,285,235);
    quad(315,175,355,175,370,220,335,245);
    noStroke();
    // hat color
    fill(hatColorR,hatColorG,hatColorB); 
    //hat
    ellipse(250, 190, 300, 75); 
    ellipse(210,140,110,150);
    ellipse(292,140,110,150);
    noStroke();
    // hat band color
    fill(hatBandColorR,hatBandColorG,hatBandColorB); 
    // hat band
    rect(155,152.5,192,30);
    // eye outline color
    stroke('rgb(0,158,255)');
    // white of eyes color
    fill('rgb(255, 255, 255)');
    // white of eyes
    ellipse(200,285,whiteEyeWidth,whiteEyeHeight);
    ellipse(305,285,whiteEyeWidth,whiteEyeHeight);
    // outline of mouth color
    stroke('rgb(102,0,51)');
    // mouth
    arc(250,360,mouthWidth,mouthHeight,0,PI,CHORD);
    noStroke();
    // irises
    fill(irisColorR,irisColorG,irisColorB);
    ellipse(200,272,irisWidth,irisHeight);
    ellipse(305,272,irisWidth,irisHeight);
    noStroke();
    // pupils
    fill('rgb(0,0,0)');
    ellipse(200,260,pupilWidth,pupilHeight);
    ellipse(305,260,pupilWidth,pupilHeight);
    noStroke();
    // freckle color
    fill('rgb(153,76,0)');
    // freckle
    ellipse(freckleX,freckleY,10,10);
}
    function mouseClicked() {
    // makes random variations occur in the portrait
    // moves freckle randomly about the face
    freckleX = random(150,350);
    freckleY = random(325,375);
    // changes size of the whites of eyes, pupils, and irises
    whiteEyeWidth = random(80,110);
    whiteEyeHeight = random(80,110);
    irisWidth = random(60,75);
    irisHeight = random(60,75);
    pupilWidth = random(25,55);
    pupilHeight = random(25,55);
    // changes nose shape or "pointiness"
    pointNoseX = random(185,245);
    pointyNoseY = random(305,345);
    // moves the ears up and down
    earY = random(250,270);
    // changes size of the mouth
    mouthWidth = random(40,150);
    mouthHeight = random(25,95);
    // changes color of the hair (warm colors)
    hairColorR = random(155,255);
    hairColorG = random(155,255);
    // changes color of the irises (cool colors)
    irisColorR = random(0,155);
    irisColorG = random(155,200);
    irisColorB = random(155,255);
    // changes color of the hat (completely random)
    hatColorR = random(0,255);
    hatColorG = random(0,255);
    hatColorB = random(0,255);
    // changes color of the hat band (grey scale)
    hatBandColorR = random(0,255);
    hatBandColorG = hatBandColorR;
    hatBandColorB = hatBandColorG;
}

In this project, I adapted my face from the week 1 project, and selected several variables to change randomly/within constraints. With a click of the mouse, my freckle moves across the screen, the sizes of the whites of my eyes, irises, and pupils change, the pointiness of my nose changes, my ears move up and down, my mouth changes size, my hair changes color (but sticks to warm colors), my irises change color (but stick to cool colors), my hat changes color randomly, and the band of my hat changes color along a grey scale.

I decided to use the basis of my face from the first project because I knew I would already have a LOT of difficulty figuring out the mechanics of this week’s task. And I did !!! I had no idea what was going on !!!!!!! So an immense enormous thank you to help from TAs Rain and Simin, who helped explain to me some concepts of how variables work and how declaring them and assigning them can be util for this and future tasks.

Furthermore, I adapted my code by adding in comments which I did not include in week one, cleaning up indentations and semicolons, and switching from hsl to rgb because I think it is a little easier to use and helpful for this project.

(((Again, THANK YOU TAs, I AM LESS HOPELESS WITH YOUR HELP)))

Alessandra Fleck – Project-02-Variable Face

sketch

//Name: Alessandra Fleck 
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-02

//Start values for face

//eyes
var eyeSize = 50;
var pupilSize = 20;
var pupilHeight = 20;

//face
var faceWidth = 200;
var faceHeight = 200;
var faceColor = 200;

//nose
var noseSize = 10;

//shirt
var shirtColor = 350;

//body
var bodyW = 300;
var bodyH = 350;

//mouth
var mouthSize_1 = 30;
var mouthSize_2 = 10;

//eyebrows
var eyebrowS = 60;

//hair
var hairColor = 100;

//left ear
var earWLeft = 65;
var earHLeft = 65;
//right ear
var earWRight = 65;
var earHRight = 65;

//left arm
var armWLeft = 50;
var armHLeft = 80;
var armWRight = 50;
var armHRight = 80;


 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(232,195,230);
    //set basic face parameters

    //clouds
    fill (189,223,185);
    stroke('white');
    ellipse();

    fill(241,227,faceColor);
    stroke(65,66,64);
    strokeWeight(4);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //change shirt color + make body
    fill (204,191,shirtColor);
    stroke(65,66,64);
    strokeWeight(3);
    ellipse (width / 2, height / 2 + faceHeight * 0.5 + bodyH * 0.5, bodyW, bodyH);

    //body spot
    fill (204,191,162);
    stroke('white');
    strokeWeight(3);
    ellipse (width / 2, height / 2 + faceHeight * 0.5 + bodyH  * 0.5, bodyW / 2, bodyH / 2 + 80);

    

    //mouth shade
    fill(204,191,162);
    stroke(214,199,181);
    ellipse (width /2, 280, 100,100);

    //set left + right eye values
    fill ('white');
    stroke('white');
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //eye pupil values
    fill ('black');
    noStroke();
    var eyeLP = width / 2 - faceWidth * 0.25;
    var eyeRP = width / 2 + faceWidth * 0.25;
    ellipse(eyeLP, height / 2, pupilSize, pupilHeight);
    ellipse(eyeRP, height / 2, pupilSize, pupilHeight);

    //eyebrows
    noFill();
    stroke('brown');
    strokeWeight(5);
    // arc(x, y, w, h, start, stop, [model])
    arc(eyeLX, height / 2, eyebrowS, eyebrowS, PI + QUARTER_PI, TWO_PI - QUARTER_PI);
    arc(eyeRX, height / 2, eyebrowS, eyebrowS, PI + QUARTER_PI, TWO_PI - QUARTER_PI);

    //mouth
    fill ('red');
    stroke(228,140,226);
    ellipse(width / 2, 280, mouthSize_1, mouthSize_2);

    //nose
    fill ('brown');
    noStroke();
    ellipse(width / 2, height / 2 + 20, 20,10);

    //ears
    //left ear
    fill (143,123,77);
    stroke('white');
    ellipse(width / 2 + faceWidth * 0.20 + earWLeft, height / 2 -80, earWLeft, earHLeft);

    //right ear
    fill (143,123,77);
    stroke('white');
    ellipse(width / 2 - faceWidth * 0.20 - earWRight, height / 2 -80, earWRight, earHRight);


    //left paw
    fill (143,123,77);
    stroke('black');
    ellipse(width / 2 - bodyW * 0.20 - armWRight -10, height / 2 + 230, armWRight+50, armHRight);

    //right paw
    fill (143,123,77);
    stroke('black');
    ellipse(width / 2 - bodyW * 0.20 + armWRight + 120, height / 2 + 230, armWRight+50, armHRight);
    

}
 
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(200, 300);
    faceHeight = random(200, 400);
    eyeSize = random(10, 50);
    pupilSize = random(5, 15);
    pupilHeight = random(1,20);
    bodyW = random(100,300);
    shirtColor = random(100,500);
    faceColor = random(150,250);
    mouthSize_1 = random(30, 50);
    mouthSize_2 = random(10,30);
    eyebrowS = random(20,80);

    //variable ear sizes
    

}

For this project I just wanted to rely on simple shapes that move together. Since one rudimentary shape is a circle, I ended up making a bear. Next time when I approach a project such as this, I will want to make sure that all components stay flush with one another, despite the random variable change of their sizes.

Project-02-Variable-Face-Veronica

sketch


/*
Veronica Wang
Section B
yiruiw@andrew.cmu.edu
Project-02
*/

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var ColorR = 255;
var ColorG = 255;
var ColorB = 255;
var smileY = 200;
var gray = 50;

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

}

function draw() {
    background(255, 179, 48);

    //face
    noStroke();
    fill(120, 80, ColorB);
    ellipse(width / 2 - faceWidth / 2 + 25, height / 2 - faceHeight / 2 + 25, faceWidth * 0.5,  faceWidth * 0.5);
    ellipse(width / 2 + faceWidth / 2 - 25, height / 2 - faceHeight / 2 + 25, faceWidth * 0.5,  faceWidth * 0.5);
    fill('white');
    ellipse(width / 2 - faceWidth / 2 + 25, height / 2 - faceHeight / 2 + 25, faceWidth * 0.3,  faceWidth * 0.3);
    ellipse(width / 2 + faceWidth / 2 - 25, height / 2 - faceHeight / 2 + 25, faceWidth * 0.3,  faceWidth * 0.3);
    fill(120, 80, ColorB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //body
    fill(120, 80, ColorB);
    ellipse(width / 2, height - 90, faceWidth * 2, height - faceHeight);
    fill('white');
    ellipse(width / 2, height - 90, faceWidth * 1.5, height - faceHeight * 2);

    //eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(gray);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //nose
    fill('black');
    ellipse(width / 2, height / 2 + 10, faceWidth / 5,  faceHeight / 8);

    //mouth
    var dist = height / 2 + smileY;
    noFill();
    stroke(255, 205, 0);
    strokeWeight(5);
    curve(eyeLX, height/2, eyeLX + 20, dist, eyeRX - 20, dist, eyeRX, height/2);
    
}

function mousePressed() {
    faceWidth = random(120, 180);
    faceHeight = random(120, 180);
    eyeSize = random(10, 20);
    ColorR = random(150, 220);
    ColorG = random(150, 220);
    ColorB = random(0, 100);
    smileY = random(faceHeight / 5, faceHeight / 3);
    gray = random(100, 255);
}

Initially I wanted to recreate Miyazaki’s Totoro, but it just started to look more and more like a bear so…it’s a bear now. I enjoyed working on this project and especially trying to figure out which/how geometries should be related. Some of the variables include body color/size, eye color/size, head size, ear size, etc.

Sophia Kim Project-02 Variable Face Sec C

sketch

//Sophia S Kim 
//Section C 1:30 
//sophiaki@andrew.cmu.edu
//Project-02-Face Variable

var eyeSize1 = 50; 
var eyeSize2 = 30; 
var faceWidth = 250;
var faceHeight = 275; 
var eyebrow1 = 238; 
var eyebrow2 = 372;
var mouthWidth = 135; 
var mouthHeight = 15; 
var earWidth = 25;
var earHeight = 55;
var faceColor = 46;
var earColor = 73;
var eyeColor = 47;
var eyebrowColorLX = 95;
var eyebrowColorRX = 94; 
var mouthColor = 213; 


function setup() {
	createCanvas(640, 480); /// width,height
}

function draw() {
	noStroke(); 
	background(142, 223, 88); ///background reference to RGB (R,G,B)

	var earLocation = (height/2)-20; // varible - ear location 

    fill(37, earColor, 255); 
    rect((width/2)-(faceWidth*0.57), earLocation, earWidth, earHeight); //left ear 

    fill(37, earColor, 255); 
    rect((width/2)+(faceWidth*0.47), earLocation, earWidth, earHeight); //right ear 

	fill(255, 253, faceColor); //skin color
	ellipse(width/2, height/2, faceWidth, faceHeight); //head shape

	var eyeLX = (width/2) - (faceWidth*0.27); // varible - left eye location 
    var eyeRX = (width/2) + (faceWidth*0.27); // variable - right eye location 

    fill(255, 164, eyeColor); 
    ellipse(eyeLX, (height/2), eyeSize1, eyeSize1); //left eye 

    fill(255, 164, eyeColor);
    ellipse(eyeRX, (height/2), eyeSize2, eyeSize2); //right eye

    fill(89, eyebrowColorLX, 233);
    triangle(eyebrow1, (height/2)-30, eyebrow1+15, (height/2)-45, eyebrow1+30, 
    	(height/2)-30); 
    	//left eyebrow

    fill(194, eyebrowColorRX, 215);
    triangle(eyebrow2, (height/2)-30, eyebrow2+15, (height/2)-70, eyebrow2+30, 
    	(height/2)-30); 
    	//right eyebrow

    var mouthLocation = (height/2)+45 // variable for mouth location

    fill(255, 124, mouthColor);
    rect(eyeLX, mouthLocation, mouthWidth, mouthHeight); //mouth 
 }

function mousePressed() {
	// when the mouse is clicked on, random values within specified ranged are rearranged. 
	eyeSize1 = random(25, 60);
	eyeSize2 = random(10,50);
	faceWidth = random(200, 300);
	faceHeight = random(250,300);
	eyebrow1 = random(225, 260);
	eyebrow2 = random(360, 385);
	mouthWidth = random(130, 140);
	mouthHeight = random(13, 17); 
	earWidth = random(22, 28);
	earHeight = random(53, 57);
	faceColor = random(0, 300);
	earColor = random(45, 200);
	eyeColor = random(25, 150);
	eyebrowColorLX = random(15, 200);
	eyebrowColorRX = random(25, 150); 
	mouthColor = random(140, 330);
}

At first, I struggled with how I would replace common factors with variables. After I started to fill in the numbers, I got the hang of how to use variables. I made these faces based on simple shapes. Maybe next time I could do more detailed features to make it look realistic.