Point to one object

From Synfig Studio :: Documentation
Jump to: navigation, search
(Convert RHS sub parameter)
(Change to advanced tutorials)
Line 3: Line 3:
 
{{Category|Manual}}
 
{{Category|Manual}}
 
{{Category|Tutorials}}
 
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}
+
{{Category|Tutorials Advanced}}
 
<!-- Page info end -->
 
<!-- Page info end -->
  

Revision as of 13:18, 3 March 2012

Languages Language: 

English


Introduction

The object of this tutorial is that achieve that one object points to other regardless the movement of both objects. For this tutorial I've selected one moving eye following one mofing fly. This is the result you'll obtain:

Look-the fly!.gif

Create the objects to move

First lets create the fly. In this case I've drawn three Region layers emulating the two wings and the body. Once created with the BLine Tool, encapsulate them into a Paste Canvas Layer. It is very important that the fly has to be centered on the paste canvas layer's origin. Once encapsulated the fly layers, the created Paste Paste Canvas layer's Origin is at (0,0) so you have to move the fly layers BLines to be around the Paste Canvas Layer origin. To do that select all the fly layers, select all the ducks and move them to where the Paste Canvas Layer Origin parameter is (normally at (0,0)). Once done you can select only the Paste Canvas Layer and move it around by dragging its Origin's duck.

Now create the Eye. To create it simply create three Circle Layers: One black in the background (contour of the eyeball), one white in the middle (white eyeball) slightly smaller than the black one, and one smaller black for the pupil. Once created place them in that order and below the fly paste canvas layer. Rename them properly.

Add a Solid Color layer for the background and move it down to the bottom.

We are ready to start to make the magic ;)

It should look like this (I have a zoom layer added to make a close up screen shot):

Canvas window Point to Object.png Point to Object layers.png

Export some parameters

  • First go to the Paste Canvas layer that holds the fly and select the Origin parameter.
  • Right click it and select 'Export' and give the name of 'fly'.
  • Then go to the 'white' layer and the 'black' layer and select both at the same time. You can do this holding CTRL meanwhile you click on the layers. Once selected both, the paramters on the Parameter layer are slightly different. The common parameters are shown (in this case all them because the layers are the same type) but the parameters that have different values are greyed indicating that.
  • Do right click to the Origin parameter and select 'Link'. That would allow to move the origin of both circles as one.
  • Now select the 'white' layer.
  • Repeat the right click on the Origin parameter and you'll obtain other contextual menu.
  • Select 'Export' and name the value node to be 'origin'
  • Select the Radius parameter and do right click and select 'Export' and name it as 'white radius'.
  • Go to the 'pupil' layer and select the Radius parameter of the circle.
  • Right click and select 'Export'. Give the name of 'pupil radius'. It will be used later.

Convert pupil's Origin parameter

To make the pupil look at the fly where ever it be, we need to automatically move the pupil based on the fly movement and position. To do that we need to make some geometric work.

First let's convert the pupil's Origin parameter to Add convert type. To do that select the 'pupil' layer and at the Parameters Panel select the Origin parameter and do right click. At the contextual menu select 'Convert' and in the sub menu select 'Add'. This will add three sub parameters to the Origin parameter.

  • Origin
    • LHS
    • RHS
    • Scalar

LHS is for 'Left Hand Side' and RHS is for 'Right Hand Side'. In a addition the order of the elements is not important but for a subtraction it is important.

You can see those sub parameters by clicking on the triangle that appear near the Origin parameter on the left.

Now, we will connect the LHS sub parameter with the origin of the eye, so the position of the pupil is given by the sum of two vectors: the origin of the eye (LHS) and the vector from the eye's origin to the pupil's origin (RHS). To connect the LHS sub parameter first select the Children Panel and expand the Value Nodes list by clicking on the small triangle on the left of the 'Value Node' row. You'll see all the exported value nodes that we did on the previous section of the tutorial. Then select the 'origin' parameter. This would allow us to use it as the target for the subsequent 'Connect' actions. Go to the Parameters Panel again and do right click on the LHS sub parameter of the Origin parameter. Select 'Connect' from the contextual menu. It will connect the LHS parameter to the exported value node called 'origin' already selected on the children list. It should look like this:


Point to object Pupil Origin add.png

Convert RHS sub parameter

Notice that the sub parameter RHS represents the vector that goes from the eye's origin to the pupils's origin and precisely it is the vector that we want to point to the fly. To make it point to the fly we need to achieve two things:

