1
edit
Changes
no edit summary
=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=
==Introduction==
Games delivery requires require fast, highly graphical, interactive, multimedia environmentenvironments. To accomplish this game delivery , games delivered on a web page, have traditionally required some sort of browser plug-in. However due to security concerns and general wariness about plug-ins, delivering content/games in this manner is a barrier to access for some users. Furthermore, browser plug-ins are not available on browsers for all platforms. Even Flash, which is one of the most ubiquitous visual interactive environments, is not available for every browser. The HTML5 <canvas> element, standardized in ...(find citation) allows the programmatic delivery of graphics 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 deliver rich graphical content in all the major browsers.
The typical way to 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 as well as , 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 was is developed in Java and thus delivering Processing sketches on a web page required 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. That is, the elements of the Document Object Model (DOM) of a webpage can not interact with it or vice versa. Thus, while While it is possible to deliver visual content it would be difficult a sketch via a Java applet, the web page serves as a medium of delivery as opposed to create Processing sketches to take full advantage being part of modern web services such as flickr, twitter etcthe 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 project 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, consisting of 5000 lines of code but it was not a complete port of the Processing language (source?). The project, similarly to other open source products, was released with the hope that a developer community would converge around it and contribute to development. In September 2009, students from Seneca College began the work to complete Processing.js. 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 large number of issues needed to be resolved in order to complete the port. A review process was setup to ensure that the code submitted was of sufficient quality. Processing.js 1.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.
==Browser Unification==
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.
==3D support==
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.
<pre>
</pre>
==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>
==References==