When I started using Processing.js, the first thing I did I included all my classes and sources into one big .pjs file. Doing this works fine for smaller projects, but when the project grows and you start introducing multiple classes, it all gets pretty un-manageable pretty soon.
Good thing it’s really easy to split the sources into multiple files, all you need to do is include them in your HTML file in your canvas element with the tag data-processing-sources like this:
<canvas id=”geometry” data-processing-sources=”ClassFile1.pjs ClassFile2.pjs main.pjs” width=”800″ height=”800″ />
With the current version of Processing, it will automatically detect all canvases which have the data-processing-sources defined and run setup() and draw() functions automatically.
