Project-02-Variable-Face – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice https://courses.ideate.cmu.edu/15-104/f2020 Professor Tom Cortina • Fall 2020 • Introduction to Computing for Creative Practice Mon, 05 Oct 2020 00:02:15 +0000 en-US hourly 1 https://wordpress.org/?v=5.4.15 Project 02 – Variable Face https://courses.ideate.cmu.edu/15-104/f2020/2020/10/04/project-02-variable-face-25/ https://courses.ideate.cmu.edu/15-104/f2020/2020/10/04/project-02-variable-face-25/#respond Mon, 05 Oct 2020 00:02:15 +0000 https://courses.ideate.cmu.edu/15-104/f2020/?p=59473 Continue reading "Project 02 – Variable Face"]]>
sketch
var canvaswidth = 640
var eyehx = 230
var eyehy = 270
var lidh = 255
var face = 0
var r=255
var g=255
var b=255

function setup() {
    createCanvas(canvaswidth, 510);
    background(220);
}

function draw() {

	background(r,g,b);

	//face
	strokeWeight(6)
	stroke(25)
	fill(229,149,95);
	ellipse(150,110,200,200); //left ear 
	ellipse(canvaswidth-150,110,200,200); //right ear
	fill(46,44,44);
	ellipse(150,110,120,120); //left ear inner
	ellipse(canvaswidth-150,110,120,120); //right ear inner
	fill(229,149,95); 
	ellipse(canvaswidth/2,270,500,450); //face
	noStroke();
	fill(242,219,140); 
	ellipse(canvaswidth/2,380,320,230); //mouth/chin

	//eyes
	fill(37,37,41)
	ellipse(220,280,60,60); // left eye
	ellipse(canvaswidth-220,280,60,60); // right eye
	fill(255,255,240);
	ellipse(eyehx,eyehy,20,20); // left eye highlight
	ellipse(canvaswidth-eyehx+20,eyehy,20,20); // right eye highlight

	//eyelids
	stroke(229,149,95); 
	strokeWeight(20);
	line(180,255,256,lidh); // left 
	line(canvaswidth-180,255,canvaswidth-256,lidh); // right



	//moon
	noStroke()
	fill(242,229,196);
	ellipse(canvaswidth/2,180,230,200);
	fill(229,149,95);
	ellipse(canvaswidth/2+40,180,175,143);


    //mouth
	if (face == 0){
		stroke(25);
		line(270,400,canvaswidth-270,400); //flat line
	} else if (face == 1){
		stroke(25);
		strokeWeight(6)
		fill(240,184,163)
		ellipse(canvaswidth/2,400,120,70);
		noStroke();
		fill(230,154,143);
		ellipse(320, 414,96,50);
		noFill();
		stroke(25);
		ellipse(canvaswidth/2,400,120,70); //mouth open


	} else if (face == 2){
		stroke(25);
		strokeWeight(22);
		line(270,440,canvaswidth/2,400);
		line(canvaswidth-270,440,canvaswidth/2,400); //upset
	}
}


function mousePressed() {
	lidh = random(218,264);
	r = random(0,255);
	g = random(0, 255);
	b = random(0, 255);
	if (face == 2){
		face = 0;
	} else {
		face += 1;
	}
	


}
]]>
https://courses.ideate.cmu.edu/15-104/f2020/2020/10/04/project-02-variable-face-25/feed/ 0
rdrice_sectionC_Project 2_FACE https://courses.ideate.cmu.edu/15-104/f2020/2020/09/19/rdrice_sectionc_project-2_face/ https://courses.ideate.cmu.edu/15-104/f2020/2020/09/19/rdrice_sectionc_project-2_face/#respond Sat, 19 Sep 2020 22:07:06 +0000 https://courses.ideate.cmu.edu/15-104/f2020/?p=57665
sketch
//Robert Rice
//Section C

var gender = 0  //"gender", determines eyelashes
var eyeSize = 10    //sets eye diameter
var eyeSquint = 1   //how squinted the eyes are
var eyebrowLength = 70  //how long the eyebrows are
var mouthLength = 90    //how long the mouth is
var mouthPosition = 0   //adjust how high up the mouth is
var noseX1 = 250    //adjusts the base of the nose
var noseY1 = 230
var noseX2 = 270       //adjust the tip of the nose
var noseY2 = 220

function setup() {
    createCanvas(400, 400);
    text("p5.js vers 0.9.0 test.", 10, 15);
    angleMode(DEGREES); //degrees bc i'm bad at math
}

