Category: SectionB

I based this project off of my favorite Disney character – Baymax. I thought it’d be both interesting and fun to take on a quirky spin as I code to modify my favorite character.

Rachel Shin – Baymax

// Rachel Shin
// Section B
// Project 2 - Face Variable


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

   
}



var backgroundR = 200;
var backgroundG = 150;
var backgroundB = 100;
var bodyW = 300;
var bodyH = 450;
var faceW = 500;
var faceH = 400;
var eyeS = 25;
var blushR = 209;
var blushG = 117;
var blushB = 135;



function draw() {
	//background
    background(backgroundR, backgroundG, backgroundB);
    text ("Hello, I am Baymax, your personal healthcare companion.", 130, 80, 400, 20);

    //body
    fill("white");
    ellipse(200, 550, bodyW, bodyH);

    //face
    noStroke();
    fill("white");
    ellipse(200, 310, faceW, faceH);

    noStroke();
    fill(blushR, blushG, blushB);
    ellipse(140, 340, 50, 10);

    noStroke();
    fill(blushR, blushG, blushB);
    ellipse (260, 340, 50, 10);



    //eyes
    fill("black");
    rect(150, 310, 100, 5);

    fill("black");
    ellipse (140, 310, eyeS, eyeS);

    fill("black");
    ellipse (260, 310, eyeS, eyeS);
	
	//blush
	noStroke();
	fill(209, 117, 135);

}

function mousePressed () {
	backgroundR = random (0, 200);
	backgroundG = random (0, 200);
	bodyW = random (250, 300);
	bodyH = random (400, 550);
	backgroundB = random (0, 200);
	faceW = random (200, 400);
	faceH = random (200, 300);
	eyeS = random (25, 50);
	blushR = random (0,209);
	blushB = random (0, 117);
	blushB = random (0,135);
}

For this project, I decided to create different monsters/creatures, and focussed on conveying both their physical characteristics as well as their emotions or personalities. When approaching this project, I struggled with deciding on a concept, and kept it fairly simple, changing more of the facial aspects of the creatures, rather than adding arms or tails.

sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Section B, Project 02 Variable Face

// starting variables
var eyeSize = 20;
var faceWidth = 150;
var faceHeight = 200;
var CornerT = 30;
var CornerB = 15;
var toothExistence1 = 0;
var toothExistence2 = 0;
var faceY = 340;
var bodyWidth = 250;
var mouthWidth = 100;
var mouthHeight = 50;
var eyebrowY = 320;
var r = 243;
var g = 179;
var b = 174;
var pupilDX = 6;
var pupilDY = 5;
var w = 5
 
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background('white');
    noStroke();
    
    //background color
    fill(r, g, b, 55);
    rect(width / 2, height / 2, width, height);

    //body
    fill('white');
    rectMode(CORNERS);
    var faceX = width / 2;
    rect(faceX - bodyWidth / 2, faceY + faceHeight / 2, faceX + bodyWidth / 2, height, CornerT, CornerT, 0, 0);
    //stomach   
    fill(r, g, b, 100);
    rect(faceX - bodyWidth * 0.25, faceY + faceHeight * 0.75, faceX + bodyWidth * 0.25, height, 50, 50, 0, 0);
    
    //face
    fill('white');
    rectMode(CENTER);
    rect(faceX, faceY, faceWidth, faceHeight + 1, CornerT, CornerT, CornerB, CornerB);
    
    //mouth
    noStroke();
    fill(r, g, b);
    var mouthY = faceY + faceHeight * 0.25
    rect(faceX, mouthY, mouthWidth, mouthHeight, 50, 50, 50, 50);

    //tooth and teeth
    fill('white');
    triangle(faceX * toothExistence1, (mouthY - mouthHeight / 2 - 1) * toothExistence1, (faceX + mouthWidth * 0.5) * toothExistence1, (mouthY - mouthHeight / 2 - 1) * toothExistence1, (faceX + mouthWidth * 0.25) * toothExistence1, mouthY * toothExistence1);
    triangle(faceX * toothExistence2, (mouthY - mouthHeight / 2 - 1) * toothExistence2, (faceX - mouthWidth * 0.5) * toothExistence2, (mouthY - mouthHeight / 2 - 1) * toothExistence2, (faceX - mouthWidth * 0.25) * toothExistence2, mouthY * toothExistence2);

    //eyes
    var eyeLX = faceX - faceWidth * 0.25;
    var eyeRX = faceX + faceWidth * 0.25;
    stroke('black');
    noFill();
    strokeWeight(5);
    ellipse(eyeLX, faceY, eyeSize, eyeSize);
    ellipse(eyeRX, faceY, eyeSize, eyeSize);
    //eye pupils
    noStroke();
    fill('black');
    var pupilLX = eyeLX + eyeSize * 0.125;
    var pupilRX = eyeRX + eyeSize * 0.125;
    var pupilY = faceY + eyeSize * 0.125;
    ellipse(pupilLX - pupilDX, pupilY - pupilDY, eyeSize * 0.625, eyeSize * 0.625);
    ellipse(pupilRX - pupilDX, pupilY - pupilDY, eyeSize * 0.625, eyeSize * 0.625);
   
    //eyebrows
    stroke('black');
    strokeWeight(w);
    line(eyeLX - eyeSize / 2, faceY - eyeSize, eyeLX + eyeSize / 2, eyebrowY);
    line(eyeRX + eyeSize / 2, faceY - eyeSize, eyeRX - eyeSize / 2, eyebrowY);
}

