5

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.

2 Answers 2

7

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>
0

I couldn't get the above implementation to work, but this works for me...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <script src="processing-1.4.1.min.js"></script>
        <title>title</title>
    </head>
    <body>

        <script type="application/processing" id="script1" src="script1.pde" data-processing-target="pjs1"></script>
        <canvas id="pjs1"> </canvas>

        <script type="application/processing" id="script2" src="script2.pde" data-processing-target="pjs2"></script>
        <canvas id="pjs2"> </canvas>

    </body>
    </html>

Make "script1.pde" & "script2.pde" a functioning Processing program and store in the same directory as the html page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.