Jul 02, 2009

Using Processing with Griffon

Processing is a great graphics language that reminds me alot of old-school BASIC/turtle graphics. It's built on top of Java so it's only natural that we'd eventually try it with Griffon.

Getting Started

• Download processing from http://processing.org/download.
• Regardless of your operating system, grab the Windows version WITHOUT Java.
• Find the core.jar file and drop it in the lib directory of your project.

Extend PApplet

The following is a slightly tweaked example from processingjs.org

import processing.core.*;

public class Embedded extends PApplet {
// Global variables

    float radius = 50.0f;
    int X, Y;
    int nX, nY;
    int delay = 16;

// Setup the Processing Canvas
    void setup() {
        size(400, 400);
        strokeWeight(10);
        frameRate(15);
        X = width / 2;
        Y = width / 2;
        nX = X;
        nY = Y;
    }

// Main draw loop
    void draw() {

        radius = radius + sin((float) (frameCount / 4));

        // Track circle to new destination
        X += (nX - X) / delay;
        Y += (nY - Y) / delay;

        // Fill canvas grey
        background(100);

        // Set fill-color to blue
        fill(0, 121, 184);

        // Set stroke-color white
        stroke(255);

        // Draw circle
        ellipse(X, Y, radius, radius);
    }

// Set circle's next destination
    void mouseMoved() {
        nX = mouseX;
        nY = mouseY;
    }
}

Linking your view and model to Processing

Proce55ingModel.groovy

import groovy.beans.Bindable
import processing.core.PApplet

class Proce55ingModel {
   @Bindable pApplet = new Embedded()
}

Proce55ingView.groovy

application(title:'Proce55ing',
  size:[400,400],
  //location:[50,50],
  locationByPlatform:true,
  iconImage: imageIcon('/griffon-icon-48x48.png').image,
  iconImages: [imageIcon('/griffon-icon-48x48.png').image,
               imageIcon('/griffon-icon-32x32.png').image,
               imageIcon('/griffon-icon-16x16.png').image]
) {
    widget(model.pApplet)
}

Final touches

Proce55ingController.groovy

class Proce55ingController {
    // these will be injected by Griffon
    def model
    def view

    void mvcGroupInit(Map args) {
        // ensures animation is started and that vars properly set
        model.pApplet.init()

    }
    /*
    def action = { evt = null ->
    }
    */
}

Because it is very procedural like OpenGL, a builder might be unworkable.

Groovy's duck-typing and the fact that Processing uses floats for its non-integral numeric type means that some values will need to be cast. With a few casts, you can use any of the examples on processingjs.org

Download the source code here.