I wanted to play around with very primitive shapes and unrealistic colors to create a robot-like face celebrating its birthday.
sketch
/*
Mimi Jiao
Section E
wjiao@andrew.cmu.edu
Project-02
Variable Face
*/
//background color
var BGcolor = 200;
var faceWidth = 100;
var faceHeight = 150;
//x-coordinate position of face
var faceX = 100;
//y-coordinate position of face
var faceY = 100;
var faceColor = 200;
//corner roundness for face
var faceTopLeftCorner = 15;
var faceTopRightCorner = 10;
var faceBottomRightCorner = 14;
var faceBottomLeftCorner = 25;
var eyeColor = 140;
var leftEyeLocationX = .20;
var leftEyeLocationY = .3;
var rightEyeLocationX = .61;
var rightEyeLocationY = .50;
var noseColor = 21;
var nosePosition = 20;
var noseHeight = 15;
var noseWidth = 8;
var hatColor = 200;
var hatHeight = 80;
var hatTip = 20;
var mouthColor = 23;
var mouthShape = 15;
var mouthX = 4;
var mouthY = 1.35;
var mouthHeight = 10;
var mouthWidth = 20;
var faceLength = 70;
function setup() {
createCanvas(480, 640);
background(255,255,0);
}
function draw() {
background(255,150,BGcolor);
//face
fill(faceColor,180,255);
noStroke();
rect(faceX, faceY, faceWidth, faceHeight,
faceTopLeftCorner,faceTopRightCorner,
faceBottomRightCorner,faceBottomLeftCorner);
//eyes
fill(eyeColor,255,eyeColor);
ellipse(faceX + faceWidth*leftEyeLocationX,
faceY + faceHeight*leftEyeLocationY,
20, 20);
ellipse(faceX + faceWidth*rightEyeLocationX,
faceY + faceWidth*rightEyeLocationY,
20,20);
//nose
fill(255,noseColor,0);
rect(faceX + faceWidth*leftEyeLocationX + 5,
faceY + faceHeight*leftEyeLocationY + nosePosition,
noseWidth,noseHeight, 5, 5, 5, 5);
//hat
fill(hatColor,230,hatColor);
triangle(faceX+faceWidth/2,faceY,faceX+faceWidth,
faceY+faceHeight/4,
faceX+ faceWidth, faceY - hatHeight);
ellipse(faceX + faceWidth, faceY - hatHeight, hatTip,hatTip);
//mouth
fill(255,mouthColor,mouthColor);
rect(faceX + faceWidth/mouthX,
faceY + faceHeight/mouthY, mouthWidth, mouthHeight,
mouthShape,mouthShape,mouthShape,mouthShape);
//body
fill(hatColor,230,hatColor);
rect(faceX + faceWidth/2, faceY + faceHeight,
faceWidth*1.5,faceHeight*1.75, 20, 20, 20, 20);
//arms
fill(hatColor,230,hatColor);
rect(faceX - faceWidth/3,
faceY + faceHeight/.8,
faceLength, 30,10,10,10,10);
rect(faceX + faceWidth/.75, faceY/.8,
30, faceLength,10,10,10,10);
//legs
fill(hatColor,230,hatColor);
rect(faceX + faceWidth/1.5, 1.7*(faceY + faceHeight),
30, faceLength*1.3, 10,10,10,10);
rect(faceX + faceWidth/.8, 1.7*(faceY + faceHeight),
30, faceLength*1.3, 10,10,10,10);
}
function mousePressed() {
BGcolor = random(0,90);
faceWidth = random(73,109);
faceHeight = random(90,132);
faceX = random(70,150);
faceY = random(160,200);
faceColor = random(0,150);
faceTopLeftCorner = random(5,25);
faceTopRightCorner = random(10,40);
faceBottomRightCorner = random(14,30);
faceBottomLeftCorner = random(25,50);
eyeColor = random(0,120);
leftEyeLocationX = random(.22,.35);
leftEyeLocationY = random(.29,.39);
rightEyeLocationX = random(.61,.69);
rightEyeLocationY = random(.40,.50);
noseColor = random(21,201);
nosePosition = random(10,30);
noseHeight = random(5,10);
noseWidth = random(4,14);
hatColor = random(0,255);
hatHeight = random(60,130);
hatTip = random(10,50);
mouthColor = random(0,255);
mouthShape = random(0,15);
mouthX = random(3.4,6);
mouthY = random(1.2,1.4);
mouthHeight = random(5,10);
mouthWidth = random(5,20);
faceLength = random(50,90);
}