Category: Uncategorized

ssontag – Project 02 – Variable Faces

sketch

//box1 Variables
var box1W = 120;
var box1H = 170;
var box1X = 160;
var box1Y = 200;

//box2 Variables
var box2W = 60;
var box2H = 300;
var box2X = 110;
var box2Y = 35;

//box3 Variables
var box3W = 250;
var box3H = 90;
var box3X = 50;
var box3Y = 50;

//box4 Variables
var box4W = 200;
var box4H = 200;

//box5 Variables
var box5W = 40;
var box5H = 90;
var box5X = 200;
var box5Y = 60;

//box6 Variables

var box6W = 100;
var box6H = 10;
var box6X = 160;
var box6Y = 200;

//box7 Variables
var box7W = 30;
var box7H = 60;
var box7X = 57;
var box7Y = 150;

//box8 Variables
var box8W = 30;
var box8H = 60;
var box8X = 290;
var box8Y = 57;


//box9 Variables
var box9W = 60;
var box9H = 10;
var box9X = 40;
var box9Y = 100;


//box10 Variables
var box10W = 15;
var box10H = 15;
var box10X = 130;
var box10Y = 190;


//eye1 Variables
var eye1W = 50;
var eye1H = 80;

//eye2 Variables
var eye2W = 30;
var eye2H = 24;



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

function draw() {
    background(210);

//box1
    strokeWeight(0);
    fill(213, 180, 118);
    rect(box1X, box1Y, box1W, box1H);

//box2
    strokeWeight(0);
    fill(222, 184, 135);
    rect(box2X, box2Y, box2W, box2H);

//box3
    strokeWeight(0);
    fill(139, 69, 19);
    rect(box3X, box3Y, box3W, box3H);
    
//box4 
    strokeWeight(0);
    fill(210, 180, 140);
    rect(width / 6, height / 6, box4W, box4H);

//box5
    strokeWeight(0);
    fill(205, 133, 63);
    rect(box5X, box5Y, box5W, box5H);

//box6
    strokeWeight(0);
    fill(139, 69, 19);
    rect(box6X, box6Y, box6W, box6H);

//box7
    strokeWeight(0);
    fill(255, 222, 173);
    rect(box7X, box7Y, box7W, box7H);

//box8
    strokeWeight(0);
    fill(255, 222, 173);
    rect(box8X, box8Y, box8W, box8H);

//eye1
    strokeWeight(0);
    fill(0);
    ellipse(160, 55, eye1W, eye1H);

//eye2
    strokeWeight(0);
    fill(0);
    ellipse(260, 90, eye2W, eye2H);

//box9
    strokeWeight(0);
    fill(218, 165, 32);
    rect(box9X, box9Y, box9W, box9H);

//box10
    strokeWeight(0);
    fill(222, 184, 135);
    rect(box10X, box10Y, box10W, box10H);

}

function mousePressed() {
//when mouse is 
//box1 Variables
    box1W = random(110, 130);
    box1H = random(160, 180);
    box1X = random(155, 165);
    box1Y = random(195, 205);

//box2 Variables
    box2W = random(50, 70);
    box2H = random(290, 310);
    box2X = random(105, 115);
    box2Y = random(30, 40);

//box3 Variables
    box3W = random(240, 260);
    box3H = random(80, 100);
    box3X = random(45, 55);
    box3Y = random(45, 55);

//box4 Variables
    box4W = random(190, 210);
    box4H = random(190, 210);

//box5 Variables
    box5W = random(30, 50);
    box5H = random(80, 100);
    box5X = random(195, 205);
    box5Y = random(55, 65);


//box6 Variables
    box6W = random(90, 110);
    box6H = random(1, 20);
    box6X = random(155, 165);
    box6Y = random(195, 205);

//box7 Variables
    box7W = random(20, 40);
    box7H = random(50, 70);
    box7X = random(52, 63);
    box7Y = random(145, 155);

//box8 Variables
    box8W = random(20, 40);
    box8H = random(50, 70);
    box8X = random(285, 295);
    box8Y = random(52, 63);


//box9 Variables
    box9W = random(50, 70);
    box9H = random(1, 20);
    box9X = random(35, 45);
    box9Y = random(95, 105);

//box10 Variables
    box10W = random(5, 25);
    box10H = random(5, 25);
    box10X = random(125, 135);
    box10Y = random(185, 195);

//eye1 Variables
    eye1W = random(45, 55);
    eye1H = random(75, 85);

//eye2 Variables
    eye2W = random(25, 35);
    eye2H = random(19, 29);
}

