Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to have multiple processing.js sketches running at the same time

I'm trying to run multiple sketches on the same page.

The init script specifies that:

/*
* This code searches for all the <script type="application/processing" target="canvasid">
* in your page and loads each script in the target canvas with the proper id.
* It is useful to smooth the process of adding Processing code in your page and starting
* the Processing.js engine.
*/

When I specify the target canvas of each sketch, it does not work:

<script type="application/processing" target="canvas1">..</script>
<script type="application/processing" target="canvas2">..</script>

<canvas id="canvas1".. />
<canvas id="canvas2".. />

but it isn't working? is this even possible? Any help would be much appreciated. Im trying to have a document with inline canvas elements running a sketches in sync with each other.

like image 389
Corban Brook Avatar asked Dec 16 '09 22:12

Corban Brook


1 Answers

Got it working by setting ids for the script and canvas tags:

<script type="application/processing" id="script1">..</script>
<script type="application/processing" id="script2">..</script>

<canvas id="canvas1" width="200px" height="200px"></canvas>
<canvas id="canvas2" width="200px" height="200px"></canvas>
<script>
  canvas1 = document.getElementById("canvas1");
  script1 = document.getElementById("script1").text;
  canvas2 = document.getElementById("canvas2");
  script2 = document.getElementById("script2").text;
  Processing(canvas1, script1);
  Processing(canvas2, script2);
</script>
like image 133
Corban Brook Avatar answered Oct 09 '22 09:10

Corban Brook