We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpPrograms › Kaleidoscope: How would I do this
Page Index Toggle Pages: 1
Kaleidoscope: How would I do this (Read 2312 times)
Kaleidoscope: How would I do this
Nov 21st, 2009, 2:31pm
 
Wanted to know if anyone could point me in the right direction on techniques I could use to achieve this.

I want to create a Kaleidoscope application, idea being that I can take a triangle 'cutout' out of any source image and paste it over and over (mirrored over and over) and rotated around the center point.

I just don't know how to a) cut out a triangular shape out of another image and paste that and b) flip it

Any thoughts?
Re: Kaleidoscope: How would I do this
Reply #1 - Nov 21st, 2009, 5:58pm
 
although it's a little complicated example for your purpose, a sketch and code is
http://www.geocities.jp/classiclll_newweb/Kaleidoscope/applet/index.html
i hope for your hint.
click it to advance a scene.
Re: Kaleidoscope: How would I do this
Reply #2 - Nov 22nd, 2009, 1:17am
 
Cut out: Graphic as an image mask
Flip: Flip Image
Paste: image()

I added some comments to the cut-out code, so I re-paste it there:
Code:
PImage niceImage;
PImage maskedImage;
PGraphics graphicalMask;
int iw, ih;
int dw, dh;

void setup()
{
size(500, 500);
niceImage = loadImage("SomeImage.png");
iw = niceImage.width;
ih = niceImage.height;
dw = width - iw;
dh = height - ih;
graphicalMask = createGraphics(iw, ih, JAVA2D);
}

void draw()
{
background(200);

graphicalMask.beginDraw();
// Erase graphics with black background
graphicalMask.background(0);
// Draw the mask, depending on mouse position
int x = mouseX - dw/2;
int y = mouseY - dh/2;
// Draw in white
graphicalMask.fill(255);
graphicalMask.noStroke();
// An ellipse to see a good part of the image
graphicalMask.ellipse(x, y, 100, 50);
// Draw in gray, resulting in translucent mask
graphicalMask.stroke(128);
graphicalMask.strokeWeight(5);
// Draw a thick cross-wire
graphicalMask.line(0, y, iw, y);
graphicalMask.line(x, 0, x, ih);
graphicalMask.endDraw();

// Copy the original image (kept as reference)
maskedImage = niceImage.get();
// Apply the mask
maskedImage.mask(graphicalMask);
// Display the result
image(maskedImage, dw/2, dh/2);
}

In your case, you just have to draw a triangle().
Re: Kaleidoscope: How would I do this
Reply #3 - Nov 22nd, 2009, 8:05am
 
Thank you all, I will go through it and see what I come up with. I will post my result if I get it working Smiley

Thanks again
Re: Kaleidoscope: How would I do this
Reply #4 - Apr 27th, 2010, 7:13pm
 
I am working on a face tracking programming which distorts only certain regions of the face. I added the above masking into my code so it draws the ellipse mask around the area created by the face tracking but I have been unable to overlay only that "cropped" ellipse anywhere else for example back on the original video or what I'd even like to do is cut the face out with that ellipse then put it on another image source.

any ideas?

thanks.
Page Index Toggle Pages: 1