When we were assigned with the task to make our faces from last week variable I continued with the theme of the cubist style. Cubism typically abstracts motion into simple geometric shapes. By the click of the mouse the face comes alive and the geometries jitter within their respective areas. My goal was to make the viewer uncomfortable while clicking the screen.

ziningy1 – Section C- Project 02- Variable Face

ziningy1-variable face



 
//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-02 variable face 


//variables 

//face 
var faceWidth=90;
var fX=185
var fY=190

//mouth
var mWidth=120
var mHeight=40 

//head 
    var aX=220 
    var aY=190
    var bX=320
    var bY=180
    var cX=350
    var cY=100
    var dX=230
    var dY=60
    var eX=170
    var eY=120
    var gX=180
    var gY=190

     //head 

    var aX=220 
    var aY=190
    var bX=320
    var bY=180
    var cX=350
    var cY=100
    var dX=230
    var dY=60
    var eX=170
    var eY=120
    var gX=180
    var gY=190

    //eye
    var eyeSize=32;
    var eyeX=197;
    var eyeY=135;

    //nose 
    var Nax=180
    var Nay=160
    var Nbx=173
    var Nby=193
    var Ncx=192
    var Ncy=200


function setup() {
    createCanvas(500, 350);
}
 
function draw() {
    background(50);

     //face
    noStroke();
    fill(120);
    
   
    rect(fX,fY,faceWidth,faceWidth-25,10);

    fill(50);
    noStroke();

    triangle(fX+faceWidth,fY+30,fX+faceWidth,fY+faceWidth-25,fX+30,fY+faceWidth-25,50);


    //mouth
    

    noStroke
    fill(30)
    arc(fX,fY+22,mWidth,mHeight,0, HALF_PI);

   
    //head 
    noStroke();
    fill(175);

    beginShape();
    curveVertex(0, 0);
    
    curveVertex(aX, aY);
    curveVertex(bX,bY)
    curveVertex(cX, cY);
    curveVertex(dX, dY);
    curveVertex(eX, eY);
    curveVertex(gX, gY);
    
    
    curveVertex(0, 0);
    endShape();


     //eye
    noStroke; 
    fill(120)
    
    ellipse(eyeX,eyeY,eyeSize,eyeSize+10);

    fill(220)

    ellipse(random(-4,4)+eyeX,random(-6,6)+eyeY+5,eyeSize-16,eyeSize-15); 

   

    //nose 
    
    noStroke;
    fill(250);
    triangle(Nax,Nay,Nbx,Nby+random(-10,10),Ncx,Ncy);




    }



function mousePressed() {

    //head

    aX=random(190,240);
    aY=random(180,210);

    bX=random(280,360);
    bY=random(160,200);
    
    cX=random(320,380);
    cY=random(50,120);

    dX=random(210,250);
    dY=random(40,80);
    eX=random(150,210);
    eY=random(110,140);
    gX=random(150,190);
    gY=random(170,200);

    //face

    faceWidth=random(80,110);
    fX=random(160,200);
    fY=random(180,220);

    //mouth 
    mHeight=random(10,80);
    mWidth=random(40,160);

    //eye
    eyeSize=random(16,60);
    eyeX=random(189,207);
    eyeY=random(125,145);

    //nose 

    Nax=random(175,185);
    Nay=random(150,170);
    Nbx=random(45,173);
    Nby=random(153,213);
    Ncx=random(187,197);
    Ncy=random(190,210);







}

When I first think of the assignment making the variable face, I had this idea of making this funky skull that can deform through clicking. The function itself is not difficult to learn, yet how to set the variables correctly took me some time to get used to. I also focused on how I would like the skull head to deform, such as the I designed the nose to transform longer and shorter instead of up and down. I also found the method of using “random’ to make the shaking shapes is pretty effective. The shaking eyes make the skull face funnier and less static.

ashleyc1-Section C-Project-02-Variable-Face

sketch

//Ashley Chan   
//Section C
//ashleyc1@andrew.cmu.edu
//Assignment-02-A


