GarrettRauck-Project-1

sketch

//Garrett Rauck
//Section C
//grauck@andrew.cmu.edu
//Project-01

///////////////////////////////////
// INIT VARIABLES
///////////////////////////////////
var canvasWidth = 500;
var canvasHeight = 600;

///////////////////////////////////
// RUN
///////////////////////////////////
function setup() {
	bg = loadImage("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/09/background.jpg");
    createCanvas(canvasWidth, canvasHeight);
}

function draw() {
	// set background
	background(bg);
	// background(255);

	// set drawing modes
	rectMode(CENTER);
    ellipseMode(CENTER);
	noStroke();

	//// HAIR ////
	fill(54, 32, 9);
	ellipse(canvasWidth/2, canvasHeight/2-175, 300, 200);
	ellipse(canvasWidth/2+35, canvasHeight/2-200, 175,175);
	//// FACE MASSES ////
	fill(255, 239, 161);
	// Chin
    rect(canvasWidth/2, canvasHeight/2 + 125, 325, 265, 50);
    // Cheeks
    ellipse(canvasWidth/2-100, canvasHeight/2+25, 190, 190);
    ellipse(canvasWidth/2+100, canvasHeight/2+25, 190, 190);
    // Ears
    ellipse(canvasWidth/2-105, canvasHeight/2-120, 50, 65);
    ellipse(canvasWidth/2+105, canvasHeight/2-120, 50, 65);
    // Upper
    rect(canvasWidth/2, canvasHeight/2-75, 225, 200);
    // Forehead
    ellipse(canvasWidth/2, canvasHeight/2-175, 225, 100);

    //// FEATURES ////
    stroke(0);
    strokeWeight(1);
    noFill();
    // Mouth
    rect(canvasWidth/2, canvasHeight/2+50, 260, 20, 0, 0, 10, 10);
    // Chin
    arc(canvasWidth/2,canvasHeight/2+170, 100, 75, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    // Nose
    rect(canvasWidth/2, canvasHeight/2+10, 45, 25, 0, 0, 10, 10);
    //Eyes
    arc(canvasWidth/2-50, canvasHeight/2-65, 60, 75, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    arc(canvasWidth/2+50, canvasHeight/2-65, 60, 75, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    //Eyebrows
    fill(54, 32, 9);
    rect(canvasWidth/2-55, canvasHeight/2-150, 60, 15, 5);
    rect(canvasWidth/2+55, canvasHeight/2-150, 60, 15, 5);
    // Overlays
    noStroke();
    fill(255, 239, 161);
    rect(canvasWidth/2, canvasHeight/2+40, 280, 5);
    rect(canvasWidth/2, canvasHeight/2-5, 50, 10);

}

To create this image, I started by sketching an abstract face, thinking about primitive shapes as building blocks.

I then drew a second sketch using the wireframes of all of the shapes to get an idea of shape centers and how they would need to overlap.

The hardest part about writing the code was dealing with all of the different unique coordinates. I didn’t find a very elegant way of doing this — a lot of guess-and-check…