Masks and fading trails
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!
- 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;
- }
1
