Learning Processing

More Topics:





Part 1: An introduction to Processing


Learning Processing

Recently i have been learning the software language processing that comes from Java. I've found processing to be one of the easiest interpreted languages I've learned and the main reason I've found processing to be so easy is thanks to the PDE (processing development environment). The PDE is like an IDE (integrated development environment) specifically for processing. What that simply means is that when i start a processing document (known as a sketch) i am not faced with a blank page resembling a text document. A neatly designed application (the PDE) is used to create sketches by the novice. Because i am creating code i could also choose to simply write the code out in any text creating application, but i feel processing has an advantage on other higher level languages (or interpreted languages) because the prospect of writing down code simply from memory to a text document for the novice can be quite daunting. The PDE provides the user with an environment that firstly has a unique GUI designed to help the user create processing documents (sketches), a syntax highlighting facility and an extensive well documented help resource that comes with the PDE.
Processing is also open source, which in my books makes it even more fun to work with especially because it has an active development community.
Here is a picture of what the PDE looks like in Ubuntu 9.04. The PDE can be downloaded for free from the processing website http://www.processing.org
It is also Windows, Mac and Linux compatible.

                                                      in ubuntu

In the foreground we see the "Run" window, which allows us to test our code from within the PDE and see the results without having to open a browser or another application. From the PDE you can also export your sketches to a web browser compatible format that doesn't require any additional bulky plugins to be downloaded in order to view the application online, or you can also export your sketch to an executable application.
Behind that is the actual PDE, if you look close enough you can see the code for the currently running application (which is an example that comes with the PDE). this particular sketch creates the effect of making an image explode by moving your mouse from left to right.
Behind the PDE is a standard nautilus file browser window (like windows explorer), and finally behind that is my Ubuntu gnome desktop :)


In very little time (and if you already have some programming knowledge) you can learn processing basics and start creating your own sketches. Here are some 'hello world' processing equivalents, i created in a matter of a few hours with no prior processing knowledge. Notice how easy it is to draw to the screen, with very little code.
Unlike most other higher level languages Processing compiles into byte code so it is much faster than other contemporary software languages. Byte code is machine readable, other languages have to go through another level of "un-abstracting" the code before a machine can actually read the code.
Here are the examples I've been using and links to the pages i found the tutorials to create them with. These examples certainly helped me transition to processing from other software languages in very little time.

My first sketch which was an experiment in simply drawing to the screen, which i later modified to add some color changes based on mouse position. http://www.processing.org/learning/gettingstarted and http://www.processing.org/learning/color were tutorials i used in helping me make the script.

click the above image to test the application in your browser.

This sketch is about shapes and how easy it is to draw them in processing. drawing a rectangle, an ellipse, a line and modifying stroke and fill colors can be done really easily with code in processing. http://www.processing.org/learning/drawing and http://www.processing.org/learning/color were tutorials i used to help with making the script.

click the above image to test the application in your browser.

This little sketch doesn't have any interactivity and is therefore known as a 'static sketch'. It was very useful in learning how to create software objects in processing. Objects are the core of what makes 'object oriented programming' so useful. If you've never worked with classes, this tutorial can do a lot to explain the theory behind them to you. http://www.processing.org/learning/objects was the main tutorial i used to help make the script.

click the above image to test the application in your browser.

Visualizing Data

i am currently working on a project with marion walton where we are taking data from social networking programs and creating visualizations of this data. i am most interested in using these visualizations to effectively communicate what the data is "saying" to us in a simpler to read format. switching to Processing has definitely been the best decision for me regarding this project, as there are inbuilt functions in processing that are particularly useful for this project that are not available in other software languages. Notably one of these functions that I've come across is the map() function in processing, which has the ability to take a value and map it to another range without having to normalize or create a percentage of the value first.
Following is a visualization of data representing the amount of images geotagged on flicker with the word "guguletu". In the interest of this project i am writing my script to be as versatile and scalable as possible. currently i am focusing more on the scripting side of things rather than their visual representations. once i am happy with the script working the way i want it to, i plan on making something more appealing to look at rather than the standard graph-data-type representations the script is currently displaying.
Here are some interesting issues i ran into when trying to create this script.