function draw() {
    background(0)   //black background

    noFill();
    stroke(255);    //white lines bc the background is black
    
    strokeWeight(3);    //draws the basic face shape
    strokeJoin(ROUND);
    line(140,270, 127,220);
    arc(193,202, 136,136, 165, 73.38);
    line(212,268, 232,288);

    strokeWeight(2);    //stroke weight for facial features

    if (gender>0.5) {   //Gives the face eyelashes if it's 'female'
        line(186,180, 172,180); //does nothing if the face is 'male'
        line(186,180, 174,173);
        line(186,180, 180,168);

        line(186+97,180, 172+97,180);
        line(186+97,180, 174+97,173);
        line(186+97,180, 180+97,168);
    }

    noStroke();     //Makes the pupils
    fill(255);
    ellipse(186,180, eyeSize, eyeSize / eyeSquint); //pupils squint based on
    ellipse(186+97,180, eyeSize, eyeSize / eyeSquint);  //eyeSquit variable

    stroke(255);    //makes the eyebrow arcs, which move with the eyes
    strokeWeight(2);
    noFill();
    arc(201,6-((eyeSize/eyeSquint)/2), 351,351, eyebrowLength, 94.91);  
    //left eyebrow arc
    arc(201+97,6-((eyeSize/eyeSquint)/2), 351,351, eyebrowLength, 94.91);   
    //right eyebrow arc

    arc(246,78 - mouthPosition, 342,342, mouthLength,111.06);  //mouth

    noStroke();
    fill(255);
    triangle(255,188, noseX1,noseY1, noseX2,noseY2);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. 
    gender = random(0,1);   //variables defined at top of code
    eyeSize = random(6,20);
    eyeSquint = random(1,2);
    eyebrowLength = random(69.42, 82.17);
    mouthLength = random(79.13, 104.53);
    mouthPosition = random(0,35);
    noseX1 = random(247, 260);
    noseY1 = random(200, 238);
    noseX2 = random(270, 290);
    noseY2 = random(199, 232);
}

]]>
https://courses.ideate.cmu.edu/15-104/f2020/2020/09/19/rdrice_sectionc_project-2_face/feed/ 0
Project 02- Variable Face https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-02-variable-face-24/ https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-02-variable-face-24/#respond Mon, 14 Sep 2020 03:34:27 +0000 https://courses.ideate.cmu.edu/15-104/f2020/?p=57289 Continue reading "Project 02- Variable Face"]]>

sillymir proj2Download

var bg1=255
var bg2=98
var bg3=109
var hairlength=200
var teethwidth=50
var teethHeight=50
var lipsWidth= 90
var lipsHeight= 90
var eyeGreen= 77
var hc1=215 // hair color
var hc2= 200
var hc3= 174

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

function draw() {
    background(204);
    fill (bg1, bg2, bg3); // red dark
    rect (0, 0, 480, 640)
    fill (238, 208, 191) ; // skin base color
    circle (240, 240, 240);
    fill (181, 82, 94); // lips
    arc (240, 300, lipsWidth, lipsHeight, 245, 600)
    fill (255, 254, 246); // teeth
    arc (240, 307, teethwidth, teethHeight, 245, 600)
    fill (228, 141, 146) ; // cheek left
    circle (175, 280, 28);
    fill (228, 141, 146) ; // cheek right
    circle (305, 280, 28);
    fill (223, 190, 170) ; // nose left
    circle (230, 278, 10);
    fill (223, 190, 170) ; // nose right
    circle (250, 278, 10);
    fill (223, 190, 170) ; // nose center
    circle (240, 280, 20);
    fill (235, 258, 234); // eye white left
    circle (200, 235, 35)  
    fill (235, 258, 234); // eye white right
    circle (280, 235, 35)
    fill (74, eyeGreen, 68); // eye color left
    circle (200, 235, 25)
    fill (74, eyeGreen, 68); // eye color right
    circle (280, 235, 25)
    fill (28, 22, 26); // eye pupil left
    circle (200, 235, 12)
    fill (28, 22, 26); // eye pupil right
    circle (280, 235, 12); 
    fill (251, 255, 248); // eye hl left
    circle (205, 230, 5) 
    fill (251, 255, 248); // eye hlright
    circle (285, 230, 5);
    fill (154, 114, 71); // eyebrow left thick
    rect (165, 205, 50, 5)
    fill (154, 114, 71); // eyebrow right thick
    rect (260, 205, 50, 5)
    fill (hc1, hc2, hc3); // hair left side
    rect (100, 180, 60, hairlength)
    fill (hc1, hc2, hc3); // hair right side
    rect (320, 180, 60, hairlength);
    fill (hc1, hc2, hc3); // hair across
    arc (240, 200, 280, 190, 531, 710);

}

function mousePressed() {
    bg1 = random(1, 254);
    bg2 = random(1, 254);
    bg3 = random(1, 254);
    hairlength = random(200,400);
    teethwidth= random(40,60);
    teethHeight= random(40,60);
    lipsWidth= random(80,100);
    lipsHeight= random(80,100);
    eyeGreen= random (30,150);
    hc1= random (1,254);
    hc2= random (1,254);
    hc3= random (1,254);    


}

