Members, Processing, Tutorials
comments 19

How To Craft Your Processing Sketches in Eclipse

cover

The new release of Processing 2 has introduced many new great features, not just to the language but the IDE as well, I love the IDE improvements and it does exactly what is means to do, it is a sketch book. You open the application and start coding straight away, hit play and you see your work running instantly, its pretty awesome. But as I spend more time working on a project and it grows and get more complex I need features that the Processing IDE is lacking. Fortunately, the Processing language allows you to use a different IDE and that is the objective of this tutorial – to help newcomers to get their Processing programs up and running in Eclipse and show how to take advantage of some of its great features, like code auto-completion, code hints, quick fix, great syntax colour themes, among others.

There are other tutorials on the subject like the one in Dan Shiffman’s book Learning Processing and may favourite but unfortunately offline by CreativeCoding.org. But they don’t go in detail on how to take advantage of such great IDE.

Room for improvement

This is not a definitive guide of Eclipse nor Java, but I will try my best to explain the new things you will encounter. Also this tutorial is written from personal experience if you are reading and know a better way of working or you know other tricks that improve the experience please let us know in the comments and I will fix where appropriate. Peace.

Requirements

1. Download and install Eclipse, I recommend Eclipse IDE for Java Developers
2. I assume you already have it but if not download Processing

Extracting Processing Core Files

On Mac

Go to the location of your Processing application on your hard drive and CTRL + Click on the Processing application icon, you should get a Context Menu like shown in the image below

extracting-p5core-mac

Click on Show Package Contents and a new Finder window will appear, in it you will see a Contents folder, from there just need to navigate to Resources -> Java -> core -> library, in there you will need to copy just the relevant .jar files to your Mac OS. There is an export.txt file that details the required files for each platform, for Mac you will need:

  • core.jar
  • gluegen-rt-natives-macosx-universal
  • gluegen-rt.jar
  • jogl-all-natives-macosx-universal.jar
  • jogl-all.jar

Suggestion: I copy all those files in a new folder in the Processing libraries directory, and I name it p5v2libs.

On Windows

The process is a bit more simple, first find the location of your Processing application, you will see a folder with the name core, inside there is another folder libraries containing all the .jar files needed. So copy just the ones that refer to Windows, for example:

  • core.jar
  • gluegen-rt-natives-windows-amd64.jar
  • gluegen-rt-natives-windows-i586.jar
  • gluegen-rt.jar
  • jogl-all-natives-windows-amd64.jar
  • jogl-all-natives-windows-i586.jar
  • jogl-all.jar

There are 32 and 64 bits versions of the same library, if you are not sure which one you need just copy all of them.

Suggestion: I copy all those files in a new folder in the Processing libraries directory, and I name it p5v2libs. Please note that this step is optional as you can point to the location of that core folder instead of copying the files and point them to that new location.

On Linux

I not experience in Linux OS, but if you do and want to help in this area please get in touch. That being said the steps should be similar to the ones for Mac and Windows, all you need to figure out is how to extract the .jar files.

Setup

Launch Eclipse if is not already running, and create a New Java Project

File -> New -> Java Project

Name it something like HelloProcessing, then in the Package Explorer select your newly created project and create a New Java Class

File -> New -> Class

And name it MainApp, the file will be created in the src directory, go there and open the file, you should see this:

public class MainApp {

}

If you don’t see the src folder just expand the HelloProcessing project in the Package Explorer panel. all the files created and relevant to your project will be stored there. Apart from the library files, they have a special location.

When working in Eclipse we are coding in Java, Eclipse knows nothing about the Processing language, so we need a Java class definition that holds our Processing sketch and we are going to extend that class to PApplet which stands for “Processing Applet”, we do this to allow our MainApp class gain access to all Processing functions, as you will see in a moment.

First we need to add the Processing libraries to our project. On the Package Explorer click on the project folder we just created and then open its properties by selecting Properties from the context menu or from the main menu like so

Project -> Properties

A new window will appear with the title Properties for HelloProcessing

java-build-path

Now select Java Build Path then click on Add External JARs and locate the files we extracted from Processing that should be in the Processing libraries folder as I suggested or in the location you fancied at the time, and select all the .jar files, click Open then OK.

Good to go, now open the MainApp.java file and change it so it reads as below

import processing.core.*;

public class MainApp extends PApplet {

}

We just imported all Processing core functions and extended our MainApp class to PApplet, so our application have full access to all Processing functions, all is left to do is to create our setup and draw Processing methods.

import processing.core.*;

public class MainApp extends PApplet {

    public void setup() {

    }

    public void draw() {

    }
}

