Changes

=SIGGRAPH 2011Processing.js Game Paper=

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. The project, similarly to other open source products, was released with the hope that a developer community will converge around it and contribute to development.  "The Mozilla experience however, suggests that proprietary products may not be well-suited to distributed development if they have tightly-coupled architectures. There is a need to create an “architecture for participation,” one that promotes ease of understanding by limiting module size, and ease of contribution " - (MacCormack, Rusnak and Baldwin 2004). In September 2009, the work to complete the Processing port to JavaScript was begun. In order to facilitate an architecture for participation a number of things needed to happen. First and foremost the source code had to be readily available. Secondly, the inner workings of the project and the missing functionality must be publicized and a dialog started. 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. ==DOM Integration?? (need a better header)== Processing.js is more than just a Processing parser 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. Furthermore, Processing.js is built in such a way as to allow easy integration of new technologies as they emerge. The original Processing Language is Java based. To run a Processing sketch in a web page, the Java code has to be completely converted into JavaScript. While syntactically JavaScript and Java are fairly similar, there are some fundamental differences that has made this conversion challenging. The first is that we wanted to do this conversion dynamically in real time. 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 (such as Strings) 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. 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 2008)wrote the original Processing.js parser to scan a Processing sketch for hints of Java code and convert that code to JavaScript. However, if the parser encountered JavaScript code, it would leave the code intact. This method allowed not only for the conversion of existing Processing code to JavaScript but the injection of JavaScript into Processing sketches as well. This simple idea means that within a processing sketch Java and JavaScript code can exist together without any need to declare the language you are using.    ==3D support==

“In development I worked in a backwards manner. Instead The introduction of building the API up from <canvas> tag into the HTML5 specification allowed Processing to be ported to JavaScript, thus enabling users to run 2D sketches within the ground browser without additional plug- I worked from ins. At the toptime when porting began, downthere was no plug-in free method of delivering 3D content. This limited Processing.js to its 2D functions. WebGL, implementing enough of the A JavaScript API that is based on OpenGL ES 2.0, is now being implemented by Firefox, Chrome and Safari. It is now a viable candidate for use in Processing.js to get individual demos workingrender 3D sketches.” -http://ejohn Additionally, since WebGL closely matches OpenGL which is used by Processing, it substantially aided the porting process.org/blog/processingjs/

===Differences===The projectmatter of porting Processing (which uses OpenGL) was simplified because the WebGL interface is similar that of OpenGL, but there are a number of differences between the interfaces. Arguably, similarly the single largest difference between WebGL and OpenGL is that like OpenGL ES 2.0, the fixed-function pipeline was been removed. Because of this, not all Processing source code could not be ported directly. Instead, user-defined vertex and fragment shaders were necessary to other open source productswrite for lighting operations. Since some shapes in Processing aren't lit and others were, multiple shaders were written. One shader exists for lit objects such as boxes and spheres, another less complex shader was released written for unlit objects such as lines and points. The following shaders are used for rendering unlit shapes specified with begin/end function calls. <pre>"varying vec4 vFrontColor;" +"attribute vec3 aVertex;" +"attribute vec4 aColor;" +"uniform mat4 uView;" +"uniform mat4 uProjection;" +"void main(void) {" +" frontColor = aColor;" +" gl_Position = uProjection * uView * vec4(aVertex, 1.0);" +
"}";</pre>fragment shader:<pre>ifdef"GLfESf GL_ES\n" +"prehighpn highp float;\n" endif"#endif\n" + "vvecinvFrontColorntColor;" +"void main(void){" +glrFragColoragCvFrontColorntColor;" +"}";</pre> Examining the shaders reveals some of the hope that idiosyncrasWebGLf WebGgl The gl_Color keyword is considered invalid. Instead, users must create their own varying vector. Furthermore, a preprocessor statement to set float types to use high precision is also required. These are some examples of changes to the specifications changes which were introduced over time. ===Typed Arrays===Performance is always a developer community will converge around 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 1.30Ghz Intel U7300(citation needed) Alistair MacDonald [http://weblog.bocoup.com/javascript-typed-arrays link] Because typed arrays are only available for pre-release browsers, they cannot currently be used in 2D sketches. Once they become implemented in browsers, a significant amount of the Processing.js code base can make use of these structures, increasing performance throughout the library. ===Specification Changes and contribute Browser Inconsistencies===As the specification is concurrently implemented in different browsers, several inconsistencies between browsers have appeared. These range from minor issues, such as Minefield and Chrome/Chromium return "function" while WebKit returns "object" when the type of a typed array is queried. Another is the way WebGL's readPixels() function is implemented. This function isn't used extensively in the library itself, but it is used in the Processing.js reference testing framework. ===Problems===WebGL provides a close match to OpenGL for incorporating 3D into Processing.js, but it does present some issues when trying to developmentport over code.There are interface differences, changes to the interface are common, and some functionality isn't available at all such as point smoothing.  ==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 all these intricacies from the user keeping it simple for content creators.   /*Above this line is our final draft, below this line is the original writeups*/ /* ToDo: Rewrite as game paper, conclusion, references, demos, video editing*/  /* Mike an Andor...so does pjs use typed arrays for 2D if available? or just 3D?*/

