CODEWITHSUNDEEP
actionscript-3animationvisualizationprocessingbezier
Edan
Edan

Reputation: 603

Animate camera along multiple bezier paths in AS3 / Processing / D3?

I have a network graph visualization generated using Gephi containing many nodes and edges. I need to produce an animation of a camera (or moving movieclip) to "flythrough" the network along the path of the bezier curves, visiting each (not necessarily every) node at random. I've made a quick animation of what this would look like.

How can I achieve this programmatically through AS3 or Processing or using mbostock D3 javascript library on github?

My attempt in AS3 so far has been to convert an SVG produced by gephi into AS3 code using Miller H. Borges Medeiros' tool then try to adapt a bezier tweening library such as Zeh Fernando's example but I'm having difficulty.

Medeiros' converter is splitting quadratic beziers into 4 separate quadratic beziers, and I'm not sure how to transform flash's curveTo Method into an array of bezier points as in Fernando's code.

Then there is the problem of animating the camera through only those nodes which are connected to eachother.

Any ideas? Thank you for your help with this!!..

Upvotes: 1

Views: 955

Answers (1)

George Profenza
George Profenza

Reputation: 51837

I haven't used Gephi before, but I did answer a similar question before. The task was to animate objects on paths exported from Illustrator. My solution was to use FXG and the LibSpark as3 FXGParser and costumize a class of the library to export path coordinates as TweenLite tweens.

This can apply/be adapted to your example, but probably with using the SvgParser:

svn export http://www.libspark.org/svn/as3/SvgParser

I prefer TweenLite as it's more up to date (Tweener isn't being developed anymore). Still if you prefer Tweener, the same principle apply as both tweening libraries use quadratic bezier curves for path animation. You can find out more about Tweener path animation here. If it helps, wonderfl has another example.

As long as you've got the curve coordinates (you mentioned that you can draw using curveTo), you can also tween on those curves.

Upvotes: 1

Related Questions