0

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); 
}}
anthonyCarton
  • 19
  • 7

1 Answers1

0

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)

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
  • Well it's good to know that what I was trying to do won't work. However, the sketches aren't just displaying the image, that would indeed be silly. Here are two examples of what I'm trying to do: http://graphic-interaction.com/mfa-thesis/testing-group02/tangible-decay-02.html http://graphic-interaction.com/mfa-thesis/testing-group02/pro-ex-07.php In the first one, I have a set of canvases, each one is using a canvas to draw over the images. In the second one, the single canvas is able to play with the image, and then it saves back to my server to be opened again by the next person. – anthonyCarton Mar 05 '13 at 02:12
  • ah, I see. neat. Yeah this is probably a good example of just loading the same sketch several times on the page. – Mike 'Pomax' Kamermans Mar 05 '13 at 13:15
  • Well I can't vote things up yet, but I would have, I looked all over the internet for that answer. My next one would be if you knew of any good ways to quickly generate 60+ copies of the sketch.pde (without copy/pasting and editing each) in which each one only differs in the name of the image loaded? I know a little python, I was thinking of trying that. – anthonyCarton Mar 05 '13 at 20:15
  • load data-processing-sources="sketchcode.pde randomimage.moo" where the second thing is generated by your python script of the like (Pjs doesn't care about the extension) with a simple content that says "/* @pjs preload="somerandomimage.jpg"; */ PImage img = loadImage("somerandomimage.jpg");", and your main sketch file using "img". – Mike 'Pomax' Kamermans Mar 05 '13 at 23:23
  • Will try that as well. In the mean time, and since the entire processing sketch isn't very currently very long, and can be written on a single line, I just used excel to copy the sketches with different numbers, and placed it directly in the HTML document, rather than in external sketches. I think I probably could have used something like a loop and iterated over the sketches though. I'm still learning, but I feel like I'm improving. Check out the file if you like: http://graphic-interaction.com/crossed-wires/ The content is silly but the site remembers your touch, think procedural memory. – anthonyCarton Mar 06 '13 at 22:01