FAQ
 
 
Cover  \ Exhibition  \ Learning  \ Reference  \ Download  \ Discourse   
      Language \ Environment \ Libraries \ Comparison 
 
   
 
 

Environment. The Processing Environment includes a text editor, a compiler, and a display window. It enables the creation of software within a carefully designed set of constraints.

Overview
Toolbar
Menus
Sketchbook
Exporting
Coordinates
Programming_Modes
Rendering Modes

Overview

The Processing Environment (Integrated Development Environment or IDE) is a simple and usable editor for writing and running programs. When the "run" button is clicked, the program compiles, the display window opens and the software runs inside. The toolbar provides functionality for running and stopping programs, creating a new sketch, opening, saving, and exporting. Additional commands are available through the menus. The message area gives feedback while saving and exporting and also shows the locations of errors when programs are compiled. The text area presents messages and can be written to with the print() and println() programming functions.


Toolbar

The toolbar provides access to six basic commands of Processing: Run, Stop, New, Open, Save, Export.


  Run: Runs the code (compiles the code, opens the display window, and runs the program inside)
     
  Stop: Terminates a running program, but does not close the display window. Hitting the Escape (Esc) key also stops the program.
     
  New: Creates a new sketch (project)
     
  Open: Select and load a pre-existing sketch. A menu opens and you may choose from your own sketchbook, examples, or you can open a sketch from anywhere on your computer or network.
     
  Save: Saves the current sketch into its current location. If you want to give the sketch a different name, select Save As from the File menu.
     
  Export: Exports the current sketch into the sketchbook as a Java Applet embedded in an HTML file. The directory containing the files is opened. Click on the index.html file to load the software in the default web browser. There is more information about exporting below.


Menus

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

File


New (Ctrl+N)
Creates a new sketch, named as the current date is the format "sketch_YYMMDDa".

Sketchbook
Gives the option to open a sketch from anywhere on the local computer or network, the sketchbook, or to open an example.

Save (Ctrl+S)
Saves the open sketch in it's current state.

Save as... (Ctrl+Shift+S)
Saves the currently open sketch, with the option of giving it a different name. Does not replace the previous version of the sketch.

Export (Ctrl+E)
Be default, exports a Java Applet and creates and embeds it into an HTML file. After the files are exported, the directory containing the exported files is opened. There is more information about exporting below.

Export Application (Ctrl+Shift+E)

Exports as a Java application as an executable file. Opens the directory containing the exported files.
(Not working yet)

Page Setup (Ctrl+Shift+P)
(Not working yet)

Print (Ctrl+P)
(Not working yet)

Preferences (Ctrl+,)
Allows you to change some of the ways Processing works.

Quit (Ctrl+Q)
Exits the Processing Environment and closes all Processing windows.


Edit

The Edit menu provides a series of commands for editing the Processing files.

Undo (Ctrl+Z)
Reverses the last command or the last entry typed. Cancel the Undo command by choosing Edit » Redo.

Redo (Ctrl+Y)
Reverses the action of the last Undo command. This option is only available, if there has already been an Undo action.

Cut (Ctrl+X)
Removes and copies selected text to the clipboard (an off-screen text buffer)

Copy (Ctrl+C)
Copies selected text to the clipboard.

Paste (Ctrl+V)
Inserts the contents of the clipboard at the location of the cursor, and replaces any selected text.

Select All (Ctrl+A)
Selects all of the text in the file which is currently open in the text editor.

Find (Ctrl+F)
Finds an occurance 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 (Ctrl+G)
Finds the next occurance of a text string within the file open in the text editor.


Sketch

Run (Ctrl+R)
Runs the code (compiles the code, opens the display window, and runs the program inside)

Present (Ctrl+Shift+R)
Runs the code in the center of the screen with a neutral background. Click the "stop" button in the lower left to exit the presentation.

Stop
If the code is running, stops the execution. Programs written with the Basic Mode or using the draw() structure are stopped automatically after they draw.

Add File
Opens a file navigator. Select an image, font, or other media files to add it to the sketches "data" directory.

Import Library
Adds the necessary import statements to the top of the current sketch. For example, selecting Sketch » Import Library » video adds the statement "import processing.video.*;" to the top of the file. These import statements are necessary for using the Libraries.

Show Sketch Folder
Opens the directory for the current sketch.