I wanted to see variations in color. I changed the eyes and background colors. I also altered hair length and mouth size.

]]>
https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-02-variable-face-24/feed/ 0
02 Project Variable Face – Whack-A-Frog https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/02-generative-faces-whack-a-frog/ https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/02-generative-faces-whack-a-frog/#comments Mon, 14 Sep 2020 03:28:01 +0000 https://courses.ideate.cmu.edu/15-104/f2020/?p=57286 Continue reading "02 Project Variable Face – Whack-A-Frog"]]>

I seem to have toads and frogs on my mind a lot lately. A lot of people say I embody the same spirit as one, so I am trying to embrace that in a positive way. For this project, I wanted to depict a frog poking its head out of water.

As I progressed with the code, I wanted to add some additional environmental elements. With the help of some online searches, I found a project on p5js.org with randomized dots. I tried using them to show movement of water. I am not sure how effective it was, but I think it makes the scene a bit more interesting.

Again this week, I really took advantage of the power of arcs in p5.js. With so many parameters, you can do so much curvature so easily. I used arcs for the eyeball and pupil, which are very different shapes, but by adjusting the mode of arc from CHORD to PIE, you can get a lot of variety. Hot tip: switch the degree mode of the project from RADIANS to DEGREES if you don’t explicitly process the world in immediate relation to Pi. Or don’t, if you like pain.

sketchDownload

//Julia Steinweh-Adler
//Section D

//Global Variables

var eyesSize = 20
var headWidth = 150;
var eyeWidth= 40;
var mouthSize = 30;
var mouthWidth = 30;
var pupil=20;
var smallX = 600/2    //canvas width divided by 2  
var smallY = 480/2    //canvas height divided by 2
var largeX = 600/3.5   //canvas width divided by 3.5  
var largeY = 480/3.5   //canvas height divided by 3.5
var pupilAngle = 300
var nostrilWidth = 5
var nostrilHeight = 6

    //Water Ripple Dot Background values
var spot = {    //coordinates
    x:100,
    y: 50,
};

var col = {    //color values
    r:0,
    g:0,
    b:255,
};

function setup() {
    createCanvas(600, 480);
    angleMode(DEGREES);    //Change angle mode to degrees to make arcs easier
    frameRate(2)    //Change framerate to 2 frames per second
  
}
  function draw() {
    noStroke();

//BACKGROUND
    background(49, 30, 220); //Light Blue
    
    
    //Water Ripple Dot Pattern Background
    spot.x= random (0, width);
    spot.y= random (0, height);

    noStroke();
    col.r = random (0);
    col.g = (0);
    col.b = random (100, 200);
    
    fill (col.r, col.g, col.b, 120);
    ellipse (spot.x, spot.y, 1600, 400);    //Change dot dimensions and coordinates
    
    //Water Ripple
    stroke(60, 30, 220);
    strokeWeight(4);
    noFill();
    ellipse(smallX, smallY-90, 200, 100)
    ellipse(smallX, smallY-90, 250, 120)

    
//FROG
    //Face
    noStroke();
    fill(44, 94, 76); // Face Color, Green
    arc(smallX, smallY - 90, headWidth, 80, 0, 180, PIE);    //Head top arc
    arc(smallX, smallY - 89, headWidth, 100, 180, 0, PIE);   //Head bottom arc
    circle(smallX+50, smallY-125, eyesSize+10);    //right eyelid
    circle(smallX-50, smallY-125, eyesSize+10);    //left eyelid
      
    //Eyeball
    fill(124, 84, 30);     //Brown eyeball color
    arc(smallX + 50, smallY-125, eyesSize, eyesSize, 210, 120, CHORD);    //right eye arc
    arc(smallX - 50, smallY-125, eyesSize, eyesSize, 60, 330, CHORD);    //left eye arc
    
    //Eye Pupil   
    fill(0);     //Black pupil
    stroke(204, 168, 18);    //Change stroke to yellow
    strokeWeight(2);
    arc(smallX + 50, smallY-125, eyesSize, eyesSize, pupilAngle, pupilAngle-255, PIE);    // right eye pupil
    arc(smallX - 50, smallY-125, eyesSize, eyesSize, (-pupilAngle)+435,(-pupilAngle)+540, PIE);    //left eye pupil
    
    //Nostril
    noStroke();
    ellipse(smallX + 10, smallY - 90, nostrilWidth, nostrilHeight)    //Right Nostril
    ellipse(smallX - 10, smallY - 90, nostrilWidth, nostrilHeight)    //Left Nostril   
    
    
    //Mouth
    noStroke();
    fill(109, 165, 144); //top lip color, Green (same as face to integrate shape)
    arc(smallX, smallY-70, mouthWidth, mouthSize, 0, 180, PIE);    //top lip arc 
    fill(44, 94, 76);    //mouth color, light green
    arc(smallX, (smallY)-75, mouthWidth, mouthSize, 0, 180, PIE);    //mouth arc
    
    
//Foreground Grass
    beginShape();
    fill(10,60,4);
    vertex(0,height);
    vertex(width*1/24,height*3/4);//peak 1
    vertex(width*2/24,height*1/2);
    vertex(width*3/24,height*5/9);//peak 2
    vertex(width*4/24,height*27/32);
    vertex(width*5/24,height*3/4);//peak 3
    vertex(width*6/24,height*29/32);
    vertex(width*7/24,height*2/3);//peak 4
    vertex(width*8/24,height);
    vertex(width*9/24,height*1/2);//peak 5
    vertex(width*10/24,height*30/32);
    vertex(width*11/24,height*5/9);//peak 6
    vertex(width*12/24,height*27/32);
    vertex(width*13/24,height*3/4);//peak 7
    vertex(width*14/24,height*29/32);
    vertex(width*15/24,height*2/3);//peak 8
    vertex(width*16/24,height);
    vertex(width*17/24,height*2/3);//peak 9
    vertex(width*18/24,height*29/32);
    vertex(width*19/24,height*3/4);//peak 10
    vertex(width*20/24,height*30/32);
    vertex(width*21/24,height*5/9);//peak 11
    vertex(width*22/24,height*27/32);
    vertex(width*23/24,height*3/4);//peak 12
    vertex(width,height);
  endShape();
}



