It is very easy to load an external sketch with Processing.js. How easy?
Two lines easy!
<script src="processing.min.js"></script> <canvas datasrc="init-example.pjs" width="200" height="200"></canvas>
1) Include the “processing.js” JavaScript file.
2) Use the datasrc attribute to specify which Processing sketch you want to load.
This way the sketch is loaded using AJAX, so for security reasons you cannot run cross domain scripts.
[...] This post was mentioned on Twitter by Al Mac and VJ Anomolee, Processing. Processing said: You can now load and run a Processing.js sketch in 2 lines of code… http://bit.ly/2Cl95t [...]
I have been following the development of the sketch loading methods with interest. Not needing an onload initialization is an improvement. What continues to puzzle me, however, is how to feed variable “computed” data to a sketch through a web framework like Django. Right now, I’m having Django write every line of Processing.js code to the page through its template handler. Django is first writing the HTML script element, then Processing.js assignment statements defining the sketch parameters, then the body code for the sketch, then Processing.js library functions and classes as the sketch requires, then the closing script tag. I’m looping through multiple sketches and finish up with a looping initialization routine. I have fine control with this setup as Django’s template handler lets me control id’s and classes for the div elements that contain the sketches as well as the canvas elements. If you haven’t guessed, my template is generic, and the actual rendered content varies a great deal. On getting the dynamic parameters to the sketch, however, is there a better way?
I have a related question. Is there a way to have a Processing.js “main routine” import additional assets such as functions and classes? I have considered that one way to handle the parameter passing problem I described in my previous post would be to have Django serve a sequence of Processing.js assignment statements, containing the dynamic data, to the client followed by a Processing.js header stub containing only a setup() block and a short draw() block that imported the needed assets, including a main drawing function, and then called that function. My current system has a Python file-reading step that could be avoided if an import function were available, potentially improving the UX, as responses are a bit slow currently. I notice fair interest in this general issue:
http://groups.google.com/group/processingjs/browse_thread/thread/24c21508169fd800#
http://stackoverflow.com/questions/881146/processing-js-loading-external-files
http://stackoverflow.com/questions/837294/is-there-a-way-to-manipulate-code-generated-by-processing-js-via-javascript
Thank you Alistair.
Now, a little suggestion - just add one hyphen to the attribute name to make it HTML-compliant.
If you use “datasrc” as attribute, it will be considered an unrecognized attribute and render HTML document invalid. Use “data-src”, and the attribute, while still perfectly usable, will be considered a custom data attribute (http://dev.w3.org/html5/spec/Overview.html#custom-data-attribute) and work without invalidating HTML document.