# Transition between sketches during a live performance

**URL:** https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131
**Category:** Processing
**Created:** [June 17, 2019, 3:13pm UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131 "2019-06-17T15:13:25Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![mezhaka](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mezhaka/32/5592_2.png) [@mezhaka](https://discourse.processing.org/u/mezhaka)
#### Post date: [June 17, 2019, 3:13pm UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/1 "2019-06-17T15:13:25Z")

</div>

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).

---

<div class="post-metadata">

### Author: ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [June 17, 2019, 3:51pm UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/2 "2019-06-17T15:51:41Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![mezhaka](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mezhaka/32/5592_2.png) [@mezhaka](https://discourse.processing.org/u/mezhaka)
#### Post date: [June 17, 2019, 6:38pm UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/3 "2019-06-17T18:38:43Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [June 17, 2019, 8:40pm UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/4 "2019-06-17T20:40:38Z")

</div>

> [@mezhaka](#):
>
> PraxisLIVE can run Processing sketches out of the box (would it handle the libraries)?

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.

Basically

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

```

> [@mezhaka](#):
>
> 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.

Many ways to transition - simplest is a `video:xfader` node with a sketch to each input. [Video components - PraxisLIVE v5 documentation](https://docs.praxislive.org/components-video/#videoxfader) 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` [Video components - PraxisLIVE v5 documentation](https://docs.praxislive.org/components-video/#videooutput)

EDIT : a video from 2017 that’ll give you some idea of the interface and capabilities [https://youtu.be/3cQ-8wZwsmY?t=483](https://youtu.be/3cQ-8wZwsmY?t=483)

---

<div class="post-metadata">

### Author: ![mezhaka](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mezhaka/32/5592_2.png) [@mezhaka](https://discourse.processing.org/u/mezhaka)
#### Post date: [June 21, 2019, 8:24am UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/5 "2019-06-21T08:24:50Z")

</div>

Another option I have came across is a combination of spout and some VJ software like Resolume. Here’s a link to some demo: [https://www.youtube.com/watch?v=1OId5XCWD7A](https://www.youtube.com/watch?v=1OId5XCWD7A)

---

<div class="post-metadata">

### Author: ![nicnut](https://avatars.discourse-cdn.com/v4/letter/n/7feea3/32.png) [@nicnut](https://discourse.processing.org/u/nicnut)
#### Post date: [March 3, 2020, 5:55am UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/6 "2020-03-03T05:55:54Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![mezhaka](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mezhaka/32/5592_2.png) [@mezhaka](https://discourse.processing.org/u/mezhaka)
#### Post date: [March 3, 2020, 7:19am UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/7 "2020-03-03T07:19:08Z")

</div>

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

---

<div class="post-metadata">

### Author: ![matheplica](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/matheplica/32/21035_2.png) [@matheplica](https://discourse.processing.org/u/matheplica)
#### Post date: [March 3, 2020, 10:22am UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/8 "2020-03-03T10:22:58Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![mezhaka](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mezhaka/32/5592_2.png) [@mezhaka](https://discourse.processing.org/u/mezhaka)
#### Post date: [March 3, 2020, 11:01am UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/9 "2020-03-03T11:01:05Z")

</div>

Mind sharing a snippet somewhere?

---

<div class="post-metadata">

### Author: ![matheplica](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/matheplica/32/21035_2.png) [@matheplica](https://discourse.processing.org/u/matheplica)
#### Post date: [March 3, 2020, 3:10pm UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/10 "2020-03-03T15:10:09Z")

</div>

```auto
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() {
            pg.beginDraw();
            pg.pushMatrix();
 		//here the animation code
            pg.popMatrix();
            pg.endDraw();
    }
}

//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()
visuals[0].display();
visuals[1].display();
//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);

```

---

<div class="post-metadata">

### Author: ![nicnut](https://avatars.discourse-cdn.com/v4/letter/n/7feea3/32.png) [@nicnut](https://discourse.processing.org/u/nicnut)
#### Post date: [March 3, 2020, 6:09pm UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/11 "2020-03-03T18:09:08Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [March 3, 2020, 6:39pm UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/12 "2020-03-03T18:39:37Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![matheplica](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/matheplica/32/21035_2.png) [@matheplica](https://discourse.processing.org/u/matheplica)
#### Post date: [March 4, 2020, 9:36am UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/13 "2020-03-04T09:36:09Z")

</div>

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

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [March 4, 2020, 4:09pm UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/14 "2020-03-04T16:09:53Z")

</div>

Hello,

> [@mezhaka](#):
>
> 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).

Interested.

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

---

<div class="post-metadata">

### Author: ![nicnut](https://avatars.discourse-cdn.com/v4/letter/n/7feea3/32.png) [@nicnut](https://discourse.processing.org/u/nicnut)
#### Post date: [March 9, 2020, 8:13pm UTC](https://discourse.processing.org/t/transition-between-sketches-during-a-live-performance/12131/15 "2020-03-09T20:13:54Z")

</div>

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.
