Category: Section C

sketch

//eye
var eyeSize = 15;
var outerEyeSize=40;


//mouth
var mouthWidth = 50;
var innerMouth = 30;

var mouthCorner3 = 15;
var mouthCorner4 = 20;


//face 
var faceWidth = 100;
var faceHeight = 175;

var faceCorner1 = 20;
var faceCorner2 = 15;
var faceCorner3 = 25;
var faceCorner4 = 40;

//color
var colorR = 50;
var colorG = 50;
var colorB = 50;

var colorR2 = 200;
var colorG2 = 200;
var colorB2 = 200;

var colorR3 = 200;
var colorG3 = 200;
var colorB3 = 200;


//eyebrow
var brow = 3;
var browAngle = 100;


 


function setup() {
    createCanvas(640, 480);
    textSize(12);
}
 
function draw() {
    background(255);
   
    //body
    strokeWeight(3);
    fill(colorR3,colorG3,colorB3);
    stroke(0);
    rectMode(CENTER);
    rect(150,300,150,200,40,40,0,0);

    //arms
    strokeWeight(3);
    noFill();
    stroke(0);
    line(100,400,110,270);
    line(200,400,190,270);

    //face
    fill(colorR2,colorG2,colorB2);
    stroke(85,242,149);
    rectMode(CENTER);
    rect(150, 150, faceWidth,  faceHeight, faceCorner1, faceCorner2,
        faceCorner3,faceCorner4);

    //mouth
    stroke(132,223,244);
    fill(250,147,247);
    rect(150, 200, mouthWidth, 50,2, 2,mouthCorner3,mouthCorner4);
   
    //left eyebrow
    stroke(0);
    strokeWeight(brow);
    strokeCap(ROUND);
    var eyeLX = 150 - faceWidth * 0.25;   
    line(eyeLX - 10, 100,eyeLX + 10,browAngle);

    //right eyebrow
    strokeWeight(brow);
    strokeCap(ROUND);
    var eyeRX = 150 + faceWidth * 0.25;
    line(eyeRX - 10, browAngle, eyeRX + 10, 100);

    //eyes
    fill(colorR,colorG,colorB);
    strokeWeight(0);
    var eyeLX = 150 - faceWidth * 0.25;
    var eyeRX = 150 + faceWidth * 0.25;
    ellipse(eyeLX, 150, eyeSize, eyeSize);
    ellipse(eyeRX, 150, eyeSize, eyeSize);

    //glasses
    noFill();
    stroke(0);
    strokeWeight(1);
    var eyeLX = 150 - faceWidth * 0.25;
    var eyeRX = 150 + faceWidth * 0.25;
    ellipse(eyeLX, 150, outerEyeSize, outerEyeSize);
    ellipse(eyeRX, 150, outerEyeSize, outerEyeSize);


    //SPEECH bubble
    noStroke();
    fill(colorR,colorG,colorB);
    triangle(230,100,250,100,200,180);
    ellipse(250,100,100,50);

    //text
    fill(255);
    text("wasssup", 280, 145, 100, 100);




}
 
function mousePressed() {
    faceWidth = random(80, 140);
    faceHeight = random(170, 200);
    mouthWidth = random(30, 70);
    innerMouth = random(10, 40);

    //eye
    eyeSize = random(10, 20);
    outerEyeSize = random(30,50);
    
    //face corners
    faceCorner1 = random(0,50);
    faceCorner2 = random(10,50);
    faceCorner3 = random(10,50);
    faceCorner4 = random(10,50);

    //mouth corners
    mouthCorner3 = random(5,30);
    mouthCorner4 = random(5,30);

    //color
    colorR = random(20,100);
    colorG = random(20,100);
    colorB = random(20,100);

    colorR2 = random(150,255);
    colorG2 = random(150,255);
    colorB2 = random(150,255);

    colorR3 = random(50,200);
    colorG3 = random(50,200);
    colorB3 = random(50,200);

    //brow
    brow = random(1,5);
    browAngle = random(95 - 5,105);


}

I thought the most interesting part of this project was how relationships  between objects came into play. What this means is that the designer has to take into account objects moving relative to other objects that are also moving. The most interesting part was also the hardest for me in that I had some trouble staying on top of all the information I was trying to portray. Once I got the main framework down it was really satisfying every additional shape I made.

