Transition between sketches during a live performance

I would like to find out what are the strategies for switching between the sketches? I am preparing a performance (visual accompanying a live act) and I need some way of transitioning between different sketches that I am about to project. For example, when I used to try out Resolume (VJing software) one can set different “tracks” and transition between them (for example decrease alpha of the first one and increase alpha of the next one) akin to transitioning between the tracks when DJing.

Ideally I’d like to set up a “playlist” of sketches and control manually when to switch to the next one (or skip, or jump to a different location in the list).


This is quite difficult to achieve unless you convert your sketches to draw to offscreen PGraphics.

Or, you could have a look at PraxisLIVE which allows for mixing multiple sketches amongst many other features (nodes use offscreen graphics behind the scenes). Full disclosure, I’m the main author! :wink: Can give you a hand to get started if needed.

1 Like

I would be glad to try it out, but I’d like to understand a few things first: 1) I browsed through the web-site, but could you confirm: PraxisLIVE can run Processing sketches out of the box (would it handle the libraries)? 2) could you point me to the place in the docs, where I can figure out how to transition from one sketch to the other in “Present” mode.

1 Like

They will need some converting because it’s in Java syntax, but that’s quite easy. You can add any Java or Processing library, but which? It needs to be something that can work with offscreen PGraphics, and you’ll have to use the feature that allows you to get access to the underlying Processing object. This needs better documenting at the moment.


public void draw() {
  rect(0, 0, width/2, height/2);
  processing.core.PGraphics pg = find(processing.core.PGraphics.class).get();
  // do something with underlying PGraphics
  // eg. same as first line
  pg.rect(0, 0, pg.width/2, pg.height/2);

Many ways to transition - simplest is a video:xfader node with a sketch to each input. This is itself a simple sketch that you can rewrite. The custom components includes other thing like a video switch and various shader based transitions.

Present mode is fullscreen IIRC? Just set this property on the video:output

EDIT : a video from 2017 that’ll give you some idea of the interface and capabilities


Another option I have came across is a combination of spout and some VJ software like Resolume. Here’s a link to some demo:

1 Like

Hi mezhaka.

Did you ever find a good solution to mixing Processing sketches, or transitioning between sketches live? Please let me know as I am trying to figure out the same thing.

1 Like

Unfortunately, no. Please share your way if you find something plausible.

Why don’t you use different PGraphics in the same sketch ?
I do something similar, I have got a superClass “Visual” and small class with different graphics build on the same structure. I can change tint, size, orientation like any image.


Mind sharing a snippet somewhere?

1 Like
Visual[] visuals = new Visual[2];
class Visual {
    PGraphics pg;
    Visual(int w, int h) {
        pg = createGraphics(w, h, P3D);
    PGraphics getPg() {
        return pg;
    void display(){}//all class of VSpace must be declare in Visual

class VSpace extends Visual {
    VSpace(int w, int h) {
        super(w, h);
void display() {
 		//here the animation code

//create object in setup() or change current sketch playing
visuals[0] = new VSpace(512, 384); //use any kind of visual even like here 2 time the same
visuals[1] = new VSpace(256, 192);
//in main draw()
//here you can use tint(), scale(), ... like any image
image(visuals[0].getPg(), 0, 0, 1024, 768);
image(visuals[1].getPg(), 0, 0, 1024, 768);


Hi matheyen,

So the sketches you want to mix are in Visual[] ?

How do you get those other sketches into Visual[]? are they just in other tabs?

1 Like

It looks like sketches need rewriting to be a Visual subclass, and draw everything using the pg reference rather than directly (eg. pg.rect(100,100,200,200); instead of just rect(100,100,200,200);) This is the bit that PraxisLIVE attempts to shield you from - by delegating everything to a PGraphics under the hood.

It might be possible to replace Visual with a subclass of PApplet and override the primary PGraphics reference. This is likely to have odd side effects though, because it won’t actually be a primary graphics.


Other Visuals like VSpace, VArrow, VTree, … are in other tab

1 Like



How do you wish to control manually?
Keyboard, mouse, programmed sequence (Processing or other software), external event (Serial, network connected to a device)?


Hey everyone.

I discovered a solution that might work for me. I downloaded the Processing Syphon library. And I have a free/demo version of VDMX. You can send your Processing sketch visual out to Syphon, and in VDMX you can use it as an input. They have a mixer template so you can mix to a jpeg or other video while you close one Processing sketch and open another one. This might be easier for me to figure. I need to study up on PGraphics, maybe I can figure out the other method.