DESIGNED & ENGINEERED IN LONDON, UK

© 2019 Creoqode

The Processing Development Environment (PDE) - or Processing (IDE) - consists of a simple text editor for writing code, a message area, a text console, tabs for managing files, a toolbar with buttons for common actions, and a series of menus. It enables the creation of software within a carefully designed set of constraints.

As you remember from the previous chapter, we will be using Arduino Software (IDE) to upload our sketches to Creoqode Mini Mega, in other terms to program Nova. Whereas, we will be using Processing (IDE) to create new software and to provide communication between our PC and Nova, allowing them to receive and send data. This is essential for many applications that require the usage of camera, microphone, mouse and keyboard to control Nova.

 

Let's start by downloading Processing (IDE). It is a free and open-source software and can be downloaded from the link below:

 www.processing.org/download/

Processing (IDE) runs on Windows, Mac OS X and Linux. Pay attention to download the right version for your PC. After downloading and installing it, run the software and we will now go over the main structure and functionality of Processing (IDE).

Programs written using Processing are called sketches. These sketches are written in the text editor. It has features for cutting/pasting and for searching/replacing text. The message area gives feedback while saving and exporting and also displays errors. The console displays text output by Processing sketches including complete error messages and text output from sketches with the print() and println() functions. However, you should note that the console works well for occasional messages, but is not intended for high-speed, real-time output.

Let's start by exploring the meaning and function of each tab and button of Processing (IDE). Being able to use the software to its full capabilities will significantly help whilst working with Nova.

Run

Stop

Debug

The buttons on the toolbar can run and stop programs:


Run: Runs the sketch. In Java mode, it compiles the code and opens a new display window.
Stop: Terminates a running sketch.

Additional commands are found within the six menus: File, Edit, Sketch, Debug, Tools, Help. The menus are context sensitive which means only those items relevant to the work currently being carried out are available.

FILE

New: Creates a new sketch in a new window, named as the current date is the format "sketch_YYMMDDa".
Open...: Open a sketch in a new window.
Open Recent: Select a sketch to open from the list of recently closed sketches.
Sketchbook...: Open a new window to show the list of sketches in the sketchbook.
Examples...: Open a new window to show the list of examples.
Close: Close the sketch in the frontmost window. If this is the last sketch that's open, you will be prompted whether you would like to quit. To avoid the prompt, use Quit instead of Close when you want to exit the application.
Save: Saves the open sketch in itx current state.
Save as...: Saves the currently open sketch, with the option of giving it a different name. Does not replace the previous version of the sketch.
Export: Exports a Java application as an executable file and opens the folder containing the exported files.
Page Setup: Define page settings for printing.
Print: Prints the code inside the text editor.
Preferences: Change some of the ways Processing (IDE) works. This item is located in the Processing menu on Mac OS X.
Quit: Exits the Processing Environment and closes all Processing windows. This item is located in the Processing menu on Mac OS X.

EDIT

 

Undo: Reverses the last command or the last entry typed. Cancel the Undo command by choosing Edit > Redo.
Redo: Reverses the action of the last Undo command. This option is only available if there has already been an Undo action.
Cut: Removes and copies selected text to the clipboard.
Copy: Copies selected text to the clipboard.
Copy as HTML: Formats code as HTML in the same way it appears in the Processing environment and copies it to the clipboard so it can be pasted somewhere else.
Paste: Inserts the contents of the clipboard at the location of the cursor, and replaces any selected text.
Select All: Selects all of the text in the file which is currently open in the text editor.

Auto Format: Attempts to format the code into a more human-readable layout. Auto Format was previously called Beautify.

Comment/Uncomment: Comments the selected text. If the selected text is already commented, it uncomments it.
Increase Indent: Indents the selected text two spaces.
Decrease Indent: If the text is indented, removes two spaces from the indent.
Find...: Finds an occurence of a text string within the file open in the text editor and gives the option to replace it with a different text.
Find Next: Finds the next occurence of a text string within the file open in the text editor.
Find Previous: Finds the previous occurence of a text string within the file open in the text editor.
Use Selection for Find: Sets the currently selected text as the item to find with Find Next and Find Previous.

SKETCH

