Changes

The Processing language was originally created at MIT as part of the Media lab and Aesthetics and Computation group. The people working there 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 customized simplified Java API for drawing and graphics.

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

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

Processing.js is built using JavaScript and HTML5. Processing.js is really two things: a Processing-===Ways 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 Use Processing.js enables.===

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

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

Here's a sample of a Below we discuss the various methods for using 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 belowweb pages.

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

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

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

I'll assume below that you saved this 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 a file called '''hello-webJavaScript translator.pde''' The resulting JavaScript is run using eval.

==2. Obtaining ==Writing Documents that Combine Processing.jsand JavaScript Code====

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

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

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 Since Processing.js in a minified form, which means it will be smaller code gets converted to download (minified JavaScript uses tricks and run like removing whitespace and renaming long variable names any other function, all Processing code has access to single letters)the global object. File sizes, and download times, matter on the web This means that if you create a variable or function in a way global script block, they don't with normal are automatically accessible to Processing sketches. Consider this example:

==3. Creating a First the Processingfile, mixing.js Web Page==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 <pre>String processingString = "Hello from Processing.js web page:!";

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

That's it! No <html> or <body> tags, no title, no CSS, just Next 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. 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:

<title>Hello Web - Accessing JavaScript from Processing.js Test</title>

<h1div id="msg">Processing.js Test</h1> <p>This is my first Processing.js web-based sketch:</pdiv> <canvas data-processing-sources="hello-webmixing.pde"></canvas> <script type="application/javascript"> var jsString = "Hello from JavaScript!"; var printMessage = function(msg) { document.getElementById('msg').innerHTML = "Message: " + msg; }; </script>

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