Tools

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

Create Font...
Converts fonts into the Processing font format and adds to the current sketch. Opens a dialog box which give options for setting the font, it's size, if it is anti-aliased, and if all characters should be generated. If the "All Characters" options is selected, non-English characters such as ü and Å are generated, but the font file is larger in size. The amount of memory required for the font is also determined by the size selected. Processing fonts are textures, so larger fonts require more image data.

Archive Sketch
Archives a copy of the current sketch in .zip format. The archive is placed in the same directory as the sketch.


Help

Environment
Opens the reference for the Processing Environment in the default Web browser.

Reference
Opens the reference in the default Web browser. Includes reference for the language, programming environment, libraries, and a language comparison.

Find in Reference (Ctrl+Shift+F)
Select a word in your program and select "Find in Reference" to open that reference HTML page.

Visit Processing.org (Ctrl+5)
Opens default Web browser to the Processing.org homepage.

About Processing
Opens a concise information panel about the software.

Sketchbook

All Processing projects are called sketches. Each sketch has it's own directory (folder) and inside there is the main program file which has the same name as the sketch. For example, if the name of the sketch is "Sketch_123", the directory for the sketch will be called "Sketch_123" and the main file will be called "Sketch_123.pde".

Sketches need other directories inside to contain additional media files and code libraries. When a font or image is added to a sketch by selecting the command "Add File..." from the "Sketch" menu, a "data" directory is created. All images, fonts, and other data/media files loaded within the sketch must be in this directory. Additional code libraries must be placed within a directory entitled "code". When a sketch is exported, all files from the "data" and "code" directories are exported into into a single .jar file with the same name as the sketch. For example, if the sketch is named "Sketch_123", the exported file will be called "Sketch_123.jar"

Sketches are all kept in the Processing directory, which will be in different places on your computer or network, depending if you use PC, Mac, or Linux and how you have your preferences set. To locate this directory, select the "Preferences" option in the "File" menu.

It is possible to have multiple program files in one sketch. These can be Processing text files (the extension .pde) or Java files (the extension .java). To add a new file, click on the arrow to the right of the file tabs. You can write functions and classes in new .pde files and you can write any Java code in files with the .java extension.

Exporting

Exporting creates a version of the sketch that can run within a Web browser. When code is exported from Processing it is changed into Java code and then compiled as a Java Applet. When a project is exported, a series of files are written to an "applet" directory which is created within the primary sketch directory. If the sketch is called "Sketch_123", the applet directory contains for following:

index.html
HTML file with the applet embedded and a link to the source code and the Processing homepage. Double-click to open this file in the default web browser.

Sketch_123.jar
Java Archive containing all necessary files for the sketch to run. Includes the Processing classes as well as those custom to the sketch and will also include media files (such as images) if they are a part of the sketch.

Sketch_123.java
The Java file generated by the pre-processor from the PDE file. This is the actual file which is compiled into the Applet by Jikes, the Java Compiler used in Processing.

Sketch_123.pde
The original program file. It is linked from the index.html file.

Every time a sketch is exported, all of the above files are written from scratch. Any changes made the the index.html file are lost.

When a sketch is exported, all files from the "data" and "code" directories are packed into a single JAR file, a Java Archive. Images and libraries not needed for the applet should be deleted before exporting to keep the files size small. For example, if there are many extra images in the "data" directory, they will be added to the JAR file, thus needlessly increasing the file size of the program. JAR files can be opened with programs such as WinZip so individual files can be seen and extracted.

In the future, it will be possible to export applications. This will allow programs to run without the Processing environment, to run at full screen, and to freely access data which is restricted by Applets (such as loading images through the Internet).

Coordinates

Processing uses a Cartesian coordinate system with the origin in the upper-left corner. If your program is 320 pixels wide and 240 pixels high, coordinate [0, 0] is the upper-left pixel and coordinate [320, 240] is in the lower-right. The last visible pixel in the lower-right corner of the screen is at position [319, 239] because pixels are drawn to the right and below the coordinate.




Processing can also simulate drawing in three dimensions. At the surface of the image, the z-coordinate is zero, with negative z-values moving back in space. When drawing in simulated 3D, the "camera" is positioned in the center of the screen.

Programming Modes

