Category: Uncategorized

Project 02- Variable Face

For my project, I decided that instead of coding a typical human face, I wanted to show different animal faces. I wanted the variability to come from the colors of the physical attributes of the animal, its background color, as well as its species! I chose four different animals– a cat, a bear, a koala, and a bunny. I kept the size of their attributes the same since I wanted some consistency with the other randomness.

mk24sketch02 
//Mirie Kim
//section A

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

var animal = 0;
var backgroundColorR = 230;
var backgroundColorG = 220;
var backgroundColorB = 250;
var headEarColorR = 0;  //and whiskers
var headEarColorG = 0;
var headEarColorB = 0;
var innerEarNoseColorR = 250;  //and  snout
var innerEarNoseColorG = 210;
var innerEarNoseColorB = 230;
var eyeColorR = 0;
var eyeColorG = 0;
var eyeColorB = 0;
var smile = 3;
var bearNoseColorR = 90; //and bunny's
var bearNoseColorG = 209;
var bearNoseColorB = 49;
var smileX = 15;
var smileY = 40;

function draw() {
	if(animal >= 0 & animal < 1){ //cat
		noStroke();
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220); //head
		triangle(205,205, 260, 145, 200, 130); //ears
		triangle(435,205, 380, 145, 440, 130);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		triangle(215,195, 250, 155, 215, 150); //inside ears
		triangle(425,195, 390, 155, 425, 150); 
		fill(255);
		ellipse(260,240, 80, 85); //eyes
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);	
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		triangle(320,280, 310, 270, 330, 270); //nose
		stroke(headEarColorR,headEarColorG,headEarColorB);
		strokeWeight(2);
		line(390, 285, 460, 280); //whiskers
		line(390, 295, 450, 300);
		line(180, 280, 250, 285);
		line(180, 300, 250, 295);

	}
	else if (animal >= 1 & animal < 2) { //bear
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		noStroke();
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(225,165,90); //ears
		ellipse(415,165,90);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(225,165,50); //inside ears
		ellipse(415,165,50);
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220); //head
		//eyes
		fill(255); 
		ellipse(260,240, 80, 85);
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(320, 280, 55,40); //snout area
		fill(bearNoseColorR, bearNoseColorG, bearNoseColorB);
		triangle(320,280, 310, 270, 330, 270); 

	}
	else if (animal >= 2 & animal < 3) { //koala
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		noStroke();
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(225,185,140); //ears
		ellipse(415,185,140);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(225,185,80); //inside ears
		ellipse(415,185,80);
		//head
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220);
		//eyes
		fill(255); 
		ellipse(260,240, 80, 85);
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);
		//nose
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(320,275, 45, 57);

	}
	else if (animal >= 3 & animal < 4) { //bunny
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		noStroke();
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(260,145,60,250); //ears
		ellipse(380,145, 60, 250);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(260,145,30, 150); //inside ears
		ellipse(380,145,30, 150);
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220); //head
		//eyes
		fill(255); 
		ellipse(260,240, 80, 85);
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(320, 280, 55,40); //snout area
		fill(bearNoseColorR, bearNoseColorG, bearNoseColorB);
		triangle(320,280, 310, 270, 330, 270);
		stroke(headEarColorR,headEarColorG,headEarColorB);
		strokeWeight(2);
		line(390, 285, 460, 280); //whiskers
		line(390, 295, 450, 300);
		line(180, 280, 250, 285);
		line(180, 300, 250, 295);	
	
	}
}

function mousePressed() {
	animal = random(0,4); //produces decimal so have to refer to range in if/else statements
	backgroundColorR = random(0,255);
 	backgroundColorG = random(0,255);
 	backgroundColorB = random(0,255);
	headEarColorR = random(0,255);
	headEarColorG = random(0,255);
	headEarColorB = random(0,255);
	innerEarNoseColorR = random(0,255);
	innerEarNoseColorG = random(0,255);
	innerEarNoseColorB = random(0,255);
	eyeColorR = random(0,255);
	eyeColorG = random(0,255);
	eyeColorB = random(0,255);
	bearNoseColorR = random(0,255);
	bearNoseColorG = random(0,255);
	bearNoseColorB = random(0,255);
}

My Variable Portrait

Eamonn Burke Variable Portrait
var eyeSize = 10;
var faceWidth = 100;
var faceHeight = 400;
var mouthWidth = 75;
var mouthHeight = 50;
var noseWidth = 20;
var noseHeight = 75;
var eyeballLeft = 5;
var eyeballRight = 5;

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

}

