![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
// 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!
