Morphius uses the concepts from the Drawing a Bezier Tutorial to animate various points of a path. Morphius allows the user to create a combination of template path along with Bezier paths. The template has placeholders which are filled by moving along various user-defined Bezier paths.
Please note that the final example is rather weak. I plan on using a better example in the future as I have time. It is important to note that a path of any complexity can be defined in the template, not just a single segment as used in the example.
constructor - new Morphius(template, paths);
This method is used to create a new Morphius object. The parameters passed to the constructor method define a template which is modified over time by paths passed in the paths parameter.
template is a string which defines a template used to create a <path> element controlled by the paths defined in the paths parameter. The string contains a mixture of path data and place holders. Each place holder is designated with a pound sign (#). Each pound sign will be replaced with the value calculated along each path passed in the paths parameter.
paths is an array of paths. Currently, the only path type that is implemented is the Bezier_Curve (to be discussed in a future code talk section). There exists one path for each place holder in the template parameter.
Once a new Morphius object has been created, you must call create() to define the necessary SVG elements to display the curve controlled by the Morphius object.
parent is a node in the SVG DOM which will be used as the parent of the path created by the Morphius object.
advance() is used to move to the next point along each of the controlling paths. The new positions of each of the paths is applied to the curve controlled by the Morphius object. Currently, advance cycles from 0 to 1 and then back to 0. This behaviour will most likely change in the future to be more flexible.
show_paths() iterates through each path in the paths property and sends each one a show message. This is used to show the controlling paths on screen.
hide_paths() iterates through each path in the paths property and sends each one a hide message. This is used to hide the paths which were made visible with show_paths().
toString() iterates through each path in the paths property and sends each one a position_at message. After each controlling path's position is updated, the new positions are applied to the path controlled by the Morphius object.
prefix is an array of strings. When a Morphius object is created, the template is divided into separate strings using the pound sign as a delimiter. Each of these strings is stored in the prefix array.
paths is an array of paths. Currently only Bezier_Curves are defined. Each path in the array is used to control various points in the template. There is one path for each pound sign in the template.
shape is a reference to a Node_Builder object which is used to create and manipulate the curve which is created by applying the controlling paths to the template.
min is the lowest or first position along each controlling path. This defaults to 0.
max is the highest or last position along each controlling path. This defaults to 1.
delta is the step that will be applied each call to advance() method. This defaults to 0.1.
position is the last position that has been applied to the curve manipulated by the Morphius object.
In order to use the Morphius object in your SVG file, you will need to insert a <script> element inside of your <svg> element. Morphius directly uses Node_Builder, and needs Scheduler and Bezier_Curve to be useful. You will need to include these objects in script statements also. As an example, if Morphius.js is in the same directory as your SVG document, then you would include the Morphius object with the following text:
<script xlink:href="Morphius.js" />
In order to create a Morphius object, you need to define two parameters: a template and an array of paths. A template is simply the text you would normally use in a <path> element with each point that is controlled by a path replaced with a pound sign. For example, if you have the following path data:
M10,10 C50,10 50,20 50,50
and you want to define a path for the first point (10,10 in this example), then you would create a template as follows:
M# C50,10 50,20 50,50
Next, you need to define a path for each pound sign in the template. Currently, paths are defined using Bezier_Curves. When creating a Bezier_Curve, you pass the new object 4 points, one for the four control points for a single segment of a Bezier curve. For example, if I want to create a path equivalent to this SVG definition:
M10,10 10,10 10,100 10,100
I would use the following code:
new Bezier_Curve(10,10, 10,10, 10,100, 10,100);
The second parameter of the Morphius contructor is an array. This allows you to define multiple paths to control multiple points in your template. Be sure to list the paths in the same order as the pound signs they control. The following example controls the first and last points of a single segment of a path:
morphius = new Morphius( "M# C50,10 50,20 #", [ new Bezier_Curve(10,10, 10,50, 50,50, 100,50), new Bezier_Curve(50,50, 50,100, 0,100, 0,50) ] );
The first Bezier_Curve object defines a path for the M# point to follow. The second Bezier_Curve object defines a path for the final # point to follow.
To see the curves which are defined by the controlling Bezier_Curve objects, use the following code. This assumes that a Morphius object has been assigned to the morphius variable:
morphius.show_paths();
To hide the controlling Bezier_Curve objects shown with show_paths(), use the following code. This assumes that a Morphius object has been assigned to the morphius variable:
morphius.hide_paths();
To move to the next point along each controlling Bezier_Curve, call advance:
morphius.advance();
The following example uses Scheduler, Node_Builder and Morphius to animate a single segment of a <path> element. This animation moves the first, second, and fourth control points with three Bezier_Curve objects. To see these paths, click show. Hide will hide the paths.
Right-click (or control-click) and View Source to see the complete details of this SVG file.