Masks and fading trails

Programming Questions

breegeek

in Programming Questions • 1 year ago

Hi all,

I'm helping a friend with a project. Right now, she has an image that is masked and made visible by the mouse position.

What we want is a fading trail (of masks?). I pulled in some code kindly put on openprocessing to create a trail of ellipses, but am having trouble figuring out how to make the basic logic work.

Here is the code, if you think you could help, it will be greatly and eternally appreciated!!!

Cheers!

Copy code

PImage bgImage;
PImage maskImage;
PGraphics graphicalMask;
int iw, ih;
int dw, dh;
int angle = 0;
//here we are creating an array of x and y positions.
float [] x = new float [50]; //create an empty array of 50 x positions
float [] y = new float [50]; // do the same for y
//thanks to Emily Burgess for trail help
void setup()
{
size(500, 500);
bgImage = loadImage("paris_nightstreet.jpg");
iw = bgImage.width;
ih = bgImage.height;
// dw = width - iw;
// dh = height - ih;
graphicalMask = createGraphics(iw, ih, JAVA2D);
//ok, here you are creating a loop that says to set the *initial* value of
// each item in your array to 0. It's basically initializing the array (I think)
for (int i = 0; i<50; i++){ //here, i is an iterator we create temporarily
x[i] = 0;
y[i] = 0;
}
//end for loop
}
void draw()
{
background(0,0,0);
graphicalMask.beginDraw();
// Erase graphics
graphicalMask.background(0);
// Draw the mask
angle += 10;
float val = cos(radians(angle)) * 6.0;
for (int a = 0; a < 360; a += 50) {
float xoff = cos(radians(a)) * val;
float yoff = sin(radians(a)) * val;
graphicalMask.fill(255);
graphicalMask.noStroke();
graphicalMask.ellipse(mouseX + xoff, mouseY + yoff, 100,100);
}
graphicalMask.endDraw();
// Copy the original image (kept as reference)
maskImage = bgImage.get();
// Apply the mask
maskImage.mask(graphicalMask);
// Display the result
image(maskImage, dw/2, dh/2);
/////Ok, here is another for-loop. What we're doing is cycling through the array
// and setting the value of each item in the array to the one before it
for (int i=0; i<49; i++) {
x[i] = x [i + 1];
y[i] = y [i + 1];
fill (i*2); //set the fill color by i
ellipse (x[i], y[i], i, i);
}
//so each time the draw loop happens, we start this loop and go and reset the x and y values to the previous value
x[49] = mouseX;
y[49] = mouseY;
}

Replies(2)

kylestetz

you're pretty close. you've already got the logic for the diminishing ellipses working, so (if I understand you correctly) what you want to do is draw the trail of ellipses into the image mask with a fading color value. Try adding in this for loop at line 46:

graphicalMask.noStroke();
for(int i = 0; i < x.length; i++){
  graphicalMask.fill(i * (255 / x.length) );
  graphicalMask.ellipse(x[i], y[i], i*3, i*3);
}
graphicalMask.endDraw();

This draws your collection of ellipses with receding transparency.

breegeek

Re: Masks and fading trails

1 year ago

Thanks, we'll give this a try!

Cheers!

Top Reply