Category: SectionB

Gnomes of the world unite!

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//Project-02

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var faceR = 141;
var faceG = 85;
var faceB = 36;
var eyeG = 0;
var eyeB = 0;
var shirtColor = 100;

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

function draw() {
    background(150);
    strokeWeight (1);
    stroke(0);

    // face
    fill (faceR, faceG, faceB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    
    //eyes
    fill (255);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    
    //pupils
    fill (0, eyeG, eyeB);
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);

    // //nose
    fill (185, 150, 130);
    var noseWidth = faceWidth * 0.15;
    var noseHeight = height / 2 + faceHeight * 0.15;
    triangle(width / 2, height / 2, width / 2 + noseWidth, noseHeight, width / 2 - noseWidth, noseHeight);

    //body
    fill(0, shirtColor, faceB);
    var bodyHeight = faceHeight * 4;
    var bodyX = width / 2;
    var bodyY = height/2 + bodyHeight /2 + faceHeight / 2;
    ellipse(bodyX, bodyY, faceWidth, bodyHeight);

    //hat
    fill(shirtColor, 0, faceB);
    var hatWidth = faceWidth / 2;
    var hatHeight = height / 2 - faceHeight / 3;
    triangle(width / 2, height / 2 - faceHeight, width / 2 - hatWidth, hatHeight, width / 2 + hatWidth, hatHeight);

    //mouth
    noFill();
    strokeWeight (3);
    var mouthHeight = faceHeight * 0.25;
    arc(width / 2, height / 2 + mouthHeight, faceWidth / 2, mouthHeight, 0, 180, OPEN);


    // //eyebrows
    var browLX = width / 2 - faceWidth * 0.25;
    var browRX = width / 2 + faceWidth * 0.25;
    arc(browLX, height / 2 - eyeSize, eyeSize, eyeSize, 200, 340, OPEN);
    arc(browRX, height / 2 - eyeSize, eyeSize, eyeSize, 200, 340, OPEN);

    //pupils
    fill (0);
    stroke (0, eyeG, eyeB);
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    //to random values within specified ranges.
    faceWidth = random(75, 300);
    faceHeight = random(115, 350);
    eyeSize = random(30, 50);
    eyeG = random(0, 255);
    eyeB = random(0, 255);
    shirtColor = random(100, 200);
    
    //random skin color generator
    var x = round(random (0.5, 5.5));

    // skin shade 1 -- Russet
    if (x == 1) {
        faceR = 141;
        faceG = 85;
        faceB = 36;
    } 

    // skin shade 2 -- Peru
    if (x == 2) {
        faceR = 198;
        faceG = 134;
        faceB = 66;
    } 

    // skin shade 3 -- Fawn
    if (x == 3) {
        faceR = 224;
        faceG = 172;
        faceB = 105;
    } 

    // skin shade 4 -- Mellow Apricot
    if (x == 4) {
        faceR = 241;
        faceG = 194;
        faceB = 125;
    } 

    // skin shade 5 -- Navajo White
    if (x == 5) {
        faceR = 255;
        faceG = 219;
        faceB = 172;
    } 


}

I wanted to create different gnomes and have their hat and shirt color be relative to each other, so I referenced the RGB value of the skin value. That way their outfits somehow match.

Also, I wanted to create real skin tones and used the generic 5 shade skin tones found here, and randomized it so that every time you click, the skin changes.

Finally, the eyebrows and smiles and the rest of the facial features are referencing each other so that they change proportionally with the face size and eye size.

variable_faces

/*Claire Lee
  15-104 Section B
  seoyounl@andrew.cmu.edu
  Project - 02 */

var backgroundRed = 195;
var backgroundGreen = 227;
var backgroundBlue = 255;
//background color variables

var drinkColorRed = 215;
var drinkColorGreen = 159;
var drinkColorBlue = 117;
var drinkColorInt = 0;
//drink color variables

var strawColorRed = 255;
var strawColorGreen = 166;
var strawColorBlue = 255;
//straw color variables

