Our smile drawn with the arc() function looks fine but needs a bit of work.  Although you cannot see it the arc actually has a fill. In order to see the fill we will first have to remove or hide the ellipse, but we’re happy with the way the ellipse looks so instead of deleting the statement or cutting it to the clipboard we’ll comment it out. Commenting out a statement or a group of statements is the process of adding comment tokens to the statement/s that cause the statement/s to be ignored by the compiler. Comment tokens in Processing are two forward slashes “//” as mentioned previously. The easiest way to comment out the ellipse statement is simply to place the comment tokens at the start of the statement so it looks like this:

//ellipse(width/2, height/2, 100, 100);

You might have also noticed that when you comment out a statement, syntax highlighting causes the statement to turn grey. This means we can now run the program and Processing will no longer draw our ellipse, until we uncomment the statement by deleting the comment tokens. To comment out a block of code  select the lines of code you wish to comment out and in the PDE click:

Edit → Comment/Uncomment

This will toggle your selection between a commented state and a standard block of non-commented code. Commenting and uncommenting is just simply a convenient and easy way of testing or debugging a program by including and excluding statements easily without having to retype out a statement that has been deleted or using an operating system’s clipboard.

To remove the fill we will use the noFill() function. So between the ellipse commented statement and before the arc statement add the following code:

noFill();

The order in which commands are issued to Processing is very important. Functions such as rectMode() and noFill() not only effect the command that directly follows them (such as the arc statement being effected by the noFill() function) but they also effect all statements that follow there after that rely on these special functions. So what that means is that if we were to place the noFill() function before an uncommented ellipse statement followed by the arc statement both the ellipse and the arc would have no fill. This is obviously not what we want, we only want the arc to be without a fill and subsequently run the ellipse() function before noFill().
If you were to run the sketch at this point it might look as though the noFill() command has removed the arc completely from the Display Window, but this is not the case. In Processing 2D primitives such as triangles, arcs, quads, ellipses and rectangles are actually made up of both a fill and a stroke. We’ve already seen that the fill can be controlled with the noFill() function, the fill() function and that  Processing’s default setting is to draw all 2D primitives with a fill.
The stroke is the outline that surrounds all 2D primitives and looks like a line of various inclinations, dimensions and weights. The stroke can also be turned off with a function similar to the noFill() function, as you might have guessed it’s noStroke().
To turn the stroke or fill back on or to simply edit an existing stroke or fill we use the stroke() or fill() functions. Both of these functions accept parameters in the form of a grayscale color, an RGB value or a RGBA value by default. You can also control how Processing accepts parameters for these two functions with the colorMode() function. We’ll be changing our black stroke (which seems to have disappeared, because it’s camouflaged into the black background) to a red smile. Add the following statement after the noFill statement:

stroke(255,0,0);

This statement simply informs Processing that any strokes that are drawn after this statement is run will consist of a color that is fully red, with no green and no blue in other words (255, 0, 0). Now we have a smile floating above our text, so we’re going to uncomment the ellipse statement and when we run the sketch our smile is restored to it’s elliptical face.
The smile is looking a little too high up on the face so we’re going to move it down, this is easy because we already have the style of the smile so we just need to offset it’s y position. To do this we are going to edit the arc() function once more to the following state:

arc(width/2, height/2 + 10, 50, 50, 0, PI);

Notice that because we are using an inverted Cartesian graph adding 10 to the arc’s current y value actually moves the arc down, inversely if we subtracted 10 we would move the smile up. At first getting used to this system might be a little tricky, but it’s certainly worth noting because this type of graph system is used in many graphics based software packages.

Adding Eyes

What’s a smiley face without eyes. Add the following code to your sketch after the previous arc statement:

stroke(0,0,0);
fill(0,255,0);
ellipse(width/2-15, height/2-15, 20, 30);
ellipse(width/2+15, height/2-15, 20, 30);

As we changed the stroke to red in our previous statement to draw the smile, we need to change it back to black in order to draw the strokes encompassing the eyes so we add the second stroke statement to our program to change the stroke color back to black. Having also turned the fill off for the arc statement we need to turn it back on for the eyes and set it to green, we can conveniently achieve both of these tasks with stroke() and fill() function calls.
Let’s take a look at the X and Y parameters of the ellipse functions that actually draw the eyes and how the expressions used in these statements have been modified. For the eye on the left’s X parameter 15 has been subtracted, and for the eye on the right’s X parameter 15 has been added.
When working with expressions like this it’s important to remember that certain mathematical operators have precedence over others. For example * and / have precedence over + and -, this means that the expression width/2-15 is actually being evaluated like so (width/2)-15. This effect is known as operator precedence. Finally the Y positions of the ellipses have been offset by subtracting 15 and rendered less circular in form and more oval-shaped by making their height’s greater than their widths.