You might have noticed that the ellipse is looking a bit pixelated and not very smooth this effect is known as aliasing and is often counteracted with the effect of anti-aliasing which creates the impression of a smoother looking rendering. Fortunately in Processing we have a function that is made exactly for the purpose of making the contents of a sketch look smoother. Add the following statement to the first part of the sketch just after the size() function:

smooth();

The smooth() function does not accept any parameters but still requires parenthesis, it’s also worth noting that although using the smooth() function will make your geometry appear smoother it might come at the expense of slowing down the rate at which your sketch runs. By default a Processing sketch will try to update itself 60 times in one second (if a function such as draw() is used), this allows for smooth looking motion and almost instantaneous interactive results. We are creating what is known as a static sketch which does not involve any interactivity or animation, so using the smooth() function in this situation should not greatly influence the sketches performance.

Smile

The ellipse needs a smile in order to make it into a smiley face. We will use an arc to draw the smile, the main reason we are using an arc is firstly to introduce the arc() function but more importantly it’s an opportunity to explore working with angles in Processing.

Angles in Processing

In mathematics angles are usually measured in either degrees or radians, Processing and many other programming languages generally accept both units of measurements but prefer the latter. One of the main reasons most programming languages prefer measuring angles in radians is because radians work well with the value known as PI (pronounced py rhymes with “try”) which can be represented in mathematical notation as π. PI is a number that has the approximate value 3.1415927 (calculated to seven decimal places). The actual number that PI represents in programming is not quite as important as it’s mathematical equivalent, subsequently we will generally never need to remember what this number is in programming but rather what the language we are choosing to use it in, represents it as. In Processing the value of π is represented by the mathematical constant PI. To Processing and many other programming languages a constant is a value that does not change, as a result it makes sense for the Processing representation of pi to be a constant. Pi has always been the same value long before Archimedes approximated it’s value in the 200’s BC as it’s implication in the construction of many architectural wonders of human ingenuity from as far back as the Egyptian pyramids and even further back in human history suggests, and it’s highly unlikely that pi could be used to represent any other value. So what does it mean?
Pi is the ratio of the circumference of a circle to it’s diameter, and pi radians is also equal to approximately 180 degrees. Pi can be expressed mathematically as:

π = C/d

Where C is the circumference of a circle and d is the diameter of a circle.
So how do we use this information about pi to work with radians and degrees? Well we already know that pi radians is equal to 180 degrees so that means twice pi radians (or you might be more familiar with the mathematical notation 2πr) is equal to a full revolution or 360 degrees, or as the value is referred to in Processing TWO_PI. Processing also has other mathematical constants to represent pi in other useful quantities such as HALF_PI which is approximately equivalent to 90 degrees and finally QUARTER_PI. But what about all the other infinite angles how do we reference these values in Processing? You could either type them out explicitly as radians or if you know their approximate equivalent in degrees you can use a formula to convert the value from degrees to radians:

radians = (π/180)*angle in degrees

For example if we had the angle 270 degrees and we needed this in radians so that we could use it in our Processing sketch we could either use the mathematical constants Processing provides us with and type the following expression:

PI + HALF_PI

This expression would return the equivalent of 270 degrees in radians. Or we could use the above mentioned formula and type the following expression, which would also return the equivalent of 270 degrees in radians:
(PI/180)270

Remember that because there is no mathematical operator between 270 and the right closing parenthesis character the value of what is in parenthesis must be multiplied by 270, this will return the equivalent of 270 degrees in radians.

However there is a simpler method of converting degrees to radians in Processing, and that is to use the radians() function. If you know the value of the angle in degrees and want to convert it to radians you can simply use the known value as a parameter of the radians() function and Processing will use the above mentioned formula to calculate the equivalent value in radians for you. For example:

radians(270);

This will convert 270 degrees to it’s equivalent in radians. One of the main reasons why angles in Processing are converted to radians is because all trigonometric functions that require angles as an input accept these values in radians.

The arc() function in processing accepts six parameters in the format

arc(x, y, width, height, start, stop)

You are already familiar with the first four parameters X and Y determine the  origin of the arc and this can be further controlled with the ellipseMode() function. The width and height parameters represent the dimensions of the arc in much the same way that these parameters, determine the dimensions of an ellipse. The last two parameters you might not be familiar with, the start and stop parameters determine the beginning and ending angles of the arc. For example, we are attempting to draw a half circle to represent a smile which, as you know, can be expressed with angles between 0 and 180 degrees. Secondly, because we want our smile to resemble the shape of a horseshoe pointing upwards we will start it at 0 and end it at PI (which is approximately 180 degrees). This means that the arc will be drawn between the start and stop parameters and the other parameters are used to determine the dimensions of the arc and the arc’s position. Add the following statement to your sketch following the ellipse statement:
arc(width/2, height/2, 50, 50, 0, PI);

A Smile on the “Hello World” Program.