Difference between revisions of "Tracking Curves"

From Synfig Studio :: Documentation
Jump to: navigation, search
m
m
Line 6: Line 6:
  
 
== Details ==
 
== Details ==
 
The animation lasts for 32 seconds and has 3 layers:
 
  
 
=== overview ===
 
=== overview ===
  
* moving blob - an encapsulation of 3 layers.  its origin is connected to the exported valuenode "[[Tracking Curves#moving point|moving point]]"
+
The animation lasts for 32 seconds and has 3 layers:
** direction of movement - the fuzzy white beam of light.  This is a simple bline with a feather of 0.3 units to make it fuzzy.  Its vertices are connected to the valuenode called "[[Tracking Curves#beam of light|beam of light]]".
+
 
** inner circle - the smaller yellow circle.  not animated at all.
+
* moving blob - An encapsulation of 3 layers.  Its origin is connected to the exported valuenode "[[Tracking Curves#moving point|moving point]]"
** outer circle - the larger red circle.  not animated at all.
+
** direction of movement - The fuzzy white beam of light.  This is a simple bline with a feather of 0.3 units to make it fuzzy.  Its vertices are connected to the valuenode called "[[Tracking Curves#beam of light|beam of light]]".
* line - the moving curve which the object follows.  has waypoints at 0s, 16s, and 32s to make the line move.  uses 4 exported animated valuenodes:
+
** inner circle - The smaller yellow circle.  Not animated at all.
** vertex1 - the position of the beginning of the curve
+
** outer circle - The larger red circle.  Not animated at all.
** vertex2 - the position of the end of the curve
+
* line - The moving curve which the object follows.  Has waypoints at 0s, 16s, and 32s to make the line move.  Uses 4 exported animated valuenodes:
** tangent1 - the tangent at the beginning of the curve
+
** vertex1 - The position of the beginning of the curve
** tangent2 - the tangent at the end of the curve
+
** vertex2 - The position of the end of the curve
* black background - a solid black background.  not animated at all.
+
** tangent1 - The tangent at the beginning of the curve
 +
** tangent2 - The tangent at the end of the curve
 +
* black background - A solid black background.  Not animated at all.
  
 
=== moving point ===
 
=== moving point ===
Line 26: Line 26:
 
"moving point" represents the point on the moving bline where the circles are currently centered.  It is an exported valuenode of type "Segment Vertex".  It has 2 components which determine the vertex that is used as its value:
 
"moving point" represents the point on the moving bline where the circles are currently centered.  It is an exported valuenode of type "Segment Vertex".  It has 2 components which determine the vertex that is used as its value:
  
* segment - the curve to follow, defined by vertex1, vertex2, tangent1, and tangent2, as exported from the 'line' layer above
+
* segment - The curve to follow, defined by vertex1, vertex2, tangent1, and tangent2, as exported from the 'line' layer above
* amount - a number ranging from 0 to 1, which indicates how far along the segment to go.  0 means "use vertex1" and 1 means "use vertex2".  I want the point to travel along the curve sinusoidally, meaning it will travel fastest in the middle and slow to a momentary stop at either end.  This makes the movement look smoother than using a linear movement.  I called this valuenode "((sin(angle))/2+0.5)", since that is how its value is calculated.  The sin() function returns a number between -1 and 1, and I want a value between 0 and 1, so I halve the sin() value, giving -0.5 to 0.5, then add 0.5 to it, giving 0 to 1.  Consequently, this 'amount' value is the result of a subtraction, LHS-RHS:
+
* amount - A number ranging from 0 to 1, which indicates how far along the segment to go.  0 means "use vertex1" and 1 means "use vertex2".  I want the point to travel along the curve sinusoidally, meaning it will travel fastest in the middle and slow to a momentary stop at either end.  This makes the movement look smoother than using a linear movement.  I called this valuenode "((sin(angle))/2+0.5)", since that is how its value is calculated.  The sin() function returns a number between -1 and 1, and I want a value between 0 and 1, so I halve the sin() value, giving -0.5 to 0.5, then add 0.5 to it, giving 0 to 1.  Consequently, this 'amount' value is the result of a subtraction, LHS-RHS:
** LHS - the left hand side of the subtraction.  I called this valuenode "((sin(angle))/2).  This will range from -0.5 to 0.5, and is the result of the 'sine' convert type, sin(Angle)*Amplitude:
+
** LHS - The left hand side of the subtraction.  I called this valuenode "((sin(angle))/2).  This will range from -0.5 to 0.5, and is the result of the 'sine' convert type, sin(Angle)*Amplitude:
*** Angle - this is connected to "[[Tracking Curves#linearly changing angle|linearly changing angle]]"
+
*** Angle - This is connected to "[[Tracking Curves#linearly changing angle|linearly changing angle]]"
*** Amplitude - this is used to scale the value.  Since I want sin(Angle)/2, the  value is a constant 0.5.
+
*** Amplitude - This is used to scale the value.  Since I want sin(Angle)/2, the  value is a constant 0.5.
** RHS - the right hand side of the subtraction.  I wanted to add 0.5 to sin(angle)/2, but synfig only offers subtraction, so I subtracted -0.5 instead, which is the same.  Thus, RHS is a constant Real valuenode, with value -0.5
+
** RHS - The right hand side of the subtraction.  I wanted to add 0.5 to sin(angle)/2, but synfig only offers subtraction, so I subtracted -0.5 instead, which is the same.  Thus, RHS is a constant Real valuenode, with value -0.5
  
 
=== beam of light ===
 
