At last!

Following months of set backs, I finally got my head down to complete this....

Charlotte Beddoes

Chunk 27

AN INTRODUCTION TO PROCESSING

We have now taken a look at building code for various outputs but now we want to start looking at the Processing environment itself to put these codes in to practice.

The Processing environment has been designed specifically for artists to create pieces of computational art as easily as possible which is reflected by the simplicity of the program interface. However, this simplicity does not equal poor output. It is possible to create very complex pieces using this program even if you hadn’t ever written code before using Processing, without months of programming to achieve it.

The type of program it is is referred to as an IDE (Integrated Development Environment). Where as other IDEs refer to other elements to work, Processing does not meaning that it is effectively pure Java which goes further to simplify the use of it.

In this section, we will take a closer look at the six main components of the Processing environment itself as way of familiarisation before you really get your teeth in to it.

To install Processing, you need to have certain Java programs installed on your machine as Processing, effectively a Java application, relies on them. When you open up the Processing program, Java applications automatically start up and are controlled through the JVM (Java Virtual Machine) which is part of the JRE (Java Runtime Environment). To use Processing, you should have JDK (Java Development Kit) 5 (also known as 1.5) installed. Processing makes use of the core classes and cannot function without them. When you open the program you should be met with the following window:

SCREEN SHOT OF EMPTY PROGRAM WINDOW

As you will see from the interface, there isn’t much text to associate the buttons with what they do but you can roll over the buttons to view the descriptions. The choice of omitting text, editor boxes, etc, keeps the screen uncluttered and clear.

This screen is made up of six main components to use Processing. These are:

Toolbar
Tabs
Text Editor
Message Area
Text Area
Line Number

SCREEN SHOT WITH TITLES ARROWED TO AREA

We will now go through each of these in more detail. But before we do, please do the following:

Open the Processing program
Go to File
Click on Open
Select the ***** file


TOOLBAR

The Toolbar is where you will find the basic functions for handling the sketch code. There are six buttons available here. As always, options like this can be found elsewhere in a program and in this case, they can be located from the menu which will be covered later. The options on the toolbar are as follows:

Run
Stop
New
Open
Save
Export

A description of each is given here:

This is the Run button. It allows you to compile your code, open a display window and execute the code showing the result in the display window. TO DO: Press this button to see the sketch being built. You should be able to see the finished sketch without any problems.

This is the Stop button. It allows you to stop a program from running. However, this leaves the display window open. TO DO: Press the Run button and then press this button to stop the sketch from completing. You should be able to see a partially completed sketch.

This is the New button. It allows you to create a new sketch in the current window. The files do have a default name when you create them made up by sketch_, the date and an alphabet character which will be concurrent with the previous sketch. TO DO: Press this button to create a New file. You should no longer be able to see the previous sketch in the window; just a blank one. If you wanted to keep the original sketch open and then open a new one, you will need to choose File and New from the menu bar. This would result in two windows (one sketch per window) being open. Please also note that if you create a new sketch but then do not add any code in to the Text Editor, the file will be automatically deleted as part of standard Processing functionality. You can, however, change this setting by going to the File menu and in to preferences.

This is the Open button. It allows you to open an existing sketch in the current window. When you click on this button, it will open your standard file window. These files will be located in the default directory unless you change the location by going to the File menu and changing the preferences to alter the location. TO DO: Press this button and navigate to re-open the sketch you had open to begin with.

This is the Save button. This button allows you to save the sketch to its current location. It is worth noting that this option will overwrite the previous version saved under this file name with no prompt that this is about to happen. Therefore, if you’d like to create a version or simply save it as a different sketch, you will need to use the Save As option which can be found in the File menu. If you try to save the file with an ‘illegal’ file name, the program ‘barks’ at you and replace the illegal character with an underscore.

This is the Export button. The function of using this button is to export your file as HTML with an applet of your sketch embedded within it. This is saved within an applet subdirectory which is contained within your sketch directory. Once exported, the subdirectory will contain five files which are:

Index.html
Your file with the .pde file extension
Your file with the .jar file extension
Your file with the .java file extension
loading.gif

Here is an explanation of what each of these is:

- The index.html is the HTML which when selected will load in to your web browser and display your sketch.

- The .pde file is the Processing file you created.

- The .jar file is the Java Archive file which contains everything your browser will need to run the sketch from the index.html file.

- The .java file is a file which will be contained by the .jar file to carry out its function.

- The loading.gif file is a temporary visual display which is shown whilst your sketch is loading.

TO DO: Press this button and view the files which will be displayed automatically for you. Ensure you have the five files detailed above. Close this window and return to the Processing environment.

You can also alter the look of the window in the same you can any other window of a program by resizing, hiding panes, dragging etc, but this is of course, as always, dependant on personal preference.

TABS