One thing the web is known for is innovation. This is the case for Processing.js and many of the browsers on which the library is used. "The Mozilla experience howeverWith innovation, suggests there comes differences in implementation. Each browser handles key strokes and other web events differently. This is due to a somewhat lenient standardization that proprietary products may not be well-suited to distributed development if they have tightly-coupled architecturesmostly just ensures that certain events exist. There It is a need not preventative for browser vendors to customize and create an “architecture for participationtheir own unique events,” one that promotes ease of understanding by limiting module size, and ease of contribution " - (MacCormack, Rusnak and Baldwin 2004)which would stifle innovation.

In September 2009, Seneca College students along with other developers began the work Developers need to complete make sure that their creation handles the necessary differences for all browsers. We ensured that this was done for Processing port to JavaScript. In order to facilitate an architecture for participation a number js so that the functionality of things needed to happen. First and foremost the source code had to Processing language be readily availableeasily accessible for the open web. Secondly Processing.js does not only handle events, the inner workings of the project but it takes those events and standardizes it to copy (or at the missing functionality must be publicized and very least imitate) a dialog startedproper Processing compilation. To this end One of the source biggest pieces of 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 portProcessing. A review process was setup js that we worked on to ensure that unify the code submitted was of sufficient qualitybrowsers involve key events.

