Smiley Face
example processingsize(200, 200);
//green
fill(0, 255, 0);
//draw the head
ellipse(100, 100, 150, 150);
//white
fill(255);
//draw the eyes
ellipse(75, 85, 30, 20);
ellipse(125, 85, 30, 20);
//black
fill(0);
//draw the pupils
ellipse(75, 85, 10, 10);
ellipse(125, 85, 10, 10);
//red
fill(255, 0, 0);
//draw the mouth
arc(100, 125, 80, 50, 0, 3.14);
line(60, 125, 140, 125);
This code calls a series of functions do draw a smiley face:
The arc()
function takes 6 parameters: the first 4 parameters define an ellipse, and the last 2 parameters specify a limit (in radians) that causes the computer to only draw part of the ellipse. In radians, 0
is the right-most point of the ellipse, and pi
(we’re using 3.14
which is close enough) is the left-most point of the ellipse. That lets us draw only half the ellipse for the mouth.
See the Pen by Happy Coding (@KevinWorkman) on CodePen.
Tweak Ideas
- Change the face to a frown face
- Don’t stop there! Can you make it look sad?
Angry?
Scared?
In love?
- Add ears, hair, a nose, maybe even a body.
- Try to draw yourself, one of your friends, or your favorite characters.
Comments and Questions
Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!