function mousePressed() {
    smallX = random(100,500);
    smallY = random(280,310);
    largeX = random(190, 200);
    largeY = random(140,150);
    headWidth = random(130, 170);
    pupilAngle = random(250,350);
    mouthWidth = random(60, 100)
    eyesSize = random(30, 50);
    mouth = random(2,5);
    nostrilWidth = random(4,15);
    nostrilHeight = random(4,15)
}
Frog poking its head out of the water Stock Photo: 180696071 - Alamy
]]>
https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/02-generative-faces-whack-a-frog/feed/ 2
Project: Variable Faces https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-variable-faces/ https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-variable-faces/#respond Mon, 14 Sep 2020 03:17:19 +0000 https://courses.ideate.cmu.edu/15-104/f2020/?p=57282 Continue reading "Project: Variable Faces"]]>

The challenging part of this project was figuring out how much to constrain the random function for the various elements that are generated.

sketchDownload
var eyeSize = 10;
var foreheadWidth = 200;
var foreheadHeight = 100;
var cheekWidth = 300;
var cheekHeight = 120;
var chinWidth = 30;
var chinHeight = 30;
var mouthWidth = 120;
var mouthHeight = 3;
var hairColor = 0;
var earSize = 57;
var fill = 67;
var noseWidth = 20;
var noseHeight = 15;
var eyebrowAngle = 0; //shifts eyebrow up and down to create expressions

