Processing.js in dokuwiki

[e13]

In order to make easy adaptable (educational) sketches, I have tried
to write a plugin for dokuwiki to post your processing code, which
will show up as syntax highlighted code and working applet
simultaneously. However, some of the functionality doesn't seem to
work. This has probably to do something with the way javascripts are
gathered and processed in docuwiki.

Are there experts here interested in both dokuwiki and processing.js -
for documenting running apps - that would take a look at
http://www.dokuwiki.org/plugin:processing?s[]=processing and shed
some light/expertise on what's going on?

Nicest regards,
Edwin

[Pomax]

I've written a few dokuwiki plugins myself, so I'll have a look at it.
However, the first thing that strikes me is this:

"This plugin parses processing(java) code to the processing.js script
(which for this plugin has been renamed 'script.js' to be compliant
with the dokuwiki plugin format) and outputs the resulting java applet
to the wiki, as well as the syntax highlighted sketch code."

Processing.js of course doesn't output a java applet in the slightest.
Instead, it converts the Processing source code to native javascript,
and then runs it, using the canvas element as the sketch's drawing
area.

I'm not entirely sure about the dokuwiki event order when it's running
through the renderer, but one thing you'll want to do is make sure
that every canvas has an id, and that every <script type="application/
processing"> has an extra attribute 'target':

<script type="application/processing" target="sketcharea1">
...
</script>
<canvas id="sketcharea1"/>

You don't need to specify the canvas dimensions, processing.js will
adjust the canvas dimensions itself when size(int,int) is encountered.

It also looks like you're missing the init.js that is required to hand
off on-page Processing code to processing.js (see
http://processingjs.org/reference/articles/jsQuickStart - the very
very last paragraph talks about init.js).

However, that will simply let any malformed source code run, so it
would probably be better to actually make your script link to the
official processing.js release (http://processingjs.org/content/
download/processing-js-1.0.0/processing-1.0.0.min.js), rather than
including it as "script.js", and then building sketches yourself:

when you see <processing>...</processing>, build a <canvas id="..."/>
element for it, and then load a Processing object using a javascript
call (this time in script.js) that does the following:

function loadProcessingCode(canvasid, sourcecode)
{
try { new Processing(canvasid, sourcecode); }
catch(e) { alert("your source code contained errors and could not
be loaded"); }
}

Of course what you put in the catch is up to you, but this will ensure
you don't allow illegal source code to get loaded.

- Mike "Pomax" Kamermans

[Pomax]

Small update, that should have been

function loadSketch(canvasid, sourcecode)
{
try { new Processing(document.getElementById(canvasid),
sourcecode); }
catch(e) { alert("arr"); }
}

- Pomax