var cupShape = 260;
var cupWidth = 200;
var cupBrim = 50;
var liquidWidth = 200;
var liquidHeight = 10;
var randomInteger = 1.25;
var eyeSize = 50;
var eyeX = 100;
var pupilLX = 285;
var pupilLY = 295;
var pupilRX = 390;
var pupilRY = 295;
var drinkColor = 100;
var steamMvt = 270;
var mouthX = 320;

 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(242, 234, 188);

//handle
    noStroke();
    fill(255);
    ellipse(cupWidth + 250, 310, 150, 100);

    fill(242, 234, 188);
    ellipse(cupWidth + 250, 310, 100, 50);

//cup body

    fill(255);
    noStroke();
    rect(cupWidth , 200, (cupWidth * randomInteger), 240, 40, 40, cupShape, cupShape);

//cup brim

    fill(220);
    ellipse(cupWidth/2 * 3.25, 220, 200, cupBrim);
    
   
//drink
//when mouse clicked, liquid color will change and adjust to new shape of cup

    fill(drinkColor, 49, 30);
    ellipse(cupWidth/2 * 3.25, 220, liquidWidth - 20, cupBrim - 10);

//eyes
//when mouse clicked, width of cup changes

     fill(0);
     var eyeX = cupWidth/2;
     ellipse(eyeX*2.75, 300, eyeSize, eyeSize);
     ellipse(eyeX*3.75, 300, eyeSize, eyeSize);

//pupils
//when mouse clicked, pupils go crazy

     fill(255);
     stroke(5);
     ellipse(pupilRX, pupilRY, 15, 15);
     ellipse(pupilLX, pupilLY, 15, 15);

//mouth

    push();
    noFill();
    stroke(50);
    arc(cupWidth + 125, 380, 50, 10, 0, PI);
    pop();

//blush

    fill(249, 210, 243);
    noStroke();
    ellipse(eyeX + 175, 330, 50, 20);
    ellipse(eyeX + 275, 330, 50, 20);

//steam

    noFill();
    stroke(0);
    push();
    translate((cupWidth/2) - 80, 0);
    bezier(260, 180, steamMvt, 150, 230, 0, 300, 30);
    pop();

    push();
    translate((cupWidth/2) - 20, 10);
    bezier(260, 180, steamMvt, 150, 230, 0, 300, 30);
    pop();

    push();
    translate((cupWidth/2) + 50, 0);
    bezier(260, 180, steamMvt, 150, 230, 0, 300, 30);
    pop();


}
 
function mousePressed() {
 
    cupShape = random(30, 80);
    cupWidth = random(200, 210);
    cupBrim = random(20, 50);
    liquidWidth = random(170, 200);
    liquidHeight = random(20, 30);
    randomInteger = random(1.2, 1.4);
    drinkColor = random(100, 200);
    steamMvt = random(270, 300);
    eyeSize = random(30, 70);
    pupilLX = random (270, 295);
    pupilLY = random(290, 305);
    pupilRX = random(380, 390);
    pupilRY = random(290, 310);


}

Initially, I didn’t know what face I wanted to create so I drew the first thing I saw at the time, which was a poster of a coffee cup in Morewood Gardens. Although I’m not particularly happy with my final result because I wanted to add additional elements that didn’t work out, I’m still proud that, while creating this, I began developing the ability to troubleshoot and understand where to find the problem in my code whenever the index revealed something I wasn’t intending.

akluk – section A – project-02 – VariableFaces

sketch
It was a fun and exciting challenge to think about how a face could change and randomize.

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthshape = 0;
var eye_diff = 0;
var pupilSize = 10;
var noseType = 1;
var noseHeight = 14;
var noseWidth = 10;
var skin_color = 255;
var selector = 0;

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);
    fill(skin_color);
    var pink = color(242,120,130);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = (width / 2 - faceWidth * 0.3) + eye_diff;
    var eyeRX = width / 2 + faceWidth * 0.3 - eye_diff;
    var mouthHeight = (height/2) + faceHeight/4;

    //drawing eyes
    fill(255);
    ellipse(eyeLX, height * 0.45, eyeSize, eyeSize);
    ellipse(eyeRX, height * 0.45, eyeSize, eyeSize);

    //drawing pupils
    fill(0);
    ellipse(eyeLX, height * 0.45, pupilSize, pupilSize);
    ellipse(eyeRX, height * 0.45, pupilSize, pupilSize);

    //drawing mouth
    fill(pink);
    if (mouthshape == 0) {
    	ellipse(width/2, mouthHeight,faceWidth/3,faceHeight/4);
    }
    else if (mouthshape == 1) {
    	arc(width/2, mouthHeight, faceWidth/3, faceWidth/3, 0, PI,CHORD);
    }
    else if (mouthshape == 2) {
    	arc(width/2, mouthHeight + faceWidth/6, faceWidth/3, faceWidth/3, PI, 0,CHORD);
    } 
    else {
    	noFill();
    	arc(width/2, mouthHeight + faceWidth/10, faceWidth/10, faceWidth/10, 0.785, -HALF_PI);
    	arc(width/2, mouthHeight, faceWidth/10, faceWidth/10, 0.785, -HALF_PI);
    }

    //drawing nose 
    noFill();
    if (noseType == 0){
    	triangle(width/2,height/2,width/2-noseWidth,height/2+noseHeight,width/2+noseWidth,height/2+noseHeight)
    }
    else if (noseType == 1){
    	ellipse(width/2,height/2,noseWidth,noseHeight);
    }
    else{
    	line(width/2,height/2+noseHeight, width/2,height/2-noseHeight);
    	line(width/2,height/2+noseHeight,width/2+noseWidth,height/2+noseHeight);
    }

}
 
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.
    eye_type = random([0,1,2]);
    eye_diff = random(-15,15);
    faceWidth = random(180, 300);
    faceHeight = random(180, 300);
    eyeSize = random(30, 60);
    pupilSize = random(10,30);
    mouthshape = random([0,1,2,3]);
    noseType = random([0,1,2]);
    noseWidth = random(10,20);
    noseHeight = random(12,28);    //mouthshape = random(-1,2);
    selector = random([0,1,2,3,4]);
    if (selector == 0){
    	skin_color = color(255,205,148);
    }
    else if (selector == 1){
    	skin_color = color(86,46,25);
    }
    else if (selector == 2){
    	skin_color = color(255,255,255);
    }
    else if (selector == 3){
    	skin_color = color(255,227,159);
    }
    else {
    	skin_color = color(30,144,255);
    }


}

cduong-Project02-Variable Faces-SectionD

project02variablefaces

/*
Name: Colleen Duong
Class Section: D; 9:30AM
Email: cduong@andrew.cmu.edu
Project-02-Variable Faces
*/

//List of Variables that are used for the Front Character
var eyeSize = 20;
var faceWidth = 200;
var faceHeight = 200;
var Blush = 60;
var Mouth = 30;
var Sprout = 30;
var BodyShake = 300;

//List of Variables for the background Characters
var ShadowPosseHead = 100;
var ShadowPosseBody = 200;
var ShadowBack = 0;
var ShadowMiddle = 30;
var ShadowFront = 60;


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