function setup() {
    createCanvas(480, 640);
    background(67);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	noFill();
	stroke(random(0,255),random(0,255),random(0,255));
	strokeWeight(1);
	circle(random(0,480),random(0,640),random(40,500)); //hypnotic background generator
	circle(random(0,480),random(0,640),random(40,500)); //repetition to increase speed of generator
	var foreheadY = height/2 - (cheekHeight/2);
	var chinY = height/2 + (cheekHeight/2);
	noStroke();
	fill(255,223,64);
	beginShape(); // yellow 
	    vertex(width/2, chinY + 10);
	    curveVertex(width/2 + 150, chinY + 40);
	    curveVertex(width/2 + 220, height);
	    vertex(width/2, height);
	endShape(CLOSE);
	fill(161,156,35,100);
	beginShape(); // yellow cloak shaodw 
	    vertex(width/2, chinY + 15);
	    curveVertex(width/2 + 148, chinY + 43);
	    curveVertex(width/2 + 218, height);
	    vertex(width/2, height);
	endShape(CLOSE);
    fill(207,165,93); 
	beginShape(); //body
	    vertex((width/2-chinWidth/2) -10,height/2 + (cheekHeight/2) - (chinHeight/2) + cheekHeight*.75);
        curveVertex(width - 100, height/2 + (cheekHeight/2) - (chinHeight/2) + cheekHeight*.75);
        vertex(width - 50, height);
    endShape(CLOSE);
	fill(225,204,115);
	ellipse(width/2 - foreheadWidth/2,foreheadY + 20,earSize*1.5,earSize); //left ear
	ellipse(width/2 + foreheadWidth/2,foreheadY + 20,earSize*1.5,earSize); //right ear
	fill(hairColor);
    circle(width/2, foreheadY,foreheadWidth + 25); //hair
	fill(207,165,93);
	rect((width/2-chinWidth/2) -10, height/2 + (cheekHeight/2) - (chinHeight/2), chinWidth + 20, cheekHeight*.75); //neck
	fill(225,204,115);
    ellipse(width/2, foreheadY, foreheadWidth, foreheadHeight); //forehead
    ellipse(width/2, height/2, cheekWidth, cheekHeight); //cheeks
    fill(179,30,90,100);
    circle(width/2 - (cheekWidth/4 + 10), height/2, cheekWidth/8); //left rosy cheek
    circle(width/2 + (cheekWidth/4+ 10), height/2, cheekWidth/8); //right rosy cheek
    var eyeposLX = (width/2 - foreheadWidth/4);
    var eyeposRX = (width/2 + foreheadWidth/4);
    var eyeposY = (height/2 - foreheadHeight/2);
    fill(0);
    circle(eyeposLX,eyeposY,eyeSize); //left eye
    circle(eyeposRX,eyeposY,eyeSize); //right eye
    fill(200,60,20);
    beginShape(); //monk robe
        vertex(0,height);
        curveVertex(width*.25,height*.6875);
        curveVertex(width/2, chinY + 20);
        vertex(width - 50, height - 20);
        vertex(width - 40, height);
    endShape(CLOSE);
    fill(105,40,30,150);
    triangle(0,height, width*.25, height*.6875, width*.25 + -70, height); //red cloak shadow
    triangle(width*.25 + 40,(height*.6875) +30, width*.25 + 20, height, width*.25 - 20, height); //red cloak shadow
    triangle(width*.25 + 70, height, width*.25 + 80,(height*.6875) + 25, width*.25 + 170, height);
    triangle(width*.25 + 230, height, width*.25 + 195, height - 100, width*.25 + 300, height); 
    fill(225,204,115);
    ellipse(width/2, height/2 + (cheekHeight/2), chinWidth, chinHeight); //chin
    fill(0);
    ellipse(width/2,height/2 + cheekHeight/4 ,mouthWidth,mouthHeight); //mouth
    fill(135,108,61);
    beginShape(); //nose
        vertex(width/2 - noseWidth, height/2 - 10);
        curveVertex(width/2, height/2);
        vertex(width/2 + noseWidth, height/2 - 10);
        curveVertex(width/2, height/2 + noseHeight);
    endShape(CLOSE);
    stroke(0);
    noFill();
    strokeWeight(5);
    line(eyeposLX - 10, eyeposY - 15, eyeposLX + 20, (eyeposY - 15) + eyebrowAngle); //left eyebrow
    line(eyeposRX - 20, (eyeposY - 15) + eyebrowAngle, eyeposRX + 10, eyeposY - 15); //right eyebrow
}

function mousePressed() {
	cheekWidth = random(200, 325);
	cheekHeight = random(120,200);
	foreheadWidth = random(150, (cheekWidth - 100));
	foreheadHeight = random(80, (cheekHeight/2));
	chinWidth = random(30,80);
	chinHeight = random(30,70);
	mouthHeight = random(1,30);
	mouthWidth = random (40, cheekWidth/2);
	background(random(0,255),random(0,255),random(0,255));
	hairColor = random(0,250);
	earSize = random(40, 70);
	noseWidth = random(10,30);
	noseWidth = random(10,40);
	eyebrowAngle = random(-10,20);
	eyeSize = random(10,20);
}



]]>
https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-variable-faces/feed/ 0
Project 2- Variable Face https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-2-variable-face-12/ https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-2-variable-face-12/#respond Sun, 13 Sep 2020 23:49:40 +0000 https://courses.ideate.cmu.edu/15-104/f2020/?p=57273 Continue reading "Project 2- Variable Face"]]>
sketch
var eyeSize = 20;
var faceWidth = 300;
var faceHeight = 400;
var eyecolor = 0;
var colorRed= 0;
var colorGreen = 0;
var colorBlue = 0;

var hairWidth= 400;
var hairHeight= 600;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(180);

    fill(0);
    stroke(0);
    rect(width/6, height/20, hairWidth, hairHeight); // black hair rect. behind



    fill(246,215,196); // head color
    stroke(246,215,196) 
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    fill(0);
    stroke(0);
    triangle(120,25, 500,220,500,25); // side bang


    //EYES VARIABLES
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;

    //2 eye dots
    fill(eyecolor);
    stroke(eyecolor);
    ellipse(eyeLX, height / 2.3, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2.3, eyeSize, eyeSize);

    //eye highlight
    fill (255);
    stroke(255);
    strokeWeight(10);
    ellipse(eyeLX, height/2.35, 1, 1);
    ellipse(eyeRX, height/2.35, 1,1);

    fill(colorRed, colorGreen, colorBlue);
    stroke(colorRed, colorGreen, colorBlue);
    line(eyeLX, height/1.6, eyeRX, height/1.6);

    noFill();
    beginShape();


    curveVertex(eyeLX, height/1.6);
    curveVertex(eyeLX, height/1.6);
    curveVertex(eyeLX+ 40, height/1.35);
    curveVertex(width/2, height/1.3);
    curveVertex(eyeRX- 40, height/1.35);
    curveVertex(eyeRX, height/1.6);
    curveVertex(eyeRX, height/1.6);

    endShape();


}
 
function mousePressed() {
    faceWidth = random(250, 300);
    faceHeight = random(350, 400);
    eyeSize = random(10, 30);
    hairWidth = random (400,450);
    hairHeight = random (600,650);
    eyecolor = random (0,200);
    colorRed = random (0,255);
    colorGreen = random (0,255);
    colorBlue = random (0,255);
}

]]>
https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-2-variable-face-12/feed/ 0
Project 2 Faces https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-2-faces/ https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-2-faces/#respond Sun, 13 Sep 2020 16:50:18 +0000 https://courses.ideate.cmu.edu/15-104/f2020/?p=57252 Continue reading "Project 2 Faces"]]>

Already upset that this isn’t working the way it’s supposed to so here’s a pessimistic post about my future in this class.

Project 2Download
function setup() {
    createCanvas(480, 640);
    background(45);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	var w = random(100, 400)
	var h = random(100, 500)
	var eyeWidth = random(10, 50)
	var eyeHeight = random(10, 60)
	var eyeBrow = random(300 - 2*eyeHeight, 320 - 2*eyeHeight)
    background(45);
    fill(190);
    ellipse(240, 320, w, h); //head
    fill(255);
    ellipse(240 - eyeWidth, 320 - eyeHeight, eyeWidth, eyeHeight); //left eye
    ellipse(240 + eyeWidth, 320 - eyeHeight, eyeWidth, eyeHeight); //right eye
    var x = 240 - eyeWidth/2
    var y = 320 - 2*eyeHeight
    var n = 240 + eyeWidth/2
    strokeWeight(4)
    line(x, y, x - eyeWidth, eyeBrow) //left eyebrow
    line(n, y, n + eyeWidth, eyeBrow) //right eyebrow
    if (y > 250) {
    	noFill()
    	stroke(247, 18, 18)
    	strokeWeight(1)
        circle(x - 15, y, 10)
    } else {
    	noFill()
    	stroke(247, 18, 18)
    	strokeWeight(1)
    	circle(n + 15, y, 10)
    }
    noLoop()
}
]]>
https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-2-faces/feed/ 0
project 02-face https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-02-face/ https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-02-face/#respond Sun, 13 Sep 2020 06:18:10 +0000 https://courses.ideate.cmu.edu/15-104/f2020/?p=57236 Continue reading "project 02-face"]]>
face
var eyeSize = 20;
var eyebrowWidth = 40;
var eyebrowHeight = 10; 
var eyeLX = 80;
var eyeRX = 215;
var eyeHeight = 100;
var blushLX = 80;
var blushRX = 215;
var blushY = 138;
var blushWidth = 65;
var blushHeight = 20;
var mouthLX = 110;
var mouthRX = 178;
var mouthY = 175;
var R = 250;
var G = 100;
var B = 60;
 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(R, G, B);
    strokeWeight(5);
    point(280, 70);
    point(150, 40);
    point(50, 60);
    point(35, 100);
    point(20, 150);
    point(90, 260);
    point(180, 255);
    point(250, 270);
    strokeWeight(1);

    noFill();
    beginShape();
    curveVertex(250, 270);
    curveVertex(250, 270);
    curveVertex(280, 70);
    curveVertex(150, 40);
    curveVertex(50, 60);
    curveVertex(35, 100);
    curveVertex(20, 150);
    curveVertex(90, 260);
    curveVertex(180, 255);
    curveVertex(250, 270);
    curveVertex(250, 270);

    endShape(); //shape of the face
    fill(139, 69, 19);
    ellipse(80, 85, eyebrowWidth, eyebrowHeight);
    fill(139, 69, 19);
    ellipse(215, 85, eyebrowWidth, eyebrowHeight); //eyebrow
    fill(0, 0, 0);
    circle(eyeLX, eyeHeight, eyeSize);
    fill(0, 0, 0);
    circle(eyeRX, eyeHeight, eyeSize); //eyes
    fill(250, 128, 114);
    ellipse(blushLX, blushY, blushWidth, blushHeight);
    fill(250, 128, 114);
    ellipse(blushRX, blushY, blushWidth, blushHeight); //blushes
    strokeWeight(5);
    point(mouthLX, mouthY);
    point(148, 200);
    point(mouthRX, mouthY);
    strokeWeight(1);

    noFill();
    beginShape();
    curveVertex(mouthLX, mouthY);
    curveVertex(mouthLX, mouthY);
    curveVertex(148, 200);
    curveVertex(mouthRX, mouthY);
    curveVertex(mouthRX, mouthY);
    endShape(); //mouth
}
 