Run: Runs the code. It compiles the code, opens the display window, and runs the sketch inside.
Present: Runs the code in the centre of the screen with a solid-color background. Click the "stop" button in the lower left to exist the presentation or press the Escape key. Change the background color in the Preferences.
Tweak: Runs the code in a way where some color and variable values can be changed while the code is running. The sketch needs to be saved before it can be run as a sketch to Tweak.
Stop: If the code is running, stops the execution. Programs written without using the draw() function are stopped automatically after they draw.
Import Library: Adds the necessary import statements to the top of the current sketch. For example, selecting Sketch > Import Library > pdf adds the statement "import processing.pdf.*;" to the top of the file. These import statements are necessary for using Libraries. Select Add Libraries... to open the Library Manager to browse and install new libraries.
Show Sketch Folder: Opens the folder for the current sketch.
Add File...: Opens a file navigator window. Select an image, font, or other media files to add it to the sketch's "data" folder.

DEBUG

Enable Debugger: Activates the debugger. Note that the Run button will change to Debug. New Continue and Step buttons will appear, along with a separate window for viewing variable values.
Continue: Advances the code until the next breakpoint.
Step: Advances the code one line at a time. Note that once the code reaches the end of the current function call, the debugger will revert to "continue".
Step Into: Advances the debugger into the interior of a function call. This only works for user defined functions in the sketch.
Step Out: Advances the debugger outside of a function to the calling area. This only works for user-defined functions in the sketch.
Toggle Breakpoint: Add or remove a breakpoint. When a breakpoint is added, the line number is replaced with the symbol: <>.

TOOLS

Create Font...: Converts fonts into the Processing font format (VLW) and adds to the current sketch. Opens a dialog box that gives options for setting the font, its size, if it is anti-aliased (smooth), and which characters to be generated. The amount of memory required for the font is determined by the size selected and the number of characters selected through the "Characters..." menu; Processing fonts are textures, so larger fonts require more image data. Fonts can also be created in the code with the createFont() function.
Color Selector...: Interface for selecting colors. For each color, the HSB, RBG, and Hex values are shown. The Hex value can be copied into the clipboard with the Copy button.
Archive Sketch: Archives a copy of the current sketch in .zip format. The archive is placed in the same folder as the sketch.
Install "procesing-java": Installs the processing-java program to make it possible to build and run Java mode sketches from the command line.
Movie Maker: Creates a QuickTime movie from a sequence of images. Options include setting the size, frame rate, and compression, as well as an audio file.
Add Tool...: Opens the Tool Manager to browse and install new Tools.

HELP

Environment: Opens the reference for the Processing Development Environment in the default web browser.
Reference: Opens the reference in the default web browser. Includes references for the language, programming environment and core libraries.
Find in Reference: Select an element of the Processing language in the text editor and select Find in Reference to open that page in the default web browser.
Libraries Reference: Select from the list to open the reference for compatiable Libraries.
Tools Reference: Select from the list to open the reference for compatiable Tools.
Getting Started: Opens the online Getting Started tutorial in the default browser.
Troubleshooting: Opens the online Troubleshooting wiki page in the default browser.
Frequently Asked Questions: Opens the online FAQ wiki page in the default browser.
The Processing Foundation: Opens the Foundation website in the default browser.
Visit Processing.org: Opens Processing website in the default browser.

PREFERENCES

The Processing Development Environment (PDE) is highly configurable. The most common preferences can be modified in the Preferences window, located in the File menu on Windows and Linux and in the Processing menu on Mac Os X. The full list of preferences are stored in the "preferences.txt" file. This file can be opened and edited directly only when Processing is not running. You can find the location of this file on your computer by reading the bottom-left corner of the Preferences window.

Sketchbook Location: Any folder can be used as the Sketchbook. Input a new location or select "Browse" to set the folder you want to use.
Language: Select the language to use for the menus. Processing needs to be restarted after making a new selection.
Editor and Console Font: Select a different font to use for text in the Editor and Console. Note that the selected font should match the language used in the Text Editor.
Editor Font Size: Sets the font size of the code in the text editor.
Console Font size: Sets the font size of the text in the console.
Background Color when Presenting: Defined the background color used when a sketch is run with Present.

Use Smooth Text in Editor Window: By default, the text in the editor is aliased. When checked, the editor switches to an anti-aliased (smoothed) font. Restart Processing after making this change.

