processing.js is not just processing

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.

Advertisements

2 Responses to “processing.js is not just processing”

  1. Like I said to Matti, putting images of your demos on your blog posts would go a LONG way.

  2. […] case entails that both canvases use Pjs.  However, instead of using createGraphics to implement a Processing.js instance through the original Pjs instance, both canvases already have Pjs and we’re connecting them […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: