eclipse as editor

Since the eclipse europa release five different versions are available on the download page. Our choice is the eclipse classic release. It supports all possible plugins and languages. Classic doesn't mean that it's not state of the art.
Use the installer or just copy the eclipse folder, depending on your operating system, into your application folder. When you start eclipse the first time, the application asks for a workspace folder and if this shall be used as the default folder. The workspace folder represents the folder for all your eclipse projects you create in the future. Eclipse provides the possibility to create multiple workspaces to separate several project for example in project types or clients. Normally one workspace is enough.

If you open eclipse the first time it looks really pretty patched and no box expect the editor window makes sense. Indeed, the structure could need a make over - but some of the frames are quite useful.

1. Placed in the center the editor is the heart of eclipse.
2. The package explorer gives an overview of the projects and their contents. Close projects you currently don't need to keep eclipse “fast”. If your project content isn't displayed the right way (with packages, referenced libraries, etc.) you are in a wrong perspective (see point 5).
3. The outliner shows the structure of the selected class. Use the sorting and display properties at the top to modify the view. By clicking on a list item the cursor in the editor will move to the property or method. Not very important but available are the import declarations, other classes which your classes need to work.
4. If eclipse thinks that your code needs some work it will leave you a detailed message in the Problems tab. Also in this part of the screen the Console will print the print and println commands.
5. In the upper right part of eclipse you are able to switch in another perspective. Each plugin (mostly for other programming languages) has his own render mode for eclipse.

• Global font settings Changes the basic font format for each plugin using the eclipse editor. Go to Preferences → General → Appearance → Colors and Fonts, select Text Font in the list and press Change…. In OS X the editor font will always be antialiased – adjust the minimum font size in the system preferences as workaround.
• Line numbers & Current line This feature is one of the standards Processing never had. Very useful for fixing Problems that are shown in the console. The line numbers and/or the current line will bis displayed/marked at the left side of the editor frame by switching on the option in the preferences: Preferences → General → Editors → Text Editors.
• Java, Javadoc & Comment highlighting Modify the syntax highlighting colors via Preferences → Java → Code Style → Formatter.
• Auto-formater Rules for formating the code using (Shift + Ctrl + F) are adjustable in Preferences → Java → Code Style → Formatter. It takes quite long to adjust these setting, so make sure to export those as xml document.
• File encoding The file encoding for new and saved files (maybe useful for XML documents) Preferences → General → Workspace.

The following paragraphs cover a basic introduction for using the Processing framework in the eclipse development environment. Beginning with a simple project setup to implementing single parts of the toolkit.

A Processing project in eclipse is basically a normal Java project. Simply right-click in the Package-explorer and select 'New' → 'Java Project'. Be sure your are using the Java perspective. Otherwise the 'Java Project' option is selectable in the project-type-list, reachable via 'New' → 'Project…'.

Name Step one is to give your child a name. In the example it's »MyFirstProject«. It will be the project folder name in your previously selected workspace folder, try to keep it short and descriptive. Avoid using special characters, umlauts or spaces. After all the names might look a bit wierd – but development environments could act strange on uncommon project titles (especially on MS Windows).

Location Here you can define the location were your files will be stored on your hard drive. Leave the default selection for java projects. There's no need to move it out of the workspace directory. Just to give you an example of a project type where it's a must: imagine you are creating a PHP script on your local webserver. Then you would set up your project root folder in the 'htdocs' directory of the apache.

JRE Leave this option also in default status if you are not familiar with your installed Java versions. Otherwise select the version you wish to develop for.

Project layout We recommend to separate the source and class files in your project folder. Keeps it clean and structured.

After all, press 'Finish' to complete the project creation.

Processing is basically a toolkit for Java development. Each function explained in the reference is a summary of a more or less complex process (written in Java). Such toolkits or frameworks are called libraries, stored in .zip or .jar files. Since the created project is a standard Java project, we only have to add the Processing functionality by implementing its library file. External libraries within the project will be stored separated from the actual source code. Therefor a specific folder called 'lib' has to be provided. All Java libraries will be stored in there – one of them is named 'core.jar' and contains all basic functionality. Copy this file from the downloaded Processing version, depending on your OS:

MAC OS X Browse to the Processing application on your hard drive using the Finder. Right-click the .app and select 'Show Package Contents' from the option menu. Navigate through the application bundle and copy the following file into the 'lib' folder of the eclipse project: »Contents/Resources/Java/core.jar«

WIN Navigate to the Processing application folder and copy the following file into the 'lib' folder of the created project: »Processing folder/lib/core.jar«

Copying the heart of Processing into the project doesn't allow us to use it in eclipse until we actually import it. Importing means adding it into the 'Build Path', a list of required things to create/run the application from the project. Therefore right-click the 'core.jar' in the Package Explorer of eclipse and choose 'Build Path' → 'Add to Build Path' from the list. Afterwards it will appear as part of the Build Path in the 'Referenced Libraries' node.

Like in the standard Processing editor – a sketch is a bunch of written function calls and expressions. The empty source document doesn't exists by default and has to be created manually in the 'src' folder. Right-click on the project folder in the Package Explorer of eclipse and select 'New' → 'Class' in the context menu. A window containing several form fields shows up. Inside an eclipse project each .pde sketch document is represented by a Java class that extends PApplet.

Source folder This field is filled by default. Since there should be only one source code folder – the Java class will be located into »YourProjectName/src«.

Package Eclipse won't create any packages by its own. Leave this field blank if you don't need any structure in the source code folder but consider the warning.

Name Type the name of the class excluding the file type ending (without .java). Each class/file name should start with a capital letter.

Modifiers Leave the 'public' option selected and unselect all other options in this area.