1) Firstly for those people that have a background in Actionscript 2 processing does not support data type conversion on the fly.
that is to say that if you data type something as a string it will remain a string regardless of how it is used in an expression with other integers or floats.

In order to convert a string to an integer use the int(variableName) function
In order to convert a string to a float use the float(variableName) function
In order to convert a Boolean, float, integer etc to a string use the str(variableName) function
A slight variation to this idea exists in that a boolean can be converted into an integer in order to return a scalar(number). In this case 0(zero) and false are synonymous every other integer (including negatives) are the same as the boolean value true
This coding practice has become standardized amongst the new compiled languages (that I'm aware of) and is something you should be doing anyway regardless of Flash's ability to convert data types without your explicit indication for the software to do so.
2)  It Therefore makes sense that all variables must be data typed at declaration. As with the compiled languages I'm familiar with eg. ActionScript, Python, MEL variables do not require an initialization value assigned to them at declaration.
3) Floats are Floats and Integers are Integers! there is no software data type conversions (conversions must be specified by the user) between these different types unlike in ActionScript 2 where in 13/4 both numbers would be converted to floats first in order to perform true division returning the value of the two integers in the expression as a float.


Arrays, I've come to realize, are a lot more relevant in processing than they are in other software languages I've used.
Here is the definition of an array from the processing reference manual http://www.processing.org/reference/Array.html
and here is an interesting tutorial on arrays from the processing website http://www.processing.org/learning/2darray/
if you want to loop through a set of variables with incrementing names e.g. name1, name2, name3 etc these variables will have to be in an array, so they would effectively become name[1], name[2], name[3] etc
here is an example of my first attempt at the social networking visualization script and why it failed to compile...



notice how i have incorrectly referred to the variable "name" and "home" in the for loop (of the second image), when there is nothing called name or home. there is however something called name1, name2 etc. and home1, home2 etc
processing did not even get this far when trying to compile the script because there was already an incorrect variable reference in maxPho
after posting a question on the processing discourse http://processing.org/discourse/yabb2/YaBB.pl?num=1276194565/0#2 my question was answered in less than an hour. This i consider to be a very impressive turnaround time for the moderators and community contributing the processing discourse forum, and i am very grateful to Quark for the assistance in helping me troubleshoot my problem.
The revised version of the script follows...


As you can now see there is a variable called "home" and it is a String array. so when i refer to home, name , maxPho etc  i can now use their correct index value e.g. home[1], home[2] etc. to access the variables in the corresponding arrays.
As you can see when writing this script i was (unnecessarily) very verbose in declaring the variables in the arrays and assigning their values. which is something i will, at a later stage, attempt to place in a for loop. so in this case crtl-f which brought up the find and replace dialog box was very helpful and yet another feature built into the PDE.
being this verbose in a script can often lead to errors that take a while to fix and is not a recommended work-flow as in the following example..


notice how name[7] to [14] and home[7] to [14] have all been incorrectly assigned the same value. if this was in a for loop that incremented a value there would be no possibility of this sort of human error occurring.

Once i was able to clean up the script and replace the variables with variables in an array, the script started working! a few cosmetic adjustments and numeric manipulations and i finally have the script doing several things
1)reading text from an external document. this is important as i would eventually like the script to update with values that are constantly changing without having to recompile the script every time the external text document's values change. at a later stage i plan on placing the main body of the script within the draw() function and experimenting with opening the external text document in a text editor changing the values of the text document and hopefully getting those values to update in the running application, without having to recompile it.
2)the gray bar represents the total amount of pictures each user has posted on flicker. this is simply, for now, how i have chosen to abstract these numerical values. this gives the viewer an immediate indication of where the most amount of pictures for these participants is coming from and allows the viewer to compare this with participants from other countries. At a later stage i plan on making the actual numerical values display on screen when the user mouse-overs the each participants graphical bar.
3)The black bar represents the total amount of pictures each user has posted on flicker that has been geotagged "guguletu". this value is represented as a percentage of the total amount of pictures per user. i would like to experiment with trying to express this data as an amount in relation to the total amount of pictures geotagged "gugaletu" that other users have posted and composite this comparison on top of the already existing graphical representations, and how to avoid making the interface looking too cluttered and confusing with the additional information.