=== beam of light ===
  
 
This is a two-point bline, with vertices as follows:
 
This is a two-point bline, with vertices as follows:
* Vertex001 - this is the vertex at the centre of the circle.  It doesn't need to move, since the circles don't move.  What moves is the "moving blob" layer, the encapsulating layer which contains this line and the two circles.  So this vertex has a constant position of (0,0)
+
* Vertex001 - This is the vertex at the centre of the circle.  It doesn't need to move, since the circles don't move.  What moves is the "moving blob" layer, the encapsulating layer which contains this line and the two circles.  So this vertex has a constant position of (0,0)
* Vertex002 - this is the other end of the fuzzy white beam.  It was a width of 5 units to make the beam diverge.  Its position is connected to the valuenode called "[[Tracking Curves#scaled tangent|scaled tangent]]".
+
* Vertex002 - This is the other end of the fuzzy white beam.  It was a width of 5 units to make the beam diverge.  Its position is connected to the valuenode called "[[Tracking Curves#scaled tangent|scaled tangent]]".
  
 
=== scaled tangent ===
 
=== scaled tangent ===
  
 
This is the offset vector from the center of the circles to the wide end of the beam of light.  This ofset needs to be a vector in a direction parallel to the tangent to the moving curve at the current point.  This was achieved using the Scale convert type, with 2 sub parameters:
 
This is the offset vector from the center of the circles to the wide end of the beam of light.  This ofset needs to be a vector in a direction parallel to the tangent to the moving curve at the current point.  This was achieved using the Scale convert type, with 2 sub parameters:
* Link - this is the vector to scale
+
* Link - This is the vector to scale
* Scalar - this is the amount to scale it by.  BLine curves have tangents which point from the start vertex towards the end vertex, along the curve.  I want my beam of light to point in the direction of travel, which is sometimes towards the start of the curve and sometimes towards the end.  To do this I needed to multiply the "tangent" valuenode above by a number which would be negative when travelling towards the start of the curve.  It just so happens that sin(angle+90) has exactly that property, and also has the benefit of making the beam get longer as the movement speeds up.  So I called this valuenode "(sin(angle+90))" and defined it as a "Sine" convert type, defined as value=Amplitude*sin(Angle):
+
* Scalar - This is the amount to scale it by.  BLine curves have tangents which point from the start vertex towards the end vertex, along the curve.  I want my beam of light to point in the direction of travel, which is sometimes towards the start of the curve and sometimes towards the end.  To do this I needed to multiply the "tangent" valuenode above by a number which would be negative when travelling towards the start of the curve.  It just so happens that sin(angle+90) has exactly that property, and also has the benefit of making the beam get longer as the movement speeds up.  So I called this valuenode "(sin(angle+90))" and defined it as a "Sine" convert type, defined as value=Amplitude*sin(Angle):
** Angle - this needs to be "Angle+90", so it's defined as a subtraction (Synfig has a 'subtract' convert type, but no add).  value = LHS-RHS:
+
** Angle - This needs to be "Angle+90", so it's defined as a subtraction (Synfig has a 'subtract' convert type, but no add).  value = LHS-RHS:
*** LHS - the left hand side of the subtraction - this is connected to "[[Tracking Curves#linearly changing angle|linearly changing angle]]"
+
*** LHS - The left hand side of the subtraction - this is connected to "[[Tracking Curves#linearly changing angle|linearly changing angle]]"
*** RHS - the right hand side of the subtraction.  It's a constant -90.
+
*** RHS - The right hand side of the subtraction.  It's a constant -90.
** Amplitude - this is a constant 0.4, which simply scales the length of the beam of light down to keep it mostly on the screen.
+
** Amplitude - This is a constant 0.4, which simply scales the length of the beam of light down to keep it mostly on the screen.
  
 
=== linearly changing angle ===
 
=== linearly changing angle ===
  
 
I called this "linearly changing angle".  This is the constantly changing angle that drives the whole animation.  Whenever the angle increases by 360 degrees, the output of sin(Angle) does one complete cycle from 0 -> 1 -> 0 -> -1 -> 0.  The angle changes linearly, using the Linear convert type, which has 2 parameters:
 
I called this "linearly changing angle".  This is the constantly changing angle that drives the whole animation.  Whenever the angle increases by 360 degrees, the output of sin(Angle) does one complete cycle from 0 -> 1 -> 0 -> -1 -> 0.  The angle changes linearly, using the Linear convert type, which has 2 parameters:
* Rate - how many degrees per second to increase
+
* Rate - How many degrees per second to increase
* Offset - the value at time=0s
+
* Offset - The value at time=0s