/* Keys are not the only code we've worked with to be deleted in commentensuring browser accessibility. Another example is the newly implemented typed arrays for Javascript.

Society has a vital interest in encouraging // Typed Arrays: fallback to WebGL arrays or Native JS arrays if unavailable function setupTypedArray(name, fallback) { // check if TypedArray exists // typeof on Minefield and rewarding innovationChrome return function, typeof on Webkit returns object. Presently, there are two major models characterizing how if (typeof this[name] !== "function" && typeof this may be done[name] !== "object") { // nope. The first, the “private investment” model and the second, the “collective action” model . check if WebGLArray exists if (von Hippel and von Krogh 2003typeof this[fallback] === "function"){ this[name] = this[fallback]; } else { // nope. Von Hippel and von Krogh go on to say that the private investment model assumes private returns to the innovator resulting from private goods and efficient rule of intellectual property protection. Whereas the collective action model assumes collaboration from multiple innovators resulting in a public good that can be accessed by anyone.set as Native JS array this[name] = function(obj) { if (obj instanceof Array) { return obj; } else if (typeof obj === "number") { return new Array(obj); } }; } } }

The code above shows feature detection for typed arrays. As seen from the commenting, Minefield/Firefox and Chrome return functions for the typeof the object and webkit returns an object. In new technologies like this and WebGL, as another example, standardization is very new and limited so browsers have lots of wiggle room to customize. We, as developers of Processing.js, code it so when other developers use our library they do not have to worry about the differences and quirks of different browsers.

The projectWe could of done a straight up JavaScript port of the Processing language, but that would mean all Processing sketches written in Processing, similarly would need to other open source productsbe rewritten in JavaScript. This way, was released with all previous Processing sketches can simply be dropped into the hope that a developer community web, and they will converge around it and contribute work. We took this one step further, allowing both languages to developmentmingle as one. The Mozilla experience howeverWhen we parse the Java into JavaScript, we don't break previously existing JavaScript, this means you can add JavaScript right into the Java, suggests without having to declare that proprietary products may not be well-suited to distributed development if they have tightly-coupled architecturesyou are doing so. There is a need to create an “architecture for participationWe simply ignore the JavaScript we encounter while parsing the Java,” one that promotes ease leaving it in tact. Not only do we allow mingling of understanding by limiting module sizethe two languages, which is unique and ease of contribution (MacCormackpowerful in itself, Rusnak and Baldwin 2004). In order to facilitate an architecture but also allows for participation a number of things needed sketches to happen. First and foremost the source code must be readily availablewritten in pure JavaScript. Secondly, the inner workings The advantages of this is we had a huge library of the project work to test and draw from right from the missing functionality must be publicized and a dialog startedbeginning.

A Git repository was started to allow contributors and users easy access to “In development I worked in a backwards manner. Instead of building the API up from the ground - I worked from the project’s source code. Git is an extremely fasttop, efficientdown, distributed version control system ideal for implementing enough of the collaborative development of software. The repository is hosted by GitHub which provides an online way of collaborating with others and forking repositories (GitHub Social Coding 2010)API to get individual demos working. GitHub makes Open Source’s fork” -and-extend legal capability a practical reality (Walsh 2009). This promotes a pressure free environment where any contributor can alter the code of their own repository without worrying about their coding style or syntaxhttp://ejohn. org/blog/processingjs/

To raise awareness and encourage dialog both a project website and Notmasteryet rewrote the parser to convert the sketch into an abstract syntax tree, which is an online discussion channel were madeabstract tree representation of blocks of code. The website consisted By doing this, blocks can be precisely parsed without the worry of tutorials that allowed novice users breaking or parsing unintended things in an unexpected way. Regex is still used for each part, but is now contained to quickly pick-up specifically targeted smaller chunks code, instead of the whole thing. This makes maintaining the projectcode much easier, demonstrations of previous Java Processing examples that were ported to processingjsmakes object inheritance easier, and a list of features that were not yet supportedmakes JavaScript code included in the sketch more stable. Furthermore an Internet Relay Chat (IRC) channel was made In fact, since the abstract syntax tree's inclusion, we have found new bugs in the parser to allow for general discussions on the project as well as a Google Group which would facilitate discussions for those unfamiliar with IRCbe pretty much non existent.

A 2008 study done by Koch and Neumann that analyzed Some of the impact on quality differences between Java and design associated with JavaScript presented some unique challenges. Some of which are still unsolved. Because at the number time of contributors and parsing, we are just parsing the amount code as if it was pure text, so we cannot validate any of their work yielded the following conclusiondata referenced in the code. “We identify When an image is to be loaded in the number of commitscode, the number of distinct programmersclient will now have to download that image from the server, this is a unique problem that Processing does not have. This means an image may not be available when needed, and getting that data directly from the active source at time as factors of influence which have parse is not reliable, we would need to know this before we parse. We solved this by adding a negative effect on qualitydirective at the top of the code that would define all images needed to be preloaded, so we can parse the directive first, then convert the code to JavaScript, then run it, safely knowing images will be ready to use at run time. In particularJava supports overloading, complexity and size in that its functions are negatively influenced uniquly identified by these process metricstheir name, return type, and parameters, this making up a function's signature. ( - source this ) JavaScript only holds the function name as its signature, presenting another unique problem. Furthermore We can check the number of parameters in a high concentration function, and merge all overloaded functions into one, and check the number of added work fosters bad qualityarguments passed in, to know which block to call. This check is at run time, not at call time as Java would do it.” To ensure that all code patches meat However, we currently do not reliably check the type of the coding standardsarguments passed in, and passed various tests so it will break if a function has two step review process was put in place. The versions, first step was accepting a peer-review that can be performed by virtually anyone but was usually performed by another contributor. The single string as the only argument, and the second step was accepting a super-review that was performed by single number as the only the contributors that had the appropriate statusargument. In order to be able to perform super-reviews a contributor must Similarly, if we have a combination of variable using the followingsame name as a function, advanced JavaScript knowledgecalled variable name overloading, thorough knowledge of we will break in the project same way. This is because Java would consider these different things, and its componentsJavaScript considers a function to be a variable of a different type, or sharing the ability to identify potential problems. In addition to this process each release was thoroughly tested on all platforms and all supporting browserssame space.

In December of 2010 the first stable version of processingjs was releasedAnother interesting difference stems from Java being a typed language, and JavaScript being typeless. Included Java would require casting in the release were over 1most cases,000 bug fixes, features, and under-where as with javaScript we can simply throw the-hood improvementscast away for all literal variable types. At The problem is if the time the project had twenty six recorded code contributorstype is something like a double, or a char, eleven of which had the status of super reviewerin JavaScript is simply a string or int. At least twenty users logged in to the IRC channel at any given time( source this? ) We solved this for chars with a custom char class, 608 members it solved a lot of the Google Group issues we were having but it is not perfect, by not solving all issues in all cases. Some other types like double and byte will require more overhead and 99 forks of its repositorywill not be possible without complete type tracking.

In order for Processing.js to closely match the functionality of the native Processing language some custom flags had to be created to make the library behave like the native language. Pjs directives are a set of commands that are embedded in a multiline comment at the top of the sketch to control a few aspects of how the sketch will work. Placing the directives in a multiline comment allows for backwards compatibility of sketches with native Processing so that sketches written in Processing.js can be run on the native Processing JAVA platform. There are currently three Processing.js directives. These directives add the ability to preload images before the sketch begins to run, and to toggle transparent backgrounds and anti-aliasing of lines.