click the above image to test the application in your browser.

16 June 2010 More on Objects

I've found that buttons are useful ways of testing interactivity in programs. they are usually quick and easy to set up and have several different states that can be used to trigger various tasks. there are several libraries in processing that allow the user to add buttons and different GUI elements to a sketch, however i was looking for something really simple and easy to use. So i used my knowledge of what I've recently learned in processing to create a Button class, which will also be useful in the above mentioned visualization project.
Creating the class was pretty straight forward and the practice i had in the previous tutorials from processing.org on objects was very  helpful however i did run into a bit of a hitch when it came to getting a method within the class to return a value to the main program.
Interestingly this is not documented in the OOP tutorial mentioned above so here is a quick explanation on how i got around this problem.

1)  I'd like to be able to create as many buttons in a sketch as I'd like without having to recode their interactivity each time
2) I'd like the buttons to have several customizable features
different x and y locations
different widths and heights
different fill colors
and their individual names printed on the buttons
3) each individual button must be able to indicate
  whether the mouse is over it or not and be able to do something according to this state if i want it to
  whether the mouse has been pressed on the button (or not) and be able to do something accordingly (or not)

Bearing these prerequisites in mind the most obvious choice for this task is to create a class and instantiate it. tasks 1-2 are pretty straight forward and don't require any further explanation if you have understood the OOP tutorial mentioned above, task 3 requires a bit of an explanation.


within the main draw() method three things need to be repeated 1) the button needs to be drawn to the screen 2) the button's over state needs to be checked 3) the buttons pressed state needs to be checked


the disp() method is created as expected, using the void command. the void command is used to define a function (or method as it is sometimes referred to in a software object) that does not return a value. because i am simply using this method to draw to the screen, i do not need to have  any values returned to me. the values (or parameters as they are referred to in this case because they are values being fed into a method) determining the size, location and color of the button do not need to be returned to me at anytime as this would be redundant due to the fact that i would be the one creating these values when i create the new instance of the object.


the new Button object is instantiated in the line starting with the variable name myButton. within the following parenthesis the parameters for the new Button are supplied by the user (me in this case). if i was planning on using these values elsewhere i would assign each individual value to a variable int or String type and feed the variable names into the new Button's required parameters. these variables would need to be defined before the call to instantiate the Button class and would therefore be available where ever else i chose to use them in the script.

Firstly you'll notice that the over() and press() methods are defined very differently to that of the previous disp() method which used the void command Because i want these methods to return a value, more specifically an integer, the command void must be replaced with whatever the data-type is that you would like the method to return. the processing reference guide on the return command has once again come in very handy http://www.processing.org/reference/Return.html
secondly the return command must be used to return a value corresponding to the specified data-type somewhere within the curly braces where the method is being defined.

To check out the script in action click on the above image. You are free to use the script in your own projects (please read the comment) :).

27 June 2010 A Grid