function draw() {
	if (mouseX > width/2 & mouseY > height/2){
		background (0,255,77);		//bright green
	} else if (mouseX < width/2 & mouseY <= height/2){		
		background (0,239,255); 		//bright blue
	} else if (mouseX > width/2 & mouseY < height/2){
		background (255,0,230);			//bright pink
	} else {
		background (255,255,0); 		//bright yellow
	}


		fill(255,204,153);		//beige
	ellipse(width/2,height/2,faceWidth,faceHeight);		//face
		fill(209,109,202);		//pink
		
if (faceHeight <  250) {
  line (width/2, height/2 +faceHeight/3.5, width/2 + faceHeight/3.5, height/2 + faceHeight/3.5);		//straight mouth
} else if (faceHeight < 300) {
	beginShape();		//smile
		curveVertex (width/2,height/2 + faceHeight/3.5);
		curveVertex (width/2,height/2 + faceHeight/3.5);
		curveVertex (width/2 + faceWidth/10, height/2 + faceHeight/3);
		curveVertex (width/2 + faceWidth/5, height/2 + faceHeight/3);
		curveVertex (width/2 + faceWidth/3.5, height/2 + faceHeight/3.5);
		curveVertex (width/2 + faceWidth/3.5, height/2 + faceHeight/3.5);
		endShape();	
} else if (faceHeight < 370) {
	ellipse(width/2,height/2 + faceHeight/3.5,mouthWidth,mouthHeight);		//open mouth
} else {
	fill(0,0,0);		//black
	circle(width/2, height/2 + mouthHeight*1.69, mouthHeight/3.75)		//round mouth dark
	fill(255,46,130);		//pink-red
	beginShape();		//tongue
		curveVertex(width/2 - mouthWidth/10, height/2 + mouthHeight*1.75);
		curveVertex(width/2 - mouthWidth/10, height/2 + mouthHeight*1.75);
		curveVertex(width/2 + mouthWidth/5, height/2 + mouthHeight*2);
		curveVertex(width/2 + mouthWidth/2.5, height/2 + mouthHeight*2.25);
		curveVertex(width/2 + mouthWidth/2, height/2 + mouthHeight *2);
		curveVertex(width/2 + mouthWidth/10, height/2 + mouthHeight*1.75);
		curveVertex(width/2 + mouthWidth/10, height/2 + mouthHeight*1.75);
	endShape();
}

		fill(255,192,129);		//dark beige
	beginShape();		//nose
		curveVertex(width/2 - noseWidth/2.5, height/2 - noseHeight);
		curveVertex(width/2 - noseWidth/2.5, height/2 - noseHeight);
		curveVertex(width/2, height/2 + noseHeight);
		curveVertex(width/2 - noseWidth, height/2 + noseHeight*2);
		curveVertex(width/2 - noseWidth*2, height/2 + noseHeight);
		curveVertex(width/2 - noseWidth*0.7, height/2 - noseHeight);
		curveVertex(width/2 - noseWidth*0.7, height/2 - noseHeight);
	endShape();

if (noseHeight < 30) {		
	fill(0,0,0)
	var nostrilSize = 15
	ellipse (width/2-noseWidth * 1.6, height/2 + noseHeight, nostrilSize, nostrilSize);			//left nostril
	ellipse (width/2 - noseWidth * 0.5, height/2 + noseHeight, nostrilSize, nostrilSize);		//right nostril
}

if (faceWidth < 200) {
		var eyeLX = width/2 - faceWidth/4;		//spread apart eyes
		var eyeRX = width/2 + faceWidth/4;
} else {
		var eyeLX = width/2 - faceWidth * 0.35;		//normal
		var eyeRX = width/2; - faceWidth * 0.2;		//normal
}

		var eyeLY = height/2 - faceHeight * 0.3;
		var eyeRY = height/2 - faceHeight * 0.3;

		fill(255,255,255);		//white
	ellipse(eyeLX,eyeLY,eyeSize,eyeSize);		//left eye
	ellipse(eyeRX,eyeRY,eyeSize,eyeSize);		//right eye
		
if (eyeSize > 50) {		
		fill(3,129,75);		//green
	ellipse(eyeLX,eyeLY,eyeballLeft, eyeballLeft);		//left pupil
	ellipse (eyeRX,eyeRY, eyeballRight, eyeballRight);		//right pupil
} else {
		fill(3,129,75);		//green
		var x = constrain(mouseX,eyeLX - eyeSize/2 + eyeSize/4,eyeLX + eyeSize/2 - eyeSize/4);		//eyeball constraint
	ellipse (x,eyeLY, eyeSize/4, eyeSize/4);		//moving left pupil
		var y = constrain(mouseX,eyeRX - eyeSize/2 + eyeSize/4,eyeRX + eyeSize/2 - eyeSize/4);		//eyeball constraint
	ellipse (y, eyeRY, eyeSize/3, eyeSize/3);		//moving right pupil
}
		
		fill(0,0,0);		//black
if (faceHeight > 300) {
	rect(eyeLX - eyeSize/2,eyeLY - eyeSize/2 - faceHeight/10, eyeSize, eyeSize/4);		//left eyebrow
} else {
	rect(eyeLX - eyeSize/2,eyeLY - eyeSize/1.3- faceHeight/10, eyeSize, eyeSize/4);		//raised left eyebrow
}	
	rect(eyeRX - eyeSize/2,eyeRY - eyeSize/2 - faceHeight/10, eyeSize, eyeSize/4);		//right eyebrow

}





function mousePressed(){		
	faceWidth = random(100,400);
	faceHeight = random(200, 500);
	eyeSize =  random(30,80);
	mouthWidth = random (50,80);
	mouthHeight = random (50,80);
	noseWidth = random (20,50);
	noseHeight = random (20,65);
	eyeballRight = random (5,30);
	eyeballLeft = random (5,30);
	nostrilSize = random (10,15);
	}

noLoop();

My self portrait contains variables such as face height, face width, mouth height and width, eye size, and more. I used lots of conditionals so as to try to make the face as unique as possible each time. I also used constraints, but was not able to include motion, so I want to figure out how to integrate that soon soon.

Project 02–Variable Face

For this project, I made a frog whose features change with each click. By following the template and thinking about the proportions of each feature in relation to one another, I made it so that every frog looks different.

Zimmy Frog
// Zimmy Kang
var eyeSize = 60;
var faceWidth = 200;
var faceHeight = 150;
var pupilSize = 30;
var mouthWidth = 50;
var mouthHeight = 40;
var bodyWidth = 150;
var bodyHeight = 150;
var bellyWidth = 100;
var bellyHeight = 100;
var feetWidth = 40;
var feetHeight = 40;



 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(51, 212, 255);
    noStroke();
         fill(29, 80, 29);
         ellipse(width/2, height/2 + 50, 450, 300); // lily pad
    fill(29, 112, 29);
    ellipse(width/2, height/2, bodyWidth, bodyHeight); // body

         var footLX = width/2 - bodyWidth*0.30;
         var footLY = height/2 + bodyHeight/2;
         var footRX = width/2 + bodyWidth*0.30;
         var footRY = height/2 + bodyHeight/2;
         arc(footLX, footLY, feetWidth, feetHeight, PI, TWO_PI, CHORD);
         arc(footRX, footRY, feetWidth, feetHeight, PI, TWO_PI, CHORD); // feet
    fill(174, 206, 44);
    ellipse(width/2, height/2, bellyWidth, bellyHeight); // belly
         fill(67, 155, 67);
         ellipse(width / 2, height / 3, faceWidth,  faceHeight); // face
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var eyeLY = height/3 - faceHeight*0.25;
    var eyeRY = height/3 - faceHeight*0.25;
    var socket = eyeSize+10;
    ellipse(eyeLX, eyeLY, socket, socket);
    ellipse(eyeRX, eyeRY, socket, socket); // sockets
         fill(255, 255, 255);
         stroke(29, 112, 29);
         ellipse(eyeLX, eyeLY, eyeSize, eyeSize);
         ellipse(eyeRX, eyeLY, eyeSize, eyeSize); // eye whites
    fill(0);
    noStroke();
    ellipse(eyeLX, eyeLY, pupilSize, pupilSize);
    ellipse(eyeRX, eyeLY, pupilSize, pupilSize); // pupils
         fill(255, 183, 179);
         var mouthX = width/2;
         var mouthY = height/3 + faceHeight*0.1; //mouth location
         stroke(29, 112, 29);
         arc(mouthX, mouthY, mouthWidth, mouthHeight, 0, PI, CHORD); // mouth
    

 

}
 
function mousePressed() {
    faceWidth = random(200, 480);
    faceHeight = random(150, 200);
    eyeSize = random(50, 90);
    pupilSize = random (10, 49);
    socket = random(60, 80);
    mouthWidth = random(50, 190);
    mouthHeight = random(10, 90);
    bodyWidth = random(150, 400);
    bodyHeight = random(80, 180);
    bellyWidth = random(100, 140);
    bellyHeight = random (30, 70);
    feetWidth = random(40, 75);
    feetHeight = random(40, 50);
}

Project-02-Variable Face

sketchDownload
//Jiayu Xu
//Section A
var bodyWidth=450;
var bodyHeight=400;
var handWidth=90;
var handHeight=100;
var feetWidth=110;
var feetHeight=90;
var eyeDiameter=60;
var teethWidth=60;
var teethHeight=30;
var eyeBrowrightX=213;
var eyeBrowrightY=120;
var eyeBrowleftX=427;
var eyeBrowleftY=175;
var mouthWidth=243;
var mouthHeight=160;
var righthandHeight=240;
var lefthandHeight=240;
function setup() {
    createCanvas(640,480);
    background(random(204,255),random(204,255),random(204,255));
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	stroke(0);
	strokeWeight(8);
	fill(153,76,0);
	ellipse(width/2-bodyWidth/2-20, righthandHeight, handWidth, handHeight);//righthand
	ellipse(width/2+bodyWidth/2+20, lefthandHeight, handWidth, handHeight);//lefthand
	ellipse(width*1/3, height-50, feetWidth, feetHeight);//rightfeet
    ellipse(width*2/3, height-50, feetWidth, feetHeight);//leftfeet
	fill(195,126,48);
	ellipse(width/2,height/2,bodyWidth,bodyHeight);  //body
	strokeWeight(30);
	line(eyeBrowrightX, eyeBrowrightY, width/3+60, height/4+50);//right eyebrow
	strokeWeight(8);
	line(eyeBrowleftX, eyeBrowleftY, width*2/3-60, height/4+55);//left eyebrow
	fill(0);
	circle(width/2-70, height/2-10, eyeDiameter);//righteye
	circle(width/2+70,height/2-10, eyeDiameter);//lefteye
	fill(153,76,0);
    arc(width/2,height*3/5, mouthWidth, mouthHeight, 0, PI);//mouth
    
    fill(255);
    noStroke();
    rect(width/2-teethWidth/2, height*3/5, teethWidth, teethHeight);//teeth
}

