Changes

=First DraftAny 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 based Games=

Game Games delivery in require fast, highly graphical, interactive, multimedia environments. To accomplish this, games delivered on a webpage typically requires web page, have traditionally required some sort of browser plug-in. However due to security concerns and general wariness of about plug-ins, they are not the most effective means delivering content/games in this manner is a barrier to deliver contentaccess for some users. Furthermore there are often some platforms where a , browser plug-in does ins are not exist or cannot exist, such as in the mobile environmentavailable on browsers for all platforms. Even Flash, which is one of the most ubiquitous visual interactive environments, is not available on for every platformbrowser. The only real solution to web HTML5 <canvas> element, standardized in ...(find citation) allows the programmatic delivery of rich graphics is on a web page without plug-ins. With its inclusion in the soon to be released IE 9, the <canvas> element now represents a means to integrate it into native browser technologydeliver rich graphical content in all the major browsers.

The HTML <canvas> element allows the programmatic delivery of graphics in a web page without plugins. With its inclusion in the soon to be released IE 9, the <canvas> element now represents a means to deliver graphical content in all the major browsers. The typical way to interact with draw on the canvas is to use JavaScript. However for artists, educators, and other people less familiar with JavaScript, learning to do this can be a barrier to entry. The Processing language introduced by Ben Fry and Casey Reas is a simple and elegant language for data visualization that is already used by artists, educators, and commercial media to deliver rich graphical content called sketches. There is a large body of work around the world which is being developed using Processing. However, Processing is developed in Java and thus delivering Processing sketches on a web page requires that the user install a Java plugin. Furthermore the sketches themselves are self contained items as opposed to being part of a web page. While it is possible to deliver a sketch via a Java applet, the web page serves as a medium of delivery as opposed to being part of the game. Processing.js is an open source, cross browser JavaScript port of the Processing language. It uses the canvas element for rendering and does not require any plug-ins. However, Processing.js is more than just a Processing parser written in JavaScript. It also enables the embedding of other web technologies into Processing sketches and vice versa. This extension allows not only the rendering of sketches without the use of plug-ins but also the ability for a Processing sketch to make use of web technologies to create games. Processing.js seamlessly integrates web technologies with the processing language to provide a framework for multimedia web games. ==Background==

The Processing.js is an open sourceproject was started by John Resig who wanted to utilize the HTML5 canvas element and take advantage of the Java Processing language. It took about seven months to get a working version, cross browser JavaScript consisting of 5000 lines of code but it was not a complete port of the Processing language(source?). It uses The project, similarly to other open source products, was released with the canvas element for rendering hope that a developer community would converge around it and does not require any plug-inscontribute to development. HoweverIn September 2009, students from Seneca College began the work to complete Processing.js is more than just a Processing parser written in JavaScript. It also enables In order to facilitate an architecture for participation the source code had to be readily available and the inner workings of the project and the missing functionality must be publicized. To this end the source code was made available publicly on GitHub and an issue tracking system was used to manage the embedding large number of other web technologies into Processing sketchesissues needed to be resolved in order to complete the port. This extension will allow for a new set A review process was setup to ensure that the code submitted was of visualizations previously not possiblesufficient quality. Processing.js seamlessly integrates web technologies with the processing language to provide an accessible framework for multimedia web applications1.0 was released in November 2010.

==BackgroundProcessing.js in detail==