Processing allows people to program at three levels of complexity: Basic Mode, Continuous Mode, and Java Mode. People new to programming should begin with the Basic Mode to learn about coordinates, variables, and loops before moving to Continuous and Java modes.


Basic

This mode is used drawing static images and learning fundamentals of programming. Simple lines of code have a direct representation on the screen. The following example draws a yellow rectangle on the screen:

size(200, 200);
background(255);
noStroke();
fill(255, 204, 0);
rect(30, 20, 50, 50);

Continuous

This mode provides a setup() structure that is run once when the program begins and a draw() structure which by default continually loops through the code inside. This additional structure allows writing custom functions and classes and using keyboard and mouse events.

This example draws four circles on the screen and utilizes a custom function called circles(). The circles() function is not a part of the Processing language, but was written for this example. The code in draw() only runs once because noLoop() is called in setup().
void setup()
{
  size(200, 200);
  noStroke();
  background(255);
  fill(0, 102, 153, 204);
  smooth();
noLoop();
} void draw() { circles(40, 80); circles(90, 70); } void circles(int x, int y) { ellipse(x, y, 50, 50); ellipse(x+20, y+20, 60, 60); }

This example draws rectangles that follow the mouse position (stored in the system variables mouseX and mouseY). The draw() section runs forever until the program is stopped, thus creating the potential for motion and interaction.
void setup()
{
  size(200, 200);
  rectMode(CENTER);
  noStroke();
  fill(0, 102, 153, 204);
}
void draw()
{
  background(255);
  rect(width-mouseX, height-mouseY, 50, 50);
  rect(mouseX, mouseY, 50, 50);
}

Java

This mode is the most flexible, allowing complete Java programs to be written from inside the Processing Environment. Writing in Java Mode removes the limitations of the Processing Libraries and gives access to the full Java programming language.
public class MyDemo extends PApplet {
  void setup()
  {
    size(200, 200);

    rectMode(CENTER);
    noStroke();
    fill(0, 102, 153, 204);
  }

  void draw()
  {
    background(255);
    rect(width-mouseX, height-mouseY, 50, 50);
    rect(mouseX, mouseY, 50, 50);
  }
}

Rendering Modes

Processing currently has three rendering modes. The programs written with Processing can be rendered using the Java 2D drawing libraries, a custom 3D engine called P3D, and through OpenGL using the JOGL interface. The rendering mode is specified through the size() function. A large effort has been made to make the Processing language behave similarly across the different rendering modes, but there are currently some inconsistencies.


JAVA2D

Utilizes the Java 2D graphics library for drawing 2D images. This is the default rendering mode for Processing so if none is specified, it draws in this way.

size(200, 200);
background(255);
noStroke();
fill(255, 204, 0);
rect(30, 20, 140, 160);


This renderer can be explicity called as shown in the example below.

size(200, 200, JAVA2D);
background(255);
noStroke();
fill(255, 204, 0);
rect(30, 20, 140, 160);



P3D


Optimized for fast 3D drawing, but also supports 2D:

size(200, 200, P3D); 
background(0);
noStroke();
fill(204, 204);
translate(width/2, height/2);
rotateX(PI/6);
rotateY(PI/3);
rect(-60, -60, 120, 120);



OPENGL


This mode allows Processing programs to utilize the speed of an OpenGL accelerated graphics card. This expands the potential for drawing more to the screen and creating larger windows. Processing interfaces with OpenGL through JOGL, an initiative from the Game Technology Group at Sun. You need to have an OpenGL accelerated graphics card installed on your computer to fully utilize this library. For more information, please visit the OpenGL and JOGL websites.

Note: Software using this mode may appear different on varying graphics cards as some cards support OpenGL better than others.

import processing.opengl.*;

void setup() 
{
  size(800, 600, OPENGL);
  noStroke();
}

void draw() 
{
  float x = mouseX - width/2;
  background(255);
  fill(0, 102, 153, 26);
  for(int i=0; i<height; i+=10) {
    for(int j=0; j<width; j+=10) {
      beginShape(QUADS);
      vertex(x+j,   i,    0);
      vertex(x+j, i+5,    0);
      vertex(j-x, i+5, -400);
      vertex(j-x,   i, -400);
      endShape();
    }
  }
}










 
  Processing is an open project initiated by Ben Fry and Casey Reas  
  © Info \ Site hosted by Media Temple!