1. PJSBox drag this link to your bookmarks toolbar…
2. highlight a section of processing code below…
3. and click the bookmarklet you just dragged to your toolbar.

You can try it out on the snippets of code below. Unfortunately it will not work with code that has been run through a javascript highlighter because it makes the DOM a more complicated place to be. I am working on that one however and will be updating this post accordingly.

Update: there are some bugs with this in Firefox 3.6.2 on mac but if you have any issues in other browsers/environments let me know in the comments and I will try and make the bookmarklet that bit more robust – thanks!

Pie Chart:

size(200, 200);
background(100);
smooth();
noStroke();

int diameter = 150;
int[] angs = {30, 10, 45, 35, 60, 38, 75, 67};
float lastAng = 0;

for (int i = 0; i < angs.length; i++){
  fill(angs[i] * 3.0);
  arc(width/2, height/2, diameter, diameter, lastAng, lastAng+radians(angs[i]));
  lastAng += radians(angs[i]);
}

Hello Mouse:

void setup() {
  size(400, 400);
  stroke(255);
  background(192, 64, 0);
} 

void draw() {
  line(150, 25, mouseX, mouseY);
}

Width and Height:

size(200, 200);
background(127);
noStroke();
for(int i=0; i<height; i+=20) {
  fill(0);
  rect(0, i, width, 10);
  fill(255);
  rect(i, 0, 10, height);
}

The app is fairly simple. It allows you to write and share Processing.js sketches on the web without the need for the java plugin. I won’t explain it in full here – hopefully the app itself is intuitive enough. I will however offer a few tips:

• When you declare the size() of the sketch leaving it with no arguments will give you a full screen canvas
• To get rid of the interface cruft when linking to a sketch you can add ‘/embed’ to the end of your URL

Thanks to all those people who have made some great feature requests, such as downloads, the resizable and lockable code window and the ability not to have your sketches appear in the browse section. I’ve had many more requests but I feel that I’ve taken HasCanvas as far as it can go in it’s current state. I want to start on a new version as a ground up re-write at some point however the nice folks behind Bespin are working on adding a Processing.js IDE. Chances are it will be better than anything I come up with so I may take the opportunity to work on some other ideas I’ve had.

Credit Where Credit is Due

I built the app on the back of the hard work of others.

• Code Igniter (PHP Framework)
• jQuery (Javascript Framework)
• and of course Processing.js