function draw() {
    background(137, 0, 0);
    noStroke();

    //Stalkers Body (Left/Black). The variables will make the shapes move left and right frequently
    fill(ShadowBack);
    ellipse(ShadowPosseBody+80, 450, ShadowPosseHead, ShadowPosseHead);
    ellipse(ShadowPosseBody+130, 450, ShadowPosseHead, ShadowPosseHead);
    ellipse(ShadowPosseBody+150, 420, ShadowPosseHead, ShadowPosseHead);
    ellipse(ShadowPosseBody-100, 450, ShadowPosseHead, ShadowPosseHead);
    ellipse(ShadowPosseBody-200, 450, ShadowPosseHead, ShadowPosseHead);

    //Stalkers Body (Left/DarkGrey). The variables will make the shapes move left and right frequently
    fill(ShadowMiddle);
    ellipse(ShadowPosseBody, 350, ShadowPosseHead, ShadowPosseHead);
    rect(ShadowPosseBody, 380, 20, 40, 10);
    arc(ShadowPosseBody+10, 440, 70, 70, PI, 0);
    rect(ShadowPosseBody-30, 430, 75, 70, 10);
    ellipse(ShadowPosseBody-100, 370, ShadowPosseHead, ShadowPosseHead);
    rect(ShadowPosseBody-100, 400, 20, 40, 10);
    arc(ShadowPosseBody-90, 460, 70, 70, PI, 0);
    rect(ShadowPosseBody-125, 460, 70, 70);

    //Stalkers Body (Left/LightGrey). The variables will make the shapes move left and right frequently
    fill(ShadowFront);
    ellipse(ShadowPosseBody-50, 400, ShadowPosseHead, ShadowPosseHead);
    rect(ShadowPosseBody-50, 430, 20, 40, 10);
    arc(ShadowPosseBody-40, 490, 70, 70, PI, 0);
    rect(ShadowPosseBody-80, 480, 75, 70, 10);
    ellipse(ShadowPosseBody+80, 400, ShadowPosseHead, ShadowPosseHead);
    rect(ShadowPosseBody+80, 430, 20, 40, 10);
    arc(ShadowPosseBody+90, 490, 70, 70, PI, 0);
    rect(ShadowPosseBody+60, 480, 75, 70, 10);
    ellipse(ShadowPosseBody-150, 400, ShadowPosseHead-10, ShadowPosseHead-10);
    rect(ShadowPosseBody-150, 430, 20, 40, 10);
    arc(ShadowPosseBody-140, 485, 70, 70, PI, 0);
    rect(ShadowPosseBody-170, 480, 75, 70, 10);

    //Stalkers Body (Right/Black). The variables will make the shapes move left and right frequently
    fill(ShadowBack);
    ellipse(ShadowPosseBody+300, 450, ShadowPosseHead, ShadowPosseHead);
    ellipse(ShadowPosseBody+400, 450, ShadowPosseHead+10, ShadowPosseHead+10);
    ellipse(ShadowPosseBody+200, 450, ShadowPosseHead, ShadowPosseHead);

    //Stalkers Body (Right/DarkGrey). The variables will make the shapes move left and right frequently
    fill(ShadowMiddle);
    ellipse(ShadowPosseBody+300, 350, ShadowPosseHead, ShadowPosseHead);
    rect(ShadowPosseBody+300, 380, 20, 40, 10);
    arc(ShadowPosseBody+310, 440, 70, 70, PI, 0);
    rect(ShadowPosseBody+280, 430, 75, 70, 10);
    ellipse(ShadowPosseBody+200, 370, ShadowPosseHead, ShadowPosseHead);
    rect(ShadowPosseBody+200, 400, 20, 40, 10);
    arc(ShadowPosseBody+210, 460, 70, 70, PI, 0);
    rect(ShadowPosseBody+180, 445, 70, 70);

    //Stalkers Body (Right/LightGrey). The variables will make the shapes move left and right frequently
    fill(ShadowFront);
    ellipse(ShadowPosseBody+250, 400, ShadowPosseHead, ShadowPosseHead);
    rect(ShadowPosseBody+250, 430, 20, 40, 10);
    arc(ShadowPosseBody+260, 490, 70, 70, PI, 0);
    rect(ShadowPosseBody+230, 480, 75, 70, 10);
    ellipse(ShadowPosseBody+380, 400, ShadowPosseHead, ShadowPosseHead);
    rect(ShadowPosseBody+380, 430, 20, 40, 10);
    arc(ShadowPosseBody+390, 490, 70, 70, PI, 0);
    rect(ShadowPosseBody+360, 480, 75, 70, 10);

    //Face Shape. Variables makes the face change size.
    fill(256);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //Blush. Variables makes blush change size in correlation with the eyes.
    var eyeLX = width / 2.1 - faceWidth * 0.25;
    var eyeRX = width / 2.1 + faceWidth * 0.25;
    fill(255, 114, 129);
    ellipse(eyeLX, 270, Blush, Blush);
    ellipse(eyeRX+20, 270, Blush, Blush);

    //Eyes. Variables makes blush change size in correlation with the head.
    fill(0);
    rect(eyeLX, height / 2.3, eyeSize, eyeSize*2, 10);
    rect(eyeRX, height / 2.3, eyeSize, eyeSize*2, 10);

    //Mouth. Variable makes mouth change size.
    fill(0);
    arc(310, 290, Mouth, Mouth, PI, 0);

    //Sprout. Variable makes sprout grow in height
    fill(201, 208, 126);
    ellipse(290, 100, 50, 30);
    ellipse(340, 100, 50, 30);
    rect(305, 100, 20, Sprout+30, 10);

    //Body. Variable makes body move right to left to make it look as though it's shaking.
    fill(256);
    rect(BodyShake+5, 310, 35, 50, 10);
    arc(BodyShake+30, 390, 100, 100, PI, 0);
    rect(BodyShake-20, 385, 100, 100);
}