function mousePressed() {
	clear();
	bodyWidth=random(400,451);
	bodyHeight=random(300,400);
	eyeDiameter=random(40,70);
	eyeBrowrightX=random(200,220);
	eyeBrowrightY=random(120,200);
	eyeBrowleftY=random(150,180);
	mouthWidth=random(200,300);
	mouthHeight=random(0,160);
	righthandHeight=random(200,300);
	lefthandHeight=random(200,300);
	handWidth=random(80,100);
	handHeight=random(90,108)
	background(random(204,255),random(204,255),random(204,255));



}

The face in my work is “Shooky” from BT21, which is a cartoon character designed by Suga from BTS. I chose it because it can be easily represented by basic geometric figures and I would love to see how its facial expressions change after every click.

BT21 - LINE FRIENDS INC

LO-2-Generative Art

Upon looking through Robert Hodgin’s portfolio, a project that caught my attention was “Star Chart.” This project was completed in April 2020 and is essentially a map of constellations from any time and location. As a statistics major, I study a lot about data so the fact that this project was achieved through the use of astronomical databases piqued my interest. I admire how he was able to take something rather unexciting and imperceptible like a database of numbers and made it into something much more visual and stimulating. This project was a continuation from a previous project of his from 2012 where he plotted about 120,000 different star positions in a 3-D space to mimic the stars surrounding the sun. For this new project, however, he wanted to show the night sky view of the stars so he used stereographic projection, which projects a sphere onto a plane.
Hodgin’s interest in physics and astronomy requires accuracy and precision, which suit perfectly with his methods of using data visualization to create his projects.

Project-02-Variable-Face

powerpuffDownload
//Annie Kim
//andrewID: anniekim
//Section B

var Reye= 228; //color of original eye (red)
var Geye = 175; //color of original eye (green)
var Beye = 195; //color of original eye (blue)
var HR = 255; //color of original hair (red)
var HG = 159; //color of original hair (green)
var HB = 65; //color of original hair (blue)
var pupil = 20; // diameter of pupil
var heart1r = 227; //red of heart1
var heart1g = 83; //green of heart1
var heart1b = 102; //blue of heart1
var heart2r = 232; //red of heart2
var heart2g = 138; // green of heart2
var heart2b = 173; //blue of heart 2
var backgroundr = 158 // red of background
var backgroundg = 15 // green of background
var backgroundb = 28 // blue of background
var StrokeArrow = 15; //stroke size of arrow
var RectColorR = 218; //red of right background
var RectColorG = 127; // green of right background
var RectColorB = 157; // blue of right background
var backR = 216; // red of original background
var backG = 77; // green of original background
var backB = 82; //blue of original background
var smilecurvex = 20; //width of smile
var smilecurvey = 15; //height of smile


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

function draw() {
    background(backR, backG, backB);


    //right half of background
    stroke(RectColorR, RectColorG, RectColorB);
    fill(RectColorR, RectColorG, RectColorB);
    rect(320, 0, 320, 480);


     //lines across
    stroke(248, 206, 93);
    strokeWeight(StrokeArrow);
    line(140, 380, 550, 80);
    line(65, 370, 140, 380);
    line(100, 450, 140, 380);
    fill(248, 206, 93);
    triangle(540, 57, 575, 100, 580, 60);


//heart1 forming
    fill(heart1r, heart1g, heart1b);
    strokeWeight(7);
    stroke(heart1r, heart1g, heart1b);
    triangle(171, 210, 469, 210, 320, 440);
    circle(244, 183, 155);
    circle(396, 183, 155);

//second heart layer
    fill(heart2r, heart2g, heart2b);
    stroke(heart2r, heart2g, heart2b);
    triangle(240, 240, 400, 240, 320, 360);
    circle(359, 220, 92);
    circle(281, 220, 92);

//middle hair behind the back
    fill(HR, HG, HB);
    stroke(HR, HG, HB);
    arc(320, 260, 120, 140, 0, PI, CHORD);
    triangle(320, 200, 275, 260, 365, 260);

    //body middle
    fill(Reye, Geye, Beye);
    stroke(0);
    strokeWeight(5);
    rect(295, 220, 50, 80);
    fill(0);
    rect(295, 245, 50, 30);
    fill(255);
    stroke(255);
    rect(328, 305, 15, 40);
    ellipse(297, 297, 25, 45);
    fill(0);
    stroke(0);
    arc(297, 297, 25, 45, 0, PI, CHORD); //left shoe
    arc(335.5, 337, 17, 35, 0, PI, CHORD); //right shoe

    //recovering black stroke
    stroke(0);

    //middle right arm
    fill(246, 232, 219);
    stroke(246, 232, 219);
    circle(230, 240, 30);
    circle(410, 120, 30);
    stroke(246, 232, 219);
    rect(395, 120, 30, 40);
    triangle(395, 160, 422, 164, 377, 200);
    triangle(235, 225, 295, 225, 243, 249);

 //middle bow
    fill(255, 0, 0);
    stroke(255, 0, 0);
    circle(270, 80, 25);
    circle(375, 80, 25);
    triangle(257, 89, 255, 155, 295, 170);
    strokeWeight(30);
    line(274, 85, 310, 170);
    strokeWeight(1);
    arc(320, 120, 60, 35, PI, 0);
    strokeWeight(30);
    line(375, 80, 330, 170);
    line(375, 80, 370, 175);


    //head middle
    strokeWeight(2);
    fill(246, 232, 219);
    stroke(0);
    ellipse(320, 177, 135, 110);
    

    //middle eyes
    strokeWeight(2);
    fill(255);
    circle(283, 175, 60);
    circle(355, 175, 60);
    fill(Reye, Geye, Beye);
    stroke(Reye, Geye, Beye);
    circle(350, 178, 45); // color of right eye pink 
    circle(290, 178, 45); // color of left eye pink
    noFill();
    stroke(0);
    circle(283, 175, 60);
    circle(355, 175, 60);
    fill(0);
    stroke(0);
    circle(346, 180, 35); // black of right eye
    circle(294, 180, 35); // black of left eye
    fill(255);
    circle(346, 180, pupil);
    circle(294, 180, pupil);


    //middle bangs
    fill(HR, HG, HB);
    stroke(0);
    strokeWeight(1.5);
    arc(320, 150, 118, 52, PI, 0, CHORD);
    fill(246, 232, 219);
    stroke(246, 232, 219);
    triangle(320, 135, 310, 155, 330, 155);


    //overlapping head shape
    noFill();
    stroke(0);
    strokeWeight(5);
    ellipse(320, 177, 135, 110);

     //middle smile
    noFill();
    strokeWeight(2);
    arc(320, 205, smilecurvex, smilecurvey, 0, PI);
 
}
    function mouseClicked() {
    Reye = random(0, 255);
    Geye = random(0, 255);
    Beye = random(0, 255);
    HR = random(0,255);
    HG = random(0, 255);
    HB = random(0, 255);
    pupil = random(15, 35);
    heart1r = random(100, 255);
    heart1g = random(75, 90);
    heart1b = random(80, 110);
    heart2r = random(0, 100);
    heart2g = random(0, 100);
    heart2b = random(0,100);
    backgroundr = random(150, 200);
    backgroundg = random(15, 25);
    backgroundb = random(20,30);
    StrokeArrow = random(1, 20);
    RectColorR = random(200,220);
    RectColorG = random(110, 130);
    RectColorB = random(150, 160);
    backR = random(200, 255);
    backG = random(50, 100);
    backB = random(60, 100);
    smilecurvex = random(15, 45);
    smilecurvey = random(15, 45);
}

