How to do circle expanding animation with mouse click trigger ??

Programming Questions

yuuuuuuu

How to do circle expanding animation with mouse click trigger ??

in Programming Questions • 2 years ago

I just want to implement a simple animation.
I haven't understood examples shown in Processing web-site, but want to know how to do it.

I want my application to be like this.
---------------------------------------------------
When user does mouse click on my application window, a circle whose center is point of the mouse click is going to
expand its radius gradually, like wave generated by water drop on smooth surface of water.
I can expand its radius while mouse button is being clicked, but I want to continue its expanding even after mouse press is
released.
Could you show me any crews, please ?

Replies(2)

amnon.owed

Re: How to do circle expanding animation with mouse click trigger ??

2 years ago

If you just want one circle you could use a boolean to initially trigger the growing of the radius and a mouseclick to set the x and y position of the circle (and reset it's radius). If you're going after a water drop effect with more circles expanding where the mouse has clicked, I think object-oriented programming is more suitable. Write an ExpandingCircle class that does what you want. Use the mouse to create ExpandingCircle objects where you want.

Code Example:

// Left mouse button creates growing circle with fixed transparency
// Right mouse button creates growing circle with fading transparency (removed when invisible)
// Space bar removes all the circles
ArrayList circles = new ArrayList();
void setup() {
size(500,500);
smooth();
}
void draw() {
background(0);
for (int i=0; i<circles.size(); i++) {
ExpandingCircle ec = (ExpandingCircle) circles.get(i);
ec.update();
ec.display();
if (ec.transparency <= 0) { circles.remove(i); } // remove invisible circles
}
}
class ExpandingCircle {
int x,y;
float radius;
color c;
boolean transparencyOn;
int transparency;
ExpandingCircle(int x, int y, boolean transparencyOn) {
this.x = x;
this.y = y;
this.transparencyOn = transparencyOn;
c = color(random(255),random(255),random(255));
transparency = 255;
}
void update() {
radius++;
if (transparencyOn && radius >= 50 && transparency > 0) { transparency--; }
}
void display() {
noStroke();
fill(c,transparency);
ellipse(x,y,radius,radius);
}
}
void mousePressed() {
if (mouseButton == LEFT) { circles.add(new ExpandingCircle(mouseX,mouseY,false));
} else { circles.add(new ExpandingCircle(mouseX,mouseY,true)); }
}
void keyPressed() {
if (key == ' ') { circles.clear(); }
}

yuuuuuuu

Re: Re: How to do circle expanding animation with mouse click trigger ??

2 years ago

Thanks so much!!

Your code is exactly same as what I want to do.
I am totally a beginner for Processing language. I could learn a lot from your example ranging from
class definition to event handling.

Thanks again for your quick reply.

Top Reply