Category: Uncategorized

Project 2: Variable Faces

var headWidth = 300
var headHeight = 400
var earWidth = 20
var earHeight = 20
var mouthWidth = 200
var mouthHeight = 100
var eyeWidth = 60
var eyeHeight = 60
var pupilWidth = 50
var pupilHeight = 60

function setup() {
createCanvas(480, 600);
background(255, 255, 255);

}

function draw() {
fill (‘#fae’);
ellipse(width/2,height/2,headWidth,headHeight);
fill (255, 255, 255);
ellipse(width/2-60,height/2-20,eyeWidth,eyeHeight);
ellipse(width/2+60,height/2-20,eyeWidth,eyeHeight);
fill (255, 255, 255);
ellipse(width/2,height/2+90,mouthWidth-120,mouthHeight-30);
fill (50, 135, 200);
ellipse(width/2-40,height/2-20,pupilWidth-30,pupilHeight-20);
ellipse(width/2+80,height/2-20,pupilWidth-30,pupilHeight-20);
fill (‘#fae’);
circle(width/2-100,height/2-160,earWidth-80,earHeight-40);
circle(width/2+100,height/2-160,earWidth-80,earHeight-40);

}

function mousePressed() {
mouthWidth = random (40, 60);
mouthHeight = random (60, 30);

}

Project 2- Variable Faces; Face Variables

var eyeSize = 25;
var faceWidth = 150;
var faceHeight = 180;
var mouthWidth = 40;
var mouthHeight = 15;
var browWidth = 10;
var browHeight = 3;
var noseColor = 230; 
 
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(173,216,230);
    fill(246,232,205);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.2;
    var eyeRX = width / 2 + faceWidth * 0.2;
    fill(0,100,0);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    fill(0,100,0);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(199,54,59);
    ellipse(width/2, (height/2+35), mouthWidth, mouthHeight);
    var browY = height/2 - 30;
    fill(0);
    rect(eyeLX-5,browY,browWidth, browHeight);
    fill(0);
    rect(eyeRX-5,browY,browWidth, browHeight);
    fill(noseColor);
    triangle(width/2,height/2+5,width/2-8,height/2+20, width/2+8,height/2+20)
}
 
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(100, 200);
    eyeSize = random(10, 30);
    mouthWidth = random(10,45);
    mouthHeight = random(10,20);
    browWidth = random (10,20);
    browHeight = random (3,7);
    noseColor = random (0,255);
}

The face that I created varies the mouth shape, eye size, and face shape, brow shape and nose shade on each click.

Project 2: Variable Faces; Face Variables.

lucacao-02-project

var headwidth = 200
var headheight = 250
var eyewidth = 30
var eyeheight = 30
var pupilwidth = 30
var pupilheight = 30
var mouthwidth = 150
var mouthheight = 50
var bodywidth = 300
var bodyheight = 300
var hairhx = 0
var hairhy = 0


function setup() {
    createCanvas(480, 640);
    background(171, 196, 255);
}


function draw() {
    fill(0)
    rect((width-bodywidth)/2,400,bodywidth,bodyheight)//blazer
    fill(255,255,255)
    rect((width-100)/2,400,100,300)//shirt

    fill(252,210,175)
    ellipse(width/2,height/2, headwidth, headheight)//head

    fill(248, 237, 235)
    ellipse(width/2-40,height/2-20,eyewidth,eyeheight)
    ellipse(width/2+40,height/2-20,eyewidth,eyeheight)//eyes

    fill(51, 53, 51)
    ellipse(width/2-40,height/2-20,pupilwidth-20,pupilheight-20)
    ellipse(width/2+40,height/2-20,pupilwidth-20,pupilheight-20)//pupil

    fill(239, 99, 81)
    ellipse(width/2,height/2+70,mouthwidth-100,mouthheight-25)//mouth

    fill(70, 63, 58)
    triangle(width/2-30,200,hairhx+width/2,hairhy+width/2,width/2,195)
    triangle(width/2,195,hairhx+width/2+50,hairhy+width/2,width/2+45,200)
    triangle(width/2-10,197,hairhx+width/2+20,hairhy+width/2,width/2+20,200)//hair


}

function mousePressed() {
    eyewidth=random(30,50)
    eyeheight=random(30,50)
    pupilwidth=random(30,40)
    pupilheight=random(30,40)
    mouthwidth=random(50,150)
    mouthheight=random(25,50)
    hairhx=random(20,50)
    hairhy=random(80,100)
}