Since i plan on making an example or two using the math that I'm currently learning , i thought it would be appropriate to create a graph paper type background in processing.
I thought that implementing this would be somewhat easier than it actually turned out to be. As i have made several similar programs in Flash that create abstract images with random pixel colors displayed one after the other in a grid style. The idea is pretty much the same here and really just a case of adjusting my knowledge to suit processing's commands, easy enough because there where no new commands i had to use in this script that i had not already learned from previous exercises. so I'll have to put my lack of comprehension (or rather my slowness of comprehension) down to a rusty logic in controlling the flow of execution of a program. Nonetheless i managed to get the script to work although i have not tested it with a math example file fully, yet. Reason being is not because i have not created a math example script yet (because i have already made a script demonstrating the theory of Pythagoras in processing which i will get to discussing a bit later) but because i am a bit skeptical of how processing will handle having to draw a grid of 40*40 rectangles every frame and be able to do the other math and drawing stuff for the Pythagoras script.
However after quickly hacking the two scripts together i got some pretty interesting results namely the sketch did not seem to stress my CPU at all, as my CPU usage monitor never peaked above 50% and averaged around 25% this is totally normal usage for all the processing sketches I've created thus far. Upon further inspection of the script i realized that moving the main code that draws the grid by using the draw() method will not denote having the script execute every frame as the incremental variables i and n are at their maximum values in order for the for loop to execute only once. This simply means i did not reset the incremental variables back to their original values in the original script because there was no need to. The hack that i made of putting the two scripts together (grid.pde and pythag.pde (which you will see further down the page)) inherited this property. Basically regardless of the fact that the code within the draw() method executes every frame that the processing app is running the grid is only drawn once, despite the fact that it is in the draw() method. This is obviously very useful if used properly particularly regarding controlling the flow of execution of a script and not stressing out a computer's CPU usage.
Have a look at the script and try running it within the setup() method and monitor your CPU usage then move the script to the draw() method and you'll notice your CPU usage has not changed very much (if any notable change occurs at all).

click on the above image to run the grid sketch in your browser

A useful feature to this grid is the gridBlock variable that allows you to modify the size of the blocks making up the grid. However currently you will need to use a number that can divide evenly into the width of the stage (something i might address a little later if the need arises).

28 June 2010 The Theory of Pythagoras In Processing

The famous Pythagorean theory that states the square of the hypotenuse is equal to the sum of the squares of the two remaining sides of a right angle triangle as come in handy many times for me in programming. As simple as this equation is, it is not something to be underestimated and forms the basis of many more complex mathematical algorithms such as solving  vector quantities which are crucial in 3D math.


Before i talk about how to use this theory in processing, I'm first going to recap on what it means. As we know a processing sketch done in 2D (using the default Processing renderer) relies on a grid system using x and y coordinates to tell processing where things are in a running sketch. This grid system is known as the Cartesian Grid System. Since we are dealing specifically with 2D I'm going to refrain from discussing 3D concepts and the relationships between these systems, for now. However, it is worth noting that all the information you learn about 2D math will come in handy when dealing with 3D math which, in part, is an extension of 2D concepts with an additional axis.  The two axes we are interested in is the x axis which runs infinitely horizontally and the y axis which is orthogonal (at 90 degrees) to this and also extends to infinity. Interestingly enough, i mention that these axes extend infinitely in Processing as Processing seems to continue to compute locational data of the mouse outside of a sketch if the mouse is clicked within the sketch and dragged outside of it. In other programming languages these axes might only extend to the limits of the window in which the application is running.
If you were to examine the above illustration you will notice that unlike a traditional Cartesian graph our graph has the positive y axis running downwards instead of upwards. Aside from this, our Cartesian graph works exactly as a traditional Cartesian graph does. This is notably a common concept in computer programming as traditionally an object being displayed on a computer monitor (such as a bitmap  for example) will be assessed by the computer from the objects top left hand corner, this is sometimes referred to as an objects local origin or it's registration point, the image would then be assessed by it's neighboring pixel to the right and so on till the end of that row of pixels then onto the next row and the next subsequently building the image of the bitmap we see as represented by a computer. Bearing this in mind if we were to use a normal Cartesian graph system with the negative y axis pointing downwards the height of our bitmap would be a negative value due to the fact that counting the rows of pixels denoting the height of the image going downwards from the images registration point would yeild a negative number on a normal Cartesian graph. So to make things easier for us the Cartesian graph system used in programming (certainly all the programming languages I'm aware of) use a flipped Cartesian graph around the x axis (which remains in it's traditional form) to make the positive y axis point downwards.

