Integrating Processing Applets into ECT

Created by Chris Greenhalgh 2005-03-01
Most recent update by Stefan Rennick Egglestone 2006-01-11

Introduction
Getting Started
Using Processing when the graph editor is started via method 1

Introduction

Processing is a programming language and Integrated Development Environment (IDE) which focusses on providing support for artists and graphic designers who want to program images, animation and sound. User of processing can use its IDE to develop and test programs, and when finished, these programs can be exported as applets for use in web-pages and other scenarios.

ECT provides support which allows any Processing program to be used as a component in the ECT environment. This document describes how this can be done. It assumes knowledge of using Processing.

Getting started

There are now two ways to use Processing with ECT: This document describes both of these methods. If you haven't done any Processing programming before, you might like to use the following example program below, which simply opens a window and draws a circle in it. The instructions will describe how this program can be made available as an ECT component with a property called size that initially opens a window and draws a circle of size 20, but which redraws this circle when the size property is modified.
public int size = 20;

void setup() 
  {  
    size(200, 200);  
    framerate(30);  
  }

void draw() 
  {  
    background(102);  
    ellipse(width/2, height/2, size, size);
  }

Using Processing from within the IDE

  1. Start up the ECT graph editor by using method 2, as described in the Getting Started guide.
  2. Start up the Processing IDE, and copy the example program into it
  3. Add the following files to the sketch (using the Sketch->Add File menu option)
  4. Add the following line to the "setup" method of the example that you have pasted into the IDE:
  5. add the following line to the "draw" method of the example:
  6. run the processing sketch (ie using the button that looks like the play button on a tape recorder). A window will open containing a circle, and a new component will appear in the graph editor, with one property called size. Modify this property and the size of the circle will change.

It should be noted that only fields labelled as "public" will appear as component properties.

Using an exported Processing applet

  1. in Processing, export the program to get an applet jar file
  2. locate the runProcessingHandler.bat file in your ECT install directory and run it. This will present you with a file choose, which you should use to select your exported applet jar.
  3. click "open". This will cause the generation of an ECT component in the install/components/runtimeGenerated directory
  4. start up the ECT graph editor using method 2 as described in the Getting Started guide
  5. you should now be able to find your component in the Capability Browser, and you should be able to request an instance of it

Please note that:

Using Processing when the Graph Editor is started via method 1

Launching the graph editor via method 1 as described in the Getting Started guide introduces some additional complexity when using processing.

As such, Processing applets that are to be used in this scenario have to be modified slightly. You should change the line that you added to the setup method of the applet from:

equip.ect.ProcessingHelper.init(this, "myappletname");
to:
equip.ect.ProcessingHelper.init(this, "myappletname", "equip://SERVERMACHINE:9123", "SHAREDSECRET");

replacing SERVERMACHINE with the server machine running your installation (you should use localhost if this is actually your local machine) and replacing SHAREDSECRET with the secret that was defined when your installation was started.

Note that if you have chosen to export an applet from processing, and are using method 1 to start the graph editor, then you should copy the component jar file that was produced by running the runProcessingHandler.bat file to the webstart/download/java/components directory before starting the graph editor.