I decided to create a PowerPuff character because I thought it would be interesting to see how the appearance of the character would change with each click, and I wanted to see if I could get it to look like the other PowerPuff characters by continuously clicking. I worked on most of the shapes (such as the bow, the hair, the hearts, etc) by putting together a variety of shapes. It was a little challenging to make sure everything aligned perfectly. One of the hardest things was making sure that everything remained proportionate to the actual character from the show. I think that this does a nice job of making this character essentially customizable because you can keep clicking until you are happy with the color and sizes of different features.

Project 1: Self Portrait

sketchDownload
//order of layers: bkg > sweater > chest > face > features 
//top to bottom > hair
//bkg: 244, 228, 203
//sweater: 204, 191, 174
//chest: 216, 174, 136
//face: 220, 189, 149
	//eye whites: 235, 219, 215
	//iris & brows: 86, 73, 66
	//lip1: 221, 143, 139
	//lip2: 179, 109, 105


function setup() {
    createCanvas(800, 1000);
    background(244, 228, 203);						//bkg
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	noStroke();

	fill(204, 191, 174);							//sweater
	rect(650, 600, 150, 200);

	fill(216, 174, 136);							//chest skin
	rect(400, 650, 250, 350);
	arc(650, 875, 50, 250, 0, HALF_PI);

	fill(220, 189, 149);							//face skin
	rect(100, 200, 500, 300);
	arc(400, 675, 250, 100, 0, HALF_PI);
	rect(400, 500, 125, 175);

	fill(63, 60, 73);								//hair 
	arc((425/2), 180, 200, 200, PI, TWO_PI);		//hair positive
	arc(350, 80, 300, 125, 0, TWO_PI);
	arc(500, 250, 250, 350, PI+HALF_PI, TWO_PI);
	arc(125, 400, 250, 450, PI, PI+HALF_PI);
	arc(400, 1000, 250, 550, 0, TWO_PI);
	rect(0, 375, 150, 350);
	rect(0, 725, 400, 275);
	arc(800, 600, 600, 650, 0, PI);
	rect(625, 250, 175, 350);
	rect(150, 450, 100, 200);
	rect(150, 650, 250, 75);
	rect(125, 150, 100, 75);
	arc(125, 225, 100, 300, 0, HALF_PI);
	rect(275, 75, 225, 175);
	rect(500, 250, 125, 150);
	rect(550, 400, 75, 200);
	arc(550, 600, 100, 400, PI, PI+HALF_PI);

	fill(220, 189, 149);							//face skin
	arc(300, 250, 400, 225, PI+HALF_PI, TWO_PI);	//hair negative
	arc(300, 225, 250, 175, 0, PI+HALF_PI);
	arc(400, 375, 550, 700, HALF_PI, PI);
	arc(500, 400, 100, 300, PI+HALF_PI, TWO_PI);
	arc(320, 397, 490, 515, PI+HALF_PI, TWO_PI);
	fill(63, 60, 73);								//hair
	arc(575, 600, 150, 500, PI, PI+HALF_PI);		
	fill(244, 228, 203);							//bkg
	arc(800, 250, 350, 400, HALF_PI, PI);

	fill(86, 73, 66);								//brow
	arc((425/2), (725/2), 75, 100, PI, PI+HALF_PI);	//left brow
	strokeWeight(51/2);
	stroke(86, 73, 66);
	line((425/2), 325, 300, 333);
	noStroke();
	rect(200, 325, 50, 25)
	fill(220, 189, 149);							//face skin
	noStroke();
	rect(250, 325, 75, 25);
	fill(86, 73, 66);								//brow
	arc(250, 325, 120, 40, 0, PI);
	fill(220, 189, 149)								//face skin
	arc((425/2), (725/2), 75, 50, PI, PI+HALF_PI);
	arc((425/2), (725/2), 175, 50, PI+HALF_PI, TWO_PI);

	fill(86, 73, 66)								//brow
	arc(475, 300, 100, 50, PI+HALF_PI, TWO_PI);		//right brow
	strokeWeight(25);
	stroke(86, 73, 66);
	line(400, (625/2), 475, (575/2))
	noStroke();
	fill(220, 189, 149)								//face skin
	arc(500, 302, 50, 15, PI, TWO_PI);
	arc(476, 325, 275, 50, PI, PI+HALF_PI);
	fill(86, 73, 66);								//brow
	arc(431, 300, 90, 20, 0, HALF_PI);
	ellipse(420, 308, 62, 25);
	strokeWeight(10)
	stroke(220, 189, 149)							//face skin
	line(480, 303, 400, 330)
	noStroke();

	fill(216, 174, 136)								//chest skin
	arc(425, 375, 75, 250, HALF_PI, PI);			//nose bridge
	fill(220, 189, 149);							//face skin
	arc(425, 375, 75, 200, HALF_PI, PI);

	fill(216, 174, 136);							//chest skin
	arc(262, 400, 100, 30, PI, TWO_PI);				//left eye
	arc(250, 400, 125, 50, 0, HALF_PI);
	arc(250, 400, 75, 50, HALF_PI, PI);
	fill(235, 219, 215);							//eye white
	strokeWeight(2);
	stroke(63, 60, 73)								//hair
	arc(275, 400, 75, 20, PI+HALF_PI, TWO_PI);
	arc(275, 413, 100, 46, 	PI, PI+HALF_PI);
	noStroke();
	arc(275, 413, 100, 15, HALF_PI, PI);
	arc(275, 400, 75, 41, 0, HALF_PI);
	fill(86, 73, 66);								//iris
	ellipse(275, 406, 30, 30);

	fill(216, 174, 136);							//chest skin
	arc(475, 391, 116, 82, PI, PI+HALF_PI);			//right eye
	arc(475, 375, 75, 50, PI+HALF_PI, TWO_PI);
	arc(475, 375, 75, 32, 0, HALF_PI);
	fill(220, 189, 149);							//face skin
	rect(500, 350, 25, 50);
	fill(235, 219, 215);							//eye white
	strokeWeight(2);
	stroke(63, 60, 73)								//hair
	arc(450, 391, 60, 50, PI, PI+HALF_PI);
	arc(463, 370, 50, 13, PI, TWO_PI);
	noStroke();
	ellipse(443, 381, 25, 25);
	arc(450, 370, 75, 43, 0, HALF_PI);
	fill(220, 189, 149);							//face skin
	arc(440, 397, 75, 15, PI, TWO_PI);
	fill(86, 73, 66);								//iris
	ellipse(450, 378, 25, 25);

	fill(216, 174, 136)								//chest skin
	arc(425, 495, 35, 39, 0, TWO_PI);						//nose
	arc(350, 525, 50, 116, PI, PI+HALF_PI);
	ellipse(350, 525, 50, 32);
	ellipse(375, 525, 63, 16);
	rect(350, 475, 75, 50);
	fill(220, 189, 149);							//face skin
	ellipse(375, 480, 58, 45);
	ellipse(363, 535, 35, 28);
	ellipse(416, 522, 24, 24);

	fill(179, 109, 105)								//lip2
	arc(400, 600, 150, 75,HALF_PI, PI);				//bottom lip
	arc(400, 575, 150, 125, 0, HALF_PI);
	fill(220, 189, 149);							//face skin
	rect(375, 550, 50, 50);
	fill(221, 143, 139);							//lip1
	arc(413, 575, 125, 16, PI+HALF_PI, TWO_PI);		//top lip
	arc(413, 600, 50, 66, PI, PI+HALF_PI);
	arc(326, 575, 300, 66, 0, HALF_PI);
	arc(388, 600, 125, 50, PI, PI+HALF_PI);
	arc(388, 600, 50, 50 , PI+HALF_PI, TWO_PI);
	fill(220, 189, 149);							//face skin
	triangle(325, 610, 375, 575, 325, 575);			//top lip negative
	triangle(475, 580, 475, 567, 410, 567);
	triangle(475, 580, 480, 567, 475, 567);
	triangle(410, 567, 395, 575, 395, 567);

	noLoop();
}

