Split Screen in Two or More Parts

Programming Questions

stavrosdee

Split Screen in Two or More Parts

in Programming Questions • 2 years ago

Hello, I checked the forums couldn't find what I was looking for.

How is it possible to split a screen that displays animation/moving images/videos into three different vertical banners; lets say there is a ball moving, how can you make these banners have direct relation with each other? Have a look at the following pics - the first is the normal animation sketch, and the second is what I am looking for.

I know this process is fairly easy with other visual programming languages, but I can't find any clear method to do this in Processing.

Thanks.

Stav.

Replies(3)

amnon.owed

Re: Split Screen in Two or More Parts

2 years ago

Draw to a PGraphics, then get() different parts of it. In the example below you can set the number of parts beforehand. Press the mouse to see the original PGraphics.

Code Example

PGraphics pg;
int numParts = 3;
void setup() {
size(1280, 720);
createPG();
}
void draw() {
background(0);
updatePG();
if (mousePressed) {
image(pg, 0, 0);
} else {
displayParts(pg, numParts);
}
}
void displayParts(PGraphics pg, int num) {
int totalSpace = width - pg.width;
int space = totalSpace / (num-1);
int getWidth = pg.width/num;
for (int i=0; i<num; i++) {
PImage part = pg.get(i*getWidth, 0, getWidth, pg.height);
image(part, i*(getWidth+space), 0);
}
}
void createPG() {
pg = createGraphics(width-80, height, JAVA2D);
pg.beginDraw();
pg.smooth();
pg.noStroke();
pg.background(255);
pg.endDraw();
}
void updatePG() {
pg.beginDraw();
pg.fill(255, 5);
pg.rect(0, 0, pg.width, pg.height);
pg.translate(0, pg.height/2);
for (int i=0; i<10; i++) {
pg.fill(i*25, 255-i*25, i*20);
pg.ellipse((i*100+frameCount) % pg.width, sin(i + frameCount * 0.01) * 180, 100, 100);
}
pg.endDraw();
}

stavrosdee

Re: Split Screen in Two or More Parts

2 years ago

Hey, thanks for the answer amnon.owed , it really helped me.

However, Im trying to set every offscreen object to a keystone mesh. I did the following, but only one offscreen object is affected and shown in the final window.

Anyone have a clue why is that??

PGraphics pg;
int numParts = 3;
import deadpixel.keystone.*;
Keystone ks1;
Keystone ks2;
Keystone ks3;
CornerPinSurface surface1;
CornerPinSurface surface2;
CornerPinSurface surface3;
PGraphics offscreen1;
PGraphics offscreen2;
PGraphics offscreen3;
void setup() {
size(1280, 720,P3D);
ks1 = new Keystone(this);
surface1 = ks1.createCornerPinSurface(400, height, 20);
ks2 = new Keystone(this);
surface2 = ks2.createCornerPinSurface(400, height, 20);
ks3 = new Keystone(this);
surface3 = ks3.createCornerPinSurface(400, height, 20);
offscreen1 = createGraphics(400,height,P2D);
offscreen2 = createGraphics(400,height,P2D);
offscreen3 = createGraphics(400,height,P2D);
createPG();
}
void draw() {
background(0);
updatePG();
displayParts(pg, numParts);
}
void displayParts(PGraphics pg, int num) {
PVector surfaceMouse1 = surface1.getTransformedMouse();
PVector surfaceMouse2 = surface2.getTransformedMouse();
PVector surfaceMouse3 = surface3.getTransformedMouse();
PImage part1 = pg.get(0, 0, 300, pg.height);
PImage part2 = pg.get(300, 0, 300, pg.height);
PImage part3 = pg.get(600, 0, 300, pg.height);
offscreen1.beginDraw();
offscreen1.image(part1,0,0);
offscreen1.endDraw();
surface1.render(offscreen1);
offscreen2.beginDraw();
offscreen2.image(part2, 400, 0);
offscreen2.endDraw();
surface2.render(offscreen2);
offscreen3.beginDraw();
offscreen3.image(part3, 800, 0);
offscreen3.endDraw();
surface3.render(offscreen3);
}
void createPG() {
pg = createGraphics(width-80, height, JAVA2D);
pg.beginDraw();
pg.smooth();
pg.noStroke();
pg.background(255);
pg.endDraw();
}
void updatePG() {
pg.beginDraw();
pg.fill(255, 5);
pg.rect(0, 0, pg.width, pg.height);
pg.translate(0, pg.height/2);
for (int i=0; i<10; i++) {
pg.fill(i*25, 255-i*25, i*20);
pg.ellipse((i*100+frameCount) % pg.width, sin(i + frameCount * 0.01) * 180, 100, 100);
}
pg.endDraw();
}
void keyPressed() {
switch(key) {
case 'c':
ks1.toggleCalibration();
break;
case 'l':
ks2.toggleCalibration();
break;
case 's':
ks3.toggleCalibration();
break;
}
}

stavrosdee

Re: Split Screen in Two or More Parts

2 years ago

Ok I fixed that. Now the code takes the animation and puts it into an offscreen object that is then split into three different windows that you can keystone.

The fix of the code is this:

It needs just one Keystone object (ks)

Place the following function inside setup(),

createPG();

And inside displayParts() function, change

from

offscreen2.image(part2, 400, 0);

offscreen3.image(part3, 800, 0);

offscreen2.image(part2, 0, 0);

offscreen3.image(part3, 0, 0);

And it will work.

Thanks!

Top Reply

Statistics

3 Replies
1095 Views
0 Followers

Actions

Permalink