After declaring variables (var) in my code, locating and editing the shapes became more intuitive. However, I struggled with assigning values to my variables and understanding the relationship between each variable. Overall, I feel like adding variables helped my coding process a lot, but I still need more practice to become more efficient.

lmattson-02-project

lmattson-02-project
//Luke Mattson
//section A

var w= 600
var h= 480
var headradius= w/3
var eyeRadius= headradius/4
var smileSize=.5
var skinR=255
var skinG=255
var skinB=255
var skin=1



function setup() {
    createCanvas(w, h);

}



function draw() {

    background(128,206,225);    // background
    fill(167,199,231);
    strokeWeight(1);
    stroke(140,170,220);
    triangle(0,0,600,600,0,600);

    //hair based on size of face
    stroke(0);                
    fill(223,180,130);      
    ellipse(w/2,h/2-50,headradius,headradius*1.4);


    //ears attached to face with 3 color possibilities
    if (skin==1) {
        fill(255,219,172)
    } else if (skin==2) {
        fill(224,172,105)
    } else {
        fill(241,194,125)
    }        
    ellipse(w/2-headradius/2,230,30,60);
    ellipse(w/2+headradius/2,230,30,60);


   //random size face with 3 color possibilities
   if (skin==1) {
       fill(255,219,172)
   } else if (skin==2) {
       fill(224,172,105)
   } else {
       fill(241,194,125)
   }
    ellipse(w/2,h/2,headradius,headradius*1.4);

    
    //random size eyes
    fill(245,245,245);          
    stroke(0);
    strokeWeight(1.5);
    circle(w/2-headradius/5,h/2-headradius/5,eyeRadius)
    circle(w/2+headradius/5,h/2-headradius/5,eyeRadius)
    fill(0,0,200,30);
    circle(w/2-headradius/5,h/2-headradius/5,eyeRadius/3)
    circle(w/2+headradius/5,h/2-headradius/5,eyeRadius/3)


    //random size mouth
    stroke(249,21,21)
    strokeWeight(1)
    fill(255,127,127) 
    arc(w/2,headradius/5+h/2,150,80, smileSize, PI, OPEN)

    //nose
    stroke(0)
    strokeWeight(.5)
    line(300,240,290,275);      
    line(310, 280,290, 275);
    //body attached to bottom of face
    var bodyx = w/2     
    var bodyy = h/2 + .5*(headradius*1.4)
    stroke(255,255,255);        
    strokeWeight(1.5)
    line(bodyx,bodyy, bodyx, bodyy+40);
    line(bodyx,bodyy+40,bodyx+10,bodyy+50)
    line(bodyx,bodyy+40,bodyx-10,bodyy+50);
    line(bodyx,bodyy+20,bodyx+10,bodyy+10)
    line(bodyx,bodyy+20,bodyx-10,bodyy+10)
   
}

    //assign random variables
function mousePressed() {       
    headradius= random(.4,.7)*h
    eyeRadius= random(headradius/8,headradius/4)
    skin = int(random(0,3))
    smileSize=random(0,1)
       
}

Project-02: Variable Faces; Face Variables

sketch
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var facecolorR = 30;
var facecolorG = 60;
var facecolorB = 120;
var noseA = 30;
var noseB= 20;
var mouth = 40;
var mouthWidth= 20
var mouthHeight= 60
var eyebrowWidth = 50
var eyebrowHeight = 30
var eyecolorR = 70
var eyecolorG = 90
var eyecolorB = 240
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);
    fill (facecolorR,facecolorG,facecolorB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    fill (eyecolorR, eyecolorG, eyecolorB);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    triangle(width/2,height/2,140,170,160,170); 
    //i could not get the nose to change without making it pinocchio 
    ellipse(width/2,190,mouthWidth,mouthHeight);
    rect(115,120,eyebrowWidth, eyebrowHeight);
    rect(170,120,eyebrowWidth, eyebrowHeight);

}

 
function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    facecolorR = random(5,10,40);
    facecolorG = random(300,10,2);
    facecolorB = random(50,250,20);
    mouthWidth = random (12,20);
    mouthHeight = random (0,20);
    noseA = random(140,180);
    NoseB = random(140,170);
    eyebrowWidth = random(10,20);
    eyebrowHeight = random(2,8);
    eyecolorR= random(0,300);
    eyecolorG= random(20,300);
    eyecolorB= random(4,200);

}

