Processing.js for JavaScript Devs: Difference between revisions

Jump to navigation Jump to search

Processing.js for JavaScript Devs (view source)

Revision as of 18:44, 16 September 2010

3,217 bytes removed ,  16 September 2010
→‎Why Processing.js?
(Created page with "= Processing.js Quick Start - JavaScript Developer Edition = ==Introduction== This quick start guide is written from the standpoint of a JavaScript developer. The document ass...")
 
Line 25: Line 25:
===What is Processing?===
===What is Processing?===


The Processing language was originally created at MIT as part of the Media lab and Aesthetics and Computation group.  The people working there needed a way to bridge the gap between software developers, artists, data visualizers, etc., and to do so in a way that allowed new programmers (or non-programmers) to do complex visual work easily.  Processing was built using Java, and can be thought of as a simplified Java, with a customized API for drawing and graphics.
The Processing language was originally created at MIT as part of the Media lab and Aesthetics and Computation group.  They needed a way to bridge the gap between software developers, artists, data visualizers, etc., and to do so in a way that allowed new programmers (or non-programmers) to do complex visual work easily.  Processing was built using Java, and can be thought of as a simplified Java, with a simplified Java API for drawing and graphics.


===What does Processing bring to the web?===
===What does Processing bring to the web?===
Line 37: Line 37:
The Processing language was designed to be small but complete, and easy to learn.  Having said that, it is  
The Processing language was designed to be small but complete, and easy to learn.  Having said that, it is  


is built using Java. It was created at much the same time that the web was starting. At this time the choice of the Java language, and Java Runtime, as implementation targets for Processing made a lot of sense. In the mid-1990s, Java was poised to become the language of the web, with Applets and other Java technologies being used broadly on the client-side. Even Netscape, who created the language which would eventually become the ''lingua franca'' of the web with JavaScript, named their language so as to align themselves with the growing hype around Java.
...todo....


In the end, Java became an important server side technology, receding from the client-side and browser. Today, most web browsers still support Java Applets, by means of a binary plugin.  However, few web developers deploy Java-based web applications now, due to long load and startup times and difficulties relying on Java (or compatible Java versions) being installed.  This trend is not isolated to Java, but is happening to all browser plugins (e.g., Flash), which are becoming less popular as issues of security, installation, deployment, etc. make them inconvenient or risky.
* processing.js is not really a general purpose JS canvas library--it is a port of Processing.js.


