Texture and Begin/End Shape to an image?

Programming Questions

Mike Alpo..

Texture and Begin/End Shape to an image?

in Programming Questions • 2 years ago

For an AR application I want to display a background image on a live video. I can do it using Blend(...LIGHTEST) except my image needs to be warped to an arbitrary quadrilateral shape first.

I know that it is possible to use texture and Begin/end shape to warp the image onto an arbitrary quadrilateral (given the appropriate vertices) but it seems that this can only be done by writing to the display and not another image. If it could be applied to another image, then I could just blend this warped image to the display.

So in summary, I either need to use Blend to resize something other than a rectangular region or be able to warp using texture to an image not the display.

As a last resort, I guess I could manually warp and blend the individual pixels to the display - but was wanting to avoid that.

Is my question clear - or should I provide some source code examples?

Any ideas?

Replies(2)

tfguy44

Re: Texture and Begin/End Shape to an image?

2 years ago

Should be possible. Just render your textured quadrilateral to an off-screen PGraphics object, then blend an image of it with the main display. Here's an example sketch that renders three totally different off-screen PGraphics objects, without displaying any of them unless you mouseover a colored square:

/// "ThreeViews" by TfGuy44 (TfGuy44@gmail.com)
PGraphics BC, GC, RC;
float rot = 0.0;
void setup(){
size( 400, 200, P2D);
BC = createGraphics(200, 200, P3D);
RC = createGraphics(200, 200, P3D);
GC = createGraphics(200, 200, P3D);
}
void draw(){
rot=(rot+0.01)%360;
// Render the "main" scene.
background(0);
noStroke();
fill(color(255,0,0));
rect(10,40,20,20);
fill(color(0,0,255));
rect(70,70,20,20);
fill(color(0,255,0));
rect(70,10,20,20);
// Render to things off-screen!
RC.beginDraw();
RC.background(color(128,0,0));
RC.fill(color(255,0,0));
RC.lights();
RC.translate(100,100,0);
RC.rotateX(rot);
RC.rotateY(2*rot);
RC.box(20);
RC.endDraw();
// And the green one...
GC.beginDraw();
GC.background(color(0,128,0));
GC.fill(color(0,255,0));
GC.lights();
GC.translate(100,100,0);
GC.rotateX(rot);
GC.rotateY(2*rot);
GC.box(50);
GC.endDraw();
// And the blue one...
BC.beginDraw();
BC.background(color(0,0,128));
BC.fill(color(0,0,255));
BC.lights();
BC.translate(100,100,0);
BC.rotateX(rot);
BC.rotateY(2*rot);
BC.box(80);
BC.endDraw();
// Display one of those buffers?
if( get( mouseX, mouseY ) == color(255,0,0) ){
image( RC.get(), 200, 0);
}
if( get( mouseX, mouseY ) == color(0,255,0) ){
image( GC.get(), 200, 0);
}
if( get( mouseX, mouseY ) == color(0,0,255) ){
image( BC.get(), 200, 0);
}
}

Mike Alpo..

Re: Re: Texture and Begin/End Shape to an image?

2 years ago

This certainly looks like it will solve my problem. I had not seen an example that renders to offscreen PGgraphics objects.
By extension it should work with begin/end Shape as well.
I will give it a try. Thanks.

Top Reply