Owen Mundy

The Processing.js project is really cool. It allows you to run Processing .pde files inside (HTML5 compatible) web browsers using Javascript. You can pass data back and forth between the two programs, access the DOM with Processing, and you don’t need any plugins or Java.

Click here to run this Processing sketch in your browser

One caveat… When importing a Processing .pde file into the HTML5 canvas you must access the files on a web server or by using localhost (a server running on your computer, e.g. MAMP) because most (all modern?) web browsers don’t allow file:/// access for security reasons. Unfortunately this is not intuitive as Javascript should run in the browser regardless of file:/// access. Nor is it mentioned in any of the Processing.js Quick Start documentation. I found it by testing, and then confirmed it in their README. Darn, need to remember to read (all of) the instructions.

UPDATE: A friend pointed out that the problem accessing the .pde file could be due to the same origin policy. Though not explicitly stated on the Github page for Processing.js, they do mention that disabling same origin setting in your browser is a(n undesirable) workaround.

Some web browsers (e.g., Chrome) require secondary files to be loaded from a web server for security reasons. This means loading a web page that references a Processing.js sketch in a file via a file:/// URL vs. http:// will fail. You are particularly likely to run into this problem when you try to view your webpage directly from file, as this makes all relatively links file:/// links.

// Hello World file for Processing or Processing.js
void setup(){
  size(1000,700);
  background(255);
}
void draw(){
  stroke(random(255),random(255), random(255));
  line(random(width),random(height), random(width),random(height));
  println("Hello World!");
}

A script that plots points within the confines of an ellipse using Processing and distance from the center.

http://owenmundy.com/work/_sketches/draw_inside_ellipse/

Images of shifting 3d spaces using Processing and found aerial photography. Click the sketch to refresh the image.
http://owenmundy.com/work/_sketches/aerial_3d_textures/

http://owenmundy.com/work/_sketches/gmap_mouseIntersection_oop/

http://owenmundy.com/work/_sketches/lp_lesson1/

Moving through Learning Processing by Daniel Shiffman.