Processing.js Example Page - Loading Sketches

This is a sketch that is loaded from source. If you want to be able to use this sketch after loading, for instance in your own JavaScript code, it needs an id='...' so that you can request it using:

   Processing.getIntanceById('...')

You can also load a sketch from multiple source files by putting them all in a canvas data-processing-sources attribute string, separated with spaces:

   <canvas ... data-processing-sources="file1.pde file2.pde file3.pde" ...>

This is a source-less sketch, loaded from inline source code. Note that in order for an on-page inline sketch to be loaded into a canvas, the sketch must either immediately preceed the <canvas> it is to be loaded in, or the script needs to indicate the id for the canvas.

This means you can either place your script inside the <body> element, above its associated <canvas>, or in the <head> element, pointing to its associated <canvas> element.


This sketch is loaded from a <script> in the html header block which specifies this canvas as its target, referencing its id:

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