var bubbleRadius = 25;
//bubble size

var expressionControl = 400;
//mouth

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(backgroundRed, backgroundGreen, backgroundBlue);

    noStroke();
    fill(backgroundRed - 30, backgroundGreen - 30, backgroundBlue - 30);
    rect(0, 460, 600, 140);
    //surface

    noStroke();
    fill(backgroundRed - 75, backgroundGreen - 75, backgroundBlue - 75);
    quad(200, 500, 400, 500, 425, 600, 175, 600);
    //shadow

    stroke(255);
    strokeWeight(4); 
    fill(drinkColorRed - drinkColorInt, drinkColorGreen - drinkColorInt, drinkColorBlue - drinkColorInt); 
    arc(300, 500, 200, 50, 0, PI, OPEN);
    //cup base

    noStroke();
    fill(drinkColorRed - drinkColorInt, drinkColorGreen - drinkColorInt, drinkColorBlue - drinkColorInt);
    quad(200, 500, 185, 320, 415, 320, 400, 500); 
    //drink "body"

    noStroke();
    fill(drinkColorRed - drinkColorInt - 30, drinkColorGreen - drinkColorInt - 30, drinkColorBlue - drinkColorInt - 30);
    ellipse(300, 320, 230, 50);
    //drink "top"

    stroke(255);
    strokeWeight(4);
    noFill();
    arc(300, 200, 250, 50, PI, 0, OPEN);
    //top border of cup rim

    noStroke();
    fill(strawColorRed, strawColorGreen, strawColorBlue);
    rect(285, 150, 30, 170); 
    //straw

    noStroke();
    fill(strawColorRed, strawColorGreen, strawColorBlue);
    arc(300, 320, 30, 10, 0, PI, OPEN);
    //straw base 

    noStroke();
    fill(strawColorRed - 30, strawColorGreen - 30, strawColorBlue - 30);
    ellipse(300, 150, 30, 10);
    //straw hole 

    stroke(255);
    strokeWeight(4);
    line(200, 500, 175, 200); 
    //left border of cup

    stroke(255);
    strokeWeight(4);
    line(400, 500, 425, 200);
    //right border of cup

    stroke(255);
    strokeWeight(4);
    noFill();
    arc(300, 200, 250, 50, 0, PI, OPEN);
    //bottom border of cup rim

    noStroke();
    fill(0);
    ellipse(250, 380, 15);
    //left eye

    noStroke();
    fill(0);
    ellipse(350, 380, 15);
    //right eye

    stroke(0);
    strokeWeight(2);
    point(285, 390);
    point(300, expressionControl); 
    point(315, 390);
    strokeWeight(2);

    noFill();
    beginShape();
    curveVertex(285, 390);
    curveVertex(285, 390);
    curveVertex(300, expressionControl);
    curveVertex(315, 390);
    curveVertex(315, 390);
    endShape();
    //mouth

    noStroke();
    fill(0);
    ellipse(225, 493, bubbleRadius);
    ellipse(255, 501, bubbleRadius);
    ellipse(285, 505, bubbleRadius);
    ellipse(315, 505, bubbleRadius);
    ellipse(345, 501, bubbleRadius);
    ellipse(375, 493, bubbleRadius);
    ellipse(218, 465, bubbleRadius);
    ellipse(250, 473, bubbleRadius);
    ellipse(283, 477, bubbleRadius);
    ellipse(317, 477, bubbleRadius);
    ellipse(350, 473, bubbleRadius);
    ellipse(380, 465, bubbleRadius);
    //bubbles

}


function mousePressed() {
    backgroundRed = random(150, 255);
    backgroundGreen = random(150, 255);
    backgroundBlue = random(150, 255);
    //background color variations

    drinkColorInt = random(0,100);
    //drink color intensity

    strawColorBlue = random(0,255);
    //straw color variations

    bubbleRadius = random(17,27);
    //bubble size variations

    expressionControl = random(380,400);
    //mouth variations

}

