Learning Processing.js – Setup and Browsers

This post will look at the background of Processing.js (Pjs), where to get it, how to set up the files and the basic code needed to make a simple sketch of a line.

Background

Processing is a language first developed by Ben Fry and Casey Reas that was written in Java.  The language is designed to be a friendly visualization language designed for non-programmers.  Processing.js is a port of the Processing language to Javascript making processing sketches available in a web page without any plug-ins.

Browser requirements

Processing.js works with the HTML 5 <canvas> element and thus it will run in browsers that support this element (safari, firefox, opera, chrome) but not IE.  For 2D Processing.js functionality, the release version of the browsers will work.  However, for 3D capabilities, you will need a browser that supports WebGL (Chrome and Firefox both support WebGL in release versions.  Safari has it in their nightlies).  To check if your browser supports webGL go to this site:

http://doesmybrowsersupportwebgl.com

Where to get Pjs

You can get all the necessary files off the download tab of the Processing.js website.

Where the files go

Pjs is designed to work as part of a webpage.  Thus to use it you will need to create a webpage with html.
The html page must contain the following:

  • a canvas element
  • a script tag to the Pjs file downloaded earlier
<html>
<head>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<canvas id="2d" width="200" height="200" data-processing-sources="line.pde"></canvas>
</body>
</html>

Note that in the above source code, the file downloaded earlier has been renamed processing.js

On the canvas element, the attribute data-processing-sources indicates the file that contains the processing code.  In this case it is the file line.pde.  This file contains the following line of code:

 line(15, 25, 70, 90);

To test if you have the setup done correctly open the webpage you made in a web browser and you should see a line in the top left corner.

Advertisements

2 responses to “Learning Processing.js – Setup and Browsers

  1. This is awesome, Cathy! One quick note. In the next releases we are going to move away from datasrc and start using data-processing-sources, allowing you to provide space separated lists of files to include, or just one.

  2. fixed 🙂

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