Revision as of 14:48, 20 September 2007

Languages Language: 

English


Introduction

http://uk.youtube.com/watch?v=wJ7C-FcxAy0 shows an example of a layer following a moving curve, and rotating to follow the curve as it moves.

How was that achieved? It's currently complicated to set up, so I'll describe here how it works. Hopefully a better design can be used to make it a lot more intuitive in Studio.

Details

overview

The animation lasts for 32 seconds and has 3 layers:

  • moving blob - An encapsulation of 3 layers. Its origin is connected to the exported valuenode "moving point"
    • direction of movement - The fuzzy white beam of light. This is a simple bline with a feather of 0.3 units to make it fuzzy. Its vertices are connected to the valuenode called "beam of light".
    • inner circle - The smaller yellow circle. Not animated at all.
    • outer circle - The larger red circle. Not animated at all.
  • line - The moving curve which the object follows. Has waypoints at 0s, 16s, and 32s to make the line move. Uses 4 exported animated valuenodes:
    • vertex1 - The position of the beginning of the curve
    • vertex2 - The position of the end of the curve
    • tangent1 - The tangent at the beginning of the curve
    • tangent2 - The tangent at the end of the curve
  • black background - A solid black background. Not animated at all.

moving point

"moving point" represents the point on the moving bline where the circles are currently centered. It is an exported valuenode of type "Segment Vertex". It has 2 components which determine the vertex that is used as its value:

  • segment - The curve to follow, defined by vertex1, vertex2, tangent1, and tangent2, as exported from the 'line' layer above
  • amount - A number ranging from 0 to 1, which indicates how far along the segment to go. 0 means "use vertex1" and 1 means "use vertex2". I want the point to travel along the curve sinusoidally, meaning it will travel fastest in the middle and slow to a momentary stop at either end. This makes the movement look smoother than using a linear movement. I called this valuenode "((sin(angle))/2+0.5)", since that is how its value is calculated. The sin() function returns a number between -1 and 1, and I want a value between 0 and 1, so I halve the sin() value, giving -0.5 to 0.5, then add 0.5 to it, giving 0 to 1. Consequently, this 'amount' value is the result of a subtraction, LHS-RHS:
    • LHS - The left hand side of the subtraction. I called this valuenode "((sin(angle))/2). This will range from -0.5 to 0.5, and is the result of the 'sine' convert type, sin(Angle)*Amplitude:
      • Angle - This is connected to "linearly changing angle"
      • Amplitude - This is used to scale the value. Since I want sin(Angle)/2, the value is a constant 0.5.
    • RHS - The right hand side of the subtraction. I wanted to add 0.5 to sin(angle)/2, but synfig only offers subtraction, so I subtracted -0.5 instead, which is the same. Thus, RHS is a constant Real valuenode, with value -0.5

beam of light

This is a two-point bline, with vertices as follows:

  • Vertex001 - This is the vertex at the centre of the circle. It doesn't need to move, since the circles don't move. What moves is the "moving blob" layer, the encapsulating layer which contains this line and the two circles. So this vertex has a constant position of (0,0)
  • Vertex002 - This is the other end of the fuzzy white beam. It was a width of 5 units to make the beam diverge. Its position is connected to the valuenode called "scaled tangent".

scaled tangent

This is the offset vector from the center of the circles to the wide end of the beam of light. This ofset needs to be a vector in a direction parallel to the tangent to the moving curve at the current point. This was achieved using the Scale convert type, with 2 sub parameters:

  • Link - This is the vector to scale
  • Scalar - This is the amount to scale it by. BLine curves have tangents which point from the start vertex towards the end vertex, along the curve. I want my beam of light to point in the direction of travel, which is sometimes towards the start of the curve and sometimes towards the end. To do this I needed to multiply the "tangent" valuenode above by a number which would be negative when travelling towards the start of the curve. It just so happens that sin(angle+90) has exactly that property, and also has the benefit of making the beam get longer as the movement speeds up. So I called this valuenode "(sin(angle+90))" and defined it as a "Sine" convert type, defined as value=Amplitude*sin(Angle):
    • Angle - This needs to be "Angle+90", so it's defined as a subtraction (Synfig has a 'subtract' convert type, but no add). value = LHS-RHS:
      • LHS - The left hand side of the subtraction - this is connected to "linearly changing angle"
      • RHS - The right hand side of the subtraction. It's a constant -90.
    • Amplitude - This is a constant 0.4, which simply scales the length of the beam of light down to keep it mostly on the screen.

linearly changing angle

I called this "linearly changing angle". This is the constantly changing angle that drives the whole animation. Whenever the angle increases by 360 degrees, the output of sin(Angle) does one complete cycle from 0 -> 1 -> 0 -> -1 -> 0. The angle changes linearly, using the Linear convert type, which has 2 parameters:

  • Rate - How many degrees per second to increase
  • Offset - The value at time=0s


Languages Language: 

English