Enable Complex Text Input: Enables the Text Editor to display non-Latin fonts such as Japanese. Processing needs to be restarted after making this selection.
Continuously Check for Errors and Show Warnings: Turn on and off the features that continuously check for and report potential code errors.
Code Completion with Ctrl-Space: Turn on and off code completion. Press Ctrl-space to activate code completion while typing.
Suggest Import Statements: When checked, Processing will try to suggest libraries to import when code from that library is detected.
Increase Maximum Available Memory: Allocates more RAM to Processing sketches when they run. Sketches that use media files (images, audio, etc.) sometimes require more RAM. Increase the amount of RAM if a sketch is throwing Out of Memory Errors.
Delete Previous Folder on Export: When checked (default behavior), Processing deletes the complete export folder before re-creating it and adding the new media.
Check for Updates on Startup: When checked (default behavior), you'll be informed of new Processing software releases as they become available through a small dialog box that opens as Processing starts.
Run Sketches on Display: If more than one monitor is attached, select the monitor on which to display the sketch.

SKETCHES AND SKETCHBOOK

All Processing projects are called sketches. Each sketch has its own folder. The main file for each sketch has the same name as the folder and is found inside. For example, if the sketch is named "Sketch_123", the folder for the sketch will be called "Sketch_123" and the main file will be called "Sketch_123.pde". The PDE file extension is an acronym for the Processing Development Environment.

Processing sketches can be stored anywhere on your computer, but by default they are stored in the sketchbook, which will be in different places on your computer or network depending if you use PC, Mac, or Linux and how the preferences are set. To locate this folder, select the "Preferences" option from the File menu (or from the "Processing" menu on the Mac) and look for the "Sketchbook location."

A sketch folder sometimes contains other folders for media files and other code. When a font or image is added to a sketch by selecting "Add File..." from the Sketch menu, a "data" folder is created. Files may also be added to your Processing sketch by dragging them into the text editor. Image and sound files dragged into the application window will automatically be added to the current sketch's "data" folder. All images, fonts, sounds, and other data files loaded in the sketch must be in this folder.

TABS, MULTIPLE FILES, AND CLASSES

It can be inconvenient to write a long program within a single file. When Processing sketches grow to hundreds or thousands of lines, breaking them into modular units helps manage the different parts. Processing manages files with the Sketchbook and each sketch can have multiple files that are managed with tabs.

The arrow button to the right of the tabs in the Processing Development Environment is used to manage these files. Click this button to reveal options to create a new tab, rename the current tab, and delete the current tab. Tabs are intended for more advanced users, and for this reason, the menu that controls the tabs is intentionally made less prominent.

DEBUG

The Processing Debugger is a tool for diagnosing problems with a sketch. Enable it to pause a sketch while running and advance through the code one line at a time. The debugger is enabled through the File menu (Debug > Enable Debugger) or by clicking the Debugger icon, the butterfly in the upper-right corner of the PDE.

When the Debugger is enabled, the program runs as normal, but stops at "breakpoints." To create a breakpoint, set the cursor at the line you want to pause the sketch and select Debug > Toggle Breakpoint. The keyboard shortcut is Command-B. To remove the breakpoint, select Toggle Breakpoint again. When a breakpoint is added, the line number is replaced with the symbol: <>.

Running the sketch in Debug mode causes the sketch to pause at any breakpoints. When paused, current variable values are visible in a separate pane. You can advance to the next breakpoint by selecting "Continue" or advance line by line through the code

A sketch folder sometimes contains other folders for media files and other code. When  with "Step". Stepping only works within the scope of the current function being run.

PROGRAMMING MODES

Processing has different programming modes to make it possible to deploy sketches on different platforms and program in different ways. The current default programming mode is Java mode. Other programming modes such as Android Mode and Python are added by selecting "Add Mode..." from the menu in the upper-right corner of the PDE.

Java Mode: This mode makes it possible to write short programs to draw to the screen, but also enables complex Java programs as well. It can be used simply by beginners, but it scales to professional Java software development. Sketches written in this mode can be exported as Java Applications to run on Linux, Mac OS X, and Windows operating systems.

ADDING LIBRARIES, TOOLS AND MODES

Processing 3.0 includes a set of features to make it easier to install, update, and remove Libraries, Tools, Modes, and Examples.

Add a contributed library by selecting "Add Library..." from the "Import Library..." submenu within the Sketch menu. This opens the Library Manager. Next, select a library and then click on Install to download it.

Add a contributed tool by selecting "Add Tool..." from the Tools menu, then select a Tool to download from the Tool Manager.

Add contributed modes by selecting "Add Mode..." from the Mode menu in the upper-right corner of the PDE, then select a Mode to install.

Add contributed Examples by first opening the "Examples..." submenu from the File menu. Click on the Add Examples button to open the Examples Manager. Next, select an examples package and select Install to download.