July 6th in Articles, Tutorials by .

Getting Started With Processing.js


HTML5 is probably the biggest news that hit the web developer community since Ajax. One of the most exiting elements, when last did we get so excited over a single element, would be the canvas element. I am not going to go into what canvas is and everything that can be done with canvas but, suffice it to say, canvas is a blank ‘canvas’ onto which we can ‘draw’, draw being a broad term here, using JavaScript.

In this article I will look at the Processing.js library, from the processingjs.org website:

“Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets.”

Moreover, processing.js is a port of the Processing Visualization language to JavaScript by John Resig. One thing to note about the Processing.js port and thus the end goal of the library, is that it is not just a library for drawing on canvas but instead, a library that enables you to run Processing source code directly on the HTML5 canvas element.  At the moment the developers working on Processing.js are getting stuck into getting the first 1.0 release out of the door but, there exists a real need for documentation as well as tutorials on using Processing.js. Even though pretty much every tutorial on using Processing, the original language, can be seen as a tutorial on using Processing.js, there is some differences that satisfies the need for tutorials focused on the JavaScript port.

I have ‘joined’ the project and offered to help fill the gap with regards to documentation and instructional tutorials this, then being the first of them. So let’s get started.

Getting Processing.js

Our first stop would then be to download the Proccessing.js library from their website. If you downloaded the zipped source, go ahead and extract the file. Next we create our project folder, using the IDE of your choice, and inside that create a folder titled scripts. Inside this folder copy the processing-0.9.4.min.js file. With this we are ready to write our first Processing.js script, or as it is also known, sketch.

Create a new HTML file and link the Processing.js file in the head section as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Processing.js Basics</title>
		<script src="scripts/processing-0.9.4.min.js"></script>
	</head>
	<body>
	</body>
</html>

The next very important file we need to create is the processing-init.js file. Go ahead and create this file inside the scripts folder and add the following:

/*
 * This code searches for all the <script type="application/processing" target="canvasid">
 * in your page and loads each script in the target canvas with the proper id.
 * It is useful to smooth the process of adding Processing code in your page and starting
 * the Processing.js engine.
 */

if ( window.addEventListener ) {
  window.addEventListener("load", function() {
    var scripts = document.getElementsByTagName("script");

    for ( var i = 0; i < scripts.length; i++ ) {
      if ( scripts[i].type == "application/processing" ) {
        var src = scripts[i].getAttribute("target");
        var canvas = scripts[i].nextSibling;

        if ( src && src.indexOf("#") > -1 ) {
          canvas = document.getElementById( src.substr( src.indexOf("#") + 1 ) );
        } else {
          while ( canvas && canvas.nodeName.toUpperCase() != "CANVAS" ) {
            canvas = canvas.nextSibling;
          }
        }

        if ( canvas ) {
          new Processing(canvas, scripts[i].text);
        }
      }
    }
  }, false);
}

With the script above we have to add a couple of things to the HTML we created earlier. Inside the <head> section just after importing the Processing.js file add the following:

<script src="scripts/processing-init.js"></script>

Now that we have our library included as well as our initialization script, we are almost ready to test out first Processing.js sketch.If you look at the init script you will see that it attaches an event listener to the load event of the window and once this is triggered, searches for all the <script type=”application/processing” target=”somecanvasid”> in your page and loads that sketch in the canvas element with the id that “target” points to.

NOTE: If you omit the target attribute of the script tag, Processing.js will not throw an exception but instead, will find the nearest canvas element on the page and run the code on that canvas.

With that, let’s move on and add our script to the page. Inside the tags add the following:

<script type="application/processing" target="#2d">
	line(15, 25, 70, 90);
</script>

And next add the canvas element to the page:

<canvas id="2d" width="200" height="200"></canvas>

This is then our canvas element onto which we are going to draw. After we have added this we are all set to test our first Processing script. The Processing code above will simply draw a black line starting top-left and going down to the bottom-right. Now why are we doing it like this? We have moved onto and learned the benefits of externalizing our scripts after all. This is not the only way to pass your source to the library but I will explore these options in a follow on article. For this simple introduction we will simply write our script as a embedded script block. Your final HTML file will now look as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Processing.js Basics</title>
		<script src="scripts/processing-0.9.4.min.js"></script>
		<script src="scripts/processing-init.js"></script>
	</head>
	<body>
		<script type="application/processing" target="#2d">
		  line(15, 25, 70, 90);
		</script>
		<canvas id="2d" width="200" height="200"></canvas>
	</body>
</html>

Now, go ahead and open this file in a browser. At the moment your best options would be either the latest Chrome, Opera 10.60 or Firefox 3.6. If everything went according to plan, you should see the following:

Line drawn with Processing.js

Demo : Source

Not very exiting I know but it was pretty darn simple I believe you will agree. That is it then for the first in this series of article’s on Processing.js. In my next article I will look at how you can pass either a single or, multiple files to Processing to draw your sketches. Until then, enjoy Processing.js and let me know your thoughts.

  • Pingback: Tweets that mention Getting Started With Processing.js | Expansive Derivation -- Topsy.com

  • jarav

    Good article. Waiting for the next.

  • jarav

    Good article. Waiting for the next.

  • http://www.motercalo1.com motercalo

    This blog is very interesting

  • http://www.motercalo1.com motercalo

    This blog is very interesting

  • jarav

    I am totally new to javascript. You have src.indexOf(“#”) for the target attribute of the script tag and yet your canvas tags don’t have ids that have a “#” in them. Does src.indexOf(“#”) have any special meaning ?

    • http://expansive-derivation.ossreleasefeed.com/ Schalk

      indexOf(“#”) will return the position of the first occurrence of the string you are searching for, in this case the first occurrence of #. If the character is not found in the string it will return -1.

      • jarav

        Which means, then, that you should have,

        …

        And, correspondingly,

        I don’t see the character ‘#’ in the ‘target’ attribute in your examples.

  • jarav

    I am totally new to javascript. You have src.indexOf(“#”) for the target attribute of the script tag and yet your canvas tags don’t have ids that have a “#” in them. Does src.indexOf(“#”) have any special meaning ?

    • http://expansive-derivation.ossreleasefeed.com/ Schalk

      indexOf(“#”) will return the position of the first occurrence of the string you are searching for, in this case the first occurrence of #. If the character is not found in the string it will return -1.

      • jarav

        Which means, then, that you should have,

        …

        And, correspondingly,

        I don’t see the character ‘#’ in the ‘target’ attribute in your examples.

  • jarav

    Apparently, the code i cut and pasted has not come in the comment. Basically, i think you have missed putting ‘#’ in the ‘target’ attribute of your script tag in your examples.

    • http://expansive-derivation.ossreleasefeed.com/ Schalk

      You are 100% correct. Reading that piece of code made me think the exact same thing. I also discussed this with the developers on the IRC channel and indeed, the script expects the id on the target tag to be specified as #2d and not just 2d. I have updated the code above to reflect this.

  • jarav

    Apparently, the code i cut and pasted has not come in the comment. Basically, i think you have missed putting ‘#’ in the ‘target’ attribute of your script tag in your examples.

    • http://expansive-derivation.ossreleasefeed.com/ Schalk

      You are 100% correct. Reading that piece of code made me think the exact same thing. I also discussed this with the developers on the IRC channel and indeed, the script expects the id on the target tag to be specified as #2d and not just 2d. I have updated the code above to reflect this.

  • Anonymous

    well, This is good programming coding. The Processing cipher aloft will artlessly draw a atramentous band starting top-left and traveling down to the bottom-right.

    toshiba coupon codes

Performance Optimization WordPress Plugins by W3 EDGE