Project 01 – Self Portrait

This is my self portrait, with moving eyeballs

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

function draw() {
    background(181, 206, 203);
    noStroke();

    //hair back
    fill(80, 71, 104);
    ellipse(width/2-30, height/2+50, 300, 400);
    //neck
    fill(232, 199, 182);
    rect(250, 415, 80, 120)
    //hair in front of neck
    fill(80, 71, 104);
    ellipse(225, 460, 65, 155);
    //face
    fill(199, 171, 156);
    ellipse(width/2-30, height / 2, 200, 250);
    fill(232, 199, 182);
    ellipse(width/2, height/2, 150, 250);
    //eyebrows
    fill(121, 149, 155)
    triangle(162, 285, 190, 280, 217, 288);
    fill(121, 149, 155)
    triangle(253, 283, 275, 275, 300, 280);

    //hair front
        //right
    fill(80, 71, 104);
    ellipse(width/2+10, height/2-70, 140, 112);
    fill(80, 71, 104);
    ellipse(width/2+55, height/2+25, 55, 175);
    fill(80, 71, 104);
    ellipse(width/2+55, height/2+108, 65, 155);
        //left
    fill(80, 71, 104);
    arc(width/2-110, height/2-95, 135, 140, 7*PI/4, 3*PI/4);
    fill(80, 71, 104);
    ellipse(width/2-20, height/2-100, 100, 80);

    //eye shadow
    fill(206, 144, 140);
    arc(195, 314, 38, 27, PI, 0);
    fill(206, 144, 140);
    arc(279, 305, 38, 27, PI, 0);
    //wink eye
    fill(79, 63, 54);
    triangle(162, 312, 200, 306, 219, 316);
    fill(79, 63, 54);
    triangle(172, 302, 195, 310, 185, 313);
    fill(79, 63, 54);
    triangle(178, 300, 202, 312, 192, 313);
    //right eyelashes
    fill(79, 63, 54);
    triangle(265, 299, 280, 304, 305, 291);
    fill(79, 63, 54);
    triangle(265, 309-9, 280, 314-5, 305+5, 301-5);
    //right eye
    fill(79, 63, 54);
    ellipse(width/2-22, height/2+15, 50, 37);
    //moving pupil
        //setting boundaries
    if(mouseX < 250) {
        fill(232, 199, 182)
        circle(width/2-32, height/2+11, 13);
        circle(width/2-23, height/2+19, 6);
    }
    else if (mouseX > 366) {
        fill(232, 199, 182)
        circle(width/2-32, height/2+11, 13);
        circle(width/2-23, height/2+19, 6);
    }
    else if (mouseY < 305) {
        fill(232, 199, 182)
        circle(width/2-32, height/2+11, 13);
        circle(width/2-23, height/2+19, 6);
    }
    else if (mouseY > 442) {
        fill(232, 199, 182)
        circle(width/2-32, height/2+11, 13);
        circle(width/2-23, height/2+19, 6);
    }
        //movement
    else {
        fill(232, 199, 182);
        circle(mouseX-20, mouseY-20, 13);
        circle(mouseX-13, mouseY-13, 6);
    }
    //undereye shadow
    fill(199, 171, 156);
    triangle(268, 337, 277, 340, 294, 335);
    
    //ear
    fill(232, 199, 182);
    ellipse(width/2+30, height/2+35, 50, 50);
    fill(199, 171, 156);
    arc(width/2+33, height/2+30, 30, 30, 3*PI/2, PI/2)
    fill(232, 199, 182);
    arc(width/2+30, height/2+37, 30, 30, 3*PI/2, PI/2)
    //nose
    fill(232, 199, 182);
    triangle(219, 355, 228, 302, 237, 362);
    fill(199, 171, 156);
    triangle(238, 362, 248, 362, 253, 352);
    //mouth
    fill(168, 102, 98);
    arc(253, 385, 31, 25, 11*PI/12, 23*PI/12);
    fill(168, 102, 98);
    arc(260, 383, 37, 25, 23*PI/12, 11*PI/12);
    strokeWeight(2);
    stroke(155, 133, 121);
    line(230, 390, 290, 375);

    //clothes
    strokeWeight(5);
    stroke(181, 206, 203);
    fill(121, 149, 155);
    ellipse(width/2+4, 706, 300, 500);
}