So here's what we are interested in finding out. We have been given the x and y coordinates of two points, the first point according to our above illustration we will call P1 and the second point we will refer to as P2. We would simply like to find out, if we were to draw a line from one point to the other, how long would that line be?
This is exactly what the Pythagorean theory is used for.
So why would we need to know the length of a line and how is this going to help us in terms of making useful applications?
Knowing the length of a line segment such as this is actually very important and can form the basis of interacting with graphical applications amongst some of the uses for aforesaid information is,

If we were making a game that used a birds eye view for the users perspective, by knowing the length of this line segment, we can use it to interpret the next position of our game character from one frame to the next. Without this information the character would not be able to move in a way relative to what the user would expect. The classic arcade game Breakout is another game that relies on the Pythagorean theory to function predictably.


As another example if you have used a drawing program that allows you to draw shapes such as triangles or ellipses by clicking and dragging on a document, you could have already used this theory without knowing it to draw that shape to the screen or derive information from that drawn shape. By clicking once you have created P1 and dragging to the other end of the shape and releasing your mouse you have created P2 your computer can then do the necessary math (which in some cases means using the Pythagorean theory) to draw in the rest of the shape and extract information needed to update the shape when necessary.


So as you can see this theory has many practical applications, particularly in software programming and the few uses I've mentioned don't really begin to demonstrate how versatile this information actually is.

So what is the Pythagorean theory?

As mentioned before, the theory of Pythagoras states that:
The square of the hypotenuse is equal to the sum of the squares of the two remaining sides of a right angle triangle.
we can express this information in an equation like so
r2 = a2 + b2

but what exactly does that mean? well, the best way to demonstrate what that means is to illustrate it..


So lets have a look at what's going on in the above illustration.
Firstly because we are dealing with software programming our Cartesian graph is inverted.
we would like to find out the length (or magnitude) of the line "r".
we also know that r is the line created between P1 and P2. For our convenience I've placed P1 on the +X axis and P2 on the +Y axis in this particular example. So just by looking at the graph and counting the units between the origin (which is located where the X and Y axes cross) and P1 we know the length of line "a". Similarly we can count the units from the origin to point P2 and we will then know the length of line "b".
Traditionally we would refer to "a" as the adjacent, "b" as the opposite and "r" as the hypotenuse
we will cover why these lines have these names a bit later.
So now that we have that information we can do the calculation for example
r 2 = 8 2 + 102
r2 = 164
However we are not interested in the square of "r", we want to know what the actual length of "r" is.
so to solve for "r" we first need to know what a and b is and then we can express r like so...
pythag01 or in a more useful format pythag02
Which just simply reads as "r" is equal to the square root of "a" squared plus "b" squared.

so to continue from where we left our equation r2 = 164 to solve for "r" we just need the square root of 164, which is 12.806. And looking back at our illustration that figure looks about right so we now know that
r = 12.806
and that is simply how we use the theory of Pythagoras to find the length of a line.

Click on the above image to try out the pythag sketch in your browser

Keeping Things Simple

Lets Take a look at the code in this script and see how to implement what we've just learned..

int mXFirst;
int mYFirst;
int mX;
int mY;
float xSide;
float ySide;
float pythag;
float halfXSide;
float halfYSide;
float theta;
float textPosX;
float textPosY;