Project 1: My Self Portrait

self portraitDownload
function setup() {
    createCanvas(600, 600);
    background(123, 151, 180);
}

function draw() {
    stroke(0);
    strokeWeight(4);
    fill(247, 205, 174); //skin color
    ellipse(300, 300, 340, 380); //face
    line(200, 270, 270, 270); //left eyebrow
    line(330, 270, 400, 270); //right eyebrow
    stroke(0);
    strokeWeight(3);
    fill(127, 62, 41); //brown left eye
    ellipse(235, 300, 30, 50);
    ellipse(365, 300, 30, 50); //right eye
    fill(236, 121, 67); //nose orange
    triangle(300, 330, 290, 350, 310, 350);
    fill(236, 121, 134); //mouth pink
    arc(300, 390, 80, 50, -radians(5),radians(185),CHORD);
    fill(246, 190, 185); //left cheek pink 
    ellipse(170, 360, 80, 30);
    fill(246, 190, 185); //right cheek pink 
    ellipse(430, 360, 80, 30);
    fill(248, 157, 54); //hat yellow
    rect(180, 110, 240, 33);
    triangle(210, 70, 180, 110, 240, 110);
    triangle(270, 70, 240, 110, 300, 110);
    triangle(330, 70, 300, 110, 360, 110);
    triangle(390, 70, 360, 110, 420, 110);
    fill(48, 0, 0); //hair brown
    circle(120, 180, 80, 80);
    circle(480, 180, 80, 80);
    fill(243, 75, 44); //jewel red
    square(204, 60, 12);
    square(264, 60, 12);
    square(324, 60, 12);
    square(384, 60, 12);
    noLoop();
}

The most interesting part of the project is figuring out which shapes work best for each facial feature and how a slight angle change can change the entire expression.

sketchDownload
function setup() {
    createCanvas(200, 200);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(204);
	ellipse(50, 50, 80, 80);
}
sketchDownload
function setup() {
    createCanvas(300, 300);
    background(220);
//    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	if (mouseX < width / 2) {    // left side
		if (mouseY < height / 2) {     // top half
			background(255, 0, 0);
		}
		else {   // bottom half
			background(0, 255, 0);
		}
	}
	else {   // right side
		if (mouseY < height / 2) {  // top half
			background(0, 0, 255);
		}
		else {	// bottom half
			background(0, 0, 0);
		}
	}
}

project-01Download
function setup() {
    createCanvas(600, 900);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(2, 3, 200);
    fill(255);
    triangle(400, 650, 475, 850, 325, 850);
    rect(50, 50, 500, 600);
    stroke(0);
    strokeWeight(5);
    noFill();
    triangle(400, 850, 450, 900, 350, 900);
    curve(70, 220, 100, 170, 250, 165,  280, 222);
    curve(270, 222, 300, 165, 450, 170,  480, 220);
    fill(0);
    arc(150, 170, 60, 40, 0, 3);
    arc(350, 170, 60, 40, 0, 3);
    fill(255);
    arc(150, 170, 60, 40, .5, 1);
    arc(350, 170, 60, 40, .5, 1);
    fill(255, 173, 226);
    noStroke();
    ellipse(175, 300, 50, 100);
    ellipse(375, 300, 50, 100);
    fill(250, 160, 210);
    ellipse(175, 300, 40, 40);
    ellipse(375, 300, 40, 40);
    stroke(0);
    strokeWeight(5);
    fill(0);
    curve(200, mouseY/2, 225, 400, 325, 400,  350, mouseY/2);
    noFill();
    curve(70, 100-(mouseY/2), 120, 100, 220, 100,  280, 100+(mouseY/2));
    curve(270, 100+(mouseY/2), 320, 100, 420, 100,  480, 100-(mouseY/2));

}

Project 2: Variable Faces

chapmanGenerativeFaces

//Elise Chapman
//ejchapma@andrew.cmu.edu
//Section D

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

/* variables: skin color, head width, head height, 
eye size eye color, nose, skin color, 
eyebrows, eyebrow color, mouth, ear size */
/* non-variables: eye-spacing, eyebrow height */
var hWidth;
var hHeight;
var skin;
var eyeSize;
var eyeColor;
var noseY;
var earX;
var earY;
var eyebrows;
var eyebrowsY;
var txtY = 250;

