Category: Project-02-Variable-Face

Project02

var eyeSize = 30;
var faceWidth = 120;
var faceHeight = 230;
var noseHeight = 40;
var eyeHL = 4;
var eyeHR = 3;

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

function draw() {
    /*creating face structure*/
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    /*creating variables for eye location*/
    var eyeLX = width / 2 - faceWidth / 4
    var eyeLY = height / 2 + faceHeight / eyeHL
    var eyeRX = width / 2 + faceWidth / 4
    var eyeRY = height / 2 + faceHeight / eyeHR
    /*creating eyes*/
    ellipse(eyeLX, eyeLY, eyeSize, eyeSize);
    ellipse(eyeRX, eyeRY, eyeSize, eyeSize);
    /*creating nose*/
    triangle(width / 2 - noseHeight / 2, height /2, width /2 + noseHeight / 2, width / 2, height / 2 + noseHeight);
}
    
function mousePressed(){
    var eyeSize = random(20, 50);
    var faceWidth = random(100, 300);
    var faceHeight = random(200, 400);
    var noseHeight = random(30, 60);
    var eyeHL = random(3, 5);
    var eyeHR = random(3, 5);
}

This is a late turn in, but I had fun with this so I’m putting this up for others to see.

The variable creation was both harder and easier than I had originally thought (not the reason this is late). I wanted to create a mouth as well, but found that too difficult to create variables for. However, the nose felt like it turned out well.

Project-02

// Yoo Jin Shin
// Section B
// yoojins@andrew.cmu.edu
// Project-02-Variable-Face

var eyeSize = 50;

// top pupil
var pupilSizeL = 5;
var pupilSizeR = 6;
var pupilLeftX = 150;
var pupilLeftY = 154;
var pupilRightX = 220;
var pupilRightY = 154;

// bottom pupil
var pupilSize2L = 10;
var pupilSize2R = 12;
var pupilLeftX2 = 130;
var pupilLeftY2 = 164;
var pupilRightX2 = 210;
var pupilRightY2 = 166;

var faceWidth = 270;
var faceHeight = 200;
var mouthStart = 30;
var mouthStop = 122;

var backgroundR = 3;
var backgroundG = 117;
var backgroundB = 0;

var faceR = 244;
var faceG = 240;
var faceB = 132;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(backgroundR, backgroundG, backgroundB);
    noStroke();

    // face
    fill(faceR, faceG, faceB);
    ellipse(180, 180, faceWidth, faceHeight);

    // left eye
    fill(0);
    ellipse(140, 160, eyeSize, eyeSize);

    // left pupils
    fill(255);
    ellipse(pupilLeftX, pupilLeftY, pupilSizeL, pupilSizeL);
    ellipse(pupilLeftX2, pupilLeftY2, pupilSize2L, pupilSize2L);

    // left eyebrows
    fill(backgroundR, backgroundG, backgroundB);
    rect(125, 123, 25, 7, 3);

    // right eyes
    fill(0);
    ellipse(220, 160, eyeSize, eyeSize);

    // right pupils
    fill(255);
    ellipse(pupilRightX, pupilRightY, pupilSizeR, pupilSizeR);
    ellipse(pupilRightX2, pupilRightY2, pupilSize2R, pupilSize2R);

    // right eyebrows
    fill(backgroundR, backgroundG, backgroundB);
    rect(210, 123, 25, 7, 3);

    // mouth
    fill(backgroundR, backgroundG, backgroundB);
    arc(180, 180, 20, 40, mouthStart, mouthStop);
}
 
function mousePressed() {
    eyeSize = random(37, 55);
    pupilSizeL = random(3, 9);
    pupilSizeR = random(3, 9);
    pupilSize2L = random(7, 12);
    pupilSize2R = random(7,12);

    pupilLeftX = random(142, 153);
    pupilLeftY = random(150, 155);
    pupilLeftX2 = random(142, 153);
    pupilLeftY2 = random(162, 169);

    pupilRightX = random(207, 218);
    pupilRightY = random(150, 155);
    pupilRightX2 = random(207, 218);
    pupilRightY2 = random(162, 169);

    faceWidth = random(150, 300);
    faceHeight = random(150, 300);

    faceR = random(0, 255);
    faceG = random(0, 255);
    faceB = random(0, 255);

    mouthStart = random(1, 360);
    mouthStop = random(1, 360);

    backgroundR = random(0, 255);
    backgroundG = random(0, 255);
    backgroundB = random(0, 255);
}

I tried creating a googly-eye-effect using the different variables by focusing the mouse-click changes mainly on the eyes.

I started this project based on my self portrait and explored the command to change the size of the image both randomly and steadily.

sketch

//Sean Meng
//Section B
//hmeng@andrew.cmu.edu
//Assignment1

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

var mouth1=30
var mouth2=5
var glassescolor=0
var BW1=50
var BW2=80
var BW3=10
var BW4=120
var earH=40
function draw() {
    fill(255, 255, 255)
    rect(0, 0, 300, 600)

    //ears
    fill(225, 197, 164)
    ellipse(380, 330, 20, earH)
    strokeWeight(0)
    ellipse(220, 330, 20, earH)
   
    //face
    strokeWeight(0)
    fill(236, 212, 190)
    rect(220, 250, 160, 100)
    triangle(220, 350, 300, 350, 300, 420)
    triangle(220, 350, 240, 390, 300, 420)
    quad(300, 420, 300, 350, 380, 350, 340, 400)

    //hair
    fill(0)
    triangle(205, 250, 290, 275, 405, 250)
    triangle(205, 250, 230, 220, 300, 220)
    triangle(230, 220, 265, 200, 300, 220)
    rect(265, 200, 60, 30)
    triangle(265, 200, 300, 195, 300, 220)
    triangle(205, 250, 300, 220, 300, 250)
    rect(370, 240, 10, 70)

    //glasses
    fill(glassescolor)
    ellipse(255, 315, 60, 60)
    fill(245, 245, 245)
    ellipse(255, 315, 53, 53)
    fill(glassescolor)
    ellipse(335, 315, 60, 60)
    fill(245, 245, 245)
    ellipse(335, 315, 53, 53)
    strokeWeight(1)
    fill(200)
    rect(283.5, 309, 22, 3)
    rect(219, 309, 7, 3)
    rect(364, 309, 16, 3)
    
    //nose
    strokeWeight(2)
    line(290, 315, 290, 350)
    line(290, 350, 300, 350)

    //mouth
    fill(220, 145, 140)
    rect(280, 380, mouth1, mouth2)

    //background buildings
    strokeWeight(0)
    fill(153, 138, 138)
    rect(370, 470, BW1, 160)
    rect(480, 500, BW2, 100)
    rect(395, 440, BW3, 40)
    fill(136, 115, 117)
    rect(400, 520, BW4, 80)

    //backgrounds 2

    strokeWeight(12)
    triangle(60, 170, 130, 170, 130, 50)
}    

function mousePressed(){
    //if you click the mouse, the glasses is going to change from black to white.
    //if you click the mouse, the mouth and the building in the background are going to be bigger.
    // 
    mouth1 = random(10, 60)
    mouth2 = random(1, 20)
    glassescolor+=20
    BW1+=3
    BW2+=3
    BW3+=3
    BW4+=3
    earH = random(20, 80)
}