void setup(){

void draw(){
  mX = mouseX;
  mY = mouseY;
  xSide = float(abs(mX - mXFirst));
  ySide = float(abs(mY - mYFirst));
  pythag = sqrt(xSide*xSide + ySide*ySide);

if(mousePressed == true){
line(mXFirst, mYFirst, mX, mY);
textPosX = (mX + mXFirst)/2;
textPosY = (mY + mYFirst)/2;
text(pythag, abs(textPosX), abs(textPosY));
void mousePressed(){
  mXFirst = mX;
  mYFirst = mY;

I've removed all comments in order to make to code more readable. If you wish to view the code with comments please see the Processing file.
Firstly I've defined several variables of differing data types, speciffically, integers and floats. Only use a float variable when you need to use a "real number" for example a number that has a fractional value. Floats can require more memory to compute than integers and it will serve your programs better in the long run particularly if you are making larger scale applications if you are more conservative with data typing variables appropriately for better memory allocation.
I've placed these variables outside of the draw() and setup() methods as this makes for an easier to read syntax, and the variables can be initialized as soon as the program starts. They are now available to be referenced within both of these methods, as my script demonstrates in the draw() method. It is also worth noting that they have not been assigned values, the purpose of their existence within the script, at this point, is simply to declare them. We will be assigning a value to them later when we reference them within the draw() method.
If you were to look at the second and third line of the draw() method

mX = mouseX;
mY = mouseY;

you will see the commonly used programming syntax for getting the X and Y position of the users mouse and assigning it to a variable with a shorter name. We could, of course, simply type out the associated commands every time we wanted to know these values, but that would not make for a simple, easy to read script.
A statement like this will usually need to be placed within a program loop, as in this case it is placed within the draw() method which as you are already aware is executed at every frame that the Processing sketch is running. We need these values to be updated regularly as the user will more than likely change the position of the mouse regularly. each time the draw() method is executed the script will update the variables containing the X and Y positions of the mouse with the new positions of the mouse.
Before we continue examining the rest of the draw() method, which we will come back to, we need to look at the end of the script and we will find another interesting Processing method called mousePressed()

void mousePressed(){
  mXFirst = mX;
  mYFirst = mY;

this is yet another useful feature of Processing and as you have probably guessed this method will execute, once, every time the user presses a button on the mouse, then stop, and not run again until the user presses a button on the mouse again. The code that is being executed within this function is simply taking the value of the mouse's X and Y positions and assigning it to a variable that has already been declared (at the beginning of the script). So what is the point of this? it might seem a little trivial to assign another variable to a variable that already exists with the same data. Well if the script ended there it would certainly be pointless. However if you recall the values for "mX" and "mY" are constantly being updated at every frame as they are defined within the draw() method. the values for "mXFirst and "mYFirst" are only being updated when the user presses a button on the mouse. This means that the respective values will more than likely only be equal for a split second, at which time the user will have moved the mouse then "mX" and "mY" will have new values assigned to them, where as "mXFirst and "mYFirst" 's values will have remained the same.
To see how this is turned into something useful we need to go back to the draw() method and have a look at where we left off.
the fourth, fifth and sixth lines of the draw() method demonstrate how to use this inherent capability of Processing applications

xSide = float(abs(mX - mXFirst));
ySide = float(abs(mY - mYFirst));
pythag = sqrt(xSide*xSide + ySide*ySide);

Bear in mind that what we are simply trying to do with this Processing application is to get Processing to draw a line that demonstrates the theory of Pythagoras. The latter part of this requirement i.e. demonstrating the theory of Pythagoras is something we will address a bit later. Getting processing to draw a line is actually quite simple, we just use the command line(x1,y1,x2,y2) where x1 and y1 specifies the starting point of the line and x2 and y2 specifies the end point of the line.
So we just need to supply processing with the relevant information and we have our line, as you will recall in order to demonstrate the theory of Pythagoras we will need two values the lengths of the adjacent and opposite sides of a triangle. We can then work out the length of the hypotenuse with Pythagoras. Enter the variables xSide and ySide! These variables are used to calculate the adjacent and opposite sides of a triangle and will subsequently contribute to drawing a line that is the hypotenuse or to put it another way a line that has the length of the user's click and drag operation.
as is always the case in math we start off by examining whatever is within the innermost parenthesis

mX - mXFirst

this will give us a value that represents the adjacent side of our imaginary triangle


by subtracting one of the x values, the user has created through interacting with the program, from the other we are left with the length of the xSide of our imaginary triangle. Regarding which value to subtract from which value, this is one of those special circumstances (relating to subtraction) where this is not very significant as if we look at what is immediately outside of the parenthesis we see the command abs(). This command accepts a single value within it's parenthesis (once the expression mX - mXFirst is evaluated we are left with a single value). abs() then converts this value to it's absolute equivalent which is always going to be positive. This is simply a precautionary measure and not entirely necessary within the context of this particular sketch. As you will remember in order to calculate the hypotenuse, one of the things we will need to do is square the adjacent side
r2 = x2 + y2
the square of any number will always result in a positive value, even if the number you are squaring is a negative (as a negative multiplied by a negative is always going to result in a positive). So why have i bothered with the abs() command? simply because i think it makes for a more logical script, in terms of the fact that the variable xSide is being used to represent the length of the adjacent side of a triangle, and length cannot (in this context, nor any other that i can think of) be a negative value.
the last command in this statement is float() which accepts a numerical value and converts it to it's floating point equivalent. This may at first seem unnecessary, because the resultant value from abs(mXFirst - mX) is always going to be a whole number due to the nature of how Processing measures values denoting the mouse's position in pixels, and although it is easy for us to imagine half a pixel or any fractional part making up a whole pixel, Processing (and most other programming languages) do not deal with pixels as fractional values but as whole numbers when referencing the position of the users mouse. So converting xSide to a flaot at this stage will simply result in the same numeical value with a decimal place followed by a string of zero's to infinity (if Processing could compute that many decimal points), the relevence of converting this value to a float is revealed in the next statement

pythag = sqrt(xSide*xSide + ySide*ySide);

this is were we finally get to use the theory of Pythagoras to compute the length of our line and as you can see the programming version is exacting to it's mathematical equivalent
Firstly we square the adjacent
we then do the same to the opposite side of our imaginary triangle and subsequently add the to two values together. Finally we use the sqrt() command to calculate the square root of the resulting value and assign this value to our variable named "pythag".
At this stage we are done with translating our mathematical theory of Pythagoras into it's programming equivalent. if we want to see the fruits of our labour we could use the command


clicking and dragging in the sketch will get processing to print the length of our line for us. However you will notice that there is no actual line being drawn.

Like i said earlier drawing the actual line is pretty easy now that we understand what the line is representing. in fact drawing the actual line is so easy that it does not even require us to calculate it's length using Pythagoras! So it's worth noting that although all we are doing in this sketch is finding out the length of the line the user is drawing and printing this value to the screen, this information can be applied to more complex scripts that, for example, allow an interactive avatar we create in a game the ability to walk diagonally. You can probably imagine how awkward looking a character that could only walk horizontally or vertically would appear. by knowing the length of the hypotenuse we can make a character walk in any direction we choose. To name but one simple application of this script.

So how do we convert the information we've learned about the theory of Pythagoras into actual geometry?
Lets take a look at the rest of the script in order to answer this question.

if(mousePressed == true){
line(mXFirst, mYFirst, mX, mY);

(NB the "..." in code simply denotes that I've omitted some code, that is in the main script, in order to keep things simple and focus my explanation on a single task, before moving onto the next)

To keep things simple we are going to break the rest of the script up into two separate parts. The first part will involve the statements needed to draw the geometry (the line in this case). The second part will deal with how to print the length of the line in text form to the screen, within the sketch window.

Firstly we will notice a conditional with the condition testing whether the user has clicked a button on the mouse or not, this condition is placed within the draw method because it is something we need to test at every frame that the sketch is running. If the user has pressed a button on the mouse within the window of the sketch, processing will continue to draw the line by running the next few statements within the curly braces {}.
The first statement within the following code block is instructing processing to draw the actual line. it is given to processing in the format
line(x1, y1, x2, y2)
where x1 and y1 are the respective x and y coordinates of the starting point of the line and x2 and y2 are the respective x and y coordinates of the end point of the line. These values are simply referenced by the variable names to which we have already assigned the appropriate values. (As per our explanation at the beginning of the "Keeping things simple" section).
Once the line is drawn Processing goes on to execute the rest of the code, which is where we get Processing to render the length of the hypotenuse of our imaginary triangle to the screen, by printing a textual, numerical value. Any alpha-numeric characters can be printed to a sketch window using this technique.

textPosX = (mX + mXFirst)/2;
textPosY = (mY + mYFirst)/2;
text(pythag, abs(textPosX), abs(textPosY));

Lets start off by having a look at the third line of this code block, we'll come back to the first two lines a little later.
printing text to a processing sketch is simply a case of running a single command, and that command is supplied to Processing in this format,

text("string of text to print", xPos, yPos)

where text() is the actual command and accepts several variations of parameters. we will be focusing on the format listed above, where the first parameter is listed as "string of text to print". This parameter defines what string of text we want processing to print to the sketch window. Any alpha-numeric character is accaptable, and must be enclosed between inverted commas "". If the parameter is not enclosed within inverted commas, Processing will assume you are wanting to evaluate an expression and print it's string data type conversion for this parameter. This is the case with our statement which has supplied this parameter with a variable named "pythag", which as we already know is not a string but a floating point number.
The next two parameters that i've listed as xPos and yPos, as you've probably already guessed, supply Processing with the X and Y coordinates of where we would like the text to be printed within the sketch window. These parameters must be input as numerical values or an expression that evaluates to respective numerical values. Inverted commas are not accepted for these parameters, as they do not denote string data type values.

To complete the script lets go back to the start of the innitial code block relating to the rendering of text to the sketch window.

textPosX = (mX + mXFirst)/2;
textPosY = (mY + mYFirst)/2;

here we have two variables that evaluate the center position of the hypotenuse of our imaginary triangle in terms of x and y coordinates. lets have a look at the first statement in this code block, which is used to evaluate the x coordinate of the line for which we are trying to find the center. the next statement relating to the y coordinate follows the same principle.
it's actually really simple, all we are doing is halving the starting and ending x coordinates supplied by the user and adding the result together. this will give us a point exactly halfway along the x axis of the sum of the users inputs for x coordinates used to draw the hypotenuse of our imaginary triangle. The illustration below might do a better job of demonstrating this concept.


if you were able to follow this explanation you should sucessfully understood, the mathematics that drives the theory of Pythagoras, know how to implement this theory in a programming equivelent and finally relate this theory to a geometrical representation.

Back to Visualizations

Following is a revised version of the visualization project i started discussing earlier.
In this revised version several old issues have been addressed and a few new ones have arisen, which i will discuss a little later.
amongst the issues that have been revised
  • The sketch reads the external text file and populates an array, that stores all users and thier associated data at runtime , through a loop. this leaves little room for human error in creating the array and also makes the script more scalable.  Several issues came to my attention while making this adjustment of which the most important was the scope of variables. Check back here soon for an explanation of how this is dealt with in processing and used in my sketch, the scope of a variable is also sometimes refered to with regards to the term encapsulation which we will get into a bit later.
  • Another issue that has been revised (which is quite a big one for me) is the way in which the external text document was being read into the sketch. In the previous version the sketch would read the text document once and if the data in the external text document changed the sketch would have to be recompiled to reflect the changes in the data.
    This has now been rectified the text document is continually read and examined for changes in the data, these changes are then reflected in the sketch without having to recompile the application.
    An issue that has arisen from the latter point is that i now realize that the mappable range values, capturing the max and min values of photos posted needs also to be dynamic, and this will have to be addressed (as i was expecting this to be the case).
    You can test the new functionality of the sketch by downloading the text doc in it's original form here
    place the text doc in a folder called data that is a subdirectory of the folder, gugs7.pde is in then run the sketch in the pde, open the text doc in any text editor, change the values and watch the sketch update each time you save the text file over the old version. The name and location of the text document must remain the same.

click the above image to try the sketch out

The code is currently still very heavily commented and needs to be cleaned up, but i thought i would post this version up before i post the completed version so that you can examine the mistakes and experiments i made to get to the working version. have fun :)

Download a 200 page PDF Book on Processing for free!
You can also visit the free online Learn Programming with Processing Course, that I developed the above document for, here.