When you first use Processing, you are unlikely to worry about the Tabs function as you will have your whole sketch contained with one Tab (or file). However, as your sketches become more complex, a certain amount of order is required so that you can make sense of them; this is where Tabs become useful.

TO DO: Find the Manage Tabs button by hovering over the buttons in the Processing environment. When you have found it, you should see the following options:

New Tab
Rename
Delete
Hide
Unhide
Filename(s)

Here is an explanation of what each one does:

- New Tab adds a new file to enable you to enter code. You can also at this point, specify an alternative suffix for the file (.pde or .java only). If you do not specify, the default is .pde which is the file extension for the Processing environment.

- Rename allows you to change the file name

- Delete allows you to delete the file

- Hide allows you to hide a file which can be very useful if you have a screenful.

- Unhide allows you to see previously hidden files

- Filename(s) allows you to click on to the previous or next file name to display it

TO DO: Click on Manage Tabs and select New Tab, name the file (must start with a letter or underscore with no spaces and maximum of 64 characters). If you do not follow these requirements, the Processing program will automatically rename the file giving it a ‘legal’ file name. You should now see a new Tab in your window.

TO DO: Click on the Manage Tabs button and select Rename and change the name of your file. You should now see the Tab in the window with the new name.

TO DO: Click on the Manage Tabs button and select Hide. If you only have one file at the time of doing this, nothing will happen as there must always be at least one file open.

TO DO: Again, in the Manage Tabs list, select Unhide. You will then see a mini menu appear to the side listing all of you hidden files. Select the one you want. You will then be able to see this file again in the window.

TO DO: In the Manage Tabs list, you will see file names at the bottom of the list. Select a file other than the one you are currently on. You will then be able to see this file in the window with all other Tabs in the background.

TO DO: Finally, the last remaining option in the Manage Tabs is the Delete option. Make sure the tab you wish to delete is selected and then open the menu and select Delete. You will no longer be able to see this file in the sketch. Therefore, use it wisely as if you sketch refers to this file and it is deleted, your sketch will no longer run.

TEXT EDITOR

The Text Editor is where you write and amend your code to create your sketch. As you add code, you will notice that the text changes colour to give you an indication of what is going on. The kinds of things that this will happen on are:

To see which line you are on
Selected text
Accepted keywords for the Processing language

TO DO: Move your cursor to a line and note what happens. You should notice that the whole line has now got a shaded highlight to it making it clear that that is where your cursor is.

TO DO: Find a word that is in a reddy-brown colour and remove one of the letters. Note what happens. Re-type the letter you removed and see what happens. If it is an accepted keyword, it will show this reddy-brown colour within your text.

MESSAGE AREA

This area is specifically for simple messages regarding errors in your code when you click on Save or Export. The language used here is far less complex than that you will see in the Text Area.

TO DO: Cut a line of code from your file and press the Save button. You should see an error message displayed as your code will no longer be complete. Do you think you’d be able to figure out what was wrong with your code from this simple message without the reason being obvious? This is where the Text Area comes in to its own. Paste the information back to the correct location for the next exercise.

TEXT AREA

The Text Area is where you receive detailed message about errors in your sketch code. You may feel that the error message contained within the Message Area will suffice, and that it may for simpler sketches. But as the sketches become more complex, the detail in the Text Area can save much time manually searching the code for the error. To a beginner in Processing, the Text Area can be daunting but as you become more experienced, you will be able to make sense of the detailed error messages and may also be grateful for them!

TO DO: In the Text Editor, cut the same piece of code as you did in the Message Area section and press Save. Not only should you see an error message in the Message Area, but you should now also take note of the message in the Text Area. You can see that it does contain the information from the Message Area but there is now also far more detailed information. Knowing which line you have removed, does this message make sense to you? Only by gaining better knowledge of what’s going on, will you be able to use this information effectively. Paste the line back in to its correct location within the code.

Included within the Processing environment are two commands which will allow you to receive information on the output from your sketch code. These are:

print()
printIn()

print() allows you to see the output information in the Text Area in a single line. It is not suggested however, that you use this command to display output from an array due to the potential volume of information; the line would go on forever! Instead for this, you would use printIn().

printIn() works in the same way as print() but the exception that it displays each piece of information on a new line which is why it is so useful to display the information from an array.

TO DO: Add the print() code (**need to do example of this**)to your sketch information and press Run. Note the information you see and the format it is in. Repeat using the printIn() function also. You should make this relate to a certain section of your code to keep the results useful especially if it is a large file.

LINE NUMBER

The number in this area reflects the location of your cursor within the code. As we saw previously, when you move the cursor around in the text, the entire line becomes shaded highlighted but you still may not know the line number for this selection which is where this comes in handy as the Text Area error message may relate to a line number.

TO DO: Move your cursor around within the Text Editor section and note the number change at the bottom of the window.