John Resig - Building a Visualization Language

Today we'll be covering the canvas, processing visualization language, and processing.js.

Canvas

  • Proposed and first implemented by Apple in WebKit
  • 2D drawing layer
  • Embedded in web pages: looks and behaves like an img element
Shapes and Paths that are supported:
  • NOT vectors (this isn't SVG)
  • Rectangles
  • Arcs
  • Lines & Curves
Canvas is fairly simplistic, you aren't creating objects on a canvas you're simply painting to it. Fast but primitive.
Demo:
var elem = document.createElement("canvas");
elem.width = 500;
elem.height = 500;
document.body.appendChild(elem);
var context = elem.getContext("2d");
var pos = 0;
setInterval(function() {
// black rectangle
context.fillStyle = "rgba(0,0,0,1)";
context.fillRect(0,0,elem.width, elem.height);
// red rectangle
context.fillStyle = "rgba(255,0,0,1)";
context.fillRect(pos,0,25,0);
pos += 1;
}, 10);
Demo continues to make the red box move across the screen. Then changes the alpha opacity of the black fill to show a long tail. By then rotating the context you can make a pretty neat disco pattern, awesome.
In canvas you're constantly painting on top of what's already there. Canvas is a very low level API. You can change the scale, rotate, and translate your drawing context. Resig suggests its similar to OpenGL in nature.
Canvas can consume images, other canvases, video (FF 3.1), and screenshots of webpages.
Processing is a visualization language by some guys at MIT built in Java. Can do 2d and 3d. Language is stricly typed, has classes and inheritance, globally-accessible functions with a flat API, setup() and draw() methods feel like OpenGL. The example of a processing program uses no event handlers, there's simply a global mousePressed variable which we can refer to in the draw method. The drawing area is just like HTML 5's canvas. You can push and pop transformation matrices. (Finally, that college graphics course is going to come in handy on the web.) Shapes can be drawn as a polygon with many points. In order to maintain state you use processing's internal class representations, John is demoing the reflection of a ball bouncing off of a rocky (polygonal) 2-d terrain. Just gave another demo of an animated GIF in Processing.
Processing.js, John's project to convert processing to JavaScript and run on Canvas. Two stages of the project are language conversion and processing API. http://processing.org/learning/topics/
  • Initial release in May: http://ejohn.org/apps/processing.js/
  • API is a 1:1 mapping of Processing to Canvas
  • Now showing the same demos from the Java Processing engine. They all work. Really dope.
  • Really impressed with how fast this actually is. Google Chrome's V8 must smoke these things.
Next demo is "JavaScript Apps Hero" ejohn.org/apps/hero - That's great. The flash object is playing its music and being synchronized with the music.
benfry.com/zipdecode/ - pretty neat java applet demo from processing.
IE8 does not support canvas. Google's ExCanvas converts canvas calls into VML and it works fairly well.
----

John Resig - owner of Firebug and Processing.js.