Julie Choi-Project-02-Variable-Face

juliechoi_project_02

// declare character variables
var faceWidth = 130;
var faceHeight = 150;
var eyeSize = 25;
var pupilSize = 10;
var mouthSize = 25;
var tongueSize = 20;
var bodySize = 160;
var legSize = 20;
var blushSize = 20;

// declare other object variable
var discoSize = 85;

// declare color variables
var r = 0;
var g = 0;
var b = 0; 
var skinColor1 = 249; 
var skinColor2 = 205;
var skinColor3 = 161;
var colorA = 0;
var colorB = 0;
var colorC = 0;


function setup() {
    createCanvas(640,480);
 }
function draw() {
	// draw background
    background(r, g, b);

    // draw face + body + legs
    noStroke();
    fill(skinColor1, skinColor2, skinColor3);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    fill(249, 205, 161);
    noStroke();
    fill(skinColor1, skinColor2, skinColor3);
    ellipse(width / 2, height / 2 + 100, bodySize, bodySize);
    fill(249, 205, 161);
    noStroke();
    fill(skinColor1, skinColor2, skinColor3);
    ellipse(width / 1.8, height / 1.15, legSize / 1.9, legSize + 30);
    noStroke();
    ellipse(width / 2.2, height / 1.15, legSize / 1.9, legSize + 30);

    // declare eye variables
    var eyeLeft = width / 2 - faceWidth * 0.25;
    var eyeRight = width / 2 + faceWidth * 0.25;
    var pupilLeft = width / 2 - faceWidth * 0.25;
    var pupilRight = width / 2 + faceWidth * 0.25;

    // draw eyes + pupil
    fill(255);
    ellipse(eyeRight, height / 2.25, eyeSize, eyeSize);
    ellipse(eyeLeft, height / 2.25, eyeSize, eyeSize);

    fill(0);
    ellipse(pupilRight, height / 2.2, pupilSize, pupilSize);
    ellipse(pupilLeft, height / 2.2, pupilSize,pupilSize);

    // draw nose with curveVertex
    strokeWeight(1);
    stroke(255);
    noFill(0);
    beginShape();
    curveVertex(width / 1.95, height / 2.3);
    curveVertex(width / 1.95, height / 2.3);
    curveVertex(width / 1.94, height/ 2.1);
    curveVertex(width / 1.9, height/ 2);
    curveVertex(width / 2, height / 2);
    curveVertex(width / 2, height / 2);
    endShape();

    // draw hair strand with curveVertex
    strokeWeight(3);
    stroke('brown');
    noFill(0); //320, 240
    beginShape();
    curveVertex(323, 170);
    curveVertex(323, 170);
    curveVertex(320, 166);
    curveVertex(325, 159);
    curveVertex(323, 153);
    curveVertex(326, 148);
    curveVertex(322, 142);
    curveVertex(324, 135);
    curveVertex(324, 135);
    endShape();

    // draw mouth
    colorA = 243;
    colorB = 159;
    colorC = 76;

    noStroke();
    fill(colorA, colorB, colorB);
    ellipse(width / 2, height / 2 + 20, mouthSize + 5, mouthSize / 2 + 5);

    fill(colorA, colorC, colorC);
    //strokeWeight(5);
	//fillStroke(243, 159, 159);
    ellipse(width / 2, height / 2 + 20, mouthSize + 2, mouthSize / 1.9);

	// draw tongue
    noStroke();
    fill(colorA, colorC, colorC);
    ellipse(width / 2, height / 2 + 25, tongueSize / 1.8, tongueSize + 3);

    // draw blush
    fill('pink');
    strokeWeight(1);
    stroke(255, 255, 255, 50);
    ellipse(width / 2.4, height / 2 + 10, blushSize * 2, blushSize);

    strokeWeight(1);
    stroke(255, 255, 255, 50);
    ellipse(width / 1.7, height / 2 + 10, blushSize * 2, blushSize);

    //draw disco ball shape
    noStroke();
    fill(150);
    rect(315, 0, 15, 25);
    quad(315, 25, 330, 25, 335, 35, 310, 35);
    ellipse(width / 1.99, height / 6.5, discoSize, discoSize);

    fill(0);
    ellipse(307, 52, 15, 15);
    ellipse(327, 72, 15, 15);

    fill(0);
    ellipse(345, 60, 15, 15);
    ellipse(319, 100, 15, 15);

    fill(0);
    ellipse(298, 78, 15, 15);
    ellipse(343, 88, 15, 15);

    fill(243, 36, 202); //pink
    ellipse(305, 50, 15, 15);
    ellipse(325, 70, 15, 15);

    fill(24, 138, 255); //blue
    ellipse(347, 60, 15, 15);
    ellipse(321, 100, 15, 15);

    fill(255, 255, 24); //yellow
    ellipse(300, 80, 15, 15);
    ellipse(345, 90, 15, 15);
}

function mousePressed() {
    faceWidth = random(150, 250);
    faceHeight = random(150, 200);
    eyeSize = random(10, 40);
    pupilSize = random(5, 10);
	mouthSize = random(20, 28);
	tongueSize = random(15, 18);
	bodySize = random(160,200);
	blushSize = random(15,20)
    colorA = random(0, 255);
    colorB = random(0, 255);
    colorC = random(0, 255);
    skinColor1 = random(0, 255);
    skinColor2 = random(0, 255);
    skinColor3 = random(0, 255);
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
}

For this project, I personally had so much fun using all the new materials from this week. I ended up creating a character in a rave with randomized expression and color. I was able to figure out that when I randomize the color under the draw function, the background changes extremely quickly since the draw function is in a loop. Although applying that part looks more like a rave, I didn’t apply it to my code for this post because it might hurt some people’s eyes. Instead, if you are curious, download this: real_rave  to see how it looks. I hope you enjoy!