function mousePressed() {
    eyeSize = random(10, 20);
    eyebrowWidth = random(25, 45);
    eyebrowHeight = random(5, 15); 
    eyeLX = random(60, 80);
    eyeRX = random(200, 220);
    eyeHeight = random(100, 115);
    blushLX = random(70, 95);
    blushRX = random(205, 225);
    blushY = random(130, 140);
    blushWidth = random(30, 70);
    blushHeight = random(20, 35);
    mouthLX = random(100, 140);
    mouthRX = random(170, 210);
    mouthY = random(170, 250); 
    R = color(random(0,255),random(0,255),random(0,255));
    G = color(random(0,255),random(0,255),random(0,255));
    B = color(random(0,255),random(0,255),random(0,255));
    
}
]]>
https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-02-face/feed/ 0
Project 02: Variable Faces https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-02-face-variables/ https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-02-face-variables/#respond Sun, 13 Sep 2020 04:55:21 +0000 https://courses.ideate.cmu.edu/15-104/f2020/?p=57226 Continue reading "Project 02: Variable Faces"]]>
sketch
var bodyWidth = 270;
var bodyHeight = 340;
var eyeWidth = 11;
var eyeHeight = 12;
var mouthWidth = 20;
var mouthHeight = 10;
var armLY = 290
var armRY = 280
var legLX = 250
var legRX = 350
var backgroundR = 243;
var backgroundG = 127;
var backgroundB = 135;


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

function draw() {
    background(backgroundR, backgroundG, backgroundB);

    //left arm
    stroke(169, 124, 80);
    line(width/2-200, armRY, width/2, height/2);
    //right arm
    stroke(169, 124, 80);
    line(width/2, height/2+20, width/2+200, armLY);

    //left leg
    stroke(169, 124, 80);
    line(legLX, height/2+200, width/2, height/2);
    //right leg
    stroke(169, 124, 80);
    line(width/2, height/2, legRX, height/2+200);

    //body shape back
    fill(134, 197, 74);
    stroke(30, 69, 37);
    strokeWeight(15);
    ellipse(width/2, height/2, bodyWidth, bodyHeight);
    //body shape front
    noStroke()
    fill(201, 221, 101)
    ellipse(width/2, height/2, bodyWidth-30, bodyHeight-30);

    //seed
    fill(169, 124, 80);
    circle(width/2, height/2+50, 150);

    //eyes
    fill(0)
    var eyeLX = width/2 - bodyWidth*0.15;
    var eyeRX = width/2 + bodyWidth*0.15;
    ellipse(eyeLX, height/2.45, eyeWidth, eyeHeight); //left eye
    ellipse(eyeRX, height/2.45, eyeWidth, eyeHeight); //right eye
    
    //mouth
    var mouthY = height/2 - bodyHeight*0.13
    if (eyeWidth > eyeHeight) {
        arc(width/2, mouthY, mouthWidth, mouthHeight, PI, 2*PI);
    }
    else {
        fill(247, 165, 170)
        arc(width/2, mouthY, mouthWidth, mouthHeight, 2*PI, PI);
    }
}
function mousePressed() {
    bodyWidth = random(220, 345);
    bodyHeight = random(300, 370);
    eyeWidth = random(7, 20);
    eyeHeight = random(6, 20);
    mouthWidth = random(20, 30);
    mouthHeight = random(10, 50);
    armLY = random(280, 360);
    armRY = random(210, 320);
    legLX = random(220, 270);
    legRX = random(320, 370);
    backgroundR = random(180, 270);
    backgroundG = random(130, 200);
    backgroundB = random(135, 160);
}

The process of coding this avocado was really fun. I enjoyed seeing the different features come together at the end and all the combinations that it created. Here is my sketch in illustrator:

]]>
https://courses.ideate.cmu.edu/15-104/f2020/2020/09/13/project-02-face-variables/feed/ 0
Project 02 – Variable Face https://courses.ideate.cmu.edu/15-104/f2020/2020/09/12/project-02-variable-face-23/ https://courses.ideate.cmu.edu/15-104/f2020/2020/09/12/project-02-variable-face-23/#respond Sun, 13 Sep 2020 03:57:11 +0000 https://courses.ideate.cmu.edu/15-104/f2020/?p=57188 Continue reading "Project 02 – Variable Face"]]>

Some of the detail in this project are similar to the program I covered in my Looking Out for this week. There are times when the face does not look as it should, while there are others when it seems as though the face is trying to convey real emotions. Left click to begin and change faces.

variableface

/* Lance Yarlott (lcy)
   Section D */

// variable definitions, names self explanatory
var canvasWidth = 400;
var canvasHeight = 400;

