Sheenu-Project-02-Variable Face

sketch
This was a very fun and interesting project. I wanted to create an “Emoji” looking picture that completely changes every time you click the screen. I thought the outline and the shadow were going to be hard to make, but it was actually very easy since I was using variables. This is the first time I used text in one of my projects. I really liked how it turned out and I am glad that I learned “random” in P5.js. I learned a while ago how to use Random in Adobe AS2 and it is a lot harder and more complicated.

//Sheenu You
//Section E
//sheenuy@andrew.cmu.edu
//Assignment-02-A
var faceW = 300;
var faceH = 300;
var faceR =255;
var faceG =207;
var faceB =35;
var eye1=70;
var eyex= 180;
var eye2=40;
var eyex2=180;
var eyeh=240;
var mouthw=200
var mouthh=150
function setup() {
    createCanvas(480, 640);
}

function draw() {
	//Background
	noStroke();
	background(27,165,207);
	//Shadow
	fill(0, 115, 181);
	ellipse(250, 340, faceW, faceH)
	//Outline
	fill(255);
	ellipse(width/2, height/2, faceW+10, faceH+10)
	//Face
	//Actual face
	fill(faceR, faceG, faceB);
	ellipse(width/2, height/2, faceW, faceH)
	//Eyes
	fill(255);
	ellipse(eyex, eyeh, eye1, eye1)
	ellipse(eyex+120, eyeh, eye1, eye1)
	//Pupil
	fill(0);
	ellipse(eyex2, eyeh, eye2, eye2)
	ellipse(eyex2+120, eyeh, eye2, eye2)
	//Mouth
	fill(255,104,62);
	ellipse(240, 370, mouthw, mouthh)
	//TextBox
	fill(255);
	rectMode(CENTER);
	rect(width/2, 565, 350, 130,20)
	fill(faceR,faceG,faceB)
	textSize(50);
    text("WHOA!", 155, 580);
}
	function mousePressed(){ 
	//When you click anywhere, you can change stuff
	faceW = random(250, 350);
	faceH = random(250, 350);
	faceR =random(0, 255);
	faceG =random(0, 255);
    faceB =random(0, 255);
	eye1=random(1,150);
	eyex= random(170,190);
	eye2=random(1,70);
	eyex2=random(170,190);
	eyeh=240;
	mouthw=random(100,300);
	mouthh=random(50,200);
}

Author: Sheenu You

Choo choo View all posts by Sheenu You