Profile

#Selfie

PortraitDownload
function setup() {
  createCanvas(500, 500);
  background(224, 212, 189);
  strokeWeight(4)
}
 
 function draw() {

 	 
//Back Bangs
   fill(94, 62, 44); //brown
   arc(316, 100, 142, 142, PI + QUARTER_PI, TWO_PI + QUARTER_PI, OPEN);
   arc(306, 110, 142, 142, PI + QUARTER_PI, TWO_PI + QUARTER_PI, CHORD);

  
//Face (Skin)  
    fill(244, 202, 189); //skin color
    quad(331, 148, 375, 196, 323, 250, 288, 160)
    quad(366, 218, 366, 250, 331, 313, 323, 218)
    ellipse(245, 128, 180, 142);
    ellipse(350, 300, 45, 45);
    ellipse(363, 246, 18, 18);
    ellipse(371, 207, 22, 22);
    rect(158, 150, 173, 175);
    arc(260, 246, 160, 160,  PI + HALF_PI, HALF_PI, CHORD);
  
//Back of Hair
    fill(94, 62, 44); //brown
 	rect(90, 110, 115, 400);
   
   
//Eye
   fill(255,255,255);          //white
   triangle(284, 178, 308, 166, 308, 181);
   fill(0);          //black
   ellipse(308, 173, 5, 15);
   arc(309, 160, 16, 14, TWO_PI, HALF_PI, OPEN);
 
//Nose
   fill(255,255,255); //white
   arc(355, 218, 33, 33,  PI, TWO_PI, CHORD);
   fill(244, 202, 189);
   ellipse(345, 220, 14, 14);
   
//Lips
   fill(226, 102, 107);          //coral
   triangle(341, 268, 365, 255, 367, 249);
   triangle(340, 270, 358, 260, 359, 278);
   ellipse(361, 268, 15, 15);
 
// Shirt
   fill(18);
   ellipse(220, 495, 400, 240);
   ellipse(80, 490, 200, 200);
   
//HAIR
    
  //Behind Top Of Head
      fill(94, 62, 44); //brown
      ellipse(172, 110, 244, 154);
   
   // Quad below lower hair (aka extensions)
       quad(164, 316, 128, 412, 210, 443, 260,322);
   
  
    //Ringlet 1 (right center)
        arc(200, 200, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
        arc(190, 200, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
        arc(180, 200, 142, 142, PI + HALF_PI, HALF_PI, OPEN);


    //Ringlet 2 (bottom left)
       arc(100, 350, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(110, 350, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(120, 350, 142, 142, HALF_PI, PI + HALF_PI, OPEN);

    //Ringlet 3 (bottom left right side)
       arc(130, 440, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(140, 440, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(150, 440, 142, 142, HALF_PI, PI + HALF_PI, OPEN);

    //Ringlet 4 (right middle)
       arc(220, 350, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(210, 350, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(200, 350, 142, 142, PI + HALF_PI, HALF_PI, OPEN);

    //Ringlet 5 (right upper)
        arc(140, 290, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
        arc(130, 290, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
        arc(120, 290, 142, 142, PI + HALF_PI, HALF_PI, OPEN);

    //Ringlet 6 (lowest)
       arc(170, 480, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(160, 480, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(150, 480, 142, 142, PI + HALF_PI, HALF_PI, OPEN);


    //Ringlet 7 (bottom left up one)
       arc(90, 220, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(100, 220, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(110, 220, 142, 142, HALF_PI, PI + HALF_PI, OPEN);

    //Ringlet 8 (top crown left)
       arc(100, 100, 142, 110, HALF_PI, PI + HALF_PI, OPEN);
       arc(110, 100, 142, 110, HALF_PI, PI + HALF_PI, OPEN);
       arc(120, 100, 142, 110, HALF_PI, PI + HALF_PI, OPEN);


    //Ringlet 9 (right)
       arc(140, 140, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(130, 140, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(120, 140, 142, 142, PI + HALF_PI, HALF_PI, OPEN);

    //Ringlet 10 (center)
       arc(140, 240, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(150, 240, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(160, 240, 142, 142, HALF_PI, PI + HALF_PI, OPEN);

    //Ringlet 11 (top right)
       arc(140, 140, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(130, 140, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(120, 140, 142, 142, PI + HALF_PI, HALF_PI, OPEN);


             //BANGS
               arc(280, 100, 142, 142, PI + QUARTER_PI, TWO_PI + QUARTER_PI, OPEN);
               arc(270, 110, 142, 142, PI + QUARTER_PI, TWO_PI + QUARTER_PI, CHORD);
 
  
 }

Project 1 – Self Portrait

This is my self portrait

Portrait
function setup() {
    createCanvas(300, 300);
    background(81, 170, 223);
    
}

function draw() {
	noStroke();
	//sky
	//fill(255, 255, 255);
	//circle(30, 40, 30);
	//rect(30, 25, 80, 30);
	//circle(110, 40, 30);
	//circle(80, 20, 30);
	//rect(80, 5, 80, 30);
	//circle(160, 20, 30);
	//circle(200, 30, 30);
	//rect(200, 15, 80, 30);
	//circle(280, 30, 30);
	//Ear
	//80 Down
	fill(244, 195, 162);
	ellipse(200, 140, 10, 20);
	//Head
	//80 Down
	rect(100, 80, 100, 120);
	//Neck
	//200 Down
	rect(140, 200, 20, 60);
	//Body
	//260 Down
	fill(79, 106, 230);
	rect(90, 260, 120, 40);
	//Top of Hair
	fill(247, 227, 131);
	rect(100, 80, 100, 20);
	//Left Side of Hair
	rect(100, 100, 10, 20);
	//Right Side of Hair
	rect(190, 100, 10, 20);
	//Right Eye
	fill(255, 255, 255);
	ellipse(115, 145, 20);
	//Left Eye
	ellipse(175, 145, 20);
	//Eyes Cont.
	fill(0, 0, 0);
	ellipse(112, 145, 10);
	ellipse(172, 145, 10);
	//Nose
	fill(200, 140, 120);
	triangle(140, 150, 145, 170, 135, 170);
	//mouth
	rect(110, 180, 30, 15);


}