Getting Started With Processing.js Tutorial

This past week I’ve had the opportunity to really dig in and give processing.js a work out. For those not familiar with the technology, processing.js is a JavaScript library based on the Java based processing library available for download at http://dev.processing.org/. Processing.js uses the HTML5 Canvas element to draw shapes and designs while using a similar API to the one defined by the Java library.

I found the barrier to entry was unnecessarily frustrating due to the lack of a _good_ beginners tutorial calling out common pitfalls. But don’t let this sway you, because once you move past this, it is really fun.

Here are the things they don’t tell you about getting started.

1. You should download the basic examples zip from the their site.
2. You’ll want to grab the processing.init.js and the processing.js from the zip or tarball to include on your page.
3. As you begin coding you must tag any processing.js script on your page with

   <script type=“application/processing”>
   //your script here
   </script>

4. You must have a corresponding

   <canvas width=“200px” height=“200px”></canvas>

   tag after your script in order for it to render the drawing. Make height and width whatever size you’d like.

5. Another note is that you can have multiple canvases on your page, you’re not limited to one.
6. The processing.init.js looks for

   <script type=“application/processing”></script>

   tag on your page and performs the processing.js initialization, if you don’t have this included on your page nothing will be drawn.

7. An alternative to using the processing.init.js and <script type=”application/processing”></script> is to use the datasrc attribute on the canvas tag.

   <canvas datasrc=”your_processing_script.js”></canvas>

These are just some of the things I ran into and I hope this helps anyone trying to get started with processsing.js. Next time I will post something using the processing.js library.

Mar 07, 2010 | Software | Leave A Comment »