May 27th, 2008
I'm currently in the process of touring the globe (I've given four talks in two cities, have two talks in two cities left) but I dug up something that should prove to be a lot of fun.
Will Larson has gone about revising the classic Tower Defense genre, porting it to the open web using Processing.js. The port is pretty basic still - but it definitely offers a lot of promise (and is a ton of fun to play, to boot!).
» Play Processing.js Tower Defense
He's written a full post describing the construction of the game (which he did in JavaScript using the Processing API).
Will has been a machine - writing tons of demos and articles on Processing.js. Feel free to read through them to get a better feel for what you can do with the library.
Update: After a minor hiccup the game is working again (there was some problems with mouse input). Thanks Will!
Tags: games, javascript, processing
13 Comments on 'Processing.js Tower Defense'
May 14th, 2008
It's been fascinating to watch the outpouring of interest and creativity that's surrounded the recent release of Processing.js.
First things first, the project has been moved over to Github. This will help with the collaboration/patching process going forward.
A number of patches have already been provided by active users and have been merged into the main code base (which can be found in the project history).
Some of the changes that were made:
- Virtually all of the demos now work in Webkit (save for the text rendering ones) in addition to Firefox 3.
- Chris Davenport provided support for QUADS, QUAD_STRIP, TRIANGLE_FAN, and TRIANGLE_STRIP implementations in beginShape/vertex. Also endShape(CLOSE) support was added.
- Renato Formato provided a patch for handling curveVertex and curveTightness correctly.
- A patch from Felipe Gomes includes the addition of the LEFT/CENTER/RIGHT and mouseButton globals. The contextmenu is now prevented, as well, from right clicks. Additionally, a new init.js file was created (which is more robust than what was initially provided).
I've pulled together a quick round-up of the different, interesting, posts, demos, and projects that I've found, relating to Processing.js.
Getting Started
Will Larson has written a series of articles that detail how to best get started playing with Processing.js:
Additionally, the basic demos have been broken down and included in an interactive wiki.
Demos
A number of new demos have been created, at this point. Here's a couple that I thought were pretty interesting.
IDEs
There's been some significant effort towards creating an interactive development environment for Processing.js.
Press / Blogs
There was a bunch of feedback concerning the project release - overwhelmingly positive, as well. Some of my favorite responses thus far:
Wired: "We cover a lot of language and software developments here at Compiler, but this might be the most impressive thing we've ever seen."
Chris Blizzard: "Easy to drop in graphical interactive elements into other sites with the same transparency and zero-barrier to learning we’ve seen from the rest of the web. Think about how fast that stuff might spread on the web, how we might end up with people sharing and learning together and how much better the experience on the web might be in the end. That iterative process is one that needs starting points and what John has done is give us a great starting point. "
Andy Baio: "one of the most amazing hacks I've ever seen... could Processing.js be the beginning of the end for the closed-source culture of rich media tech?"
Also: Scott Hanselman, Kottke, Simon Willison, Peter Kirn, and Ajaxian.
It also made a bunch of social sites (with some interesting discussion taking place): Slashdot, Digg, Y Combinator News, Del.icio.us (2), and Reddit.
Tags: processing, visualization, javascript
10 Comments on 'Processing.js Aftermath'
May 8th, 2008
Demos below!As a sort-of reverse birthday present I've decided to release one of my largest projects, in recent memory. This is the project that I've been alluding to for quite some time now:
I've ported the Processing visualization language to JavaScript, using the Canvas element.
I've been working on this project, off-and-on now, for the past 7 months - it's been a fun, and quite rewarding, challenge. The full scope of the project can be broken down into two portions:
The Processing Language
The first portion of the project was writing a parser to dynamically convert code written in the Processing language, to JavaScript. This involves a lot of gnarly regular expressions chewing up the code, spitting it out in a format that the browser understands.
It works "fairly well" (in that it's able to handle anything that the processing.org web site throws at it) but I'm sure its total scope is limited (until a proper parser is involved). I felt bad about tackling this using regular expressions until I found out that the original Processing code base did it in the same manner (they now use a real parser, naturally).
The language includes a number of interesting aspects, many of which are covered in the basic demos. Here's a brief selection of language features that are handled:
- Types and type casting - Type information is generally discarded, but becomes important in variable declaration and in casting (which is generally handled well).
- Classes - The full class system is supported (can be instantiated, etc. just fine).
- Method overloading and multiple constructors - Within classes you can have multiple method (or constructor) definitions - with the appropriate methods being called, based upon their signature length.
- Inheritance - Even classical-style inheritance is supported.
Note: There's one feature of Processing that's pretty much impossible to support: variable name overloading. In Processing you can have variables and functions that have the same name (e.g. float size = 0; float size(){}). In order to support this there would have to be considerable overhead - and it's generally not a good practice to begin with.
If you're curious as to what the language looks like, here's a basic example of inheritance:
class Spin
{
float x, y, speed;
float angle =
0.
0;
Spin
(float xpos, float ypos, float s
) {
x = xpos;
y = ypos;
speed = s;
}
void update
() {
angle += speed;
}
}
class SpinArm extends Spin {
SpinArm(float x, float y, float s) {
super(x, y, s);
}
void display() {
strokeWeight(1);
stroke(0);
pushMatrix();
translate(x, y);
angle += speed;
rotate(angle);
line(0, 0, 66, 0);
popMatrix();
}
}
The Processing API
The second portion of the project is the full 2d Processing API. This includes all sorts of different methods:
- Shapes drawing
- Canvas manipulation
- Pixel utilities
- Image drawing
- Math functions
- Keyboard and mouse access
- Objects (point, arrays, random number generators)
- Color manipulation
- Font selection and text drawing
- Buffers
Most of these are demonstrated in the basic demos.
There's pretty-good coverage of the Processing API: there's sure to be many gaps, but most of what I can throw at it works.
Download
The full source code is contained within a single file. It comes in at about 5000 lines, compresses down to less than 10kb.
How to Use
The API is quite simple - there's a single method "Processing". If you wish to only use the Processing API (not the language) you can interact with it like so:
var p = Processing(CanvasElement);
p.size(100, 100);
p.background(0);
p.fill(255);
p.ellipse(50, 50, 50, 50);
If you wish to have the full power of the language, as well, you would pass in your Processing code as the second argument.
Processing(CanvasElement, "size(100, 100); background(0);" +
"fill(255); ellipse(50, 50, 50, 50);");
That's really all there is to it. Information on the full Processing API can be found on the Processing.org web site.
Important: Browser Support
Before we get into the demos I want to outline what some of my goal was for this project. First, and foremost, I wanted to try and get the best Canvas-based demos out of a browser, as possible. This meant that I had to shoot directly for the latest, and greatest, browsers. I needed good Canvas API support and, importantly, I needed speed.
Because of this, for this first release, I've specifically targeted Firefox 3, the latest WebKit Nightly, and Opera 9.5. In other words: beta browsers.
A large part of the code base is sure to work in "older" browsers (Firefox 2, Safari 3, Opera 9, and IE with excanvas) - but that wasn't my target platform. I wanted something that would be capable of pushing the edge of what a browser is able to render - giving them something to strive for in their upcoming releases.
There were a couple of stumbling blocks that the above browsers hit:
- Image loading - Currently, only Firefox 3 and WebKit Nightly handle this reliably.
- Pixel processing - Loading pixel data from images, manipulating them, and putting them back on the canvas. Only Firefox 3 can handle this sufficiently.
- Font loading and text rendering - The specification for this is still in the works, currently only Firefox 3 has support for this.
Thus, anything outside of the above (images, pixel processing, and text) should work "ok" everywhere.
Demos
NOTE: I highly recommend that you use the latest Firefox 3 beta to view the demos. Most will work in the latest WebKit Nightly and a majority will work in Opera 9.5, but all will work in Firefox 3.
Note again: A lot of these demos will peg your CPU. As I mentioned above, I'm trying to squeeze the most out of the browser, as possible - be ready for it!
What would the release be without a ton of demos? In development I worked in a backwards manner. Instead of building the API up from the ground - I worked from the top, down, implementing enough of the API to get individual demos working. The result of this is two-fold: 1) It made for a very rewarding development process - and guaranteed working demos and 2) It means that there are still portions of the Processing API left unimplemented.
Regardless - enough of the API has been implemented to allow all of the demos, available on processing.org, to work as best as possible.
Here's the full break-down of demos that are available:
I've gone through and cherry-picked a bunch that I really liked - in case you're interested in seeing some really interesting ones. Wherever possible I specify what browsers the demos work in (if none is specified, then it should work in all).
All of the following demos were written by Casey Reas and Ben Fry unless otherwise stated.
All of the following demos were written by Casey Reas and Ben Fry unless otherwise stated.
I'm quite curious to see what people construct with this new API. I think it holds a lot of potential and I'm excited to see what comes of it! Enjoy!
Remember: You should be using Firefox 3 or WebKit Nightly (Safari 3.1 is missing some features) - the above demos generally work best in those browsers.
Tags: programming, processing, javascript
220 Comments on 'Processing.js'
April 7th, 2008
This weekend I gave two talks at BarCamp Rochester (which was very well put together and quite enjoyable) - one on jQuery and a very quick one on the Processing language. I've deconstructed my slides into some bullet points here. If you're not familiar with the language, or what it's capable of, this should give you a good overview.
Processing is a data visualization programming language.
It has three components:
- The Processing language
- The Processing drawing API
- The implementation (in Java - can optionally pass the drawing API through to OpenGL).
The Processing Language and API
- Strictly typed
- Has classes, inheritance
- Includes a bunch of globally-accessible functions (the drawing API - very flat and PHP-like).
Basic Program Structure
Two core methods: setup() and draw()
- Very OpenGL-like
- draw() is called continually at a specific framerate (if none is specified then it goes as fast as possible)
Simple example: Drawing a continuous line with the mouse.
void setup
() {
size
(200,
200);
background
(102);
}
void draw() {
stroke(255);
if(mousePressed) {
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
Initialization
- setup() is called initially
- size(...) - set the width/height of the drawing area
- Can include calls to any other number of methods, such as: background(...) - (which draws and fills a background with a specified color).
- Note: All colors are done in RGBA. background(102) is equivalent to background(102,102,102,255) (opaque gray color)
The draw() loop
- draw() gets called as fast as possible, unless a frameRate is specified (with framerate(20), for example). You can disable any looping by calling noLoop().
- stroke() sets color of drawing outline (the color of lines, points, and the outsides of polygons)
- fill() sets inside color of drawing (inside of polygons)
- mousePressed is true if mouse is down
- Very different from typical asynchronous events - since program keeps looping we get state updates automatically. (Unless you specify mousePressed as a global function - then it'll be called as a callback.)
- mouseX, mouseY - mouse position, pmouseX, pmouseY - previous mouse position in last draw() call
Drawing
Different drawing methods: line(), rect(), arc(), ellipse(), point(), quad(), triangle(), bezier(), etc.
All use stroke(), strokeWeight(), and fill().
Can also draw complex polygons using beginShape, endShapre, and vertex - like in this example.
fill(127);
beginShape();
for (int i=0; i<segments; i++){
vertex(ground[i].x1, ground[i].y1);
vertex(ground[i].x2, ground[i].y2);
}
vertex(ground[segments-1].x2, height);
vertex(ground[0].x1, height);
endShape(CLOSE);
The Canvas
Very OpenGL-like. You can mutate the canvas rendering using: translate(), scale(), and rotate().
You can also save and restore the state of the canvas using: pushMatrix() and popMatrix().
A basic example using pushMatrix/popMatrix: A movable arm.
Classes
Can hold data, do inheritance.
Example: Bouncing an object off of rocky terrain
class Ground {
float x1, y1, x2, y2, x, y, len, rot;
Ground(){ }
Ground(float x1, float y1, float x2, float y2) {
this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2;
x = (x1+x2)/2;
y = (y1+y2)/2;
len = dist(x1, y1, x2, y2);
rot = atan2((y2-y1), (x2-x1));
}
}
Math
A whole mess of math functions are provided, as well: dist(), map(), constrain(), abs(), floor(), ceil(), random(), noise(), atan2(), cos(), sin(), pow(), sqrt(), radians().
Images
Can be used to load in external images. Example: Animation of guy dancing.
int numFrames = 12; // The number of frames in the animation
int frame = 0;
PImage[] images = new PImage[numFrames];
void setup(){
size(200, 200);
frameRate(30);
for(int i=0; i<numFrames; i++) {
String imageName = "PT_anim" + nf(i, 4) + ".gif";
images[i] = loadImage(imageName);
}
}
void draw() {
frame = (frame+1)%numFrames;
image(images[frame], 0, 0);
}
Demos
Some fun demos that I really like:
- Zipdecode - rendering all zipcodes in the country and searching them in real time.
- Substrate - rendering a piece of art.
- Genetic Trees - selectively breed and mutate trees.
- World is not round - live VJing a song using Processing and a set of physical input controls.
Books
Tags: graphics, processing, data, visualization, barcamp
9 Comments on 'Overview of Processing'
