Category: Uncategorized

sketch

//Erin Ryan
//eeryan@andrew.cmu.edu
//Lecture 1, Section C
//Project 02
var eyeSize = 20;
//face variables
var faceWidth = 100;
var faceHeight = 150;
var wink = 1;
//mouth variables
var mouthXone = 120;
var mouthXtwo = 140;
var mouthYone = 190;
var mouthYtwo = 190;
var mouthWidth = 10;
var mouthHeight = 10;
var mouthNumber = 1;
var rB = 40;
//body variables
var shoulderHeight = 265;
 
function setup() {
    createCanvas(300,300);
}
 
function draw() {
    background(255,255,210);
    //phone
    noStroke();
    fill(193,93,101);
    quad(45,140,70,150,70,212,45,200);
    var eyeY = height/2;//eye height
    //arm
    noFill();
    stroke(152,196,249);
    strokeWeight(10);
    beginShape();
    curveVertex(50,170);
    curveVertex(50,170);
    curveVertex(50,180);
    curveVertex(50,280);
    curveVertex(100,310);
    curveVertex(110,310);
    endShape();
    //shoulders
    noStroke();
    fill(50,80,109);
    rect(75,shoulderHeight,170,100,25,25,25,25);
    //face
    stroke(152,196,249);
    fill(197,255,237);
    strokeWeight(5);
    rect(100, 75, faceWidth,  faceHeight,25,25,40,40);
    var eyeLX = width / 2 - faceWidth * 0.25-10;
    var eyeRX = width / 2 + faceWidth * 0.25-10;
    stroke(50,80,109);
    noFill();
    //left eye
    strokeWeight(3);
    ellipse(eyeLX, eyeY, eyeSize, eyeSize);
    //mouth
    if(mouthNumber==1){
      noStroke();
      fill(193,93,101);
      arc(mouthXtwo, mouthYtwo, mouthWidth, mouthHeight,0,PI);
    }
    if(mouthNumber==2){
      stroke(193,93,101);
      line(mouthXone,mouthYone,mouthXtwo,mouthYone);
    }
    if(mouthNumber==3){
      noStroke();
      fill(193,93,101);
      ellipse(mouthXone,mouthYone,mouthWidth,mouthHeight);
    }
    //right eye
    if(wink==1){
      stroke(50,80,109);
      line(eyeRX-5, height/2,eyeRX+5, height/2);
    }
    else{
    noFill();
    stroke(50,80,109);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); 
    }
    
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(120, 180);
    eyeSize = random(10,20);
    mouthXone = random(120,130);
    mouthXtwo = random(140,150);
    mouthYone = random(180,190);
    mouthYtwo = random(155,165);
    mouthXthree = random(110,120);
    mouthYthree = random(155,165)
    mouthWidth = random(10,35);
    mouthHeight = random(5,25);
    mouthNumber = Math.floor((random()*3)+1);
    wink = Math.floor((random()*3)+1);
    eyeY = height/2 +(Math.floor((random()*7)+1));
    shoulderHeight = random(265,230);
    
}

I started off by tweaking the original template, finding slight differences like making the height of the eyes unequal, changing the radius of the curves of the face rectangle and adding strokes to different elements. I chose a color palette that I thought worked well with the simplistic faces I created, primarily desaturated primary colors.

After toying with conditionals and tweaking elements to give my faces different expressions, I decided that adding the context of a cell phone would tie my piece together. The different faces dictate how the phone is being used – are they taking a selfie? did they just read a text that irritated them?

sketch

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

//legs
var standing = 10;

//arms
var armLength = 50;

//face
var faceWidth = 175;
var faceHeight = 125;
var faceX = 330;
var faceY = 250;
var corner1 = 10;
var corner2 = 20;
var corner3 = 30;
var corner4 = 40;

//eyes
var eyeSize = 20;
var eyeLX = 450;
var eyeRX = 400;

//mouth
var mouthX = 425;
var mouthY = 355;
var mouthWidth = 50;
var mouthHeight = 35;

//lips
var lips = 10;

//thing
var thingX = 200;
var thingY = 100;
var thingWidth = 20;
var thingHeight = 15;

//face color
var colorFg = 210;
var colorFb = 210;

//eye+mouth color
var colorE = 100;

//lips color
var colorLg = 70;
var colorLb = 70;

//thing color
var colorTHr = 210;
var colorTHg = 210;
var colorTHb = 240;

//background color
var colorBr = 225
var colorBg = 250

function draw() {
    background(colorBr, colorBg, 256);
    
    //legs
    strokeWeight(0)
    fill(0)
    rect(425+standing, 350, 5, 200);
    
    strokeWeight(0)
    fill(0)
    rect(405+standing, 350, 5, 200);
      
    //arms
    strokeWeight(0)
    fill(0)
    rect(230+armLength, 325, 350-(armLength*1.5), 5)
    
    //face
    strokeWeight(0)
    fill(245, colorFg, colorFb)
    rect(faceX, faceY, faceWidth, faceHeight, 
    corner1, corner2, corner3, corner4);
    
    //left eye
    strokeWeight(0)
    fill(colorE)
    ellipse(eyeLX, 320, eyeSize, eyeSize);
   
    //right eye
    strokeWeight(0)
    fill(colorE)
    ellipse(eyeRX, 320, eyeSize, eyeSize);
    
    //mouth
    strokeWeight(lips)
    stroke(256, colorLg, colorLb)
    fill(colorE-30)
    ellipse(mouthX, mouthY, mouthWidth, mouthHeight);
    
    //eyes
    eyeSize = random(10, 30);
    
    //thing
    strokeWeight(0)
    fill(colorTHr, colorTHg, colorTHb)
    rect(thingX, thingY, thingWidth, thingHeight, 
    corner1/2, corner2/2, corner3/2, corner4/2);    
    
    //thing
    thingX = random(100, 300)
    thingY = random(75, 125)
    thingWidth = random(10, 35)
    thingHeight = random(10, 35)
}
 
function mousePressed() {
    //legs
    standing = random(0, 25)
    
    //arms
    armLength = random(0, 100)
    
    //face
    faceWidth = random(150, 180);
    faceHeight = random(130, 150);
    faceX = random(320, 350);
    faceY = random(240, 270);
    corner1 = random(0, 50)
    corner2 = random(0, 50)
    corner3 = random(0, 50)
    corner4 = random(0, 50)

    //eyeX
    eyeLX = random(380, 420);
    eyeRX = random(430, 470);
    
    //mouth
    mouthX = random(420, 430);
    mouthY = random(350, 360);
    mouthWidth = random(40, 60);
    mouthHeight = random(30,40);

    //lips
    lips = random(5, 10);

    //face color
    colorFg = random(180, 220);
    colorFb = random(75, 150);
    
    //eye color
    colorE = random(50, 200);
    
    //lips color
    colorLg = random(75, 125);
    colorLb = random(75, 125);
    
    //thing color
    colorTHr = random(200, 220);
    colorTHg = random(200, 220);
    colorTHb = random(230, 250);
    
    //background color
    colorBr = random(215, 256);
    colorBg = random(245, 256);

}