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 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 :)

Sketches

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.

Data-Typing

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

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 for vectors 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
r²= a² + b²

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 ² = 8 ² + 10²
Therefore
r² = 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 r² = 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

more updates on how i made this sketch later..

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 :)

home
email