Using Processing.js: Can I have multiple canvases with only one data-processing-source sketch.pde?

StackOverflow https://stackoverflow.com/questions/15192621

  •  18-03-2022
  •  | 
  •  

Pregunta

using Processing.js, I would like to know if what I'm trying to do is even possible. I've looked on Pomax's tutorials, Processing.js the quick start of JS developers page, PJS the Google group, here, and I can't seem to find an answer to the question, "Can you have multiple canvases, such that they all use the same processing sketch (in my example below, engine.pde) each canvas passing variables to the sketch with the result being processing opens different images in each canvas, but edits them the same way.

So to sum up, I would like to use only 1 processing sketch, with many canvases, with each canvas telling the processing sketch a different name, and having a corresponding background image open in the sketch in each canvas.

<!DOCTYPE html><html><head><meta charset="utf-8">
    <script src="../../../processingjs/processing.js"></script>
    <script>
        // Tell sketch what counts as JavaScript per Processing on the Web tutorial
        var bound = false;

        function bindJavascript(instance) { // Can I pass 'instance' like this?
            var pjs = Processing.getInstanceById(instance); 
            if(pjs!=null) {
                pjs.bindJavascript(this);
                bound = true; }
            if(!bound) setTimeout(bindJavascript, 250); }

        bindJavascript('B104');
        bindJavascript('B105');

        function drawSomeImages(instance) { 
            // This is where I am trying to tell processing that each canvas has a number, and the number is assigned to a corresponding image.
            var pjs = Processing.getInstanceById(instance);
            var imageName = document.getElementById(instance);
            pjs.setup(instance);
        }
        drawSomeImages('B104');
        drawSomeImages('B105');

        // Where is the Mouse?
        function showXYCoordinates(x, y) { ... this is working ... }


        // Send images back to server   
        function postAjax(canvasID) { ... AJAX Stuff is working ...}
    </script>
    </head>
<body>
    <canvas id="B104" data-processing-sources="engine.pde" onmouseout="postAjax('B104')"></canvas>
    <canvas id="B105" data-processing-sources="engine.pde" onmouseout="postAjax('B105')"></canvas>
</body>
</html>

And on the processing side:

/* @pjs preload=... this is all working ; */

// Tell Processing about JavaScript, straight from the tutorial...
  interface JavaScript {
    void showXYCoordinates(int x, int y); 
  }
  void bindJavascript(JavaScript js) {
    javascript = js; 
  }
  JavaScript javascript;

// Declare Variables
  PImage img;
  ... some other variables related to the functionality ...

void setup(String instance) {
  size(300,300);
  img = loadImage("data/"+instance+".png");
  //img = loadImage("data/B104.png"); Example of what it should open if canvas 104 using engine.pde
  background(img);
  smooth();
}

void draw() { ... this is fine ... }

void mouseMoved(){ ... just calls draw and checks if mouse is in canvas, fine... }

if(javascript!=null){
  javascript.showXYCoordinates(mouseX, mouseY); 
}}
¿Fue útil?

Solución

Just add a million canvas elements to your page all with the same data-processing-sources attribute, so they all load the same file. Processing.js will build as many sketches as you ask for, it doesn't care that the sketch files are the same for each one =)

(Note that what you described, one sketch instance rendering onto multiple canvases, giving each a different image, is not how sketches work. A sketch is tied to a canvas as its drawing surface. However, you can make a million "slave" sketches whose sole responsibility is to draw images when so instructed from JavaScript, and making the master sketch tell JavaScript to tell slave sketches to draw. Note that this is very, very silly. Just make JavaScript set the image, you don't need Processing if you're just showing images really)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top