Archive for June, 2010

Displaying images in processing.js

Posted in open source on June 19, 2010 by scottdowne

Recently, I started a little on the side project, and I’ll have more to say about that in another post in a few days, but I was having problems displaying images using processing.js.

Processing.js is a JavaScript port of the original processing.

Loading images in p5 is as simple as:

PImage b;
b = loadImage("laDefense.jpg");
image(b, 0, 0);

This is simple enough, but if you want to run it in a browser, using processing.js, you have to do two things.

1. You need to set your browser’s security.fileuri.strict_origin_policy to false. Use at own risk, as I’m not sure o the security side effects this will have for browsing the web. I’m just setting this and using it locally. You can do this, in Firefox by typing about:config into your address bar, and in the filter bar, type “security” then look for “security.fileuri.strict_origin_policy”. double click it, you should see it set to false. No need to restart, it’s ready to go now.Same process to revert it back. This is not needed if you are viewing the page remotely, only needed for developmental local testing.

2. And this is where pjs and p5 differ. You need to include the preloading tag, and this is where I got snagged and noticed that this was not documented well enough. In the case of the above example, you would need to include:

/* @pjs preload="laDefense.jpg";*/

That’s the short story, the slightly longer, but still pretty short story is, I was able to get it work without that tag, and when I went to grab a section of the image into another, smaller image, using get() it failed. Preloading was needed for this. Oddly enough, displaying an alert() inside the processing.js source code made it work without the preload as well. I think what was happening is the alert stalled it enough, giving the image enough time to fully load, so by the time I hit close on the alert, my image was ready to go.


processing.js is not just processing

Posted in open source on June 11, 2010 by scottdowne

I made a demo to show three uses for accessing external processing.js sketches, running in separate canvases. This is a feature coming in an upcoming patch, that’s not quite in the developmental patch, but will be in the next few days. Although, you can obtain it from my example here.

There are two sketches, side by side, and I’m passing the mouse location from one, to the other, and inverting the one, to create a neat little effect, but that’s just the obvious thing you can do with this.

If you click on one sketch, it pauses the opposite, and stops it’s processing. This is useful if you have a webpage with multiple sketches, but you don’t need them to all run at once. Say one sketch is 3D and quite performance heavy, you can now turn off the others, from inside the code, and turn them back on when needed, speeding up your 3D, and every millisecond counts.

The final advantage is you can access them from outside of a sketch all together, from inside pure javascript. This is how I dynamically resize both sketches to be half the screen when the window size is changed.

There are two ways to access the sketches. You can name your canvas with an id, then send the id string into Processing.getInstanceById(“id”) This will return the Processing object, and give you access to all it’s properties, and allow you to change them. You can also access them from index. Like so Processing.getInstance(42) I would recommend adding an id, though.

Hello world!

Posted in Uncategorized on June 5, 2010 by scottdowne

Welcome to This is your first post. Edit or delete it and start blogging!