Please bear with me, I'm new to programming.

I want to trigger a one second animation once the mouseX is greater than 100.

I've added a "for" loop to generate the animation, but I see that you cannot see the transition in a for loop. I can only see the start and end.

How can I animate the ball (code below) from ellipse(20,20,20,20) to ellipse(400,400,400,400) and be able to see the transition?

Thanks so much!!!

1. void setup(){
2.  
3.   size(400,400);
4.   smooth();
5.  
6. }
7. void draw(){
8.  
9.   background(0);
10.  
11.   if (mouseX > 100) {                //Once mouse gets to 100, begin animation.
12.    
13.   for (int i=20; i<400; i++){        //Animate ball
14.   ellipse(i,i,i,i);
15.   }
16.    
17.   } else {
18.    
19.   ellipse(20,20,20,20);
20. }
21. }