jknip-Project-02-variable-face

sketch.js

/*Jessica Nip
Section A
jknip@andrew.cmu.edu
Project-02 */

var eyeSize = 20;
var cheekSize = 20;
var faceWidth = 120;
var faceHeight = 150;
var et = 15;
var value = 150;
var faceR = 179;
var faceG = 229;
var faceB = 178;
var cheekR = 235;
var cheekG = 189;
var cheekB = 176;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
	background(value);
    var b = color(179,229,178);
	fill(256);
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    fill(faceR, faceG, faceB);
    ellipse(width / 2+3, height / 2+3, faceWidth,  faceHeight);
    fill(b);
    ellipse(360,119,et,et*1.1);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var c = color(0);
    fill(c);
    ellipse(eyeLX, height / 2.1, eyeSize, eyeSize*2);
    ellipse(eyeRX, height / 2.1, eyeSize, eyeSize*2);
    fill(cheekR,cheekG,cheekB);
    ellipse(eyeLX, height / 1.85, cheekSize/2, cheekSize/3); //cheeks
    ellipse(eyeRX, height / 1.85, cheekSize/2, cheekSize/3);
    var green = color(1,146,79);
    noFill();
    stroke(b);
	beginShape();
	curveVertex(374,191);
	curveVertex(358,119);
	curveVertex(311,117);
	curveVertex(322,200);
	curveVertex(322,200);
	endShape();
	fill(green);
	noStroke();
	ellipse(315, height/1.85, eyeSize/5, eyeSize/5); //nostrils
    ellipse(325, height/1.85, eyeSize/5, eyeSize/5);
}

function mouseMoved() {
	value = value +5;
	if (value>255) {
		value = 0;
	}
}
 
function mousePressed() {
    faceWidth = random(80, 150);
    faceHeight = random(80, 150);
    et =random(5,40);
    eyeSize = random(10, 25);
    cheekSize = random(15,30);
    faceR = random(180,250);
    faceG = random(150,250);
    faceB = random(130,200);
    cheekR = random(120,150);
    cheekG = random(100,120);
    cheekB = random(100,130);

}

I wanted to create an interactive alien face that utilizes different pops of pastel for its face and cheek. I found that when setting different scales for the ellipses, they easily formed interesting facial compositions.

Leave a Reply