This project was a really fun way to experiment with changing shapes. I enjoyed testing some new functions as well. I struggled a bit with not compromising the aesthetic integrity of the piece while still allowing there to be perceptible variations in color and size, but I’m happy with how it turned out.

variable face

//Siwei Xie
//Section 1-B
//sxie1@andrew.cmu.edu
//Project-02-variable face

var mouthHeight = 60;
var eyeHeight = 40;
var hatAdjustor = 2.5;
var hatColor = (0,0,196);
var eyebrowHeight = 200;
var pupilSize = 16;


function setup() {
    createCanvas(480,640);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {

    //re-draw background to avoid "previous hats" when hat moves
    background(220);

    //hair
    fill(0);
    rect(115,120,270,300);

    //clothes
    fill(122,35,76);
    noStroke();
    quad(150, 391, 345, 390, 450, 640,100, 640);

    //face
    fill(232,196,131);
    noStroke();
    ellipse(250,250,250,300);

    //left eye
    fill(3,3,3);
    ellipse(200,250,40,eyeHeight);

    //right eye
    fill(3,3,3);
    ellipse(300,250,40,eyeHeight);

    //nose
    fill(179,149,85);
    triangle(250,260,240,300,260,300);

    //mouth
    fill(208,68,61);
    ellipse(250,345,35,mouthHeight);

    // left pupil
    fill(255)
    noStroke();
    square(195, 245, pupilSize);

    // right pupil
    fill(255)
    noStroke();
    square(295, 245, pupilSize);

    // right earring
    fill(128,194,233);
    arc(370, 300, 60, 60, 15, HALF_PI);

    // left earring
    fill(128,194,233);
    arc(120, 300, 60, 60, 15, HALF_PI);

    //hat
    var hatPosition = width / 2 + hatAdjustor;
    fill(hatColor,0,196);
    ellipse(hatPosition,130,290,125);

    // left eyebrow (new, using curveVertex)
    stroke(0);
    strokeWeight(5);
    point(215, 220);
    point(195, eyebrowHeight);
    point(170, 210);
    point(160, 220);
    strokeWeight(5);

    noFill();
    beginShape();
    curveVertex(215, 220);
    curveVertex(215, 220);
    curveVertex(195, eyebrowHeight);
    curveVertex(170, 210);
    curveVertex(160, 220);
    curveVertex(160, 220);
    endShape();

    //right eyebrow (new, using curveVertex)
    stroke(0);
    strokeWeight(0);
    point(350, 220);
    point(340, 210);
    point(310, eyebrowHeight);
    point(290, 220);
    strokeWeight(5);

    noFill();
    beginShape();
    curveVertex(350, 220);
    curveVertex(350, 220);
    curveVertex(340, 210);
    curveVertex(310, eyebrowHeight);
    curveVertex(290, 220);
    curveVertex(290, 220);
    endShape();

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'mouthHeight' gets a random value between 15 and 55.
    mouthHeight = random(15, 60);
    eyeHeight = random(20, 50);
    hatAdjustor = random(-30,30);
    hatColor = random (0,196);
    eyebrowHeight = random (200,220);
    pupilSize = random (8,16);

}

I had fun creating a face which includes emotions such as “surprised”, “angry” and “calm.” The story is that the hat accidentally moves and changes color, which surprises the girl. She then becomes angry, since the hat is very out of place.

sketch

// Ankitha Vasudev
// Section B 
// ankithav@andrew.cmu.edu
// Project-02-Variable Face

//global variables
var faceWidth = 200; 
var faceHeight = 150;
var earH = 50;
var earW = 40;
var eyeW = 20;
var eyeH = 30;
var eyeColor = 0;
var r = 255;
var g = 217;
var b = 255;
var cheekw = 20;
var cheekh = 20;


function setup() {
    createCanvas(640, 480);
    background(167, 220, 200);
}

function draw() {

    //background
    noStroke();
    fill(r, g, b);
    rect(0, 0, 640, 480);
    fill(167, 220, 200);
    rect(20, 20, 600, 440);

    //ears
    noStroke();
    fill(110, 59, 0);
    ellipse(237, 240, earW, earH);
    ellipse(402, 240, earW, earH);

    //face
    fill(110, 59, 0);
    ellipse(width / 2, 220, faceWidth - 50, faceHeight);
    ellipse(width / 2, 300, faceWidth, faceHeight);
    fill(229, 222, 180);
    ellipse(width / 2, 220, faceWidth - 80, faceHeight - 30);
    ellipse(width / 2, 300, faceWidth - 30, faceHeight - 30);

    //eyes
    stroke(255);
    strokeWeight(12);
    fill(eyeColor);
    ellipse(295, 240, eyeW, eyeH);
    ellipse(345, 240, eyeW, eyeH);

    //mouth
    noFill();
    stroke(255, 160, 255);
    strokeWeight(4);
    beginShape();
    curveVertex(280, 300);
    curveVertex(300, 320);
    curveVertex(340, 320);
    curveVertex(360, 300);
    endShape();

    //cheeks
    noStroke();
    fill(255, 180, 255);
    ellipse(265, 300, cheekw, cheekh);
    ellipse(375, 300, cheekw, cheekh);
}

function mousePressed(){
    faceWidth = random(200, 230); 
    faceHeight = random(150, 180);
    earH = random(30, 100);
    eyeW = random(20, 40);
    eyeH = random(35, 60);
    eyeColor = random(0, 200);
    r = random(190, 250);
    g = random(190, 250);
    b = random(230, 255);
    cheekw = random(20, 40);
    cheekh = random(20, 40);
}

I wanted to make something that was fun and creative. I used the face shape and features of a monkey for this project. It was interesting to play around with different variables that allowed me to change the colors and shapes in the program. 

sketch

/*  Nadia Susanto
    Section B
    nsusanto@andrew.cmu.edu
    Project - 02 - Variable Face */

var mouthW = 70
var mouthH = 70
var bodyW = 205
var bodyY = 205
var greenColor = 104
var blueColor = 149
var armXL = 190
var armXR = 430
var armYL = 210
var eyeBW = 25 //black eye part width
var eyeBH = 60
var eyeWW = 20 //white eye part width
var eyeWH = 40

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

function draw() {
    background(100, 105, 200);
    fill(235, greenColor, blueColor);
    //body
    ellipse(310, 185, bodyW, bodyY);
    //arms
    ellipse(armXL, armYL, 50, 45);
    ellipse(armXR, armYL, 50, 45);
    //cheeks
    fill(235, 104, 149);
    ellipse(250, 175, 25, 15);
    ellipse(370, 175, 25, 15);
    //mouth
    fill(190, 3, 89);
    circle(310, 225, mouthW, mouthH);
    //legs
    fill(221, 3, 89);
    ellipse(235, 295, 40, 70);
    ellipse(385, 295, 40, 70);
    //eyes
    fill("black");
    ellipse(280, 130, eyeBW, eyeBH);
    ellipse(345, 130, eyeBW, eyeBH);
    fill("white")
    ellipse(345, 120, eyeWW, eyeWH);
    ellipse(280, 120, eyeWW, eyeWH);


}

function mousePressed() {
    bodyW = random(200, 270);
    bodyY = random(205, 230);
    greenColor = random(50, 255);
    blueColor = random(0, 255);
    armXL = random(190, 210);
    armXR = random(370, 430);
    armYL = random(140, 210);
    mouthW = random(0, 100);
    mouthH = random(0, 100);

}

This project was definitely a lot of fun to do as my inspiration to do Kirby came from Super Smash Bros. I used adobe illustrator to first sketch out the initial image of what I wanted to do. I animated Kirby to change colors, change how big his suction is, change his body size, and change his arm placements to make it look like he is dancing.