1) The pupil should not go outside the white eye's radius. 2) The pupil should point to the fly in all moment. It will point to the fly if the direction of the vector from the eye's origin to the pupil's origin has the same direction than the vector that goes from the eyes' origin to the fly's position.

So we need to control the distance and the angle of the vector form the eye's origin to the pupil's origin (that is the RHS). To do this we will convert the RHS in a Radial composite:

Select the RHS sub parameter. Right click on it and select Convert and Radial Composite from the sub menu. It will provide two sub parameters:

  • RHS
    • Radius
    • Theta

Point to object Pupil Origin radial composite.png


Let's first handle the Radius sub parameter. The first requisite is that the pupil shouldn't go outside the white part radius so we will convert the Radius to be a 'Range' convert type. Use the same procedure: right click the Radius sub-parameter and select 'Convert' and then 'Range'. It will provide the following sub parameters:

  • Radius
    • Min
    • Max
    • Link

Point to object Pupil Origin range.png


What does Range do? Range limits the value returned by Link and clamps the value to be between Max and Min. So let's leave the Min sub parameter as its default value (0.0). Now we need to handle the Link and Max values. The Max value should be defined by the pupil and the white circle. I don't like that the pupil bits the black contour so the pupil's origin must be limited by its radius and the white circle radius. If the pupil's radius is smaller, the pupil's origin can be closer to the white circle's radius. To do that we will convert the Max sub parameter to a Subtraction.

Repeat the same Convert operation over the 'Max' sub parameter and convert it to a Subtract type. It should look like this:

  • Max
    • LHS
    • RHS
    • Scalar

Point to object Pupil Origin subtract.png

This time the RHS and LHS has the following meaning: Max = (LHS-RHS)*Scalar. Leave the Scalar with its default value (0.0) and now let's study the two components of the subtraction. Remember that the Max value represents the maximum distance that the pupil can respect to the eye's origin. So it should be this: Max = white's radius - pupil's radius. Let's do it:

First let's connect the LHS sub parameter to the white's radius. Go to the Children panel and select 'white radius' previously exported. Then select the LHS sub parameter from the Max sub parameter and right click on it selecting Connect. Repeat same procedure with the 'pupil radius' exported parameter and the RHS sub parameter. It should look like in the previous image.

Now let's handle the Link sub parameter of the Radius sub parameter converted to Range type. The Link represents the radius that we want to limit with the range conversion. It should be the distance between the fly and the eye's origin. If the fly is inside the eye, we don't want to limit the distance, right? that's when range wouldn't modify the Link value. Let's go with it.

  • Convert the Link sub parameter to 'Vector Length'. (Do you need that I repeat the procedure??) Then it would provide one sub parameters:
  • Link
    • Vector

Now convert the Vector into a Subtract type. It will give you again three sub parameters:

  • Vector
    • LHS
    • RHS
    • Scalar

Connect the LHS sub parameter to the 'fly' exported value node and the RHS sub parameter to the 'origin' exported value node. It should look like this:

Point to object Pupil Origin vector length-subtract.png

To be reused later, export the Vector sub parameter and call it 'vector' as shown in the image.

We have finished with Radius. Now let's go ahead with Theta. Theta is the angle between the horizontal and the vector that goes from the eye's origin to the pupil's origin. We wan it to be the same angle that the fly's origin has with the eye's origin. Angles can be calculated based on vectors coordinates. So we have to first convert the angle Theta into a function that calculates the angle of a vector in function of its coordinates. It is the 'Atan2' convert type. Atan2 provides two sub parameters:

  • Theta
    • X
    • Y

Where X and Y are the coordinates of the vector we want to obtain its angle. There are two special convert types that extract the x and y coordinates pf a given vector. They are 'Vector X' and 'Vector Y'. Let's convert the 'X' and 'Y' sub parameters into 'Vector X' and 'Vector Y' respectively. You'll have this:

Point to object Pupil Origin atan2.png

Now connect each 'X' and 'Y' sub parameters to the recently exported 'vector' value node, that is the vector from the eye's origin to the fly's origin. We are done!

The conversions are finished!!.

Animate the fly and the eye

Now you can freely animate the eye's origin and the fly's origin and the pupil will always look to the fly. We have achieved the desired effect!

Sample files

Here is the sample file result. Sample file. Also you can see a simplest example here.


Languages Language: 

English