I started using CurveVertex in this project and turn out a very smooth curve.
Hair color, mouth color and size of eyes and nose are changing with every click. I had a lot of fun in this.
/* Rani Randell
Section A
rrandell@andrew.cmu.edu
Project 2 variable faces */
// Simple beginning template for variable face.
var eyeSize =20;var faceWidth =100;var faceHeight =150;var backcolor;var mouthW =70;var mouthH =30;functionsetup(){createCanvas(640,480);var R =random(20,250);var G =random(100,200);var B =random(10,200);
backcolor =color(R, G, B);}functiondraw(){background(backcolor);fill(230,10,200)ellipse(width /2, height /2, faceWidth, faceHeight);//face
var eyeLX = width /2- faceWidth *0.25;var eyeRX = width /2+ faceWidth *0.25;fill(10,30,200);ellipse(eyeLX, height /2, eyeSize, eyeSize);//left eye
fill(30,70,70);ellipse(eyeRX, height /2, eyeSize, eyeSize); //right eye
rect(width/2-35, height/2-20,20,3)//eyebrows
rect(width/2+15, height/2-20,20,3)fill(200,10,120); //mouth color
ellipse(width/2, height/2+40, mouthW, mouthH)//mouth
}functionmousePressed(){ // 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);var R =random(20,250);var G =random(100,200);var B =random(10,200);
backcolor =color(R, G, B);
mouthH =random(10,40);
mouthW =random(60,90);}
For my Variable Faces project, I wanted to explore randomizing different colors of the background when the mouse is pressed. I accomplished this by making distinct RGB variables and then randomizing them in the mousePressed function.
I found this project to be pretty difficult to wrap my head around at first, though as I continued on with the project it started to make more sense. As I got into the random manipulation, I started to enjoy myself more than when I was figuring out the arithmetic. I definitely want to use more variables in future projects so I can continue to get more comfortable with them.
//Ean Grady
//Section A
//egrady@andrew.cmu.edu
//Project-02
var x =0var y =0var z =0var x2 =0var y2 =0var z2 =0var b =0var n =0var m =0var trix1 =160var trix2 =440var rx1 =205var ry1 =220var rx2 =315var ry2 =220var w =0var e =0var r =0var i =0var o =0var p =0var size =200functionsetup(){createCanvas(640,480);}functiondraw(){
background (255,255,200);noStroke(); //hair petals
fill (x2, y2, z2)
ellipse (215,210,70,60)
fill (x2, y2, z2)
ellipse (272,180,70,60)
fill (x, y, z)
ellipse (180,265,70,60)
fill (x2, y2, z2)
ellipse (180,330,70,60)
fill (x, y, z)
ellipse (215,385,70,60)
fill (x2, y2, z2)
ellipse (280,420,70,60)
fill (x, y, z)
ellipse (360,405,70,60)
fill (x2, y2, z2)
ellipse (405,355,70,60)
fill (x, y, z)
ellipse (415,290,70,60)
fill (x2, y2, z2)
ellipse (395,230,70,60)
fill (x, y, z)
ellipse (344,185,70,60) //purple body
fill (120,20,200)ellipse(300,500, size,200) //face
fill (200,205,255)
ellipse (300,300,250,250) //eyes
fill(w, e, r)arc(240,260,80,40,150, PI + QUARTER_PI, CHORD);arc(360,260,80,40,150, PI + QUARTER_PI, CHORD);fill(i, o, p)arc(240,260,80,40,20, PI + QUARTER_PI, CHORD);arc(360,260,80,40,20, PI + QUARTER_PI, CHORD);fill(255,255,255)ellipse(360,260,20,20)ellipse(240,260,20,20)fill(0,0,0)ellipse(360,260,10,10)ellipse(240,260,10,10) //mouth
fill(255,20,123)rect(270,300,60,100)fill(0,0,0)rect(275,305,50,90) //eyebrows
fill (0,0,0)
rect (rx1, ry1,80,20)
rect (rx2, ry2,80,20) //triangle hat
fill(b, n, m)triangle(trix1,210, trix2,210,300,100);}functionmousePressed(){
x =random(0,255);
y =random(0,255);
z =random(0,255);
x2 =random(0,255);
y2 =random(0,255);
z2 =random(0,255);
b =random(0,255);
n =random(0,255);
m =random(0,255);
trix1 =random(100,160)
trix2 =random(440,500)
ry1 =random(220,200)
rx1 =random(200,220)
ry2 =random(220,200)
rx2 =random(310,320)
w =random(0,255)
e =random(0,255)
r =random(0,255)
i =random(0,255)
o =random(0,255)
p =random(0,255)
size =random(200,250)}
For this project, I didn’t use a pre-drawn sketch of mine, I instead went straight into programming which proved to be the main problem. I don’t mind how my variable face turned out, but in the future, I want to start employing the use of drawings more to make it more organized.
For this project, I was inspired by my love of eggs. I began experimenting with egg sketches on illustrator and ultimately decided to put my eggs in a nest. I also decided to change the color, eyes, brows, and mouth so that a new egg would appear on every click. This project was more challenging than the last one, but I still had a lot of fun.
I wanted to take a more scientific approach to the idea of generated variations, so I decided to focus my project on variations of an animal species. I chose the arowana because it’s one of my favorite animals, and because I wanted to try and capture its distinctive shape. Overall, I had a lot of fun with this project!
// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu
// Project-02
var eyeWidth =35;var eyeHeight =70;var faceWidth =220;var faceHeight =220;var mouthWidth =10;var mouthHeight =10;var bubbleOnex =185;var bubbleOney =140;var bubbleThreex =290;var bubbleThreey =110;var soapouterR =252;var soapouterB =193;var soapouterG =204;var soapinnerR =252;var soapinnerB =207;var soapinnerG =204;functionsetup(){createCanvas(640,480);background(249,240,255);}functiondraw(){ellipseMode(CENTER); //face
noStroke();fill(207,231,235);rect(121.859,189.318, faceWidth, faceHeight,50); //body or face
ellipse (242.65,333.46,281.586,120.819); //arm
//eyes
fill(132,156,185);
stroke (255);strokeWeight(9);ellipse(224.87,324.63,eyeWidth, eyeHeight); //left eye
ellipse(286.56,324.63,eyeWidth, eyeHeight); //right eye
//mouth
noStroke();fill(243,141,154);ellipse(255.94,376.31,mouthWidth,mouthHeight); //soap
fill(soapouterR,soapouterB,soapouterG); // soap RBG
rect(383.44,269.56,52.33,90.693,20); //the outer shape
fill(soapinnerR,soapinnerG,soapinnerB);ellipse(410,315.11,20,55); //the inner shape
//bubbles
stroke(132,156,185);fill(255);ellipse(bubbleOnex,bubbleOney,22,22); //bubbleOne
ellipse(232,150,18,18); //bubbleTwo
ellipse(bubbleThreex,bubbleThreey,30,30); //bubbleThree
ellipse(315,165,15,15); //bubbleFour
//text
noStroke();fill(132,156,185);textSize(48);textStyle(NORMAL);
text ('Soap',450,200);}functionmousePressed(){
eyeWidth =random(20,65);
eyeHeight = random (20,80);
mouthWidth = random (10,50);
bubbleOnex = random (80,185);
bubbleOney = random (100,150);
bubbleThreex = random (100,400);
bubbleThreey = random (50,200);
soapouterR = random (200,255);
soapouterB = random (180,255);
soapouterG = random (190,255);
soapinnerR = random (200,255);
soapinnerB = random (180,255);
soapinnerG = random (190,255);}
I began drawing various emotions in my sketchbook and illustrator. When I began coding, I realized that I wasn’t able to transcribe those images with my current abilities. I ended up simplifying the design. Overall, the project was enjoyable although it was more challenging.
I decided to take an approach to this project looking at the faces as being more alien or robot than human, as it ultimately allowed me to add more interesting adjustments when it came to color and shapes. It provided me with some good practice in debugging the small things (e.g. semicolon in the wrong place… oops!).
// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project 02 - Variable Face
var eyeSize =40;var faceWidth =200;var faceHeight =300;var faceColorR =241;var faceColorG =146;var faceColorB =188;var eyeColorR =126;var eyeColorG =242;var eyeColorB =230;var eyeLX =640/2- faceWidth *0.25;var eyeRX =640/2+ faceWidth *0.25;var mouthHeight =480/2+40var noseHeight =25functionsetup(){createCanvas(640,480);}functiondraw(){background(226,179,239); // face color
stroke(0);strokeWeight(2);fill(faceColorR, faceColorG, faceColorB);ellipse(width /2, height /2, faceWidth, faceHeight); //eye variables
var eyeLX =640/2- faceWidth *0.25;var eyeRX =640/2+ faceWidth *0.25; // eyeball shapes
fill(255);ellipse(eyeLX, height /2, eyeSize, eyeSize *3/4);ellipse(eyeRX, height /2, eyeSize, eyeSize *3/4); // irises shape
strokeWeight(.75); // the iris color will change but the variables are rearranged so that
// they are not the same color as the face
fill(eyeColorR, eyeColorG, eyeColorB);ellipse(eyeLX, height /2, eyeSize *2/3, eyeSize *2/3);ellipse(eyeRX, height /2, eyeSize *2/3, eyeSize *2/3); // Pupil
fill(0);ellipse(eyeLX, height /2, eyeSize *1/3, eyeSize *1/3);ellipse(eyeRX, height /2, eyeSize *1/3, eyeSize *1/3); //eyebrow variables
var eyebrowLX = eyeLX -30;var eyebrowRX = eyeRX -30; // left eyebrow shape
noStroke();fill(123,72,72);beginShape();curveVertex(eyebrowLX, height /2-20);curveVertex(eyebrowLX, height /2-20);curveVertex(eyebrowLX +30, height /2-40);curveVertex(eyebrowLX +50, height /2-35);curveVertex(eyebrowLX +50, height /2-30);curveVertex(eyebrowLX +30, height /2-33);curveVertex(eyebrowLX +30, height /2-33);endShape(); // right eyebrow shape
fill(123,72,72);beginShape();curveVertex(eyebrowRX +60, height /2-20);curveVertex(eyebrowRX +60, height /2-20);curveVertex(eyebrowRX +30, height /2-40);curveVertex(eyebrowRX +10, height /2-35);curveVertex(eyebrowRX +10, height /2-30);curveVertex(eyebrowRX +30, height /2-33);curveVertex(eyebrowRX +30, height /2-33);endShape(); // mouth shape
fill(0);stroke(235,65,97);strokeWeight(4);arc(width /2, faceHeight,80,80,0, PI, CHORD); // restraining mouth height to stay below 2/3 of the way down
// the page as to not overlap with the eyes as they move
if(faceHeight <= height *2/3){
faceHeight = mouthHeight;} // Pig nose
stroke(0);fill(227,138,190);ellipse(width /2, faceHeight - noseHeight,70,60); // nostrils
fill(0);ellipse(width /2-10, faceHeight - noseHeight,8,15);ellipse(width /2+10, faceHeight - noseHeight,8,15); // ears
strokeWeight(3);fill(faceColorR, faceColorG, faceColorB);ellipse(eyeLX, faceHeight *1/3,90,85);ellipse(eyeRX, faceHeight *1/3,90,85); // cheaks
// use eyeRX as x value so that the cheeks move with the eyes
arc(eyeRX +35, faceHeight +10,80,80, PI, PI + HALF_PI, OPEN);arc(eyeLX -35, faceHeight +10,80,80, PI + HALF_PI, TWO_PI, OPEN);}functionmousePressed(){ // 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(150,500);
faceHeight =random(100,400);
eyeSize =random(30,85);
faceColorR =random(235,244);
faceColorG =random(54,194);
faceColorB =random(161,224);
eyebrowLX =random(eyeLX -50, eyeLX -10);
eyebrowRX =random(eyeRX -50, eyeLX -10);
mouthHeight =random(270,330);
noseHeight =random(40,15);
eyeColorR =random(126,242);
eyeColorG =random(126,242);
eyecolorB=random(126,242);}
It took me a little while to understand how to use the random command with variables to get the results I wanted. Each time I would add a new feature, I would draw it on the original face, and then add in the random movement and random function at the end. Most of my time was then spent manipulating the bounds so that the different features of my pig faces would not overlap.