<controlVectors>

<controlVectors> is a Graphical component that is used to specify the direction(s) of the bezier curve handles at each through point within a <curve> component.

Attributes and Properties

Example: <controlVectors> with vectors specified directly

At each through point in the rendered <curve>, the directions for the bezier curve handles are specified directly within the opening and closing tags. Handles are symmetric by default, and only one <controlVector> is needed in this case to specify the orientation of the curve at each point.

Example: <controlVectors> with <vector> children

At each through point in the rendered <curve>, the directions for the bezier curve handles are specified by <vector> children of the <controlVectors> component. Handles are symmetric by default, and only one <controlVector> is needed in this case to specify the orientation of the curve at each point.

Attribute Example: direction

<p>Set control vector(s) for middle point: 
  <mathInput name="vList1" prefill="(-5,1)"/>
  <mathInput name="vList2" prefill="(3,4)"/>
</p>
 
<sideBySide>
<p>Select direction: 
  <choiceInput name="dir">
    <choice>symmetric</choice>
    <choice>previous</choice>
    <choice preSelect>both</choice>
    <choice>next</choice>
    <choice>none</choice>
  </choiceInput>
</p>
 
<graph>
<point styleNumber="2">$curve1.throughPoints[2]</point>
<curve 
  name="curve1" 
  through="(-5,0) (0,5) (5,0)" 
  extrapolateForward 
  extrapolateBackward>
    <bezierControls alwaysVisible>
      <controlVectors>
        (-2,2)
      </controlVectors>
 
      <controlVectors direction="$dir">
        <mathList>$vList1 $vList2</mathList>
      </controlVectors>
 
      <controlVectors>
        (1,7)
      </controlVectors>
    </bezierControls>
</curve> 
</graph>
</sideBySide>

The direction attribute can be used to specify the unique behavior of the bezier handles associated with a given point.

symmetric: This is the default specification. Only one direction vector is used, and it will be used to set the direction toward the previous control point. The forward direction of the curve will be symmetric about the point. The handle’s symmetry allows for the user to adjust the curve while forcing it to pass smoothly through the point.

previous: Only one direction vector is used; it will supply the curve’s orientation toward the previous point. (If more than one vector is specified, the second one is ignored.) Since only a single bezier handle is available to the user, this allows for one-sided control of the curve at the point.

both: Two direction vectors are used; the first vector will supply the curve’s orientation toward the previous point. The second vector will provide the orientation towards the next point. Since two bezier handles are available to the user, this allows for two-sided independent control of the curve at the point.

next: Only one direction vector is used; it will supply the curve’s orientation toward the next point. (If more than one vector is specified, the second one is ignored.) Since only a single bezier handle is available to the user, this allows for one-sided control of the curve at the point.

none: A curve is automatically computed through the point. If any direction vectors are provided, they are ignored. The user cannot adjust the curve at this point.

Attribute Example: pointNumber

The pointNumber attribute specifies which through point the <controlVector> is associated with.

Property Example: direction

The direction of a <controlVectors> component can also be accessed as a property.