hyt-Project-02: Minion Faces

hyt-02-Minions

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-02-minions-variation

var eyeSize = 50;
var mouthSize = 30; 
var bodyWidth = 140;
var bodyHeight = 130;
var eyeballSize = 40; 
var mouthAngle = 100;
var x = 0; //rgb value randomization


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

function draw() {
    angleMode(DEGREES); // angle unit change
    background(x, 194, 239); // blue and pink-ish backgrounds randomizing
    
// body
    stroke(0);
    strokeWeight(4.5);
    fill(255, 221, 119); // yellow
    arc(width / 2, height / 2, bodyWidth, bodyHeight, 180, 360, OPEN); // bald head part
    rect(width / 2 - bodyWidth / 2, height / 2, bodyWidth, bodyHeight); // actual body

//pants?
    fill(68, 100, 133); // denim blue
    arc(width / 2, height / 2 + bodyHeight, bodyWidth, bodyHeight - 30, 0, 180, OPEN);

// eyes    
    var eyeLX = width / 2 - bodyWidth * 0.23; // Left eye's x position
    var eyeRX = width / 2 + bodyWidth * 0.23; // Right eye's x position
    fill(256); // white
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); // 
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

// eyeballs
    fill(60, 40, 40); // brown
    noStroke();
    ellipse(eyeLX, height / 2, eyeballSize, eyeballSize);
    ellipse(eyeRX, height / 2, eyeballSize, eyeballSize);

// mouth
    fill(0);
    arc(width / 2, height / 2 + bodyHeight - 50, mouthSize, mouthSize, 0, mouthAngle);

// hands (referenced from p5.js angleMode)
    var a = atan2(mouseY - height / 2, mouseX - width / 2);
    fill(255, 221, 119); // yellow
    
// left hand rotate! 
    translate(width / 2 - bodyWidth / 2, height / 2 + bodyHeight);
    push();
    rotate(a);
    rect(0, - bodyHeight / 12, bodyHeight / 3, bodyHeight / 6); // arms
    fill(0); // black
    ellipse(bodyHeight / 3, 0, bodyHeight / 5, bodyHeight / 5); // black hands
    pop();

// right hand rotate! 
    translate(bodyWidth, 0);
    push();
    rotate(a);
    rect(0, - bodyHeight / 12, bodyHeight / 3, bodyHeight / 6); // arms
    fill(0); // black
    ellipse(bodyHeight / 3, 0, bodyHeight / 5, bodyHeight / 5); // black hands
    pop();

 }


// randomization when mouse clicks on the canvas
function mousePressed() {
    bodyWidth = random(100, 180);
    bodyHeight = random(90, 180);
    eyeSize = random(30, 50);
    eyeballSize = eyeSize - 12; 
    mouthSize = eyeSize; 
    mouthAngle = random(10, 220); 
    x = random(81, 225); // background rgb value change
}

Now that we have entered week 2, there are many more functions and attributes that I have began to explore in p5.js, and based on those I decided to make a minion with animation-like facial features for my program. I didn’t particularly plan out the sketches on Illustrator, but rather drew out primitive shapes like ellipses and rectangles through trial and error. One of the more difficult process was the moving hands when the mouse hovers over, but once I figured out the coordinates and center for rotation it became much easier. Overall, I really enjoyed creating the project!