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.

Advertisement