Category: Section E

jsaik

/* Jaclyn Saik 
Project-02 
Section E 
*/


//face and hair variables 
var eyeSize = 20;
var pupilSize = 10
var faceWidth = 150;
var faceHeight = 170;
var bunWidth = 100
var bunHeight = 100
var armLW = 160
var armRW = 480
var toungeL = 40
var toothL = 10
var eyebrowH = 155
var bluehair = 50
var redskin = 238




    

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

function draw() {
    background(140, 120, 170);
    noStroke();

    //colors
    s = color(redskin, 216, 193) //skin
    r = color(206, 20, 110)
    b = color(223, 140, bluehair)

    //body
    fill(s)
    //arms
    
    triangle(245, (height / 2) + 20, 240, 380, armLW, 600);
    triangle(235 + (width / 4), (height / 2) + 20, 235 + (width / 4), 380, armRW, 600);
    fill(r)
    rect(240, height / 2, width / 4, height*(2/3), 20)

    //hair
    fill(b)
    ellipse(width / 2, height / 3 + 5, faceWidth + 20, faceHeight + 40)
    ellipse(width / 2 - faceWidth * .6, height / 3 + 50, bunWidth, bunHeight)
    ellipse(width / 2 + faceWidth * .6, height / 3 + 50, bunWidth, bunHeight)


    //face
    fill(s)
    ellipse(width / 2, height / 3 + 25, faceWidth,  faceHeight);
    //eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var pupilLX = width / 2 - faceWidth * 0.25;
    var pupilRX = width / 2 + faceWidth * 0.25;
    fill(255);
    ellipse(eyeLX, height / 3 + 15, eyeSize, eyeSize); 
    ellipse(eyeRX, height / 3 + 15, eyeSize, eyeSize);
    fill(0)
    //pupils
    ellipse(eyeLX, height / 3 + 15, pupilSize, pupilSize); 
    ellipse(eyeRX, height / 3 + 15, pupilSize, pupilSize);
    
    
    //tounge
    fill(237, 106, 169)
    ellipse(width / 2, height / 3 + 65, 30, toungeL)
    //teeth
    fill(255)
    rect(width / 2 - 5, height / 3 + 60, 15, toothL)
    //mouth
    fill(s)
    rect(width / 2 - 25, height / 3 + 50, 50, 10)

    //nose
    var noseWL = 300
    var noseWR = 340
    fill(247, 208, 95)
    triangle(width / 2, height / 3 + 10, noseWL, height / 3 + 50, noseWR, height / 3 + 50);

    //eyebrows
    noFill();
    strokeWeight(3)
    stroke(218, 130, 55)
    arc(eyeLX, eyebrowH, 40, 25, PI*1.2, 0, OPEN)
    arc(eyeRX, eyebrowH, 40, 25, PI, TWO_PI*.9, OPEN)


    

}

function mousePressed() {
    
    faceWidth = random(125, 150);
    eyeSize = random(20, 50);
    pupilSize = random(10, 15)
    bunHeight = random(60, 120);
    bunWidth = random(60, 120);
    armLW = random(120, 200);
    armRW = random(440, 520);
    toungeL = random(30, 90);
    toothL = random(10, 17)
    eyebrowH = random(160, 145)
    bluehair = random(20, 200)
    redskin = random(100, 255)


 
}

This was an interesting task, and definitely very fun to research. I especially liked looking into how artists like Moka create algoritm-generated faces, and how the randomization tools of computers really highlight the odd ways our brains look and recognize facial expressions. Instead of working in a sketchbook, my main method of “sketching” for this project was first creating the static elements of my figure, so originally the arms and torso, and then playing with different features layered on top of each other to see what type of expressions come out. I found it especially interesting how much power the pupils and eyebrows have over a person’s expression.

sketch1

/*Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-02
*/

// face shape
var faceW = 200;
var faceH = 250;
// eyes
var eyeSize = 30;
var eyePupil = 10;
// egg color
var eggColorR = 186;
var eggColorG = 215;
var eggColorB = 241;
// mouth
var mouthW = 40;
var mouthH = 15;
// nest
var nestW = 250;
var nestH = 70;
// brows
var browW = 20;
var browH = 5



function setup() {
    createCanvas(480, 640);
}
// background
function draw() {
    background(230, 160, 160);

// nest back
    noStroke();
    fill(106, 80, 71);
    ellipse(width / 2, height / 2 + 80, nestW, nestH);

// face
    noStroke();
    fill(eggColorR, eggColorG, eggColorB);
    ellipse(width / 2, height / 2, faceW, faceH);

// eye whites
    var leftEyeX = width / 2 - faceW*.2;
    var rightEyeX = width / 2 + faceW*.2;
    fill(255, 255, 255);
    ellipse(leftEyeX, height / 2, eyeSize, eyeSize);
    ellipse(rightEyeX, height / 2, eyeSize, eyeSize);

// eye pupils
    stroke(65, 44, 24);
    strokeWeight(7);
    ellipse(leftEyeX, height / 2, eyePupil, eyePupil);
    ellipse(rightEyeX, height / 2, eyePupil, eyePupil);

// mouth
    stroke(85, 85, 85);
    strokeWeight(4);
    fill(200, 120, 70);
    arc(width / 2, height / 2 + 30, mouthW, mouthH, 0, PI, OPEN);

// brows
    var leftBrowX = width / 2 - faceW*.3;
    var rightBrowX = width / 2 + faceW*.2;
    var browY = height / 2 - faceH*.15;
    fill(162, 114, 135);
    noStroke();
    rect(leftBrowX, browY, browW, browH);
    rect(rightBrowX, browY, browW, browH);


// nest front
    stroke(163, 136, 127);
    fill(124, 103, 95);
    arc(width / 2, height / 2 + 80, nestW, nestH + 100, 0, PI, OPEN);

// caption
    noStroke();
    textFont('Georgia');
    textSize(20);
    textAlign(CENTER);
    text('eggs for days!', width / 2, height / 2 + 200);

}

