//PJSBox

Filed under Labs

Tagged: , ,

Just like cats never knew they wanted cheezburgers until the arrival of the internet here’s a bookmarklet you never knew you wanted until the arrival of now. PJSBox will run any Processing code you have selected in a lightbox. Magic!

  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);
}

9 Responses to PJSBox

  1. [...] suddenly become possible.  Take, for example, Robert O’Rourke’s newly released PJSBox bookmarklet, which allows arbitrary processing code on a web page to be highlighted and then run in a lightbox [...]

  2. g says:

    Awesome…. processing being applied. Love the demos :)

  3. JohanW says:

    Real nice. I hope alot for Processing.js

  4. [...] PJSBox is a simple canvas graphing bookmarklet, handy for testing canvas examples and code. window.onload = function(){prettyPrint();}; [...]

  5. [...] appropriate keywords are highlighted. The second thing we used was Robert O’Rourke’s pjs-box which allows you to execute processing-js code and have the sketch pop up in [...]

  6. Daishi says:

    Wow, impressive ! Nice idea :)

  7. chadbr says:

    doesn’t seem to work in IE8.

  8. [...] Some time ago I blogged about implementing the code behind sketch.processing.org using bespin, pjs-box, and of course processing-js. (View the aforementioned blog) Lately I have been getting some [...]

Leave a Reply