Project 2 Variable Face! – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Instead of just varying the sizes of the elements of the faces I decided to go with having 2 or 3 set options for each element, then by assigning them numbers and calling them out via the random command, I could get a variation of faces from the set.

tjchen face

//tjchen
//15-104 section a

var face = 2;
var eyesright = 2;
var eyesleft = 2;
var eyesizeL = 5;
var eyesizeR = 5;
var hair = 2;
var mouth = 2;
function setup() {
    createCanvas(480, 600);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(220);
    rectMode(CENTER); 
    var cenx = (width/2);
    var ceny = (height/2);
    fill(255);
    rect(width/2, height/2, 50, 50);
    // short face
        if (face <=2 ){
            noStroke();
            rect(width/2, height/2, 80, 200, 40);
        } else if (face <= 3){
            noStroke();
            rect(width/2, height/2, 200, 200, 40);
        } else {
            noStroke();
            circle(width/2,height/2 ,200);
        }
    // eyes right
        if (eyesright<=2) {
            fill(0);
            circle((width/2)+ 10, (height/2)-20, eyesizeR);
        } else if(eyesright <=3) {
            fill(0);
            circle((width/2)+ 10, ((height/2)+ 3)-20, eyesizeR);
        } else {
            fill(0);
            circle((width/2)+ 10, ((height/2)- 3)-20, eyesizeR);
        }
    // eyes left
        if (eyesleft<=2) {
            fill(0);
            circle((width/2)- 10, (height/2)-20, eyesizeL);
        } else if(eyesleft <=3) {
            fill(0);
            circle((width/2)- 10, ((height/2)+3)-20, eyesizeL);
        } else {
            fill(0);
            circle((width/2)- 10, ((height/2)-3)-20, eyesizeL);
        }
    //hair 
        if (hair<=2) {
            //fro
            noStroke();
            fill(161, 119, 96);
            circle(cenx,ceny-100,80);
            circle(cenx+30,ceny-100,80);
            circle(cenx+80,ceny-100,80);
            circle(cenx-55,ceny-100,80);
            circle(cenx-80,ceny-100,80);

            circle(cenx,ceny-140,80);
            circle(cenx+30,ceny-135,80);
            circle(cenx+80,ceny-155,80);
            circle(cenx-55,ceny-140,80);
            circle(cenx-80,ceny-145,80);

            circle(cenx,ceny-180,80);
            circle(cenx+30,ceny-190,80);
            circle(cenx+80,ceny-185,80);
            circle(cenx-55,ceny-170,80);
            circle(cenx-80,ceny-180,80);
        } else if (hair<=3){
            //tophat
            noStroke();
            fill(0);
            rect(cenx,ceny-200,80,200);
            rect(cenx,ceny-100,100,20);
        }
    //mouth 
        if (mouth <=2) {
            stroke(0);
            strokeWeight(2);
            line(cenx-40, ceny+20, cenx+40, ceny+20);
        } else {
            fill(255,0,0);
            ellipse(cenx,ceny+20, 40,20);
            stroke(143, 4, 25);
            strokeWeight(2);
            line(cenx-20,ceny+20,cenx+20,ceny+20);
        }

}

function mousePressed(){
    face = (random(1,4)); 
    eyesright = (random(1,4));
    eyesleft = (random(1,4));
    eyesizeR = (random(5,10));
    eyesizeR = (random(5,10));
    hair = (random(1,4));
    mouth = (random(1,4));
}

Leave a Reply Cancel reply