Processing is a language that was made to create visual representations of your code really easily, and as a result the developers of Processing have provided us with pre-configured functions for drawing primitive shapes much like you would expect in a drawing program. Shapes such as rectangles, ellipses and triangles amongst others are known as 2D primitives and can easily be drawn to the Display Window with a simple keyword. We’ll start by drawing an ellipse.
2D Primitives
Drawing an ellipse in Processing is easy you just use the ellipse() function that accepts parameters in the following order:
ellipse(x, y, width, height);
As you might have already guessed the X and Y parameters indicate where the ellipse is to be drawn on the coordinate system, and the width and height parameters indicate the width and height of the ellipse. Please note that the terms width and height in this context have nothing to do with the system variables width and height which store information relating to the width and height of the Display Window. To draw an ellipse in the Display Window add the following statement to the end of your program:
ellipse(width/2, height/2, 100, 100);
Once again to find the center of the Display Window I have used the expressions width/2 and height/2 this returns the X and Y coordinates respectively that will be the center of the ellipse. Technically a circle is an ellipse with an equal width and height, which is why we have input 100 for both the width and height parameters of the ellipse() function. I’ve also chosen to enter explicit values for the ellipse’s width and height parameters, as I don’t want the dimensions of the ellipse to change even if I do decide to change the dimensions of the Display Window. Using this hybrid style of mixing implicit programming and explicit programming can sometimes lead to logical errors, so you should always be certain of what you are doing when using this approach to programming.
The Origin of an ellipse
Processing provides several different methods for drawing an ellipse which modify what the X and Y parameters of the ellipse() function refer to. These parameters of the ellipse() function are used to determine the position of what is known as the origin of the ellipse. The function ellipseMode() is used to change where the ellipse is drawn with relation to it’s origin as specified by the X and Y parameters of the ellipse() function. This relationship will determine where the ellipse is drawn within the Display Window and works in a similar fashion to that of the text() and textAlign() functions.
The function ellipseMode() accepts the parameters CENTER, RADIUS, CORNER, or CORNERS. Using the CENTER parameter tells Processing to use the X and Y parameters of the ellipse() function to determine the center of the ellipse as it’s origin. The CENTER parameter for ellipseMode() is the default mode, and is subsequently why we are choosing not to add the statement to our sketch. If you did want to use the CENTER creation mode for drawing ellipses after having overridden this setting with one of the other modes, apply the following statement to your sketch before using the ellipse() function:
ellipseMode(CENTER);
Remember Processing is case sensitive so don’t forget to type this parameter in upper-case.
The CORNER parameter for the ellipseMode() function allows you to create an ellipse by specifying the X and Y parameters of the ellipse() function as the top left hand corner of an imaginary bounding box that surrounds the ellipse. In other words the X and Y parameters of the ellipse() function are used to determine the top left-hand corner of the bounding box from where the width and height parameters of the ellipse() function are used to extend to the maximum width and height of the ellipse.
To use this creation method for ellipses type the following code:
ellipseMode(CORNER);
At this point you might be wondering what the purpose of functions such as textAlign() and ellipseMode() are since we can simply place an element of a sketch, such as an ellipse, where ever we want in the Display Window using the function to draw the element’s X and Y parameters.
However, providing a means of placing an element within the Display Window is only part of the reason why we have such functions. One of the main reasons is that these functions (without modifying the position of the element we are placing) allow us to think differently about how we will align and place other elements relative to that element in question. For example if we wanted to place two ellipses next to each other with their edges touching, using either the CORNER or CENTER parameter options would require changing the way we think about placing the second ellipse in relation to the first depending on which parameter option we chose. Let’s use the CENTER option first to illustrate this situation.
In the above diagram the method used to determine the origin of the second ellipse is to divide the width of the first ellipse by two, then add this value to whatever half the width of the second ellipse is. This calculation would return a value that would equate to the X parameter of the second ellipse. The Y parameter of the second ellipse would be the same as that of the first ellipse.
When using the CORNER option in order to determine the second ellipse’s origin we would simply need to know the width of the first ellipse and add this value to the X coordinate of the second ellipse. This calculation although different from the previously mentioned example would yet again return a value that would equate to the X parameter of the second ellipse. The Y parameter of both ellipses is the same.
As you can see although the visual results are the same, that is two ellipses with their edges touching at the same places, how we solve the problem is different depending on how the origin of an element is determined.
The relationship between the placement of one element with that of another is something we will address often in programming especially when using an implicit methodology, fortunately it is also something that becomes easier to visualize with practice.
It’s time to save the sketch if you haven’t already done so. In the PDE click
File → Save As…
Change the name of your sketch to something more meaningful and save it. Processing will create a new folder in your sketchbook folder with the name of your sketch, in this folder Processing will save a .pde file which is the source code file we are currently working on. It’s also worth noting that if you have added any additional files to your sketch such as images or other external resources Processing will also copy the those files to a folder called data, which will be a subdirectory of your sketch’s folder. In the PDE saving a file with a different name is akin to creating a new sketch. This is something to be aware of as you can inadvertently increase the amount of data on your hard disk drive by duplicating sketches with different names if you are unaware of this feature. Adding external content to a sketch is something we will get into a bit later when we start adding images to the sketch. The sketch should currently look something like this:
/**
*Hello World 1.2 Program
*by Haig Armen
*This example program demonstrates how to
*create a Hello World Program in Processing.
*/
//setup of the Display Window
size(640,480);
background(0,0,0);
//Print characters to the console
println(“Hello World”);
//Render and format text
textAlign(CENTER);
textSize(24);
fill(191,233,255);
text(“Hello World”, width/2, (height/4)*3);
//Drawing the face
ellipse(width/2, height/2, 100, 100);