Hello, I’ve developed a system for live visuals that involves rendering graphics in Processing, and I’m trying to add functionality to fade between two different displays: one that is currently being displayed on a projection, and a seocnd that is sort of a staging ground where I can preview visuals before comitting them to the room.
The method I’ve been trying to use is based on the MultipleWindows example included in Processing (Examples->Demos->Tests->MultipleWindows) but I’ve been struggling to make sense of it such that I can use it for my own purposes.
This is the closest approximation of what I want to be able to do that I’ve managed to make:
Child child1;
Child child2;
PGraphics canvas1;
PGraphics canvas2;
float tint1;
float tint2;
void setup() {
size(400, 400);
canvas1 = createGraphics(400, 400);
canvas2 = createGraphics(400, 400);
child1 = new Child("Child1",canvas1);
child2 = new Child("Child2",canvas2);
}
void draw() {
//draw to two different PGraphics objects:
canvas1.beginDraw();
canvas1.noStroke();
canvas1.background(0);
canvas1.fill(255);
canvas1.ellipse(canvas1.width/2, canvas1.height/2, 60, 60);
canvas1.endDraw();
canvas2.beginDraw();
canvas2.noStroke();
canvas2.background(255);
canvas2.fill(0);
canvas2.ellipse(canvas1.width/2, canvas1.height/2, 60, 60);
canvas2.endDraw();
//fade between the output of the two PGraphics objects:
tint1 = map(mouseX, 0, width, 0, 255);
tint2 = map(mouseX, 0, width, 255, 0);
tint(255, tint1);
image(canvas1, 0, 0);
tint(255, tint2);
image(canvas2, 0, 0);
}
//display the PGraphics in separate windows:
class Child extends PApplet {
private PGraphics canvas;
private String name;
public Child(String name, PGraphics canvas) {
super();
this.canvas = canvas;
this.name = name;
PApplet.runSketch(new String[]{this.name}, this);
}
public void settings(){
size(400,400);
}
public void setup(){
surface.setTitle(this.name);
}
public void draw(){
image(this.canvas, 0, 0);
}
}
In this example, I’m drawing to two different PGraphics instances simultaneously, and fading between them in a third window. This works okay but is obviously very clunky and poorly organised.
What I would like to be able to do is something like the following, where I can dynamically switch between which PGraphics context I am drawing specific assets to, but I think don’t quite understand how exactly PGraphics works and is intended to be used:
Child child1;
Child child2;
PGraphics canvas1;
PGraphics canvas2;
float tint1;
float tint2;
Tester tester;
void setup() {
size(400, 400);
canvas1 = createGraphics(400, 400);
canvas2 = createGraphics(400, 400);
child1 = new Child("Child1",canvas1);
child2 = new Child("Child2",canvas2);
tester = new Tester();
}
void draw() {
tint1 = map(mouseX, 0, width, 0, 255);
tint2 = map(mouseX, 0, width, 255, 0);
canvas1.beginDraw();
canvas1.background(0);
tester.display(canvas1);
canvas1.endDraw();
canvas2.beginDraw();
canvas2.noStroke();
canvas2.background(255);
canvas2.fill(0);
canvas2.ellipse(canvas1.width/2, canvas1.height/2, 60, 60);
canvas2.endDraw();
tint(255, tint1);
image(canvas1, 0, 0);
tint(255, tint2);
image(canvas2, 0, 0);
}
class Child extends PApplet {
private PGraphics canvas;
private String name;
public Child(String name, PGraphics canvas) {
super();
this.canvas = canvas;
this.name = name;
PApplet.runSketch(new String[]{this.name}, this);
}
public void settings(){
size(400,400);
}
public void setup(){
surface.setTitle(this.name);
}
public void draw(){
image(this.canvas, 0, 0);
}
}
class Tester{
Tester(){
}
void display(PGraphics pg){
pg.fill(255);
pg.ellipse(mouseX,mouseY,70,70);
}
}
