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
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.
There are now two ways to use Processing with ECT:
- from within the Processing IDE
- once a Processing applet has been exported
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
-
Start up the ECT graph editor by using
method 2,
as described in the
Getting Started guide.
- Start up the Processing IDE, and copy the example program into it
- Add the following files to the sketch (using the Sketch->Add File menu option)
- ect/java/install/ect-core.jar
- ect/java/install/common/equip4jcore.jar
- Add the following line to the "setup" method of the example
that you have pasted into the IDE:
- add the following line to the "draw" method of the example:
- 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
- in Processing, export the program to get an applet jar file
- 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.
- click "open". This will cause the generation of an ECT
component in the install/components/runtimeGenerated
directory
- start up the ECT graph editor using
method 2
as described in the
Getting Started guide
- 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:
- public/package fields in the processing applet become ECT
properties;
- if you have problems with types (only simple types can be
exported to ect), or too many unnecessary fields then make the ones you
don't need private;
- with versions of processing subsequent to 0070 the
synchronisation with
ect only occurs each time draw() is called (which may not be very often
if using the new-to-later-versions noLoop() option)
Launching the graph editor via
method 1 as
described in the Getting Started
guide introduces some additional complexity when using processing.
- users can set a password (referred to as an installation secret -
see the Using the graph editor
guide) which can be used to control who can join a particular installation
- users can opt to join an installation running on a remote machine
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.