Animate many objects on rectangle path

[maximaexchen]

Hi there,

 

I just started to get into GreenSock classes.

 

What I want is to do a circular animation of little Circles around a rectanle, which starts with all Circles placed side by side and than moving forward on the path. Endlessly.

To visualize the flow of electricity, which also should change the speed on special events....

 

As I saw on a post I probably should write my own class extending MotionPath class. I tried to go through the code of Circle2D.as... but I finaly have no clue how to manage my own shape.

So I think I didn't get the concept of followers either.

 

Is it possible to manage that with TweenMax and TimelineMax?

Please is there someone of you who can give me a hint how to start.

I watched the TimelineMax Video already.

 

Thanks in advance for your help

kind regards

Marcus

 

By the way - sorry for my bad english.

[GreenSock]

Alright, I whipped together a RectanglePath2D class that should give you what you need (I hope) - it's in the updated downloads on the main site, but I've also attached a simple demo FLA here that shows it in use.

 

Enjoy!

[maximaexchen]

Hey,

I can't believe you did this.

This is really awesome! Thank you so much for your fast help.

I will go through the code of the new Rectangle Class and try to understand what you did.

 

Thanks again and regards from germany

Marcus

[maximaexchen]

Hello, me once again.

 

The animation on a simple rectangle and the evenly-spaced positioning of n-Objects works perfectly.

The next step I tried to figure out myself, is to position the objects on a more complex path.

Animating works, but the evenly-spaced distribution breaks my brain.

 

In Detail:

I have a complex path with line-sections which do not have same length.

My approach:

 

...
path = new Path();
var pointsX:Array = new Array();
var pointsY:Array = new Array();
var pointsArray:Array = new Array();

pointsX = [300,300,150,150,300,300,0,  0 ];
pointsY = [0,  200,200,300,300,400,400,0];

path.moveTo(0,0);

for (var j:int=0;j < pointsX.length;j++) {
path.lineTo(pointsX[j],pointsY[j]);
pointsArray.push( new Point(pointsX[j],pointsY[j]));
}

objectPoint = new Point();

...

override protected function renderAll():void {
while (f) {
       objectPoint = path.getPointAt(f.cachedProgress);				
       f.target.x = objectPoint.x;
f.target.y = objectPoint.y;
f = f.cachedNext;
}
}

 

The problem is, that the Objects are placed all over the path, but not evenly spaced.

e.g if I have 8 segments there are 8 Objects on each segment. So logical the Tweens have different speeds on each segment depending on what length they have.

 

Could I reach my goal with this approach? I didn’t get to translate the if-Statements concept of RectanglePath2D.as into my class.

I must admit that I my knowledge of geometry is very bad. School-time is lightyears away.

And my search on google for a mathematical approach didn’t return useful results.

 

I hope I described the problem understandable and someone could give me a hint.

 

Thanks in advance

Marcus

[maximaexchen]

Hi all,

 

so I finally found a solution, which is not the best/clearest but works for me.

I devide long paths to even segments which are as long as the smallest one of the path...

 

e.g. if the smallest path is 50 (form point1 to point2) so I construct a long path by points which have a length along one axis of 3x50 or 4x50.

So each segment has the same amount of Objects and the same speed of the tween.

 

I tried to find out a more dynamic solution which also works with centerOrigin and digonal paths, but after hours of brainwar I gave up.

 

An idea was something like this:

 

SegmentPercentage = totalPathLength/SegmentLength

ObjectsPerSegment = NumberOfObjects/SegmentPercentage

 

So my thought was to get a "weighted" f.cachedProgress for each segment.

 

I don't know if this could really work... somehow... but I didn't get it together anyway.

 

 

Marcus

[GreenSock]

Oh, I think I see - you actually wanted to be able to tween objects along a multi-point path, not necessarily a Rectangle, right? So, for example, you could just define multiple Points and it would draw the line from one to the next and then you'd animate your object along that path?

[maximaexchen]

Hi Jack,

 

yes this is absolutely that what I try to do.

 

I attach 2 Pitures:

 

First Points with even length of each segment:

pointsX = [150,300,300,150,150,300,300,150,0, 0, 0, 0];

pointsY = [0, 0, 150,150,300,300,450,450,450,300,150,0];

 

 

Varible Segments lengths:

pointsX = [400,400,350,350,40,40, 0, 0];

pointsY = [0, 150,150,75, 75,400,400,0];

 

 

Regards

 

On Picture 2 you can see what it should not look like.

[GreenSock]