Superclass The current class will function as the heart of the programme. It represents the window, key- and mouse events, the core functionality of Processing. Therefore it has to build on the Processing framework by extending it. This extension is created by naming the Superclass – in our case 'processing.core.PApplet'.

All other options and fields are unimportant for the basic creation of a simple Processing sketch in eclipse. Click the 'Finish' button to finalise the wizard.

Some lines of code are already in the class document after creating it using the wizard of eclipse. The import statement seams familiar to people who used external libraries in Processing before. In this case Processing is a library as well and will be imported to allow the extend command. The Processing IDE added those lines after pressing the 'run' button – now they have to be written by us. Everything that has been written in the standard Processing editor before goes now between the curly braces.

import processing.core.PApplet;
 
public class MyFirstClass extends PApplet {
 
}

The code is structured in the common Processing style. Two default function setup() and draw() for the programme – all p5 functions will be accepted by eclipse. The only must is to declare the outline ones as public.

import processing.core.PApplet;
 
public class MyFirstClass extends PApplet {
 
	public void setup () {
		size (640, 480);
	}
 
	public void draw () {
		background (255);
		ellipse (mouseX, mouseY, 20, 20);
	}
}

Just creating a folder that is called 'data' does not work in eclipse. Exception will show up – telling that the file or path doesn't exist. A simple click helps to solve the problem. If a folder named 'data' doesn't exist in your project folder, create it. Afterwards – right-click on it in the Package Explorer of eclipse an select 'Build Path' → 'Use as Source Folder' in the context menu. Like the 'lib' folder, all files in 'data' will be included while building or running the application.

import processing.core.PApplet;
import processing.core.PImage;
 
public class MyFirstClass extends PApplet {
 
	private PImage img;
 
	public void setup () {
		size (396, 396);
		img = loadImage ("picture.jpg");
	}
 
	public void draw () {
		image (img, 0, 0, width, height);
		ellipse (mouseX, mouseY, 20, 20);
	}
}

This small programme demonstrates how to load and display an image. The only real difference to the Processing IDE is the second line, for loading the PImage class. Every class used in the sketch must be imported by such a statement at the beginning of the document. A much shorter way is to import not every single class but the whole package. For example:

import processing.core.*;

Everyone who is producing 'high end' graphic applications doesn't want to miss it. OpenGL is a language spoken by graphic cards in nearly all computers and some portable devices. Java is supposed to be platform (operating system) independent. That is true for most of the operations. Depending on the soft- and hardware required by the process special files are needed as interface. For MS Windows these are called .dll and Mac OSX .jnilib.

Step by Step:

1. The Processing library ('core.jar') does not contain the functionality for using the OpenGL context. Therefore another part of the framework has to be imported. The library files named 'gluegen-rt.jar', 'jogl.jar' and 'opengl.jar' are located: Processing/libraries/opengl/library/ (WIN) Processing.app/Contents/Resources/Java/libraries/opengl/library/ (OS X). Like the standard Processing library ('core.jar') the libraries for OpenGL have to be a part of the project build path. Copy the libraries into the 'lib' folder of the project. Right-click on the files in the Package Explorer of eclipse and select 'Build Path' → 'Add to Build Path'.
2. The above mentioned specific operating system files are located in the same directory as the 'jogl.jar'. Create a folder named 'libNative' in your project and copy all .jnilib documents (Mac OS X) into it. Processing version 1.0.7 contains 4 of them (libgluegen-rt.jnilib, libjogl_awt.jnilib, libjogl_cg.jnilib, libjogl.jnilib).
3. Last action is to link the 'gluegen-rt.jar' and the 'jogl.jar' library with their native interfaces. Select one of the them in the Package Explorer and right-click to open the context menu. Afterwards choose 'Build Path' → 'Configure Build Path'. A window opens where all library files are listed. Each library is represented by a node that can be opened and closed. Open the nodes of both libs and select the field 'Native library location', press 'Edit' on the right and set the 'libNative' folder of your project. Confirm all changes and the project setting are ready for OpenGL.

import processing.core.PApplet;
import processing.core.PImage;
import processing.opengl.PGraphicsOpenGL;
 
public class MyFirstClass extends PApplet {
 
	private PImage img;
 
	public void setup () {
		size (396, 396, PGraphicsOpenGL.OPENGL);
		img = loadImage ("picture.jpg");
	}
 
	public void draw () {
		image (img, 0, 0, width, height);
		ellipse (mouseX, mouseY, 20, 20);
	}
}

• #1 Basic eclipse-p5 project
• #2 eclipse-p5 project including 'data' folder
• #3 eclipse-p5 project including OpenGL

There is a kind of standardised project folder structure for java programmes. Every code will work if you use your own logic for naming the different folders. But maintaining makes it easier if you work in a team or publish your stuff in external sources. Five types of folders are more or less important for us:

• src In java the single class documents are placed in a folder structure. Those folders are known as packages. Eclipse creates in default mode a folder named src in your project folder. It's the root folder for all your packages. If you create a new package in your project-scr-folder, a folder on your file system with the package name will be created.

• lib External libraries documents (.jar) which you want to use in your project have to be in this folder. Eclipse won't recognize them until you add them to Build Path. Navigate in the eclipse package explorer and right-click on the jar-file to select Build Path → Add to Build Path. The jar-document will disappear from the lib folder and is now listed under Referenced Libraries.

• libNative Depending on the things your application is doing you might need special libraries which end with .jnilib (Mac) or .dll (Windows). Those libraries are resided deep in the system you are working on. For example if you want to work with OpenGL or the serial port.

• build Every time you test your application the java compiler will compile your code and copy the files into this folder. It's a default folder if you create a java project in eclipse.

• data or assets All your images, fonts, xmls, etc. go in here.

• deploy The final version of your application should be created into a folder named deploy.