The processing.js project was started by John Resig who wanted to utilize the HTML5 canvas element original Processing Language is written in Java and take advantage of the syntax is Java based. Sketches written in Processing can be compiled into standalone applications or Java Applets. Processing language. It took about seven months to get a working version, consisting of 5000 lines of js interprets Processing sketches and creates JavaScript code but it was not that renders on a complete port of web page. When the original Processing language. The projectLanguage, similarly to other open source productswas first developed, Java was released with the hope that a developer community will converge around it and contribute supposed to development. In September 2009, we began become the work to complete language of the port to web while JavaScriptwas a client-side scripting language for small tasks. In order to facilitate an architecture for participation As the source code had to be readily available and web matured, JavaScript, however, became the inner workings language of the project and web, although many of the missing functionality must be publicizedmisconceptions about it still persist. (cite JavaScript the good parts here) To this end the source code was made available publicly on GitHub and an issue tracking system was used to manage the large number of issues needed to be resolved With recent developments in order to complete the port. A review process was setup JavaScript technology, JavaScript is now fast enough to ensure that handle the code submitted was demands of sufficient qualityreal-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 convert translate that code to JavaScript. However, if the parser encountered JavaScript code, it would leave the code intactas JavaScript. This method allowed allows not only for the conversion interpretation of existing Processing code to JavaScript but also the injection of JavaScript into Processing sketches as well. By allowing JavaScript to code can exist within inside a Processing Sketch intact,Java and JavaScript code can exist together 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 not only have Processing code but can easily make use of JavaScript to interact with other elements of the webpagecommon web libraries such as JQuery or pull in resources from web services such as Twitter, Google maps, or Flickr.

==While JavaScript==and Java are fairly similar syntactically, there are some fundamental differences that has made this conversion challenging. The first is that we wanted to do this conversion dynamically when a web page is loaded. The code produced by Processing.js needed to be fully object oriented and we had to provide support to all native Java functions and objects that are supported by Processing. We also had to take into account the differences between working with web resources vs local resources. Furthermore we had to consider how we would handle some fundamental differences between Java and JavaScript such as typed vs. typeless variables, function overloading and variable name overloading.

When the The original code for Processing Language, also known as P5, .js used regular expressions to convert Java into JavaScript when it was first developed, encountered. It did this by scanning for hints of Java was supposed to become code within the language of entire sketch and then replaced the web while Java code with its JavaScript was client-side scripting language for small tasksequivalent. As Due to the web matured, difference in how Java and JavaScriptaccessed object properties from methods inside an object, howeverthe with statement was used as a simple solution to avoid having to prepend all function calls with "this." or "Processing.". However, became the language use of the web, although many of with statement also meant that the misconceptions 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 still persistneeded to in some browsers. In later versions of Processing. /*cite javascript js this method of scanning the entire sketch was replaced by the creation of an abstract syntax tree that broke up the good parts here*/ sketch into smaller pieces. Each piece was then interpreted separately. With recent developments in JavaScript technology, JavaScript is now fast enough to handle This change made the demands interpretation of realtime interactive web graphicsthe sketch far cleaner.

Processing.js is more than just a Processing parser re-written in JavaScript. It is designed in a way that connects the Processing language (also known as P5) with web technologies such as JavaScript, the HTML5 canvas element, JQuery, and various web services. /*Awkward*/ Furthermore, Processing.js is built in such a way as to allow easy integration of new technologies as they emerge. It is designed to be fast and to take advantage ==The Blending of recent JavaScript developments to ensure that the platform is responsive.Web==