Public and Private?

Have you notice the keyword public in front of setup and draw methods? In Java you have the option of making your variable and methods public or private it is called Access Modifiers, you will find that Eclipse is very picky (in a good way) when it comes to validate your Java code so you have to specify the kind of access properties your variables and methods will have (public, private or protected). In Processing when you write a new method it becomes public by default, but this is an extra step that we need to take care of when working in Eclipse. For more information check Access Modifiers.

Now that we understand what public and private do for our variables and methods, lets create a very simple sketch.

import processing.core.*;

public class MainApp extends PApplet {

    // Your global variables goes here
    float diameter 100.0f;

    // Processing setup method
    public void setup() {
        size(640, 480);
    }

    // Processing draw method
    public void draw() {
        ellipse(width * 0.5f, height * 0.5f, diameter, diameter);
    }
}

To test Click the Green Play Button at the top next to the Green Bug or from the main menu go

Run -> Run As -> Java Applet

Now lets test the 3D render mode, for that just change the code to:

import processing.core.*;

public class MainApp extends PApplet {

    float theta = 0;

    public void setup() {
        size(640, 480, P3D);
    }

    public void draw() {
        background(220);

        theta += 0.01;

        pushMatrix();
        translate(width * 0.5f, height * 0.5f, 0);
        rotateY(theta);
        rotateX(theta);
        box(100);
        popMatrix();
    }
}

Creating User libraries

One of the best things about Processing is the huge amount of third party libraries that complement the functionality and power of the language. In this section I will show you how to import any Processing library and also how to store them in Eclipse for future use.

First we need to go back to our Project Properties, go to the Package Explorer panel and CTRL + Click on your HelloProessing Project and from the context menu select Properties. Your properties window should look like the image below.

java-build-path-with-libs

Select all the .jar files we added previously and remove them, just leave JRE System Library intact. See image below.

user-libs-step-1

Ok, in the same window select Add Library then User Library

user-libs-step-2

And click Next then User libraries you will end up in a window similar to the one below

user-libs-step-3

In there select New and give it a name, because we are going to add the Processing Core library I recommend a name in the lines of “ProcessingCore” and click OK.

user-libs-step-4

A new library has been created but it contains nothing… yet.

user-libs-step-5

Select your newly created library and click on Add External JARs in the dialogue box navigate to the location were you put the Processing core files (my suggested location at the beginning of the tutorial was on the same folder as your Processing libraries, just saying) and select all the .jar files then click Open.

user-libs-step-6

Ok now it gets interesting, most Processing libraries come with examples, javadocs and source files, and here is the place where you can set them up, so lets go ahead and add the javadocs for our ProcessingCore library, click where it says Javadoc location and then click on Edit, a new dialogue box will appear and where it says Javadoc location path paste this url http://processing.org/reference/javadoc/core/ once you’ve done that click on the Validate button to test that the javadocs are properly set. This will allow Eclipse to give you code hints when you hover a Processing method, pretty sweet in my opinion.

user-libs-step-7

A message will appear indicating the validation test results, hopefully it validates OK for you as well, now click OK and OK again.

user-libs-step-8

Almost done, click Export to save all your libraries in a profile for future use, a new window will pop-up showing the libraries that will be exported and at the bottom you can specify the location and name for your User library.

user-libs-step-9

You can repeat this process to add more libraries and save them under the same profile so the next time you create a new Processing project the steps to include the libraries you want will be easier, steps I will show shortly.

If you are still in the User library export window, click OK and OK again, then you will be prompt to select the libraries you want to add to your project, so far we only have one with the name ProcessingCore, select that and click Finish then OK.

Back to our project everything should be the same, the only difference is the way we imported our Processing library by creating a User Library Profile, but now we have Code Hints thanks to the inclusion of the Processing javadocs, to test move the mouse pointer over the background method and after a few seconds a yellow popup window will appear with information about the usage of it.

Importing other libraries

Lets add another library to our profile, this time we will include Proscene to do so open the project properties and click on Add Library then select User Library and click Next on the new window select User Libraries then New and give it a name (like “Proscene” will make sense) and click OK.

The steps involve are the same as we did to include ProcessingCore just a moment ago. Next step is to add the JAR file, click on Add External JARs and locate Proscene jar file, if you already have the library installed on your system it should be located in the Processing libraries folder, select the file and click Open, then add its javadocs file as well.

Finally click Export and browse to the User Profile file you create previously to override the changes and keep Processing Core and Proscene libraries together under the same profile and that is it, you just add another lib to your collection! Go to your MainApp file and import Proscene, here is a little example:

import processing.core.*;
import peasy.*;

public class Main extends PApplet {

    PeasyCam cam;

    public void setup() {
        size(640, 480, P3D);

        // PeasyCam setup
        cam = new PeasyCam(this, 100);
        cam.setMinimumDistance(150);
        cam.setMaximumDistance(500);
    }

    public void draw() {
        background(220);
        box(100);
    }
}

Activate Auto-Completion

Very simple to activate and a powerful feature to have. By default Eclipse triggers auto completion after you type the dot “.” character but we are going to make it more responsive, so go to Window -> Preferences in there go to Java -> Editor -> Content Assist. Under Auto Activation you will see a field for Auto activation triggers for Java, at the moment there is only a “.” so in there paste the following without the quote marks “.abcdefghijklmnopqrstuvwxyz“. That will make the auto completion to trigger when you type any of those characters. Click OK and the moment you start typing code a popup will appear giving you all the options available for the methods and variables you are typing.

Quick Fix

By now you may have notice a curly yellow line under our MainApp class with a ligh bulb and warning sign on the left, if you hover MainApp after a few seconds a popup will appear indicating what is wrong with it, and a few options will be given for you to choose from. Select the last one “Add @SuppressWarning ‘serials’ to ‘MainApp'” and a line will be automatically  added on top of the MainApp class definition… problem solved.

Line Numbers

Showing line numbers is a great feature that comes in handy when debugging, to activate them simply go to Window -> Properties then General -> Editors -> Text Editors in there thick the option Show line numbers.

Working with Multiple Classes

In Processing to create a new object or class usually we create a New Tab, in Eclipse the process is different. To create a new class select your project and create a new file, go to File -> New -> Class and give it a name “MyBox” and click Finish.

Open the file and you should get this

public class MyBox {

}

To make use of Processing functions we need to import the Processing library and create a PApplet variable to use it to reference Processing core methods. So in your MyBox class write the following

import processing.core.PApplet;

public class MyBox {
    PApplet parent;
}

Now we create the constructor for our class

import processing.core.PApplet;

public class MyBox {
    PApplet parent;

    public MyBox(PApplet _parent) {
        parent = _parent;
    }
}

Like I mention just a moment ago we will use this parent variable to access Processing Core methods for example to draw a box with no fill we write

parent.noFill();
parent.box(100);

So you get the idea, now lets create a variable to specify the size of our box and a method to render it.

import processing.core.PApplet;

public class MyBox {
    PApplet parent;
    float boxSize;

    public MyBox(PApplet _parent, float _boxSize) {
        parent = _parent;
        boxSize = _boxSize;
    }

    public void render() {
        parent.box(boxSize);
    }
}

To use this class on your project go back to MainApp and type the following

import processing.core.*;
import peasy.*;

@SuppressWarnings("serial")
public class MainApp extends PApplet {

    PeasyCam cam;

    // Create a new variable of type MyBox
    MyBox myBox;

    public void setup() {
        size(800, 600, P3D);

        // PeasyCam setup
        cam = new PeasyCam(this, 100);
    cam.setMinimumDistance(150);
    cam.setMaximumDistance(500);

        // Instanciate myBox variable
        // the keyword "this" passes PApplet to the MyBox class in its constructor
        myBox = new MyBox(this, 100);
}

    public void draw() {
        background(200, 190, 90);

        // Call myBox render method
        myBox.render();
    }
}

As you can see is the same as you do it in Processing the main difference is in the class internals and the use of the PApplet parent variable to access Processing functions.

I hope you enjoyed the tutorial and hopefully make your coding experience more pleasant by using an IDE that helps and assist as you code and if you have any questions, tips and tricks please leave them in the comments we will appreciate it.

// END OF TRANSMISSION

  • mdavidlow
    You need to login to view this content.
  • mdavidlow
    You need to login to view this content.
  • Peter Bosshard
    You need to login to view this content.
  • Bruce Lane
    You need to login to view this content.
  • Diego Triana
    You need to login to view this content.
  • You need to login to view this content.
  • You need to login to view this content.
  • nardove
    You need to login to view this content.
  • nardove
    You need to login to view this content.
  • Bruce Lane
    You need to login to view this content.
  • Diego Triana
    You need to login to view this content.
  • infotechno
    You need to login to view this content.
  • Renee Engine-Bangger
    You need to login to view this content.
  • Chris Do
    You need to login to view this content.
  • mgiraldo
    You need to login to view this content.
  • mgiraldo
    You need to login to view this content.
  • Frank
    You need to login to view this content.
  • Frank
    You need to login to view this content.
  • infotechno
    You need to login to view this content.