Comparing native Processing & Processing.js
The gap between desktop applications and browser technology is closing. Originally web pages were limited to basic text layouts, designed for sharing technical papers between laboratories around the world. But ever since the commercialization of the Internet in the late 80s - early 90s, consumers have have come to expect multimedia as a web standard, creating an on-going demand for innovative browser technology.
Even if the gap between the deskop and the web was completely closed, differences between native Processing & Processing.js would still exist due to the nature of the environments in which they run, and the contexts in which they are used.
Applet or Canvas
The native Processing language was designed as a desktop application and can export binary excecutables for Mac, Linux and Windows. The native version also supports web-page development through the use of Java Applets. However, the Processing.js version uses an HTML5 element called the Canvas, which receives graphic commands from Javascript.
Processing.js Saves Bandwidth
Processing.js will save you bandwidth. When exporting the Basic-Example as a Java Applet from the native Processing application, we can see that the .jar file is 233 killobytes in size. When using the minified version of Procesing.js, the total size drops to 29Kb!
OpenGL
The native Java Applet can detect whether the client machine supports OpenGL, and can accelerate rendering with 3D graphics hardware. When a 3D card is present, Processing provides simple methods to create complex 3D scenes, bypassing the need to understand complicated mathematical functions.
Processing.js does not provide 3D methods... yet. However, browser vendors are currently developing a 3D context for the Canvas element, allowing the browser to use 3D hardware. As browser technology develops, you will see Processing.js begin to support native 3D methods.
Software rendering on a 2D Canvas is still possible, but the speed varies greatly between browser models due to the differences in their JavaScript engines.
Examples of 3D software rendering on a 2D Canvas:
Un-Supported Commands in Processing.js
Processing.js does not currently support the following commands. If you would like to get involved with the development of Processing.js, please join Processing-js at GitHub.
delay() / import / popStyle() / private / pushStyle() / cursor() / focused / noCursor() / online / screen / long / HashMap / XMLElement / binary() / boolean() / hex() / unbinary() / unhex() / join() / match() / matchAll() / nfc() / nfp() / nfs() / split() / splitTokens() / trim() / append() / arrayCopy() / concat() / expand() / reverse() / shorten() / sort() / splice() / subset() / PShape / quad() / bezierDetail() / bezierPoint() / bezierTangent() / curveDetail() / curvePoint() / curveTangent() / box() / sphere() / sphereDetail() / noSmooth() / strokeCap() / strokeJoin() / texture() / textureMode() / loadShape() / shape() / shapeMode() / createInput() / loadBytes() / open() / selectFolder() / selectInput() / param() / status() / applyMatrix() / printMatrix() / resetMatrix() / rotateX() / rotateY() / rotateZ() / ambientLight() / directionalLight() / lightFalloff() / lightSpecular() / lights() / noLights() / normal() / pointLight() / spotLight() / beginCamera() / camera() / endCamera() / frustum() / ortho() / perspective() / printCamera() / printProjection() / modelX() / modelY() / modelZ() / screenX() / screenY() / screenZ() / ambient() / emissive() / shininess() / specular() / blendColor() / brightness() / hue() / saturation() / PImage / imageMode() / noTint() / requestImage() / blend() / copy() / filter() / PGraphics / hint() / createFont() / textAlign() / textLeading() / textMode() / textSize() / textWidth() / textAscent() / textDescent() / PVector / exp() / log() / mag() / map() / acos() / asin() / atan() / tan() / noiseDetail() / noiseSeed() / randomSeed()