Stand by. I'll have a solution for you shortly...

[GreenSock]

Alright, check out the attached demo. I created a LinePath2D class that allows you to define as many Points as you want and then you can place followers on that path. It's easy to keep them spaced evenly. There's a snap() method too that will automatically find the closest position on the path to any object. I added the ability to autoRotate objects as well so that they stay oriented to the path in case you want that behavior.

 

This is considered beta at this point and I plan to release it publicly soon, so I'd love to hear what you think. Suggestions are welcome.

[maximaexchen]

Hey Jack!

 

This is really awesome!!! I feel "Really Green" now!

 

The adding and removing Points functionality is great!

Tweening them too would be a cherry on the cake.

And things like dynamicly adding/removing more objects... but I think this goes too far.

 

I played around a bit. And I will do more the next days.

When I find some issues, I will post them.

 

So a quick view brought up a noob question.

What is the best way to Tween the followers eg. changeColor or scale them?

Do something like this?

 

for (var i:int = 0; i < path.followers.length; i++) {
TweenMax.to(path.followers[i].target, 3, {colorMatrixFilter:{colorize:0x00FF00}});
}

 

 

Finally, I can't tell you how happy I am.

Thanks for your great support and this extraordinary sytem!

Marcus

[GreenSock]

Tweening them too would be a cherry on the cake.

And things like dynamiclly adding/removing more objects... but I think this goes too far.

 

I couldn't tell if you were joking or not - you absolutely CAN tween them and dynamically add/remove objects/followers, points, etc. It should be an extremely flexible, dynamic tool but if there's some functionality that you wish was in there, let me know.

 

What is the best way to Tween the followers eg. changeColor or scale them?

Do something like this?

 

for (var i:int = 0; i  TweenMax.to(path.followers[i].target, 3, {colorMatrixFilter:{colorize:0x00FF00}});
}

 

Sure, that'd work. The follower and path stuff is just for positioning, but you're free to do whatever other tweens that you want to the elements while they're tweening position (or not). For performance reasons, I'd recommend that if you're going to loop through the followers, you get the array first and store it in a variable, then loop through it. Otherwise it has to rebuild that array each time you use the getter. And I'd use the targets array directly instead of the followers. Kinda like:

 

var targets:Array = path.targets;
for (var i:int = 0; i  TweenMax.to(targets[i], 3, {colorMatrixFilter:{colorize:0x00FF00}});
}

 

Finally, I can't tell you how happy I am.

Thanks for your great support and this extraordinary sytem!

Marcus

 

Glad to help. I've been meaning to build something like this for a while anyway, as I think it'd help a lot of developers out there, so this gave me the excuse to knock it out. Enjoy!

[maximaexchen]

ok. Thanks for the hints.

 

It was no joke.

I just was blind. Found it out now.

I am still at the beginning with the GreenSock stuff.

So there will be a lot more to explore.

 

Thanks a lot.

And I hope others enjoy this new feature as I do.

[maximaexchen]

Sorry, one thing.

 

If I add more Objects after a delay with

 

for (var j:int = 0; j < 20; j++) {
path.addFollower(createSquare(10, 0xFF00FF), j / 20, true);
}

 

they are placed on the path "onto" the first added Objects.

How could I rearrange the spacing of old and new added Objects

so that they are then again spaced equally?

I couldn't find out.

 

Regards

[GreenSock]

Okay, let me explain one basic concept that may help:

 

A PathFollower has one very important property that controls its placement on the path: "progress". It is always between 0 and 1 where 0 is at the beginning of the path, 0.5 is halfway through, and 1 is at the end. So you can tween that progress property from 0 to 1 and you'll see the object move from the start of the path to the end. Like:

 

var follower:PathFollower = path.addFollower(mc, 0);

TweenLite.to(follower, 2, {progress:1});

 

That will tween mc from the start of the path to the end over the course of 2 seconds.

 

But if you have 100 followers and you want to tween them all together, it would be a pain to have to set up 100 tweens, so I built a "progress" property into the path itself so that when you tween the PATH's progress property, it affects ALL of the followers. This improves performance too.

 

Anyway, if you want to add more followers later and space the existing ones and the new ones out so that they're all equally spaced apart, you're in luck. I just updated the LinePath2D class and added a distribute() method that makes it super easy. All you'd need to do is add the new followers and then call distribute(). Or put all your objects into an array and pass that into the distribute() method. Check out the documentation for details.

 

Get the update on the web site at http://www.tweenlite.com.