function mousePressed() {
    hWidth = int(random(100,200));
    hHeight = int(random(150,225));
    skin = int(random(1,8));
    eyeSize = int(random(20,40));
    eyeSize2 = int(random(20,40));
    eyeColor = int(random(1,7));
    nose = int(random(1,5));
    noseY = int(random(270,300));
    earX = int(random(30,50));
    earY = int(random(40,70));
    eyebrows = int(random(1,7));
    eyebrowsY = random((height/2)-0.1*hHeight,(height/2)-0.27*hHeight)
    txtY = 800;
}

function draw() {
    background(101,222,241);
    //intro text
    fill(300);
    stroke(20);
    loadFont("Courier New");
    strokeWeight(5);
    textSize(18);
    textFont("Courier New");
    text("Dad Generator: Click to begin.",40,txtY);
    noStroke();
    //skin color
    var alien;
    if (skin==1) {
        fill(197,149,123);
    } else if (skin==2) {
        fill(236,188,180);
    } else if (skin==3) {
        fill(290,201,164);
    } else if (skin==4) {
        fill(161,102,94);
    } else if (skin==5) {
        fill(80,51,53);
    } else if (skin==6) {
        fill(89,47,42);
    } else {
        fill(187,219,155);
        var alien="true";
    }
    //head
    ellipse(200,250, hWidth,hHeight);
    //ears
    if (alien=="true") {
        rect((width/2)-(hWidth/2)-(earX/1.25),height/2.25,earX,earY,0,80,80,80);
        rect((width/2)+(hWidth/2.75)+(earX/4),height/2.25,earX,earY,80,0,80,80);
    } else {
        rect((width/2)-(hWidth/2)-(earX/1.25),height/2.25,earX,earY,80,80,80,80);
        rect((width/2)+(hWidth/2.75)+(earX/4),height/2.25,earX,earY,80,80,80,80);
    }
    //nose
    if (skin==1) {
        fill(161,103,68);
    } else if (skin==2) {
        fill(200,136,120);
    } else if (skin==3) {
        fill(206,132,95);
    } else if (skin==4) {
        fill(105,49,29);
    } else if (skin==5) {
        fill(43,24,23);
    } else if (skin==6) {
        fill(38,19,10);
    } else {
        fill(105,122,33);
        var alien="true";
    }
    triangle(width/2,height/2,(width/2)+10,noseY,(width/2)-10,noseY);
    //eyes
    var eyeLX=200-hWidth*0.25;
    var eyeRX=200+hWidth*0.25;
    fill(300); //white
    ellipse(eyeLX, 250, eyeSize, eyeSize);
    ellipse(eyeRX, 250, eyeSize, eyeSize);
    if (eyeColor==1) {
        fill(138,203,136);
    } else if (eyeColor==2) {
        fill(198,224,255);
    } else if (eyeColor==3) {
        fill(58,124,165);
    } else if (eyeColor==4) {
        fill(22,38,46);
    } else {
        fill(58,51,53);
    }
    var pupilRX=200-hWidth*0.25
    var pupilLX=200+hWidth*0.25
    ellipse(pupilRX, 250, eyeSize/1.25, eyeSize/1.25);
    ellipse(pupilLX, 250, eyeSize/1.25, eyeSize/1.25);
    //eyebrows
    fill(30);
    if (eyebrows==1) {
        rect(eyeLX-(eyeSize/2),eyebrowsY,40,10);
        rect(eyeRX-(eyeSize/2),eyebrowsY,40,10);
    } else if (eyebrows==2) {
        rect(eyeLX-(eyeSize/2),eyebrowsY,30,20);
        rect(eyeRX-(eyeSize/2),eyebrowsY,30,20);
    } else if (eyebrows==3) {
        rect(eyeLX-(eyeSize/2),eyebrowsY,40,5);
        rect(eyeRX-(eyeSize/2),eyebrowsY,40,5);
    } else if (eyebrows==4) {
        rect(eyeLX-(eyeSize/2),eyebrowsY,30,10);
        rect(eyeRX-(eyeSize/2),eyebrowsY,30,10);
    } else if (eyebrows==5) {
        rect(eyeLX-(eyeSize/2),eyebrowsY,40,2);
        rect(eyeRX-(eyeSize/2),eyebrowsY,40,2);
    } else if (eyebrows==6) {
        rect(eyeLX-(eyeSize/2),eyebrowsY,40,20);
        rect(eyeRX-(eyeSize/2),eyebrowsY,40,20);
    }
}