For this project, I started with a very complicated idea. I wanted to create three faces that would all have similar randomly changing variables that could flash around the screen like random lights.

However, I soon realized this would just be a lot of work and my code kept getting longer and longer with more and more variables to the point that I started confusing myself. In the end, I decided to just simplify my concept into one face with simple variables that could change.

sketch

var hairWidth = 160;
var hairHeight = 135;
var faceWidth = 130;
var faceHeight = 110;
var mouthHeight = 15;
var mouthWidth = 15;

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

  }


function draw() {
	 background(245, 235, 230);
	
	//blue hair
	strokeWeight(10);
	stroke(172, 216, 242);
	fill(180, 225, 255);
	rectMode(CENTER);
	rect(width/2, height/2, hairWidth, hairHeight, 20);
	noStroke();
	fill(250, 218, 190); //face
	rect(width/2, height/2 + 13, faceWidth, faceHeight, 20);
	fill(180, 225, 255); //bangs
	arc(width/2 + hairWidth/2 - 5, height/2 - 50, hairWidth*(7/5), 100, PI/2, PI, PIE);
	arc(width/2 - hairWidth/2 + 5, height/2 - 50, hairWidth*(2/3), 90, 0, PI/2, PIE);
	strokeWeight(3); //eyes
	stroke(255);
	fill(188, 235, 203);
	ellipse(width/2 - faceWidth/4, height/2 + 15, 20, 20);
	ellipse(width/2 + faceWidth/4, height/2 + 15, 20, 20);
	noStroke(); //mouth
	fill(231, 90, 124);
	ellipse(width/2, height/2 + 35, mouthWidth, mouthHeight);
 
}


function mousePressed(){
	hairWidth = random(160, 250);
	hairHeight = random(135, 225);
	faceWidth = random(130, 220);
	faceHeight = random(110, 100);
	mouthWidth = random(15, 30);
	mouthHeight = random(15, 30);
}

afukuda_project02_javaScript

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | 02-VariableFaces
 */ 

var r01, g01, b01;      // vase color 

var eyeSize = 20;       // variables related to eyes 
var coordEyeX = 400;
var coordEyeY = 250;

var cheekSize = 20;     // variables related to cheeks 
var coordCheekX = 420;
var coordCheekY = 300;

var widthMouth = 20;    // variables related to mouth 
var heightMouth = 20; 
 
// coordinates for bezier curve 
var coordX1 = 490;      // x-coordinate of vertex 
var coordY1 = 100;      // y-coordinate of vertex 
var coordX2 = 500;      // x-coordinate of first control point of bezier curve 
var coordY2 = 240;      // y-coordinate of first control point of bezier curve 
var coordX3 = 450;      // x-coordinate of second control point of bezier curve 
var coordY3 = 300;      // y-coordinate of second control point 
var coordX4 = 400;      // x-coordinate of second anchor point 
var coordY4 = 380;      // y-coordinate of second anchor point 

function setup() {
    createCanvas(640, 480); // set canvas size 
    r01 = random(255);
    g01 = random(255);
    b01 = random(255);
} 

function draw () {
    background (209, 226, 244);

    noStroke();
    fill(r01, g01, b01, 150);
    beginShape();                                                                                       // create vase geometry 
        vertex (coordX1, coordY1);                                                                      // starting vertex of right curve of vase
        bezierVertex (coordX2, coordY2, coordX3, coordY3, coordX4, coordY4);                            // right curve of vase         
        vertex ((640-(coordX4)), coordY4);                                                              // starting vertex of left curve of vase                                    
        bezierVertex ((640-(coordX3)), coordY3, (640-(coordX2)), coordY2, (640-(coordX1)), coordY1);    // left curve of vase
        vertex (coordX1, coordY1);                                                                      // finishing vertex of vase
    endShape();

    fill(100);
    ellipse (coordEyeX, coordEyeY, eyeSize, eyeSize);                                                   // right eye 
    ellipse ((640-coordEyeX), coordEyeY, eyeSize, eyeSize);                                             // left eye 

    fill(249, 200, 203);
    ellipse (coordCheekX, coordCheekY, cheekSize, cheekSize);                                           // right cheek 
    ellipse ((640-coordCheekX), coordCheekY, cheekSize, cheekSize);                                     // left cheek 

    stroke(100);
    noFill();
    arc (320, 320, widthMouth, heightMouth, 0, PI);                                                    // mouth

    stroke(135, 109, 82);                                                                              // plant branch 
    strokeWeight (4);
    arc (400, coordY1, 150, 150, PI, 0.2*HALF_PI);

    noStroke();                                                                                       // plant leaves
    fill(197, 217, 166);
    arc (500, coordY1, 30, 15, 0, PI); 
    arc (500, coordY1, 30, 15, PI, 0); 

    arc (440, (coordY1-20), 30, 15, 0, PI); 
    arc (440, (coordY1-20), 30, 15, PI, 0); 

    arc (485, (coordY1-45), 30, 15, 0, PI); 
    arc (485, (coordY1-45), 30, 15, PI, 0); 

}

