Introduction

Processing is a basically a proprietary Java-like language compiled into Java bytecode and used for generating dynamic and interactive data visualizations. Though still in its infancy, it seems to be a very nice intuitive way to build visualizations of data into an application. The download for Processing contains the compiler, library and an editor. The file format for Processing files is .pde. Inside of these files you can treat the language just like a scripting language. For instance:

size(400,400);
background(192, 64, 0);
stroke(255);
line(150, 25, 270, 350);

This block of code is from the book "Visualizing Data" by Ben Fry and will just set the window size, set the background color, set the line color and draw a line. The output will look like:

There are 2 methods that processing will look for to do initial setup and then the refreshing of the canvas. Adding those methods and adding some mouse interaction we get the following code:

void setup() {
   size(400, 400);
   stroke(255);
   background(192, 64, 0);
}


void draw() {
   line(150, 25, mouseX, mouseY);
}

The output from this block of code will look like:



There are a lot more convenient functions and properties available when using the Processing API but that will have to wait for another blog. The editor that comes with Processing is functional, but is lacking in features that many of the more modern editors contain. So I wanted to try and see if I could use my standard editor and still build Processing apps.

Eclipsing the IDEA

Processing so nicely comes with a jar core.jar. This jar then can be added to a project in the editor of your choosing. Once you are in Java world there are couple of things that need to change with your Processing code. Mainly you have to now adhere to Java programming rules. Our code from above in the Java world would look like the following:

import processing.core.PApplet;


public class BlogExample extends PApplet {
    public void setup() {
        size(400, 400);
        stroke(255);
        background(192, 64, 0);
    }


    public void draw() {
        line(150, 25, mouseX, mouseY);
    }
}

As you can see, the code becomes a little lengthier. We need to add all of the modifiers on and the class definition and all of that, but we are at least in the IDE of our choice now and can just run this file and get the same output as the Processing editor. Now lets say we we want to add boxes to our output. We can add a class called Box to the project (Processing editor supports multiple classes as well). The code for the Box class would be:

public class Box {
    private String title;
    private String boxText;
    private int width;
    private int height;
    private String backgroundColor;
    private String textColor;


    public int getWidth() {
        return width;
    }


    public void setWidth(int width) {
        this.width = width;
    }


    public String getTitle() {
        return title;
    }


    public void setTitle(String title) {
        this.title = title;
    }


    public String getBoxText() {
        return boxText;
    }


    public void setBoxText(String boxText) {
        this.boxText = boxText;
    }


    public int getHeight() {
        return height;
    }


    public void setHeight(int height) {
        this.height = height;
    }


    public String getBackgroundColor() {
        return backgroundColor;
    }


    public void setBackgroundColor(String backgroundColor) {
        this.backgroundColor = backgroundColor;
    }


    public String getTextColor() {
        return textColor;
    }


    public void setTextColor(String textColor) {
        this.textColor = textColor;
    }
}

Then we add some code to our main class to use the Box.

public class BlogExample extends PApplet {
    public void setup() {
        size(400, 400);
        stroke(255);
        background(192, 64, 0);
    }


    public void draw() {
        line(150, 25, mouseX, mouseY);
        List boxes = getBoxes();
        
        int xPos = 0;
        int yPos = 0;
        for (Box box : boxes) {
            drawBox(box, xPos, yPos);
            xPos += box.getWidth() + 5;
            yPos += box.getHeight() + 5;
        }
    }
    
    private void drawBox(Box box, int xPos, int yPos) {
        //Draw the box on the screen;
    }


    private List getBoxes() {
        List boxes = new ArrayList();
        
        Box box = new Box();
        box.setTitle("Box 1");
        box.setBoxText("Text in Box 1");
        box.setBackgroundColor("blue");
        box.setTextColor("white");
        box.setWidth(100);
        box.setHeight(100);
        boxes.add(box);
        
        //Add more boxes here
        
        return boxes;
    }
}

Now you can see we have added a lot of code to do some simple processing of boxes. This isn't very script-like anymore. I was thinking of how to get this code base a little smaller. I then thought of what would happen if I added Groovy to it.

Groovifing the Code

After adding the groovy jar, I could change my .java files to .groovy files and start shrinking the code base. Here is what the above code became:

class BlogExample extends PApplet {
    void setup() {
        size(400, 400)
        stroke(255)
        background(192, 64, 0)
    }


    void draw() {
        line(150, 25, mouseX, mouseY)
        def boxes = getBoxes()


        def xPos = 0
        def yPos = 0;
        boxes.each {box ->
            drawBox(box, xPos, yPos);
            xPos += box.width + 5;
            yPos += box.height + 5;
        }
    }


    private void drawBox(def box, def xPos, def yPos) {
        //Draw the box on the screen;
    }


    private List getBoxes() {
        return [
                new Box(title:"Box 1", boxText:"Text in Box 1", backgroundColor:'blue', textColor:'white', height:100, width:100)
                //Add more boxes here
        ]
    }
}


class Box {
    String title;
    String boxText;
    int width;
    int height;
    String backgroundColor;
    String textColor;
}

Making the code a little Groovier has reduced the amount of lines that I need to write to get my visualization up and running. So now I've got the simpler syntax of a scripting language and all the power of my IDE and all of my Java libraries. I know that this example is very primitive and you don't necessarily get as much bang for your buck on something this small, however, as this application grows into something bigger the gains will become more apparent.