function mousePressed() {
    faceWidth = random(180, 220);
    faceHeight = random(180, 220);
    eyeSize = random(10, 30);
    Blush = random(50, 70);
    ShadowPosseBody = random(190, 210);
    Mouth = random(10, 50);
    Sprout = random(20, 30);
    ShadowBack = random(0, 20);
    ShadowMiddle = random(30, 50);
    ShadowFront = random(60, 80);
    BodyShake = random(295, 305);

}

For my code I wanted to draw a character that I tend to doodle a lot.

Initially I wanted to make the sprout look evil and scary, but after coding it I realized it wasn’t really possible with it’s basic characteristics, which were ellipse eyes, blush, and a big sprout coming out of its head. So after coding the sprout and making the facial features and the sprout move I decided to continue with my “evil and scary” idea and made these shadow-like creatures behind my sprout character. Initially I was going to just leave them there but I wanted them to move a little as if they were moving towards the sprout character.

At this point I thought I was done but I thought having the sprout character’s body stay still made the entire picture look a bit static when it was clicked on, so I decided to make it look as though the sprout character’s body was shaking as the shadows behind it were coming after it.

My ideas did not really come in an orderly manner so my code was a bit difficult to work with and a bit unorganized, but hopefully it is easier to read after I added some comments to it.

manuelr – project2 – face

sketch

//Manuel Rodriguez
//Section B, 10:30am
//manuelr@andrew.cmu.edu
//project-02


var fatFace = 1;
var lankyFace = 1;
var reyeLength = 10;
var leyeLength = 20;
var openM = 40;
var narrowM = 3;
var posX = 1;
var posY = 1;
var c1=230;
var c2 = 100;
var c3 = 200;

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

function draw() {

    //face shadow
    fill(c1,c2,c3);
    noStroke();
    //strokeWeight(2);
    beginShape();
    curveVertex(125,125*lankyFace);
    curveVertex(123,123);
    curveVertex(80*fatFace,height/2+10);
    curveVertex(90,height-110);
    curveVertex(150,height-140);
    curveVertex(190*fatFace,height/2+10);
    curveVertex(120,120);
    curveVertex(125,125);
    endShape();

    //shape face
    noFill();
    stroke(0);
    strokeWeight(1);
    beginShape();
    curveVertex(120,120*lankyFace);
    curveVertex(120,120*lankyFace);
    curveVertex(110*fatFace,height/2);
    curveVertex(130,height-100);
    curveVertex(140,height-150);
    curveVertex(155*fatFace,height/2);
    curveVertex(120,120);
    curveVertex(120,120*lankyFace);
    endShape();

    //shape face 2
    noFill();
    stroke(100);
    strokeWeight(1);
    beginShape();
    curveVertex(125,125*lankyFace);
    curveVertex(123,123);
    curveVertex(105*fatFace,height/2+10);
    curveVertex(135,height-110);
    curveVertex(138,height-140);
    curveVertex(155*fatFace,height/2+10);
    curveVertex(125,125*lankyFace);
    curveVertex(125,125);
    endShape

    //stroke3
    noFill();
    stroke(220);
    strokeWeight(3);
    beginShape();
    curveVertex(100,100);
    curveVertex(130,130);
    curveVertex(105,height/2+40);
    curveVertex(165,height-100);
    curveVertex(178,height-120);
    curveVertex(155,height/2+9);
    curveVertex(140,125);
    curveVertex(125,115);
    endShape();


    //eyes
    noFill();
    //lefteye
    stroke(0);
    strokeWeight(1);
    ellipse(120*posX,height/2*posY,5,leyeLength);

    //rightteye
    stroke(0);
    strokeWeight(1);
    ellipse(135*posX,height/2*posY,5,reyeLength);

    //eyebags
    stroke(0);
    strokeWeight(1);
    line(110*posX,((height/2)+20)*posY, 115*posX, ((height/2)+20)*posY);
    line(135*posX,((height/2)+10)*posY, 145*posX, ((height/2)+10)*posY);


    //mouth
    stroke(0);
    strokeWeight(1);
    ellipse(127*posX,height/2*posY+70,narrowM,openM);
}