function mousePressed(){
    // face
    faceW = random(175, 225);
    faceH = random(225, 275);
    // eye
    eyeSize = random(20, 40);
    eyePupil = random(1, 20);
    // egg color
    eggColorR = random(225, 255);
    eggColorG = random(225, 255);
    eggColorB = random(225, 255);
    // mouth
    mouthW = random(10, 100);
    mouthH = random(5, 30);
    // brows
    browW = random(15, 40);
    browH = random(1, 10);


}

For this project, I was inspired by my love of eggs. I began experimenting with egg sketches on illustrator and ultimately decided to put my eggs in a nest. I also decided to change the color, eyes, brows, and mouth so that a new egg would appear on every click. This project was more challenging than the last one, but I still had a lot of fun.

dancing bird

/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-02
*/

var R = 255; //RGB color
var G = 255;
var B = 255;

var HeadW = 300; //width of head
var HeadH = 200; //height of head
var HeadX = 320; //x position of head
var HeadY= 200; //y position of head

var beakA = 80; //length of beak

var t = "chirp";
var tX = 600; //text position
var tY = 440;
var ran = 300; //affecting variable

var kneeA = 300; //x position for knee
var kneeB = 390; //y position for knee

var wingW = 30; //wing width
var wingL = 120; //wing length
var degW = 260; //angle of wing

var featherA = 20; //width of first head feather
var featherB = 80; //height of first head feather
var featherC = 10; //width of second head feather
var featherD = 75; //height of second head feather
var deg = 50; //angle of head feather

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

function draw() {
	background(20, 30, 50);

	//bird legs
	stroke(117, 53, 18);
	strokeWeight(6);
	//left leg
	line(HeadX, HeadY, kneeA, kneeB);
	line(kneeA, kneeB, HeadX - 40, 480);
	//rightlig
	line(HeadX, HeadY, kneeA + 100, kneeB);
	line(kneeA + 100, kneeB, HeadX + 40, 480);

	//"chirp" text
	noStroke();
	textSize(20);
	textStyle(BOLD);
	fill(B - 120, G - 80, R - 100);
	text(t, tX, tY);
	fill(R - 20, B - 80, G - 120);
	text(t, mouseX, mouseY);
	fill(G - 100, B - 120, R - 10);
	text( t, tX + ran, tY + ran);

	//bird body
	noStroke();
	fill(R, G, B);
	ellipse(HeadX, HeadY, HeadW, HeadH);

	//left wing
	fill(R, G, B);
	push();
	translate(HeadX - HeadW/2, HeadY);
	rotate(180 + degW);
	ellipseMode(CORNER);
	ellipse(0, 0, wingW, wingL);
	pop();
	//right wing
	push();
	translate(HeadX + HeadW/2, HeadY);
	rotate(180 - degW);
	ellipseMode(CORNER);
	ellipse(-20, 0, wingW, wingL);
	pop();

	//head feathers
	fill(R, G, B);
	push();
	translate(HeadX, HeadY - HeadH/2);
	rotate(180 + deg);
	ellipseMode(CORNER);
	if (HeadY - HeadH/2 <= 80) {
		ellipse(0, 0, featherA, 40);
	} else {
		ellipse(0, 0, featherA, featherB);
	}
	pop();

	push();
	translate(HeadX, HeadY - HeadH/2);
	rotate(180+ deg + 40);
	ellipseMode(CORNER);
	if (HeadY - HeadH/2 <= 80) {
		ellipse(0, 0, featherC, 40);
	} else {
		ellipse(0, 0, featherC, featherD);
	}
	pop();

	//bird beak
	fill(193, 86, 27);
	triangle(HeadX, HeadY - 10, HeadX + beakA, 
		    HeadY, HeadX, HeadY + 5);

	//bird eyes
	fill(0);
	ellipse(HeadX - 32, HeadY - 15, 8, 8);
	ellipse(HeadX + 32, HeadY - 15, 8, 8);

}

function mousePressed() {
	R = random(180, 255);
	G = random(180, 255);
	B = random(180, 255);

	//head
	HeadW = random(120, 200);
	HeadH = random(150, 180);
	HeadX = random(300, 320);
	HeadY = random(150, 200);

	beakA = random(-70, 80);

	//knee joint
	kneeA = random(220, 300);
	kneeB = random(320, 370);

	//text position
	tX = random(110, 550);
	tY = random(20, 440);
	ran = random(-300, 300);

	//wing size and angle
	wingL = random(80, 120);
	wingW = random(10, 30);
	degW = random(200, 260);

	//head feather size and angle
	featherA = random(10, 20);
	featherB = random(50, 80);
	featherC = random(5, 10);
	featherD = random(20, 75);
	deg = random(-50, 50);


}

This dancing bird was inspired by a doodle that I tend to draw in my notes (and in my friends’ notes too…). Working with variables was a bit of a struggle for me, especially if something went wrong in the position or rotation, because then I had to figure out which variable the problem occurred with, as opposed to just toggling numbers, but this was a fun exercise to do!