Category: SectionE

sketch

/*  Caroline Song
    Section E
    chsong@andrew.cmu.edu
    Assignment-02 */


var eyeSize = 25
var faceWidth = 50
var faceHeight = 50
var pupilSize = 20
var noseSize = 50
var mouth = 30
var bodyHeight = 250
var bodyWidth = 250

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

function draw(){
    background(134, 227, 219);

    //face shape
    noStroke(0); 
    fill(254, 217, 255);
    ellipse(width/2, height/2, faceWidth*4, faceHeight*5);

    //eyes
    fill(250);
    var eyeLX = width/2 - faceWidth*0.75;
    var eyeRX = width/2 + faceWidth*0.75;
    ellipse(eyeLX, height/2, eyeSize*3, eyeSize*3);
    ellipse(eyeRX, height/2, eyeSize*3, eyeSize*3);

    //pupils
    fill(0);
    var pupilLX = width/2 - faceWidth*0.75;
    var pupilRX = width/2 + faceWidth*0.75;
    ellipse(pupilLX, height/2, pupilSize, pupilSize);
    ellipse(pupilRX, height/2, pupilSize, pupilSize);

    //nose
    fill(214, 0, 0);
    ellipse(width/2, height/2 + faceHeight*0.65, noseSize, noseSize);

    //mouth
    fill(245, 135, 170);
    arc(width/2, height/2 + faceHeight*1.5, mouth*2, mouth, 0, PI);

    //body
    fill(255, 243, 168);
    var faceH = faceHeight*5
    ellipse(width/2, height/2 + faceH/2 + bodyHeight/2, bodyWidth, bodyHeight);
}

    function mousePressed() {
    eyeSize = random(25, 50);
    faceWidth = random(50, 75);
    faceHeight = random(50, 75);
    mouth = random(60, 85);
    bodyHeight = random(250, 400);
    bodyWidth = random(250, 400);
}

This project was interesting in terms of using variables and math to find the coordinates to my shapes, as opposed to using Illustrator and/or Photoshop to do it for me. At first, I found this project to be challenging, but as I kept adding more objects to the face, I started to understand and familiarize myself with the process of creating this variable face.

sketch

//Jamie Park           jiminp@andrew.cmu.edu
//15-104        Section E         Project #2

var bodySize = 130;
var tail = 150;
var eyes = 25;
var pupil = 10;
var faceWidth = 110;
var faceHeight = 150;
var mouth = 70;
var cheeks = 20;
var noseLength = 250

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

function draw(){
    background(128, 124, 115);

    strokeWeight(40);
    stroke(217, 180, 98);
    noFill();
    beginShape();
    curveVertex(width / 2 + 50, 640); //tail
    curveVertex(width / 2 - 80, 460);
    curveVertex(width / 2 - 130, 300);
    curveVertex(tail, 200);
    endShape();

    noStroke();
    fill (242, 205, 121);
    ellipse (width / 2, height / 2 + 150, bodySize, 250); //body

    fill (255, 233, 184);
    ellipse (width / 2, height / 2, faceWidth, faceHeight); //face
    var eyeLeft = width / 2 - faceWidth * 0.35;
    var eyeRight = width / 2 + faceWidth * 0.35;

    fill(255, 200, 176);
    ellipse (eyeLeft - 3, height / 1.80, cheeks, cheeks); //cheeks
    ellipse (eyeRight + 3, height / 1.80, cheeks, cheeks);

    fill(250);
    ellipse (eyeLeft, height / 2, eyes, eyes); //eyes
    ellipse (eyeRight, height / 2, eyes, eyes);

    fill(74, 72, 65);
    ellipse (eyeLeft, height / 2, pupil, pupil); //pupil
    ellipse (eyeRight, height / 2, pupil, pupil);

    fill(242,111,63);
    arc(width / 2, height / 1.80, mouth, mouth, TWO_PI, PI); //mouth

    strokeWeight(2);
    stroke (170, 156, 112);
    line (width / 2, noseLength, width / 2, height /2 + 3); //nose

    fill("pink");
    noStroke();
    triangle(eyeLeft - 10, height / 2 - 100, eyeLeft - 10, //horn
      height / 2 - 27, eyeLeft + 10, height / 2 - 32);
    triangle(eyeRight + 10, height / 2 - 100, eyeRight - 10,
      height / 2 - 32, eyeRight + 10, height / 2 - 27);
}

function mousePressed(){
    bodySize = random (110, 200);
    faceWidth = random(90, 170);
    faceHeight = random(130, 165);
    eyes = random(15, 28);
    mouth = random(50, 80);
    tail = random (0, 160);
    pupil = random(10, 15);
    cheeks = random(10, 20);
    noseLength = random (245, 260);
}

At first, I was skeptical with my ability to code this project. But once I started, I had a lot of fun altering the features that would fit into my creature! I am still struggling with effectively using curve vertex, but hopefully it will naturally come as I code more things.

sketch

// JOSEPH ZHANG
// SECTION E
// HAOZHEZ@ANDREW.CMU.EDU
// PROJECT-02

// GLOBAL VARS
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthX = 18;
var mouthY = 32;
var mouthPosY = 192;
var bodyW = 150;
var browWeight = 5;
var browHeight = 5;

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

function draw() {
    background('#B4A4D0');
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;

    // BODY
    noStroke();
    fill('#EFB616');
    ellipse(width/2,height/2 + 170,bodyW,265)

    // FACE
    fill('#FFD100');
        noStroke();
        ellipse(width / 2, height / 2, faceWidth,  faceHeight);
        ellipse(width / 2, height / 2 + 40, faceWidth * 1.2,  faceHeight / 1.4);

    // EYES
    fill('black')
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);


    // INNER EYE
    noStroke();
    fill('white')
        ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
        ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);

    // MOUTH
    stroke('#871200');
    strokeWeight(2);
    fill('#FF7D62');
    ellipse(width / 2,mouthPosY + 90, mouthX, mouthY);

    // BROWS
    strokeWeight(browWeight);
        // Left Brow
        line(eyeLX - 10, height / 2 - 20 + browHeight, eyeLX + 10 , height / 2 - 7);

        // Right Brow
        line(eyeRX - 7, height / 2 - 10, eyeRX + 10 , height / 2 - 20 + browHeight);
    
}
 
function mousePressed() {
    
    // FACE WIDTH + HEIGHT
    faceWidth = random(75,150);
    faceHeight = random(100,150);

    //EYE SIZE
    eyeSize = random(10,30);

    // MOUTH RATIOS
    mouthX = random(22,42);
    mouthY = random(22,42);

    // BODY WIDTH
    bodyW = random(50,180)
    
    //BROW WIDTH + HEIGHT
    browWeight = random(3,6);
    browHeight = random(-5,5);
}

Varying Faces

To built this project, I experimented a lot with the manipulation of shapes and how to combine them with others to create more interesting forms; the variables I chose to manipulate included, the eye size, eyebrow form, head shape, body width, and mouth. To begin the process, I mocked up what I wanted to make in Adobe Illustrator and from there, adapted to what actually could and couldn’t be done. Unfortunately, I don’t have the Illustrator file anymore so I can’t attach a screenshot. But I did use the surprised Pikachu meme as initial inspiration!