Smiley Face

Smiley Face

July 30, 2016

example processing
size(200, 200);

fill(0, 255, 0);

//draw the head
ellipse(100, 100, 150, 150);


//draw the eyes
ellipse(75, 85, 30, 20);
ellipse(125, 85, 30, 20);


//draw the pupils
ellipse(75, 85, 10, 10);
ellipse(125, 85, 10, 10);

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:

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.

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Tweak Ideas

  • Change the face to a frown face :frowning:
  • Don’t stop there! Can you make it look sad? :crying_cat_face: Angry? :pouting_cat: Scared? :scream_cat: In love? :heart_eyes_cat:
  • Add ears, hair, a nose, maybe even a body.
  • Try to draw yourself, one of your friends, or your favorite characters.

Calling Functions Examples


Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!