Including multiple Processing.js source files into a HTML page

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s