Creating holes in the foreground to see through to the background
in
Programming Questions
•
2 years ago
I'm working on a project in which my ultimate goal is to use spotlights to make text appear on the screen. In evaluating what I do and don't know about processing, I've decided the best way might be to use circles (as the spotlights) that open a hole in the foreground so that the user can see through to the background, and the background would therefore have the text displayed, and the text would only be visible within the circle. I've created the circles, but I'm not quite sure how to layer it, outside of creating a second canvas, and I'm not sure how to setup the circles so that they make the foreground within their diameter transparent. Here's the code I'm working with so far:
ArrayList <Lighting> works = new ArrayList <Lighting> ();
int spotlights = 10;
float maxSpeed = 1.5;
int circleRadius = 100;
void setup () {
size(900,600);
noStroke();
smooth();
for (int i=0; i<spotlights; i++) {
works.add(new Lighting(random(circleRadius,width-circleRadius),random(circleRadius,height-circleRadius),circleRadius));
}
}
void draw() {
background(0);
for (Lighting w : works) {
w.update();
w.display();
}
}
class Lighting {
float x,y,speedX,speedY;
int radius;
Lighting (float tempX, float tempY, int tempRadius) {
x = tempX;
y = tempY;
radius = tempRadius;
while (abs(speedX) < 0.25) {
speedX = random(-maxSpeed,maxSpeed);
}
while (abs(speedY) < 0.25) {
speedY = random(-maxSpeed,maxSpeed);
}
}
void update () {
if (dist(x,y,mouseX,mouseY) > radius/2) {
x += speedX;
y += speedY;
}
if (x < radius/2 || x > width-radius/2) { speedX = -speedX; }
if (y < radius/2 || y > height-radius/2) { speedY = -speedY; }
}
void display() {
fill(255,50);
ellipse(x,y,radius,radius);
}
}
void mousePressed() {
works.add(new Lighting(mouseX,mouseY,circleRadius));
}
1