Another reason that plugins like Java and Flash have fallen out of favour is that recent advances in standard web technologies, specifically HTML5 and JavaScript, have made it possible to do things that previously depended on native (i.e., faster, compiled) code.  Companies like Google, with GMail and Google Docs, or Scribd (see http://www.scribd.com/doc/30964170/Scribd-in-HTML5) have shown that HTML, CSS, and JavaScript alone are enough to build fast, full featured web applications.


===Processing.js uses Modern Web Standards===


Processing.js is built using JavaScript and HTML5.  Processing.js is really two things: a Processing-to-JavaScript translator; and an implementation of the Processing API (e.g., functions like line(), stroke(), etc.) written in JavaScript instead of Java.  It might seem odd at first to imagine your Processing sketches running in a browser, usually without modification.  But this is exactly what Processing.js enables.
===Ways to Use Processing.js===


Processing.js automatically converts your Processing code to JavaScript.  This means that you don't have to learn JavaScript in order to run your code in a browser.  You can, quite literally, write your code using the Processing IDE like you always have, and follow the steps below to get it running on the web.  There's nothing new to learn, beyond getting a simple web page created.
Processing.js was originally created in order to allow existing Processing developers and existing Processing code (often referred to as ''sketches'') to work unmodified on the web.  As a result, the recommend way to use Processing.js is to write Processing code, and have Processing.js convert it to JavaScript before running it.


Under the hood, Processing.js uses the new HTML5 canvas element to create your sketch's graphics.  The canvas element is a new feature of the web, and is either implemented or will be implemented by all major web browsers.  All Processing drawing features have been reimplemented in Processing.js to use canvas, so any browser that supports canvas will also support Processing.js.
Over time, many web developers have begun using Processing.js, and asked that we design a way for the API to be used separate from the Processing language itself.  Therefore, we have provided a way for JavaScript developers to write pure JavaScript code and still use the Processing.js functions and objects.


Here's a sample of a Processing.js sketch running in the browser.  If you can see it working, your browser supports everything you need already, and you can move on to instructions below.
Below we discuss the various methods for using Processing.js in your web pages.


'''Create simple sketch here'''
====Writing Pure Processing Code====


==1. Writing a Processing.js Sketch==
This is the preferred method for using Processing.js, and has been dealt with at length in the [[Processing.js for Processing Devs]] quick start guide.  To summarize:


There's nothing you should do differently to write sketches for Processing.js: you write your Processing.js code exactly like Processing.  For most people, this will mean using the Processing IDE, which has the nice benefit of letting you write, run, and test your code all in once place.  Remember, any valid Processing sketch should also be a valid Processing.js sketch.


If you want to experiment with web-based Processing.js code editors, you can also try these:
# Download Processing.js here: http://processingjs.org/download
 
# Create a separate Processing file or files, naming them whatever you want, but usually *.pde or *.pjs.
* http://sketch.processing.org/
# Create a web page that includes Processing.js as well as a <canvas> with info about where to get your sketch file(s), and include Processing filenames as a space-separated list in a data-processing-sources attribute on the canvas:
* http://sketchpad.cc/
* http://hascanvas.com/
 
Let's make a simple sketch that is 200 by 200 in size, sets the background to gray, draws a small white circle, and prints a message to the debug console:


<pre>
<pre>
void setup() {
<!DOCTYPE html>
   size(200, 200);
<html>
   background(100);
   <head>
   stroke(255);
    <title>Hello Web - Processing.js Test</title>
  ellipse(50, 50, 25, 25);
    <script src="processing-0.9.7.min.js"></script>
  println("hello web!");
   </head>
}
   <body>
    <h1>Processing.js Test</h1>
    <p>This is my first Processing.js web-based sketch:</p>
    <canvas data-processing-sources="hello-web.pde"></canvas>
  </body>
</html>
</pre>
</pre>


I'll assume below that you saved this to a file called '''hello-web.pde'''.
Processing.js will automatically scan the document on page load for <canvas> elements with data-processing-sources, download the files using XMLHTTPRequest, and feed them to the Processing-to-JavaScript translator. The resulting JavaScript is run using eval.


==2. Obtaining Processing.js==
====Writing Documents that Combine Processing and JavaScript Code====


Processing.js is a JavaScript library that is meant to be included in a web page.  You don't have to compile it, tell your web server about it, etc.  It simply has to be included in a web page, and the browser will do the rest.
One of the first questions people ask with Processing.js is whether they can read values from the document in which the Processing sketch is running, or vice versa.  The answer is yes.


You can download Processing.js at http://processingjs.org/download.  The library comes in a number of forms, for example:
Processing.js converts Processing code into JavaScript contained in a function closure.  The variables and functions you create are not attached to the global object (i.e., window).  However, you can still get access to them.


* processing-0.9.7.js
=====Accessing JavaScript Objects from Processing=====
* processing-0.9.7.min.js


The version numbers may be different as you read this, but note the file extensions.  Both end in .js, but one also has .min.  The .min version is Processing.js in a minified form, which means it will be smaller to download (minified JavaScript uses tricks like removing whitespace and renaming long variable names to single letters).  File sizes, and download times, matter on the web in a way they don't with normal Processing sketches.
Since Processing code gets converted to JavaScript and run like any other function, all Processing code has access to the global object.  This means that if you create a variable or function in a global script block, they are automatically accessible to Processing. Consider this example:


==3. Creating a Processing.js Web Page==
First the Processing file, mixing.pde:


It's easy to get overwhelmed with the amount there is to learn about modern web technologies.  But there's a secret: you can ignore 95% of it as you start, and add more later as you have time and interest.  Unlike compilers or programming languages, web browsers are designed to accept almost any input you throw at them, whether valid or not, whether complete or not.  Here's your first Processing.js web page:
<pre>
String processingString = "Hello from Processing!";


<pre>
void setup() {
<script src="processing-0.9.7.min.js"></script>
  printMessage(jsString + " " + processingString);
<canvas data-processing-sources="hello-web.pde"></canvas>
}
</pre>
</pre>


That's it!  No <html> or <body> tags, no title, no CSS, just the processing.js script, and a canvas.  While there isn't much here, it's important to understand what is.  First, the script tag has a '''src''' attribute, which is the file to load.  This could be a full url or a relative path.  In this case the browser is going to look for a file named '''processing-0.9.7.min.js''' in the same directory as your web page.
Next the web page:
 
The second thing in this web page is a <canvas> tag.  Notice that it too has an attribute, '''data-processing-sources'''.  This is a list of filenames (or just one filename if you only have 1 file) separated by spaces (filenames and URLs on the web can't include spaces, so space is a safe choice for separating lists).  In this case, the browser is going to look for a file named '''hello-web.pde''' located in the same directory as your page page.
 
How does the browser know how to load a Processing *.pde file?  Processing.js takes care of this, and will download, parse (i.e., translate to JavaScript), then run it automatically when the page is loaded.
 
And that's it!  Save this file to the same directory as '''hello-web.pde''' and '''processing-0.9.7.min.js''' and call it '''hello-web.html'''.
 
If you're the kind of person who doesn't like taking shortcuts, here's what a more complete web page might look like:


<pre>
<pre>
Line 113: Line 103:
<html>
<html>
   <head>
   <head>
     <title>Hello Web - Processing.js Test</title>
     <title>Hello Web - Accessing JavaScript from Processing</title>
     <script src="processing-0.9.7.min.js"></script>
     <script src="processing-0.9.7.min.js"></script>
   </head>
   </head>
   <body>
   <body>
     <h1>Processing.js Test</h1>
     <div id="msg"></div>
    <p>This is my first Processing.js web-based sketch:</p>
     <canvas data-processing-sources="mixing.pde"></canvas>
     <canvas data-processing-sources="hello-web.pde"></canvas>
    <script type="application/javascript">
      var jsString = "Hello from JavaScript!";
      var printMessage = function(msg) {
        document.getElementById('msg').innerHTML = "Message: " + msg;
      };
    </script>
   </body>
   </body>
</html>
</html>
</pre>
Here Processing.js allows the use of a variable and function declared outside the Processing code.
=====Mixing JavaScript and Processing=====
The previous example kept a clean separation between the JavaScript and Processing code, while loosening the boundary between the two.  Because Processing.js converts Processing code to JavaScript, it's also possible to mix them directly.  The Processing.js parser will leave JavaScript it finds within the Processing code unaltered, allowing developers to write a hybrid of Processing and JavaScript.  Here is the previous example rewritten using this method:
<pre>
var jsString = "Hello from JavaScript!";
var printMessage = function(msg) {
  document.getElementById('msg').innerHTML = "Message: " + msg;
};
String processingString = "Hello from Processing!";
void setup() {
  printMessage(jsString + " " + processingString);
}
</pre>
</pre>


Both ways work, and you shouldn't let yourself get burdened by HTML and other web syntax until you feel you want to do other things with your web pages.
We could
 
 
 
 
 


==3. Running your Processing.js Web Page==


In case it isn't obvious, you run your '''hello-web.pde''' sketch by loading your '''hello-web.html''' web page in a compatible browser.  Web browsers will provide you a way to load a local file, usually using the File menu and then ''Open File...''.  If you've saved the files above on a web server, you can use the remote URL instead.


==Things to Know as a Processing Developer using Processing.js==
==Things to Know as a Processing Developer using Processing.js==
David.humphrey
Confirmed users
656

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/254083"

Navigation menu