Difference between revisions of "Doc:Following a Spline"

From Synfig Studio :: Documentation
Jump to: navigation, search
m (started with a copy of "Following a BLine (the old way)")
m (Added reference to useful forum discussion)
 
(39 intermediate revisions by 13 users not shown)
Line 1: Line 1:
−
<!--Categories-->
+
<!-- Page info -->
−
[[Category:Tutorials]]
+
{{Title|Following a Spline}}
−
 
+
{{Category|Tutorials}}
 +
{{Category|Tutorials Advanced}}
 +
{{NewTerminology}}
 +
<!-- Page info end -->
 +
:Note: There is also a slightly out-of-date tutorial on this topic at [[Tracking Curves]].  It contains some info, particularly about link/export, '''which hasn't yet been added to this new tutorial'''.  There is also another [[Following a BLine (the very old way)|very out-of-date tutorial]] for synfig 0.61.08.
 
== Introduction ==
 
== Introduction ==
  
−
This is only a rough draft.  The content should be OK, but it needs tidying up and could really benefit from some screen shots.  If you follow the tutorial, please consider taking some shots as you do so and uploading them here...
+
This tutorial will demonstrate how to make an object follow the path of an arbitrary curve, rotating to face the direction of travel.
−
 
+
−
[http://sourceforge.net/tracker/index.php?func=detail&aid=1781903&group_id=144022&atid=757419 This bug report] suggested a feature:
+
−
 
+
−
<blockquote>
+
−
I would like to be able to draw a bline with N vertices and have
+
−
a shape move along that bline (the whole shape or individual vertices).
+
−
Currently the only way I have found to do what I want is to draw a bline,
+
−
and then move a shape along that line manually at fairly small intervals
+
−
(very frustrating).
+
−
 
+
−
Example: A triangle that should move along a sine curve always pointing in
+
−
the direction it is going to move next.
+
−
</blockquote>
+
−
 
+
−
The feature has recently been added to Synfig (23rd September 2007) and will be in the next release.
+
  
 
== Summary ==
 
== Summary ==
Line 25: Line 14:
 
We're going to:
 
We're going to:
  
−
* [[Following a BLine#Create the Layers|Draw a curve and an arrow]]
+
* {{l|Doc:Following a Spline#Create the Layers|Draw a curve and an arrow}}
−
* [[Following a BLine#Make the Arrow Move|Link the arrow's Origin]] to the curve's Vertices' vector position so the arrow follows the curve
+
* {{l|Doc:Following a Spline#Make the Arrow Move and Rotate|Link the arrow's Origin and Rotation}} to the Spline so that the arrow follows the curve
−
* [[Following a BLine#Make the Arrow Rotate|Link the arrow's Rotate layer]] to the curve's Vertices' tangent so the arrow rotates with the curve
+
  
 
== Tutorial ==
 
== Tutorial ==
  
−
This is a brief tutorial giving an example of how to use it:
+
The tutorial is intended to provide a demonstration on how to use this feature.
 +
 
  
 
=== Create the Animation ===
 
=== Create the Animation ===
  
−
File > New
+
* Create a new animation by selecting from the menu {{c|File|New}}.
  
−
Time tab > End Time > 10s > OK
 
  
 
=== Create the Layers ===
 
=== Create the Layers ===
  
−
select the BLine Tool
+
First step, let's draw the Spline:
  
−
enable just the Outline checkbox
+
# Select the {{l|Spline Tool}} from the Toolbox: [[File:Spline-tool-0.63.06.png|frame|none]]
 +
# In the {{l|Tool_Options_Panel}}, enable only the Outline Layer type.
 +
# Draw a Spline that you want the arrow to move along.
 +
# Click the {{Literal|Make Spline}} icon in the bottom left of the {{l|Tool_Options_Panel}} to create the Spline.
  
−
draw a bline that you want the arrow to move along
 
  
−
select the new bline layer, go to its parameters
+
Second step, let's draw the arrow:
  
−
right-click on the vertices parameter and "export" it
+
# Select the {{l|Spline Tool}}, this time enabling {{Literal|Create Outline}} and {{Literal|Create Region}} Layer types: [[File:Spline-Tool-Options_0.63.06.png|frame|none]]
−
it will ask for a name.
+
# Draw an arrow (or any another arbitrary shape) pointing to the right side of the Canvas.
 +
# Switch to the {{l|Transform Tool}} and select the Outline, press {{Shortcut|Ctrl}}{{Shortcut|A}} to select all its {{l|Handle|handles}} except the green position handle.
 +
# Drag the handles so that the arrow is centered around the green position handle.
 +
# Add a {{l|Rotate Layer}} above the Outline and Region Layers.
 +
# {{l|Group}} the Rotate, Outline, and Region Layers. At this point there are 2 top-level Layers:
 +
## an Outline Layer
 +
## a Group Layer containing the arrow and the Rotate Layer
  
−
you can use whatever name you like but for this tutorial I'm calling it "path"
 
  
−
(note that you could have checked the 'auto export' box in the draw tool, and set the name in the text box at the top of the tool options to save having to chose export from the menu - it doesn't matter which you use)
+
=== Make the Arrow Move and Rotate ===
  
−
switch back to the 'Normal' tool and look in the "Children" dialog.
+
# Select the Group Layer by selecting it in the {{l|Layers Panel}}.
 +
# Then:
 +
## select its green origin position {{l|Handle|handle}} by clicking on it in the Canvas window
 +
## while holding {{Shortcut|Ctrl}} select the Rotate Layer in the Layers Panel
 +
## while holding {{Shortcut|Ctrl}} select its blue rotation handle in the Canvas window
 +
#: At this point, there are 2 Layers selected and one handle from each of those 2 Layers selected.
 +
# Now, while holding {{Shortcut|Ctrl}} select also the curved Spline Layer (it should be the last Layer in the Layer Panel's list).
 +
# Right-click on the dotted line that indicates the position of the curved Spline, not on any handle, but on the dotted line between handles.
 +
# From the context menu that pops up, select {{Literal|Link to Spline}}: [[Image:Spline-Link-to-0.63.06.png|none|frame|See also {{l|Command:Link_to_Spline}} ]]
 +
#: The arrow Group should move so that its green position handle is on the Spline, and it should rotate so that the arrow points along the spline at that point.
 +
# Select just the Group Layer, and drag its green handle around. The handle is now constrained to the Spline and dragging it will also affect the rotation of the arrow.
 +
#: We can now animate the arrow.
 +
# Turn on {{l|Animate_Editing_Mode}} by clicking the icon in the bottom right of the Canvas window:
 +
## at time '''0f''', drag the Group Layer's green position handle to one end of the Spline
 +
## at time '''5s''', drag the same position handle to the other end of the Spline
 +
# Try {{c|File|Preview|}} to watch the animation.
  
−
expand the ValueBase Nodes and you'll see all the things that have been exported.
 
  
−
selecting them will allow us to re-use them elsewhere in the animation later
+
== Results ==
  
−
back in the bline tool, enable Fill and Outline checkboxes in tool options
+
This is the animation I ended up with:
 +
[[File:Arrow-follows-bline.gif|center|alt Following a Spline example]]
  
−
draw an arrow or whatever, pointing to the right
+
Synfig project: {{l|Media:Arrow-follows-bline.sifz‎|Arrow-follows-bline.sifz‎}}
  
−
select the outline, hit control-a to select all its ducks except the green position duck
 
  
−
drag the ducks so that the arrow is centred around the green position duck
+
== Controlling the linear velocity ==
  
−
add a rotate layer above the outline and region
+
By default, the arrow travels the whole spline with a constant velocity, independently of the Spline structure.
−
 
+
−
encapsulate the rotate, outline, and region layers
+
−
 
+
−
rename the encapsulation layer "arrow"
+
−
 
+
−
so now you've got 2 top-level layers: a curved path, and an encapsulation containing an arrow and a rotate layer
+
−
 
+
−
=== Make the Arrow Move ===
+
−
 
+
−
select the "arrow" encapsulation layer
+
−
 
+
−
we want this layer to move along the "path" bline.  the Origin parameter of an encapsulation layer can be used to move everything it contains
+
−
right-click the Origin parameter and select [[Convert#BLine_Vector|Convert > BLine Vertex]]
+
−
the Origin parameter will now be expandable - click the small triangle to its left to expand it
+
−
 
+
−
the Origin of the "arrow" layer is now defined by 3 sub parameters: a BLine, the amount to travel along the BLine, and a checkbox that we'll ignore for now.
+
−
in the Children dialog, select the "path" ValueNode
+
−
 
+
−
then in the Params dialog, right-click on the "arrow" layer's BLine sub-parameter and "Connect" it to the selected "path" value
+
−
 
+
−
the arrow will move so that it is about half-way along the BLine path (because the Amount sub-parameter defaults to 0.5).
+
−
 
+
−
edit the Amount sub parameter to 0 and to 1, and see the arrow moves to one end of the path and then the other.
+
−
 
+
−
the "Loop" sub parameter determines what happens if you use a value outside the range 0-1 for the Amount.  If "Loop" isn't checked, values less than 0 count as 0 and values greater than 1 count as 1.  If "Loop" is checked, the value wraps around, so Amounts of 2.4, 1.4, 0.4, -0.6, -1.6, etc all act the same.
+
−
 
+
−
So we've got the arrow moving along the line, but only if we manually edit the Amount parameter.  Let's get it to move automatically, by converting the constant Amount parameter into a linearly changing value.
+
−
 
+
−
Right-click the Amount parameter, and Convert it to Linear.  This adds sub parameters Rate (how fast the value goes up, per second) and Offset (what value it has at time zero).
+
−
 
+
−
Set Rate to 0.1 and Offset to 0.  That will make the value of Amount be 0 at time 0 and 1 at time 10s, so the arrow will move from one end of the line to the other throughout the course of the animation.
+
−
 
+
−
This linearly changing value of the Amount parameter will be useful later on, so let's export it into the Children dialog so we can find it easily later.  Right-click the Amount parameter and Export it as "engine".  I call it "engine" because this is the parameter that drives the animation.
+
−
 
+
−
Try File > Preview or View > Play to watch the animation.  If you like, play with the sub-parameters - turn the Rate up to 0.25 and turn on the Loop checkbox and watch the preview again.  You'll see that the arrow moves 3 times faster than before, reaching the end of the line after 4 seconds.
+
−
 
+
−
Turning Loop on means that it will then reappear at the start of the line, and keep moving.  Not having Loop on would make it stay at the end of the line until the animation stopped.
+
−
 
+
−
Note that instead of using a Convert>Linear conversion to get the Amount sub-parameter to change over time, we could have used the more traditional method of turning on [[Animate Editing Mode]] and adjusting the parameter at different points in time.  Either way, we can still export the Amount parameter so that we can use it again in the next step.
+
−
 
+
−
=== Make the Arrow Rotate ===
+
−
 
+
−
You'll notice that although the arrow moves along the line, it doesn't rotate to face the direction of travel.  But that's what we're going to use the Rotate layer for.
+
−
 
+
−
Open up the "arrow" encapsulation layer and select the Rotate layer inside. 
+
−
 
+
−
Right-click the Amount parameter, which specifies the amount to rotate, and Convert it to type [[Convert#BLine Tangent|BLine Tangent]].
+
−
 
+
−
Open up the sub parameters, select the "path" value in the children dialog, and connect it to the rotate layer's BLine sub-parameter, and select the "engine" value in the children dialog and connect it to the rotate layer's Amount sub-parameter.
+
−
 
+
−
Now watch the preview and you'll see that the arrow is moving along the line, rotating to face the way it's traveling.
+
−
 
+
−
== Results ==
+
  
−
This is the animation I ended up with: [[Media:Arrow-follows-line-tut.sifz|arrow-follows-line-tut.sifz]]
+
If you select the Group Layer and look at the Parameters Panel, you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when {{Literal|Link to Spline}} is executed.
  
−
== Commentary on the Feature ==
+
You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the Spline structure, it will take the same time to move along each segment of the Spline. So if there's a long straight segment then a bendy complex part, the arrow will move much faster along the straight segments (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the Spline) is not constant.
  
−
I've noticed that if Loop is on, and amount is 1.0, then it acts as if amount is 0.0, ie. the arrow jumps back to the beginning of the line in the last frame.
+
For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].
  
−
Also, the arrow takes the same time to move along each segment of the bline.  So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part).
 
  
−
It would be good to have the option of having the arrow move at constant speed along the length of the curve.
+
== See also ==
 +
* Discussion on the forum: [https://forums.synfig.org/t/following-a-spline-serious-problem-and-frustration/9627 Following a spline: Serious problem and frustration]
 +
* Link to Spline command: {{l|Command:Link_to_Spline}}
 +
* A [https://youtu.be/d1hPxgq2qeU video tutorial] showing the steps of this page.

Latest revision as of 12:24, 1 April 2020

Languages Language: 

English • čeština • Deutsch • español • français • русский


Note: There is also a slightly out-of-date tutorial on this topic at Tracking Curves. It contains some info, particularly about link/export, which hasn't yet been added to this new tutorial. There is also another very out-of-date tutorial for synfig 0.61.08.

Introduction

This tutorial will demonstrate how to make an object follow the path of an arbitrary curve, rotating to face the direction of travel.

Summary

We're going to:

Tutorial

The tutorial is intended to provide a demonstration on how to use this feature.


Create the Animation

  • Create a new animation by selecting from the menu "File → New".


Create the Layers

First step, let's draw the Spline:

  1. Select the Spline Tool from the Toolbox:
    Spline-tool-0.63.06.png
  2. In the Tool Options Panel, enable only the Outline Layer type.
  3. Draw a Spline that you want the arrow to move along.
  4. Click the "Make Spline" icon in the bottom left of the Tool Options Panel to create the Spline.


Second step, let's draw the arrow:

  1. Select the Spline Tool, this time enabling "Create Outline" and "Create Region" Layer types:
    Spline-Tool-Options 0.63.06.png
  2. Draw an arrow (or any another arbitrary shape) pointing to the right side of the Canvas.
  3. Switch to the Transform Tool and select the Outline, press CtrlA to select all its handles except the green position handle.
  4. Drag the handles so that the arrow is centered around the green position handle.
  5. Add a Rotate Layer above the Outline and Region Layers.
  6. Group the Rotate, Outline, and Region Layers. At this point there are 2 top-level Layers:
    1. an Outline Layer
    2. a Group Layer containing the arrow and the Rotate Layer


Make the Arrow Move and Rotate

  1. Select the Group Layer by selecting it in the Layers Panel.
  2. Then:
    1. select its green origin position handle by clicking on it in the Canvas window
    2. while holding Ctrl select the Rotate Layer in the Layers Panel
    3. while holding Ctrl select its blue rotation handle in the Canvas window
    At this point, there are 2 Layers selected and one handle from each of those 2 Layers selected.
  3. Now, while holding Ctrl select also the curved Spline Layer (it should be the last Layer in the Layer Panel's list).
  4. Right-click on the dotted line that indicates the position of the curved Spline, not on any handle, but on the dotted line between handles.
  5. From the context menu that pops up, select "Link to Spline":
    See also Command:Link_to_Spline
    The arrow Group should move so that its green position handle is on the Spline, and it should rotate so that the arrow points along the spline at that point.
  6. Select just the Group Layer, and drag its green handle around. The handle is now constrained to the Spline and dragging it will also affect the rotation of the arrow.
    We can now animate the arrow.
  7. Turn on Animate Editing Mode by clicking the icon in the bottom right of the Canvas window:
    1. at time 0f, drag the Group Layer's green position handle to one end of the Spline
    2. at time 5s, drag the same position handle to the other end of the Spline
  8. Try "File → Preview" to watch the animation.


Results

This is the animation I ended up with:

alt Following a Spline example

Synfig project: Arrow-follows-bline.sifz‎


Controlling the linear velocity

By default, the arrow travels the whole spline with a constant velocity, independently of the Spline structure.

If you select the Group Layer and look at the Parameters Panel, you'll see that its Origin parameter is converted to "Spline Vertex" type. This is done automatically when "Link to Spline" is executed.

You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the Spline structure, it will take the same time to move along each segment of the Spline. So if there's a long straight segment then a bendy complex part, the arrow will move much faster along the straight segments (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the Spline) is not constant.

For illustration of the "Homogenous" effect see this demo.


See also


Languages Language: 

English • čeština • Deutsch • español • français • русский

Retrieved from "https://wiki.synfig.org/index.php?title=Doc:Following_a_Spline&oldid=23401"