function mousePressed() {
    // when the user clicks, these variables are reassigned random values

    coordX1 = random(400, 490);           // all: varies curvature of vase 
    coordY1 = random(110, 150);           // except for: varies height of vase 
    coordX2 = random(490, 540);
    coordY2 = random(100, 240);
    coordX3 = random(400, 540);
    coordY3 = random(200, 370);
    coordX4 = random(380, 420);   

    r01 = random(255);                    // selects random color for vase 
    g01 = random(255);
    b01 = random(255);

    eyeSize = random(10, 25);             // varies size of eyes 
    coordEyeX = random(350, 420);         // varies location of eyes (x-axis)
    coordEyeY = random(200, 260);         // varies location of eyes (y-axis)

    cheekSize = random(10, 20);           // varies size of cheeks
    coordCheekX = random(380, 420);       // varies location of cheeks (x-axis)
    coordCheekY = random(280, 300);       // varies location of cheeks (y-axis)
  
    widthMouth = random (10, 30);               // varies width of mouth 
    heightMouth = random (10, 30);              // varies height of mouth 

}


    
 

For this project I decided to base the variable faces on potted plants. There are several variables – the height of the vase, the curvature of the vase, the color of the vase, the size & distance of the eyes, the size & distance of the cheeks, and lastly the size of the mouth. The biggest thing I noticed while I was coding this graphic was that I could achieve the same visuals by using only half of the variables. Since the pot is symmetrical, I could simply use the negative x-coordinates of the right side of the pot for the left side of the vase, making my code much simpler and cleaner

project-02

//Karina Chiu
//karinac@andrew.cmu.edu
//Section C
//Project-02

var faceWidth = 360
var faceHeight = 320
var leftX = 200   //left-eye-pupil
var leftY = 290   //left-eye-pupil
var rightX = 300  //right-eye-pupil
var rightY = 290  //right-eye-pupil
var beakX = 220   //position of beak
var beakY = 360	  //position of beak
var comb = 110    //height of comb

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

function draw() {
	background(192,183,227);

	//head
	stroke(0);
	strokeWeight(5);
	fill(245,202,52);
	ellipse(250,300,faceWidth,faceHeight);

	//left-outer-eye
	strokeWeight(3);
	fill(250);
	ellipse(190,290,110,110);

	//right-outer-eye
	fill(250);
	ellipse(310,285,140,140);

	//left-pupil
	fill(0);
	ellipse(leftX,leftY,10,10);

	//right-pupil
	fill(0);
	ellipse(rightX,rightY,10,10);

	//beak
	fill(235,143,31);
	triangle(beakX,beakY,250,440,500-beakX,beakY);

	//chicken-comb
	fill(250,0,0);
	triangle(180,comb,240,220,300,comb);
}


function mousePressed() {
	
	//when mouse is clicked, random values are
	//assigned to the variables

	faceWidth = random(300,450);
	faceHeight = random(290,370);
	leftX = random(150,220);
	leftY = random(255,330);
	rightX = random(270,350);
	rightY = random(245,340);
	beakX = random(200,220);
	beakY = random(360,370);
	comb = random(80,110);

}

In my childhood, I loved drawing cartoon animals with exaggerated eyeballs, so I decided to try drawing them in this project. It took me a few times to write the ‘random’ code lines, but I eventually grasped the concept.