function mousePressed(){
    fatFace = random(-1.2,1.5);
    lankyFace = random(-1.2,1.8);
    c1=random(100,250);
    reyeLength = random(0,100);
    leyeLength = random(0,60);
    openM = random(0,40);
    narrowM = random(0,20);
    posX = random(1.0,1.01);
    posY = random(1.0,1.01);
    c2 = random(100,200);
    c3 = random(100,200);
    clear();
 

}

I wanted to create a different type of face, some sort of simple – abstract art that reminds of a face but don’t respond to any proportions nor reality. Just departing from “hand-drawing” style, I started drawing different line shapes and then added the colour independent from the outlines. Each outline has its own independency and they do not relate to other face features such as eyes, mouth or eye-bags.

monicah1-project-02

sketch


var eyeSize = 20;
var circWidth = 160;
var circHeight = 200;
var earYcord = 190
var midx = 320 //x cordinate middle of the face
var midy = 200 //y cordinate middle of the face



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

function draw() {
	background (250,65,180);
	noStroke (0);
	fill (250,185,185);
	ellipse (midx,midy,circWidth,circHeight);
	ellipse (midx-80,earYcord,circWidth-120,circHeight-120);
	ellipse (midx+80,earYcord,circWidth-120,circHeight-120);
	fill (230,50,50);
	arc (midx,midy+50,50,80,0,PI+QUARTER_PI,OPEN);
	fill (0);
	ellipse (midx-18,midy+33,circWidth-145,circWidth-145);// mole

	fill (130,10,170);
	ellipse (midx-18,midy-30,circWidth-94,circWidth-94);//dark circle
	
    fill (250);
	ellipse (midx-18,midy-30,circWidth-120,circWidth-120);// left eyeball white
	ellipse (midx+18,midy-31,circWidth-110,circWidth-110);

	fill (0);
	ellipse (midx+7,midy-25,circWidth-130,circWidth-130);// right eyeball 
	ellipse (midx-16,midy-25,circWidth-130,circWidth-130);// left eyeball 
}

function mousePressed(){
	circWidth = random(100,200);
	circHeight = random(150,300);
	eyeSize = random(10,30);
}

I tried to use as much same variables as I can to simplify the code. I found it fun to use one x,y point to base on and finish the variable faces.

 

ctv-Project-02-someFaces

ctv-project-02 

//Ty Van de Zande
//Section B @ 10:30 AM
//ctv@andrew.cmu.edu
//Project-02



//document variables
var ht = 480;
var wd = 640;
var cenY = ht / 2;
var cenX = wd / 2;



//setting up the document
function setup() {
    createCanvas(wd, ht);
    frameRate(1);
}


function draw() {
background(230);    
    
var r = random(400);

//variables for heads
var headW = random(r);
var headH = random(r);

//variables for eyes
var eyePosX = random(headW);
var eyePosY = random(headH);
var eyeSize = random(50);

//variables for brows
var bPosX = random(r);
var bPosY = random(200);
var bTop = bPosY + random(r);
var bLength = random(r);
var bRot = random(r);

//mouth
var mX = random(r);
var mY = random(r);
var mTop = random(r);
var mBottom = random(r);
    
    ellipseMode(CENTER);
    rectMode(CENTER);
    fill(255);
    noStroke();
    
    //draws head
    ellipse(cenX, cenY, headW, headH);
    
    
    //daws eyes
    fill(100)
    noStroke();
    ellipse(cenX - eyePosX, cenY , eyeSize, eyeSize);
    ellipse(cenX + eyePosX, cenY , eyeSize, eyeSize);
    
    
    //draws mouth
    strokeWeight(5);
    stroke(120,0,0);
    beginShape();
    vertex(cenX-mX, cenY+mY);
    bezierVertex(cenX, cenY-mTop, cenX, cenY-mTop, cenX+mX, cenY+mY );
    bezierVertex(cenX+mX, cenY+mY, cenX, cenY-mBottom, cenX-mX, cenY+mY);
    endShape();
    
    
    //draws eyebrows
    
    p1 = {x: cenX-bLength, y: cenY - bPosY}, 
    p2 = {x: cenX-(bLength/2), y: cenY - bTop}, 
    p3 = {x: cenX, y:cenY - bPosY}
    
    p4 = {x: cenX+bLength, y: cenY - bPosY}, 
    p5 = {x: cenX+(bLength/2), y: cenY - bTop}, 
    p6 = {x: cenX, y:cenY - bPosY}
    
    noFill();
    strokeWeight(2);
    stroke(255, 150, 0);
    curve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
    curve(p4.x, p4.y, p4.x, p4.y, p5.x, p5.y, p6.x, p6.y);
    

}

