|
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.
|
|
|
|
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 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
Therefore
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...
 or in
a more useful format 
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(){
size(500,500);
}
void draw(){
background(127);
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
xSide*xSide
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
println(pythag);
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.
|
|
