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.


2 thoughts on “Including multiple Processing.js source files into a HTML page

  1. Thank you,m this is exactely what i was looking for! But i dont really understand the difference between pde-files and pjs-files? Is it safe to just rename processing-files to this format? Thx a lot!

    • Hey Thomas, happy to hear it. I dont think ProcessingJs is anymore developed actively, it’s part of the official Processing project these days.

      I think the pde file is maybe for Processing Desktop Environment, and pjs for Processing.js ?

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s