Changes

=Any further edits should be made in this section or mentioned to Cathy or Daniel. formatting this into ACM now= add changes here or contact cathy or daniel =Processing.js for Web base based Games=

The original Processing Language was is written in Java and the syntax is Java based. Sketches written in Processing can then be compiled into standalone applications or Java Applets. Processing.js interprets Processing sketches and creates JavaScript code that renders on a web page. When the original Processing Language, was first developed, Java was supposed to become the language of the web while JavaScript was a client-side scripting language for small tasks. As the web matured, JavaScript, however, became the language of the web, although many of the misconceptions about it still persist. /*(cite javascript JavaScript the good parts here*/ ) With recent developments in JavaScript technology, JavaScript is now fast enough to handle the demands of real-time interactive multimedia web applications such as games.

From it's inception, Processing.js was designed to be more than just a rewrite of the Java functions provided by Processing to JavaScript. John Resig wrote the original Processing.js parser to scan a Processing sketch for hints of Java code and translate that code to JavaScript. However, if the parser encountered JavaScript code, it would leave the code intact as JavaScript. This method allowed allows not only allows for the interpretation of existing Processing code but also the injection of JavaScript into Processing sketches. By allowing JavaScript to exist within a Processing Sketch intact, JavaScript code can exist inside a Processing sketch without any need to declare the language you are using. Old sketches written for Processing will work but new sketches written for Processing.js can easily make use of common web libraries such as JQuery or pull in resources from web services such as Twitter of , Google maps, or Flickr.

The original code for Processing.js used regular expressions to convert Java into JavaScript when it was encountered. It did this by scanning for hints of Java code within the entire sketch and then replaced the Java code with its JavaScript equivalent. Due to the difference in how Java and JavaScript accessed object properties from methods inside an object, the with statement was used as a simple solution to avoid having to prepend all function calls with "this." or "Processing.". However, the use of the with statement also meant that the JavaScript generated would fall off Trace /*(cite trace paper here... do we need to talk about trace in the back ground section???*/ ) making the code run slower than it needed to in some browsers. In later versions of Processing.js this method of scanning the entire sketch was replaced by the creation of an abstract syntax tree that broke up the up the sketch into smaller pieces. Each piece was then interpreted separately. This change made the interpretation of the sketch far cleaner.

One of the most power powerful features of Processsing.js is its ability to blend JavaScript code with Processing code. This results of this blending means that Processing sketches are not simply delivered in a self contained container but can make use of and interact with other elements of the web. This section looks at examples of such blending.

The introduction of the <canvas> tag element into the HTML5 specification allowed Processing to be ported to JavaScript, thus enabling . This enables users to run 2D Processing sketches within the browser without additional plug-ins. At the time the Processing.js project began, there was no plug-in free method of delivering 3D content. This limited Processing.js to its 2D functions. WebGL, ,a JavaScript API that is based on OpenGL ES 2.0, is now being implemented by Firefox, Chrome and Safari. Processing.js 1.0 makes use of WebGL to support its 3D functions.

The matter of porting 3D Processing to Processing.js was simplified because Processing uses OpenGL for 3D graphics. The single largest difference between WebGL and the OpenGL library used in Processing is that in WebGL, the fixed-function pipeline was has been removed. Because of this, user-defined vertex and fragment shaders were are necessary for lighting operations. Since some shapes in Processing aren't lit and others were, multiple shaders were have been written. One shader exists for lit objects such as boxes and spheres, another less complex shader was written for unlit objects such as lines and points.