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);
}