While JavaScript and Java are fairly similar syntactically, there are some fundamental differences that has made this conversion challengingOne of the most powerful features of Processsing. The first js is that we wanted its ability to do this conversion dynamically in real timeblend JavaScript code with Processing code. The code produced by the converter??? needed to be fully object oriented and we had to provide support to all native Java functions and objects This results of this blending means that Processing sketches are supported by Processing. We also had to take into account not simply delivered in a self contained container but can make use of and interact with other elements of the differences between working with web resources vs local resources. Furthermore we had to consider how we would handle some fundamental differences between Java and JavaScript This section looks at examples of such as typed vs. typeless variables, function overloading and variable name overloadingblending.

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 /* insert descriptions 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 screenshots of the with statement also meant that the JavaScript generated would fall off Trace /*cite trace paper applications for demo reel 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. Later this method of scanning the entire sketch was replaced by the creation of an abstract syntax tree that broke up the code into smaller pieces. Each piece then had the regular expressions applied to change it. This made it was easier to apply the regular expressions correctly without accidentally converting code that was already working. It also made it easier to create proper inheritance structures and attach properties and methods to the correct object in the hierarchy chain as smaller pieces of code was being converted at any one time.

One important feature provided by Processing.js is that it hides the differences between browsers. Web standards are often loosely defined, and thus variations can exist. These variations not only exist between different browser vendors but can even exist between versions of the same browser on different platforms. Something as simple as key events can vary widely between browsers. Processing.js hides a large number of these differences from the user by When creating a unified method of handling events. Regardless of content as interactive as games in the browser/platformweb, the functions these small differences can create huge problems for handling events within Processing.js are handled the same waycontent creators.

Different browser makers are also at various stages Processing.js hides a large number of implementation for various newer technologies. For example, WebGL provides typed arrays which are much faster than traditional JavaScript arrays. While these typed arrays are implemented for WebGL, they can be used outside differences from the user by creating a unified method of that context also and can provide tremendous speed improvementhandling common interactive events. HoweverRegardless of the browser/platform, not every browser supports WebGL at this time thus a fallback to regular JavaScript arrays is necessary if the feature does not existfunctions behavior of the event handlers are the same in different browsers. By hiding these differences between browser makers from the user, This standardization makes Processing.js provides a means an ideal candidate for game developers to make develop games without worry worrying about how the differences controls will differ between browsers. If a feature exists that can make the rendering smoother and faster, Processing.js will make use of it to increase performance. If it does not exist a fallback mechanism is available to allow it to still run.

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 when porting 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 a JavaScript API that is based on OpenGL ES 2.0, is now being implemented by Firefox, Chrome and Safari. It is has become a viable candidate for use in Processing.js to render 3D sketches1. Additionally, since 0 makes use of WebGL closely matches OpenGL which is used by Processing, the porting of the to support its 3D Processing functions was relatively straight forward.

===Differences between OpenGL and WebGL===The matter of porting 3D Processing to Processing (which uses OpenGL /*1.x?? if it was opengl 2.0 it would have been even easier right?*/) js was simplified because the WebGL interface is similar that of Processing uses OpenGL, but there are a number of differences between the interfacesfor 3D graphics. The single largest difference between WebGL and the OpenGL 1.x library used in Processing is that like OpenGL ES 2.0in 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.

The following /* shaders are used for rendering unlit shapes specified with beginto go in a figure on final paper*/end function calls.

==Conclusion=Typed Arrays===Performance is always a concern when rendering 3D content, so it was necessary to create a faster version of JavaScript'script's inherently slow arrays types. Because of this, typed arrays were incorporated into pre-release versions of WebGL browsers. Unlike regular arrays which can contain different types such as strings, numbers and objects, typed arrays can only contain one type and cannot by dynamically resized. Some of these types include Float32Intay, Int32Uinty, Uint16ArrUintnd Uint8Array. These types provide a significant performance increase when manipulating arrays.

(table removed)<table border="1"><tr><td>Operation</td><td>Array</td><td>Float32Array</td></tr> <tr><td>Write</td><td>8947</td><td>1455</td></tr> <tr><td>Read</td><td>1948</td><td>1109</td></tr> <tr><td>Loop-copy</td><td>&gt;10, 000</td><td>1969</td></tr> <tr><td>Slice-Copy</td><td>1125</td><td>503</td></tr> </table> Win7 64Bit, 4GB Ram, Dual-Core 1Processing.30Ghz Intel U7300(citation needed) Alistair MacDonald [http://weblog.bocoup.com/javascript-typed-arrays link] Because typed arrays are only available js seamlessly integrates elements of a webpage to create a viable platform for pre-release browsers, they cannot currently be used in 2D sketchesgames on the web. Once they become implemented It handles events in a consistent manner between different browsers, a significant amount of the Processingmaking it easier for game developers to create content with it.js code base can make use of these structures, increasing performance throughout Furthermore the libraryinterpreter was written efficiently. Today's JavaScript engines are highly efficient... /* andor, mike said its This efficiency means that interactive applications such as games can be written inJavaScript. Processing.js makes this process smoother. is it???*/ ==Conclusion==