HTML CANVAS - Animating and Array of values

[redrooster]

Hi,

 

I was hoping someone would be able to help me with the above.

 

I have been trying to figure this one out for quite some time and have hit a wall.

 

I basically have created a function that loops and draws circles to a canvas element that does not allow them to overlap (init() func. in my code). What I would like to do is run that function again, grab new x and y cords and have GSAP animate the circles to these fresh cords (move() func. in my code).

 

Instead of the animation happening the circles simply flash between state 1 & state 2...I have tried all manner of things to get this to work but realise I am missing something fundamental in my understanding of how GSAP plays with canvas here.

 

Any help would be greatly appreciated.

Thanks

 

 

See the Pen OJOWPRj by marklawrencedesign (@marklawrencedesign) on CodePen

[elegantseagulls]

It looks like you are just animating to the same value. If I add a + 400 either the x or y values, it animates the group to that value. The way you have this setup, GSAP isn't recording the initial value: You're setting a new array then telling gsap to animate that new array to that new array's position. You might try a fromTo animation, and set a variable for the initial state and one for the final state.

[redrooster]

Thanks elegantseagulls. I have taken your advice and worked that into the codepen link here. I have the circles animating now. I am missing the logic that I had in my init() function that checks if the circles will overlap here at the moment though. I can most probably get that to work here again, but just feel I am replicating a lot of the code from that init function here again, dont you think? I was hoping to be a bit more clever by reusing the init function like in my first attempt...but I think I am reaching my understanding of JS in general tbh.

 

See the Pen dyZNWLj by marklawrencedesign (@marklawrencedesign) on CodePen

 

Thanks for your input.

[OSUblake]

You can use functions to limit the amount of code you have to re-write. I'll just say that you might be running into a huge logic error here. You're init function places those circles so they don't overlap, but there is no guarantee you'll be able to find a new position for those circles using the same logic. 

[redrooster]

Thanks OSUblake

 

...yes I am seeing that actually. Below is another revised version where I have managed to reuse my function which I was happy with. As you say though, when the code cannot find a suitable x/y position and 'breaks' out I get a console error as I dont have a matching oldX / newX cord for my animation part further down the road.... the example works to a fashion regardless of this error but when I crank up to say 1000 circles it just breaks down

 

Never mind, I was trying to run with an idea I had but I think it has met its natural conclusion...unless anyone can build upon what I have here of course!

 

Thanks guys

 

See the Pen XWzpaqv by marklawrencedesign (@marklawrencedesign) on CodePen

[redrooster]

I added a check to compare the old / new arrays and made them the same length before they go into the GSAP animation. It has made it all a lot more stable. There is a limit to the amount of particles and a balance between the attempts to get a clear position for the next coords for each circle, but I am pretty happy with the result and randomness. 

 

I would be interested to see how someone else with canvas / GSAP know-how would approach something similar so that I could maybe learn how to improve in areas of my approach.

 

Thanks

 

See the Pen ExbZpKo by marklawrencedesign (@marklawrencedesign) on CodePen

[OSUblake]

5 minutes ago, redrooster said:

I would be interested to see how someone else with canvas / GSAP know-how would approach something similar so that I could maybe learn how to improve in areas of my approach.

 

What you're really is asking is how to improve your logic. The only thing that is really canvas related is your draw function and a single line of animation code. 😉

 

But to answer that, I think your you are needlessly running through loops. Like your init function should return an array of the objects, kind of like this.

 

See the Pen abVpjjR by GreenSock (@GreenSock) on CodePen

 

And as for circle packing, here's a nice tutorial, but you just need to be careful as it can be extremely CPU intensive depending on how close they are packed together.

 

 

[OSUblake]

And instead of forcing the array to a new size, like you're doing here...

if(oldCordsArray.length < particleArray.length) {
        particleArray.length = oldCordsArray.length;
    }

 

I would probably split the excess off into another array and then fade those particles out.

 

[redrooster]

Thanks for the examples and video OSUblake - this is really helpful. I appreciate you taking the time to put these together for me.

 

BTW - the circle packing video = mind blown. That is so cool