loading a .pde file after the click with processing.js

Question

I found processing.js just a few days ago, I am struggling a lot with it. I am trying to make a canvas appear at the moment I press a button. For example, this code works, and it creates a canvas after the click:

        <!DOCTYPE HTML>
     <html>
<script src="/js/processing.js"></script>  
     <head>

     </head>  
     <body>

            <input type="button" value="Cambiar imagen" id="clearbutton"
            onclick="canvas();">

                <script>

            function canvas(){
                  var mycanvas = document.createElement("canvas");
                  mycanvas.id = "mycanvas";
                  document.body.appendChild(mycanvas); }
                </script>  
     </body>
     </html>

I then tried changing the code like this:

function canvas(){
      var mycanvas = document.createElement("canvas");
      mycanvas.id = "mycanvas";
      document.body.appendChild(mycanvas);
     mycanvas.data-processing-sources = "/var/www/html/processing/jS2.pde"
}

but it throws an error that says: invalid left-hand sign in asigment.

So then I tried something like:

<script type="text/processing" data-processing-target="mycanvas">

void setup()
{
  size(300,300);
  background(0);
  fill(255);
  noLoop();
  PFont fontA = loadFont("courier");
  textFont(fontA, 14);  
}

void draw(){  
  text("Hello!",20,20);
      }




    </script>

But this just creates a white canvas, and it ignores the processing script. I am not that great at javascript either, so if you answer, thanks. I have checked the reference files to processing.js, but its been tough to follow it.

Following the suggestion in the comment, I tried:

<input type="button" value="Cambiar imagen" id="clearbutton" onclick="canvas();">

<script>

 function canvas(){
      var mycanvas = document.createElement("canvas");
      mycanvas.id = "mycanvas";
      document.body.appendChild(mycanvas);

  var canvas = "/var/www/html/processing/jS2.pde"
   var sources = canvas.getAttribute("data-processing-sources").split(/\s+/);
    Processing.loadSketchFromSources(canvas, sources);

  } 



</script>

This gives an error that says: canvas.getAttribute is not a function at canvas.

And tried:

 <body>


<input type="button" value="Cambiar imagen" id="clearbutton" onclick="loadSketchOnContentSwap();">

<script>

function loadSketchOnContentSwap() {
  var canvas = "/var/www/html/processing/jS2.pde"
   var sources = canvas.getAttribute("data-processing-sources").split(/\s+/);
    Processing.loadSketchFromSources(canvas, sources);
}


</script>

  </body>

Maybe I missed something or did not put the code in the correct place?

This is the link to the fiddle: https://jsfiddle.net/truxx/khht29zx/1/

/There is a problem with it though, this code creates a grey canvas in my chrome browser, but the same code doesn't do this on the fiddle. /

Try calling `Processing.loadSketchFromSources(canvas, sources);` as discussed in [this answer](https://stackoverflow.com/questions/10764198/using-processing-js-across-multiple-pages/11376217#11376217) by the creator of Processing.js. — Kevin Workman, Jul 11 '17 at 01:54
It did not work, maybe I did it wrong.. I just edited my question with my try — Trux, Jul 11 '17 at 03:32
First off the `canvas` variable needs to be an element, not a string. Secondly have you printed out the `sources` variable to make sure it's what you expect? Please try to post a [mcve] that we can actually run, or better yet a link to a CodePen or JSFiddle running your code. — Kevin Workman, Jul 11 '17 at 04:06
I beleive that, by canvas being an element, it should be written like this? : var canvas = /var/www/html/processing/JS2.pde When I do this I get an error that says, "invalid regular expresion flags" — Trux, Jul 11 '17 at 05:10
I am not sure If, by printing, you mean I just need to include `console.log(sources);` — Trux, Jul 11 '17 at 05:21
Yes, I mean you should use `console.log()` to understand exactly what your code is doing. And sorry, but that JSFiddle is not valid because it doesn't link to a real `.pde` file. The `canvas` variable needs to be an element, not a string! — Kevin Workman, Jul 11 '17 at 16:23

score 1 · Accepted Answer · answered Jul 12 '17 at 01:50

1

Thanks for trying to post a JSFiddle, but in the future please try to make sure that the code you post generates the exact same error you're seeing. The JSFiddle you posted contains several errors: you've got strings that aren't enclosed in quotes, you haven't loaded the Processing.js library, and you've got a few other issues with JSFiddle settings. Please try to straighten them out before you post. You need to actually make sure the code runs and shows us the same thing you're seeing.

All of that being said, here is a link to a JSFiddle that has the Processing.js library loaded, contains the settings you need to use, and the code I'm trying to suggest you try:

var mycanvas = document.createElement("canvas");
mycanvas.id = "mycanvas";
document.body.appendChild(mycanvas);
Processing.loadSketchFromSources(mycanvas, 'PATH/TO/YOUR/SKETCH.pde');

Please note that the JSFiddle I just linked still contains an error, because you can't just load a .pde file from any random URL like that. It has to be on the same domain, or you have to modify your CORS settings.

If you have follow-up questions, please post them in a new question post and make sure you narrow your problem down to a MCVE that actually demonstrates your problem. Good luck.

answered Jul 12 '17 at 01:50

Kevin Workman

41,537
9
68
107

Thanks a lot for the answer. It has clarified a lot of points, for example I didn't know I could load libraries in jSFiddle, without code in the html. However, I tried the code in my localhost with ` Processing.loadSketchFromSources(mycanvas, '/var/www/html/processing/mousePressed.pde'); ` and ` `Processing.loadSketchFromSources(mycanvas, /processing/mousePressed.pde'); ` It just creates a grey canvas, and doesn't load the file. The code is in index.html and I can load .pde scripts in other ways, but not with a function, like this case – Trux Jul 12 '17 at 06:20
@Trux And have you checked [the JavaScript console](http://happycoding.io/tutorials/javascript/developer-tools) for any errors you're getting? – Kevin Workman Jul 12 '17 at 16:22
It says: "GET http://localhost/e 404 (Not Found)" , and "Uncaught Processing.js: Unable to load pjs sketch files: v ==> Invalid XHR status 404 a ==> Invalid XHR status 404", and lots of Invalid XHR status 404 errors – Trux Jul 13 '17 at 00:22
@Trux Yeah, that's a separate error. That's what I mentioned in the **please note** section of my answer. That's because you're trying to load an arbitrary URL from another domain, which isn't allowed. You have to modify your CORS settings. Try googling the errors you're getting for more info. Then if you get stuck, please post a new question. Good luck. – Kevin Workman Jul 13 '17 at 03:51

loading a .pde file after the click with processing.js

1 Answers1