For someFaces, I structured each component to act on the center point of the canvas. (Is there a better way to use the center point as a shape starting point?) A random number generator is included in the draw() function, and all of the components generate randos with that local rando as the ceiling. The eyes and head (or sometimes nose) always stays on the centerline of the y-axis. The frameRate() is set to 1 so the image refreshes to show a new face! the eyebrows are pretty crazy.

ljkim – project 02

sketch

/*Lois Kim
Section A
ljkim@andrew.cmu.edu
Project-02*/

var helmetWidth = 323;
var helmetHeight = 323;
var shieldWidth = 275;
var shieldHeight = 275;
var shieldOHeight = 275;
var shieldOWidth = 275;
var faceWidth =  178;
var faceHeight = 183;

//stars in sky
var star = {
  x: 100,
  y: 50
}

//color of stars
var col = {
  r: 255,
  g: 255,
  b: 255
}

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

function draw() {
  //background color
  background("#495C7C");
  
  //random stars in background
  star.x = random(0,width);
  star.y = random(0,height);
  fill(col.r, col.g, col.b);
  noStroke();
  ellipse(star.x, star.y, 1, 1);
  
  //helmet
  fill("#B3B3B3");
  noStroke();
  ellipse(320, 240, helmetWidth, helmetHeight);
  
  //shield
  fill("#666666");
  noStroke();
  ellipse(320, 240, shieldWidth, shieldHeight);
  
  //shield outline
  stroke("#1A1A1A");
  strokeWeight(3);
  noFill();
  ellipse(310, 250,shieldOHeight, shieldOWidth);
  
  //antenna stick
  fill("#B3B3B3");
  noStroke();
  rect(297, 29, 7, 70);
  
  //antenna circle
  fill("#9E0421");
  noStroke();
  ellipse(300,25,25,25);
  
  //face
  fill("#EAD8A9");
  noStroke();
  ellipse(320, 250, faceWidth, faceHeight);
  
  //left eye
  fill("#333333");
  noStroke();
  ellipse(365,250,12,12);
  //right eye
  fill("#333333");
  noStroke();
  ellipse(275,250,12,12);
  
  //mouth
  fill("#B2542F");
  beginShape();
  curveVertex(292, 303);
  curveVertex(310, 311);
  curveVertex(326, 280);
  curveVertex(349, 314);
  curveVertex(356, 308);
  endShape();
  
}

function mousePressed() {
  helmetWidth = random (200, 400);
  helmetHeight = random (310, 400);
  shieldWidth = random (300, 290);
  shieldHeight = random (350, 240);
  shieldOHeight = random (200, 430);
  shieldOWidth = random (290, 300);
  faceWidth = random (150, 200);
  faceHeight = random (100, 200);
}

I wanted to do an astronaut as my project this week. I attempted to add a stars generator in the background (as seen in my code) – however it would not allow my random generator for the face to start fresh. It would over draw what was existing before. Although I had fixed that issue – the star generator had disappeared. This is what it looked like with the stars:

Before I begin any project I always start in adobe illustrator and this always helps visualize projects.

dayoungl – LookingOutwards02

Kyuha Shim’s Formation (2016) commissioned by Alliance Graphique Internationale (AGI).

I found this project on his portfolio website. Q is currently here at School of Design teaching communication design. Q is famous for creating his projects using the concept of data visualization. There isn’t a lot of description about this project other than “Commissioned by Alliance Graphique Internationale (AGI) for the Special Project Exhibition during AGI conference in Seoul 2016. A generative system that presents a critical view of responsive systems through multitudinous transitions and scaling of graphic forms.” What I found interesting about this work was that it transformed simple elliptical shapes into something more interesting by randomizing proportion and colour. I was also amazed by despite how random the colours are, no one colour seems unfitting.