Smiley Face


Smiley Face


August 5, 2016

example processing
size(200, 200);

//green
fill(0, 255, 0);

//draw the head
ellipse(width*.5, height*.5, width*.75, height*.75);

//white
fill(255);

//draw the eyes
ellipse(width*.375, height*.425, width*.15, height*.1);
ellipse(width*.625, height*.425, width*.15, height*.1);

//black
fill(0);

//draw the pupils
ellipse(width*.375, height*.425, width*.05, height*.05);
ellipse(width*.625, height*.425, width*.05, height*.05);

//red
fill(255, 0, 0);

//draw the mouth
arc(width*.5, height*.625, width*.4, height*.25, 0, 3.14);
line(width*.3, height*.625, width*.7, height*.625);

This code uses the width and height variables to draw a smiley face that changes size depending on the size of the window.

smiley face

If we change the first line of our code to size(400, 200), then we get a wider smiley face:

wider smiley face

If we change the first line of our code to size(150, 300), then we get a taller smiler face:

taller smiley face;

Finding the Right Numbers

Look at these two lines from the smiley face example that didn’t use variables:

ellipse(75, 85, 30, 20);
ellipse(125, 85, 30, 20);

This code draws the whites of the eyes. How did we use that to figure out what numbers to use in these lines of code that use the width and height variables?

ellipse(width*.375, height*.425, width*.15, height*.1);
ellipse(width*.625, height*.425, width*.15, height*.1);

Keep in mind that our original window had a width and a height of 200. Then we look at the numbers one at a time: the left eye has an x position of 75. What can we multiply 200 by to get 75? We figure that out by dividing 75 by 200, and we get .375. We know that 200*.375 is 75, so we know that width*.375 will give us the x position of the left eye no matter what the value of width is.

We repeat that process for every number we want to scale. That might seem like an annoying process, but it becomes more automatic with practice.

Code Editor

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

Tweak Ideas

  • Change the color of the face based on the size of the window. Make wider faces more red, taller faces more blue.
  • Change the expression of the face based on the size of the window. Wider windows make the face angry, taller windows make the window sad, etc.
  • Make it so the face is always a circle, but grows with the window. In other words, try to maintain the aspect ratio of the face.

Using Variables Examples

Comments

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!