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.
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:
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
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.