const headCenterX = canvasWidth / 2;
const headCenterY = canvasHeight / 2;
const headRadius = canvasHeight / 3;

const noseX = headCenterX;
const noseTopY = headCenterY;
const noseBottomY = noseTopY + (headRadius / 4);

const eyeCenterLX = headCenterX - (headRadius / 2);
const eyeCenterRX = headCenterX + (headRadius / 2);
const eyeCenterY = headCenterY - (headRadius / 3);
const eyeWhiteRadius = headRadius / 5;
const irisRadius = eyeWhiteRadius / 2;

const mouthY = headCenterY + (2 *headRadius / 3);
const mouthX = headCenterX;

var skinR = 255;
var skinG = 255;
var skinB = 255;

var noseWidth = 10;
    
var earWidth = 10;

var pupilDilationRadius = 1;
var eyeR = 255;
var eyeG = 255;
var eyeB = 255;
    
var eyebrowWidth = 10;
var eyebrowThickness = 1;
var eyebrowAngle = 0;
var eyebrowDistance = 0;
var eyebrowHeight = eyeCenterY - (2 * eyeWhiteRadius);

var mouthCurve = 0;
var mouthWidth = 1;
var mouthThickness = 1;

var hairR = 255;
var hairG = 255;
var hairB = 255;

var noseR = 255;
var noseG = 255;
var noseB = 255;

var bgColor = 255;

function setup() {
    createCanvas(canvasWidth, canvasHeight);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    frameRate(10);
    noStroke();
}

function draw() {
    if (mouseIsPressed) {
        if (mouseButton === LEFT) { 
            // colors
            skinR = random(0, 255);
            skinG = random(0, 255);
            skinB = random(0, 255);

            eyeR = random(0, 255);
            eyeG = random(0, 255);
            eyeB = random(0, 255);
            
            hairR = random(0, 255);
            hairG = random(0, 255);
            hairB = random(0, 255);

            noseR = random(0, 255);
            noseG = random(0, 255);
            noseB = random(0, 255);

            bgColor = random(0, 255);

            // face shapes
            noseWidth = random(10, headRadius / 2);

            pupilDilationRadius = random(1, irisRadius);
            
            eyebrowWidth = random(10, headRadius / 2);
            eyebrowThickness = random(1, eyeWhiteRadius);
            eyebrowAngle = random(-HALF_PI, HALF_PI);
            eyebrowDistance = random(0, eyebrowWidth);
            eyebrowHeight = eyeCenterY - (random(1, 3) * eyeWhiteRadius);

            mouthCurve = random(50);
            mouthWidth = random(1, headRadius * 2);
            mouthThickness = random(1, 10);
        }
    }

    // set background color
    background(bgColor);

    // draw face outline, variable skin color?
    fill(skinR, skinG, skinB);

    circle(headCenterX, headCenterY, 2 * headRadius);

    // TODO: nose
    fill(noseR, noseG, noseB);
    triangle(noseX - noseWidth, noseBottomY, noseX + noseWidth, noseBottomY,
            noseX, noseTopY);

    // TODO: variable eyes w/ variable color
    fill(255);
    circle(eyeCenterLX, eyeCenterY, eyeWhiteRadius);
    circle(eyeCenterRX, eyeCenterY, eyeWhiteRadius);

    fill(eyeR, eyeG, eyeB);
    circle(eyeCenterLX, eyeCenterY, irisRadius);
    circle(eyeCenterRX, eyeCenterY, irisRadius);

    fill(0);
    circle(eyeCenterLX, eyeCenterY, pupilDilationRadius);
    circle(eyeCenterRX, eyeCenterY, pupilDilationRadius);

    // TODO: variable eyebrows, match hair color
    stroke(hairR, hairG, hairB);
    strokeWeight(eyebrowThickness);
    line(headCenterX + eyebrowDistance, eyebrowHeight - 10 * sin(eyebrowAngle), 
        headCenterX + eyebrowDistance + eyebrowWidth, 
        eyebrowHeight + 10 * sin(eyebrowAngle));
    line(headCenterX - eyebrowDistance, eyebrowHeight - 10 * sin(eyebrowAngle),
        headCenterX - eyebrowDistance - eyebrowWidth,
        eyebrowHeight + 10 * sin(eyebrowAngle));

    // TODO: variable mouth, just shape of curve
    stroke(0);
    curve(mouthX - mouthWidth, mouthY + mouthCurve, mouthX - mouthWidth / 2,
        mouthY - mouthCurve, mouthX + mouthWidth / 2, mouthY - mouthCurve,
        mouthX + mouthWidth, mouthY + mouthCurve);
    noStroke();
}

]]>
https://courses.ideate.cmu.edu/15-104/f2020/2020/09/12/project-02-variable-face-23/feed/ 0