function mousePressed() {
    //color of background and mouth
    r = random(255);
    g = random(255);
    b = random(255);

    //face and body proportions
    faceY = random(200, 350);
    faceWidth = random(100, 250);
    faceHeight = random(150, 300);
    bodyWidth = random(50, 300);
    //roundness of face and body
    CornerT = random(10, 50);
    CornerB = random(10, 50);

    //size of eyes, angle of eyebrows, and location of pupils
    eyeSize = random(15, 40);
    let existence1 = ['0', '1'];
    eyebrowY = random(faceY - eyeSize * 0.5, faceY - eyeSize * 1.5);
    pupilDX = random(eyeSize * 0.25);
    pupilDY = random(eyeSize * 0.25);

    //stroke weight for eyebrows
    w = random(1, 15);

    //proportions of mouth and how many teeth
    mouthWidth = random(15, 100);
    mouthHeight = random(15, 50);
    toothExistence1 = random(existence1);
    let existence2 = ['0', '1'];
    toothExistence2 = random(existence2);
}

I wanted my project to react and change as the mouse of the viewer moved, so I played around with if statements, which was an interesting challenge. I wanted my project to have a cute aspect to it. Originally, there was supposed to be a fruit with a face reacting, but then it turned into a baby who didn’t want others touching its candy.

sketchsydney

//Dont Touch The Lolipop!

var pi = 3.14159;
var mainX = 320;
var headY = 220;
var bodyY = 360;
var iEyeBrowY = 212;

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

function draw() {
    background(163, 210, 267);//baby blue
    noStroke();
    //baby base
    fill(233, 185, 122);//darker tan
    ellipse(mainX,bodyY, 170,170);//baby body
    fill(237, 189, 126);//tan
    ellipse(mainX,headY, 150,150);//baby head
    //arcs
    fill(255);
    arc(mainX,bodyY, 172, 172, 0, pi, CHORD);//baby diaper
    fill(255, 163, 195);
    arc(mainX,headY, 152, 152, pi, 0, CHORD);//baby hat
    //limbs
    fill(229,181,118);//darker tan 2
    ellipse(440,307, 150,40);//right arm
    ellipse(200,307, 150,40);//left arm 
    ellipse(355,475, 45,145);//right leg
    ellipse(285,475, 45,145);//left leg
    //lolipop
    fill(245);
    rect(490,245, 6, 100);//stick
    frameRate(.7);
    fill(random(230),random(200),random(220));//candy color
    ellipse(493,220, 106,100);//candy part   
    //facial features
    frameRate(10);
    fill(0);
    ellipse(343,225, 8,8);//right eye
    ellipse(297,225, 8,8);//left eye
    strokeWeight(4);
    stroke(0);
    line(336,iEyeBrowY, 355,218);//right eyebrow
    line(285,218, 304,iEyeBrowY);//left eyebrow
    //movement
    if(mouseX > 365){
        iEyeBrowY = 218;//stern
        line(315,256, 325,256);//flat mouth
        fill(128, 17, 17);
        ellipse(343,225, 8,8);//right eye
        ellipse(297,225, 8,8);//left eye
    }
    if(mouseX > 440){
        iEyeBrowY = 223;//angry
        arc(mainX,256, 20, 20, pi, 0, CHORD);//sad mouth
        fill("red");
        ellipse(343,225, 8,8);//right eye
        ellipse(297,225, 8,8);//left eye
    }
    if(mouseX > 545){
        iEyeBrowY = 218;//stern
        line(315,256, 325,256);//flat mouth
        fill(128, 17, 17);
        ellipse(343,225, 8,8);//right eye
        ellipse(297,225, 8,8);//left eye
    }
    if(mouseX < 365){
        iEyeBrowY = 212;//happy
        arc(mainX,256, 20, 20, 0, pi, CHORD);//happy mouth
        fill(0);
        ellipse(343,225, 8,8);//right eye
        ellipse(297,225, 8,8);//left eye
    }
    if(mouseX > 621){
        iEyeBrowY = 212;//happy
        arc(mainX,256, 20, 20, 0, pi, CHORD);//happy mouth
        fill(0);
        ellipse(343,225, 8,8);//right eye
        ellipse(297,225, 8,8);//left eye
    }
}