Synfig Studio :: Documentation - User contributions [en]

Doc:Cut-out Animation/es

2011-12-27T02:39:09Z

Naturalin: /* Preparando el material */

{{Title|Animación por cortes}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


(Traducido por {{l|User:Wadago|Wadago}})

Este es un breve tutorial para mostrar como crear animaciones de estilo de recorte por partes (cut-out). Por lo general, las animaciones de estilo cut-out usan el arte de imagen estática en vez del arte de vector para crear la animación. Véa la serie South Park. Usted debería obtener como resultado, una especie de animación como ésta:

{{l|Image:Cutoutsample.gif}}

== Preparando el material ==

Para una animación de estilo cut-out, necesitará algunas imágenes que representan las partes móviles de la animación del personaje u objeto. Para este ejemplo se ha preparado un muchacho al estilo Simpsons. Puede tomar las imágenes de este {{l|Media:Cutout-sample.zip|archivo}}. También contiene uno con el final .sifz que es el resultado de la animación.

{{l|Image:Boy-split.png|right|thumb|A character split into parts}}

Cada parte del cuerpo (cabeza, brazos, piernas, etc.) es un archivo PNG único. (En la imagen de partes, las imágenes individuales están compuestas en una más grande).
Se han puesto a todos los archivos las mismas dimensiones horizontales y verticales para que entonces todas las imágenes pueden caber una sobre otra para componer al personaje sin la necesidad de ajustar sus tamaños o posiciones. Esto ayudará más tarde al importar cada imagen en Synfig.

== Importando las imagenes cut-out ==

Esto es tan simple como ir al Caret Menu y seleccionar el File-> Import y escoger el archivo apropiado para cada parte del personaje o actor. Después de repetir este proceso para cada uno de los archivos de imagen de su personaje, debería obtener algo parecido a lo que aparece debajo.

Cuando usted va siguiendo los pasos del tutorial, notará que todas las capas de imagen tienen las mismas dimensiones. El límite de cada capa de imagen es el rectángulo con los ducks (pequeños circulos) verdes mostrados. Las cajas resaltadoras de todas las capas (layers) coinciden ya que expresamente creé cada imagen con esas dimensiones y las coloqué correctamente. Esto nos permitirá que hagamos lo siguiente: Seleccione todas las capas (CTRL + clic en cada capa) y vaya hacia la esquina Superior izquierda hasta la Inferior Derecha (puestos todos en color gris). Haga el clic derecho-> Link on each one. Esto enlazará todos los límites de las capas de imagen para mantenerlos en una misma posición relativa.
Esto prevendrá cualquier modificación casual de los bordes de la imagen y evitará cualquier deformación inapropiada.

{|align = "center"
|{{l|Image:Layers-Images.png}}||{{l|Image:Images-Composed.png}}
|}

Obviamente el orden de cada capa es importante para reubicar las partes del personaje a fin de formarlo correctamente (en el caso, por ejemplo, que la pierna izquierda esté detrás de la derecha).

== Encapsulando las capas de imagen ==

Como usted puede imaginar, vamos a hacer girar las Capas para realizar la animación cut-out. Pero antes de aplicar la rotación de cada parte del cuerpo personaje, tenemos que encapsularlo de modo que la rotación sólo se aplique a las capas/partes deseadas. Después de la encapsulación y de renombrar las capas del lienzo, el resultado se parecerá a esto:

{{l|Image:Encapsulate-layers.png|right|thumb|Layers dialog after encapsulation}}

== Agregar las Capas de Rotación ==

Antes de añadir las Capas de Rotación (para hacerlas girar), debería de analizar su personaje detenidamente. Tiene que comprender el marco mecánico al que los movimientos del personaje están ligados, esto es, mediante el mecanismo del esqueleto del personaje. Para un simple personaje humanoide, uno considera la cadera como el centro de rotación del esqueleto entero. Cada miembro gira con relación a la rotación de la cadera. También cada submiembro debería girar con relación a su elemento padre y el padre a su vez con relación a la cadera (usamos la cadera como el hueso raíz o padre).

En nuestro ejemplo, el cuerpo girará con relación a la cadera y la cabeza con relación al cuerpo. Cuando hacemos girar la cadera del personaje estará la necesidad de darle una rotación idéntica al cuerpo. La cabeza tiene que girar con el torso y además con la cadera. Este efecto acumulativo de miembros rotativos y submiembros es conocido como la jerarquía de miembros. La cabeza también necesita su propia rotación individual que no afectará a ningún otro miembro.

Vayamos al principio añadiendo una Capa de Rotación (Rotate Layer) a la cadera. Iremos al lienzo de la cadera pegada y seleccionaremos la capa de imagen de la cadera. Inserte una nueva Capa de Rotación (File-> Layer-> New Layer-> Transform-> Rotate) encima de la capa de imagen de la cadera. Renombre la capa como 'Rotar cadera' (o como quiera). Ahora vaya al cuadro de diálogo de parámetros de Capa de Rotación (Rotate Layer) y seleccione Amount parameter. Este parámetro establece el ángulo de rotación. Exporte este parámetro (clic derecho) y dele un nombre propio (por ejemplo, cadera).

Ahora al setup de la capa de rotación. Debería haber notado que hay un parámetro de origen en la Capa de Rotación (Origin parameter), este es el punto de origen de la rotación. Es muy importante que usted ponga el origen en la posición apropiada, permitiendo a la rotación apropiada de las capas de imagen, en este caso usted debería de colocar el origen de rotación en el centro de las caderas del personaje. Como otro ejemplo de obviedad, los brazos girarán sobre el hombro y no sobre la mano.

{|
|'''Antes'''||'''Después'''
|-
|{{l|Image:AddRotateLayer-before.png}} || {{l|Image:AddRotateLayer-after.png}} ||{{l|Image:AfterAddRotateHip.png|right|thumb|Después y luego de copiar la capa de rotación de la cadera sobre las demás capas de imagen}}
|}

Ahora, un razonamiento: Cuando hacemos girar la cadera del personaje también necesitaríamos hacer una rotación idéntica al cuerpo. La cabeza tiene que girar el con el torso y además con la cadera. Otro opción de hacer esto consistiría en que cada miembro del cuerpo tenga su propia rotación, más las rotaciones de aquellos miembros superiores al que está ligado en su jerarquía. Para lograr esto, debería añadir la misma capa de rotación a todos los miembros que dependen de la rotación de cadera. Copie y pegue la Capa de Rotación de la cadera para hacer girar a todas las capas de imagen encapsuladas.

Recuerde que el parámetro de rotación es exportado, y el valor es compartido entre todas las capas de rotación pegadas, dando el efecto deseado. Todos los miembros girarán ahora congruentemente con la cadera. ¡Magia! Vea la imagen.

Para cada uno de los miembros siguientes en el nivel, necesitaríamos una Capa de Rotación individual adicional. Los siguientes miembros del nivel de jerarquía son: las piernas y el cuerpo. Tenemos que añadir una Capa de Rotación para cada miembro del siguiente nivel. Deberá repetir el mismo proceso para cada uno: Añadir la Capa de Rotación, renombrarlo, exporte el Amount parameter (muy importante) y coloque el Origen al lugar de rotación apropiado.

Después hacer esto para las piernas y el cuerpo, debería obtener algo como lo siguiente:

{|
|{{l|Image:AddRotates.png}} || {{l|Image:AddRotatesLayers.png}}
|}

Observe que por suerte usted ha exportado el parámetro Amount para cada capa de rotación agregada. Entonces todas las copias de la capa de Rotación de la cadera comparten la misma rotación. El mismo se aplica a las otras capas de rotación (cuerpo y piernas).

Ya que los brazos y la cabeza son miembros del cuerpo del niño, ellos también deberían de tener la misma rotación que el cuerpo. Repita los mismo pasos para la capa de rotación de cuerpo y cópielo sobre los brazos y las capas de imagen principales.

Ahora ver como trabaja este estilo de animación. Necesita ahora una capa de rotación adicional para el resto de los miembros para producir su rotación individual. Repita los pasos de Añadir una Capa de Rotación (Rotate Layer), lo renombra, exportan el parámetro Amount y centran el punto de Origen. Tendría algo como esto:

{|
|{{l|Image:AddRotationFinal.png}} || {{l|Image:AddRotationLayersFinal.png|thumb}}
|}

== Ahora a animarlo! ==

¡Ahora es el momento de animar al personaje!. Puede ir al cuadrado de diálogo hijo (Child Dialog) y ampliar los Nodos ValueBase y seleccionar cualquiera de los parámetros ya exportados (ángulos).
O bien usted puede seleccionar el parámetro mismo de la capa apropiada. Esto pondrá al duck (pequeño circulo de color verde en los extremos) de ángulo en la posición apropiada mostrando las posiciónes y ángulos alternados debido a las rotaciones anidadas realizadas para cada submiembro. Puede hacer uso de la característica Group (Grupo) de Synfig para seleccionar múltiples capas dispersadas con sólo hacer un doble clic.

{{l|Image:Rotation-Setup2.png|center}}

¡No mueva el punto de origen de rotación de ninguna capa! Si hace esto, romperá la composición.
He preparado las imágenes individuales con un área redondeada escondida (vea la imagen del personaje detenidamente y verá lo que quiero decir). Esto permite que hagamos rotaciones sin revelar esquinas agudas.
----

Para ver las características con más detalle de utilizar la técnica de animación cut-out, vea la {{l|Talk:Cut-out_Animation|esta página}}.

Doc:Following a Spline/es

2011-11-14T18:05:04Z

Naturalin: /* Introduction */

{{Title|Siguiendo una Bline}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}


== Introdución ==

Si estás usando la versión 0.61.08 o anterior, por favor, dirígete al tutorial "siguiendo una Bline (método antiguo)", ya que esta versión es acerca de la versión 0.61.09.

Este tutorial muestra cómo hacer que un objeto siga el camino de una línea arbitraria, rotando para seguir encarando la dirección del camino.

== Sumario ==

Esto es lo que vamos a hacer:

* {{l|Following a BLine#Create the Layers|Dibujar una línea curva y una flecha}}
* {{l|Following a BLine#Make the Arrow Move and Rotate|Enlazar el origen de la flecha y su rotación}} a la Bline de modo que la flecha siga a la curva, se mueva sobre ella

== Tutorial ==

Este es un breve tutorial que nos da un ejemplo de cómo hacerlo:

=== Crea la Animación ===

File > New

=== Crea las Capas ===

seleciona la herramienta "Línea Bézier" (BLine)
[[File:Bline_tool.png]]

permite sólo la casilla Contorno

dibuja una curva (una Bline) sobre la que quieras que se mueva la flecha.

click en el icono "Herramienta línea Bézier" en la parte inferior izquierda de la "Paleta de Herramientas" para crear la Bline.

Todavía en esta herramienta,habilita "crear contorno" y "crear región" en la paleta de opciones
[[File:Tool_Options.png]]

dibuja una flecha o lo que quieras, apuntando a la derecha

cambia a la herramienta "Normal"

selecciona el contorno, pulsa control-a para seleccionar todos los patos menos el pato verde de posición

arrastra los patos de modo que la flecha quede centrada en el pato verde de posición

añade una capa de rotación sobre las capas contorno y región

encapsula las capas rotación, contorno y región

Ahora tienes 2 capas: una que es un trayecto curvo y la capa encapsulada (Lienzo en línea) conteniendo la flecha y la capa de rotación

=== Moviendo y Rotando la flecha ===

Selecciona la capa encapsulada haciendo click en el panel de Capas

Selecciona el pato verde de posición haciendo click sobre él en la ventana Canvas

luego selecciona la capa Rotación pulsando control+click sobre ella en el panel de Capas

ahora selecciona el pato azul "cantidad de rotación" pulsando control+click en la ventana Canvas

Bien, ahora tenemos seleccionadas dos capas y un pato de cada una de ellas

ahora además, seleccionar la capa de la curva BLine (que debe ser la última capa en la lista del panel de capas) pulsando control + clic sobre ella

haga clic derecho en la línea de puntos que indica la posición de la curva BLine -pero no en cualquier pato, sino en el enlace de puntos entre patos

Seleccionar "conectar a Bline" en el menú contextual
[[File:Link_to_Bline.png]]

la flecha encapsulada debe moverse de manera que su pato verde de posición esté sobre la BLine, y debe girar de forma que apunte a lo largo de la BLine en ese punto

selecciona sólo la capa encapsulada, y arrastra su pato verde. Verás que ahora el pato está limitado a moverse sobre la BLine, y que este movimiento también afecta a la rotación de la flecha como se esperaba

Ahora podemos animar la flecha. Cambia a "animar el modo de edición" haciendo clic en el icono en la parte inferior derecha de la ventana canvas.

En el punto de tiempo 0f, arrastra el pato verde de posición de la capa encapsulada a un extremo de la BLine

En el segundo 5, arrastra el mismo pato hasta el otro extremo de la BLine

Pulsa: Archivo > Previsualizar > Play para ver la animación.

== Resultado ==

Esta es la animación: {{l|Media:Arrow-follows-bline.sifz‎|Arrow-follows-bline.sifz‎}}

== Comentario sobre la función ==

Además, la flecha tarda el mismo tiempo para moverse a lo largo de cada segmento de la BLine. Así que si hay una parte larga con una construcción compleja, la flecha se moverá mucho más rápido a lo largo de las partes rectas (ya que habrá menos vértices en esa parte).

Sería bueno tener la opción de que el movimiento de flecha fuera a una velocidad constante a lo largo de la curva.

Doc:Ball Bounce/es

2011-11-14T17:42:44Z

Naturalin: /* Rebote manual de la pelota */

{{Title|Rebote de una pelota}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


Esta página se está traduciendo. Por favor, ten paciencia.

<center>This tutorial is under construction. Please be patient.</center>

This is a tutorial to explain how to create a bounce tutorial. The main target of the tutorial covers the ball movement. It is known that cartoon like balls have also a very deformed poses meanwhile thery are travelling and especially when it hits the ground. This could be covered in a second stage.

==Diferentes aproximaciones para el mismo resultado==

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.
#En la primera se hace el rebote de la pelota manualmente. Eso implicaría crear muchos puntos de interepolación y ajustarlos para concordar con un movimiento parabólico (en tiempo y trayectoria). 
#La segunda manera es usar parámetros de interpolación de los puntos de interpolación (puntos verdes) cuando están colocados en la interpolación TCB. Esto reduciría drásticamente la cifra de interpolaciones y también hace que el tiempo de los rebotes sea más fácil. 
#Para la tercera forma se hace uso del enlace con la línea Béizer. Si se dibuja el camino del rebote de la pelota usando una línea Béizer es fácil hacer siga el camino incluso variando la velocidad. 
#The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

== Rebote manual de la pelota ==

La regla para hacer el rebote manual es dibujar en un papel el rebote deseado. Después marcar la línea horizontal con intervalos regulares y hacerlos coincidir en la intersección de la curva en vertical. Véase la imagen:

{{l|Image:bounce.jpg|256px}}

Teniendo intervalos regulares en el eje horizontal (X) nos da intervalos irregulares en el eje vertical (Y). Esto se debe a la naturaleza de la curva.

Ya que se tengan los puntos localizados en una cuadricula 2D éstos se pueden dibujar directamente en Synfig haciendo uso de la cuadrícula (F12). Después se normalizan los valores para que sean completamente simétricos. Esto nos da la siguiente tabla:

{|
| '''Tiempo''' || '''Posición X''' || '''Posición Y''' || '''Comentarios'''
|-
| 0f || -175.0 || 92.0 || Punto más alto
|-
| 4f || -165.0 || 92.0 ||
|-
| 8f || -155.0 || 81.118 ||
|-
| 12f || -145.0 || 63.678 ||
|-
| 16f || -135.0 || 29.479 ||
|-
| 20f || -125.0 || -15.522 || Punto más bajo
|-
| 24f || -115.0 || 29.479 ||
|-
| 28f || -105.0 || 63.782 ||
|-
| ... || ... ||
|}

La posición en X se incremente en pasos de 10.0 mientras que la posición en Y obedece a una curva parabólica.

Para proceder con más rebotes sólo se duplican los puntos de interpolación (poner el ratón en el punto, dar click derecho y duplicar) reproduciendo movimientos simétricos. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

Esta es la gráfica resultante de la aproximación manual del rebote de una pelota.

{{l|Image:manual-graph.png|800px}}

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

La animación resultante y el archivo son los siguientes:

{{l|Image:manual.gif}}

File: {{l|Media:manual.sifz}}

== Ball Bounce using waypoints interpolations==

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 40f || -75.0 || 92.0 || Highest point
|-
| 60f || -25.0 || -15.522 || Lower point
|-
| ... || ...
|}

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

{{l|Image:waypoint-curves1.png|800px}}

But if you edit the TCB parameters this is the result you obtain:

{{l|Image:waypoint-graph2.png|800px}}

The TCB parameters are the following:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''
|-
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0
|-
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| ... || ... ||... || ... || ... || ... || ... || ...
|}

That's the resulting animation:

{{l|Image:waypoint-2.gif}}

And the sample file: {{l|Media:waypoint-2.sifz}}

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

{{l|Image:waypoint-compare.gif}}

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

== Ball Bounce following a path ==

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

*You can see the complete ball bounces in one shot.
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

{{l|Image:bline-path.png}}

 (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 40f || 0.4 || Highest point
|-
| 60f || 0.6 || Lower point
|-
| 80f || 0.8 || Highest point
|-
| 100f || 1.0 || Lower point
|}

This coincides with the main waypoints of the last method we have seen. But look what's the result:

{{l|Image:bline-track.png|800px}}

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 24f || 0.2626 ||
|-
| 28f || 0.3085 ||
|-
| 32f || 0.3463 ||
|-
| 36f || 0.3741 ||
|-
| 40f || 0.4 || Highest point
|-
| 44f || 0.4245 ||
|-
| 48f || 0.4554 ||
|-
| 52f || 0.4926 ||
|-
| 56f || 0.5280 ||
|-
| 60f || 0.6 || Lower point
|-
| 64f || 0.6629 ||
|-
| 68f || 0.7075 ||
|-
| 72f || 0.7445 ||
|-
| 76f || 0.7783 ||
|-
| 80f || 0.8 || Highest point
|-
| 84f || 0.8253 ||
|-
| 88f || 0.8539 ||
|-
| 92f || 0.8928 ||
|-
| 96f || 0.9375 ||
|-
| 100f || 1.0 || Lower point
|}

Now look to the graphs again and notice that the X travel is now a ''straight'' line.

{{l|Image:bline-track2.png|800px}}

This is the resulting animation and the sifz file.

{{l|Image:bline.gif}}

The sample file: {{l|Media:bline.sifz}}

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

== Mathematical emulation ==

Anyone want to try? :)

==Conclusions==

Doc:Ball Bounce/es

2011-11-13T04:12:17Z

Naturalin: /* Rebote manual de la pelota */

{{Title|Rebote de una pelota}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


Esta página se está traduciendo. Por favor, ten paciencia.

<center>This tutorial is under construction. Please be patient.</center>

This is a tutorial to explain how to create a bounce tutorial. The main target of the tutorial covers the ball movement. It is known that cartoon like balls have also a very deformed poses meanwhile thery are travelling and especially when it hits the ground. This could be covered in a second stage.

==Diferentes aproximaciones para el mismo resultado==

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.
#En la primera se hace el rebote de la pelota manualmente. Eso implicaría crear muchos puntos de interepolación y ajustarlos para concordar con un movimiento parabólico (en tiempo y trayectoria). 
#La segunda manera es usar parámetros de interpolación de los puntos de interpolación (puntos verdes) cuando están colocados en la interpolación TCB. Esto reduciría drásticamente la cifra de interpolaciones y también hace que el tiempo de los rebotes sea más fácil. 
#Para la tercera forma se hace uso del enlace con la línea Béizer. Si se dibuja el camino del rebote de la pelota usando una línea Béizer es fácil hacer siga el camino incluso variando la velocidad. 
#The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

== Rebote manual de la pelota ==

La regla para hacer el rebote manual es dibujar en un papel el rebote deseado. Después marcar la línea horizontal con intervalos regulares y hacerlos coincidir en la intersección de la curva en vertical. Véase la imagen:

{{l|Image:bounce.jpg|256px}}

Teniendo intervalos regulares en el eje horizontal (X) nos da intervalos irregulares en el eje vertical (Y). Esto se debe a la naturaleza de la curva.

Ya que se tengan los puntos localizados en una cuadricula 2D éstos se pueden dibujar directamente en Synfig haciendo uso de la cuadrícula (F12). Después se normalizan los valores para que sean completamente simétricos. Eso nos da la siguiente tabla:

{|
| '''Tiempo''' || '''Posición X''' || '''Posición Y''' || '''Comentarios'''
|-
| 0f || -175.0 || 92.0 || Punto más alto
|-
| 4f || -165.0 || 92.0 ||
|-
| 8f || -155.0 || 81.118 ||
|-
| 12f || -145.0 || 63.678 ||
|-
| 16f || -135.0 || 29.479 ||
|-
| 20f || -125.0 || -15.522 || Punto más bajo
|-
| 24f || -115.0 || 29.479 ||
|-
| 28f || -105.0 || 63.782 ||
|-
| ... || ... ||
|}

La posición en X se incremente en pasos de 10.0 mientras que la posición en Y obedece a una curva parabólica.

Para proceder con más rebotes sólo se duplican los puntos de interpolación (poner el ratón en el punto, dar click derecho y duplicar) reproduciendo movimientos simétricos. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

This is the resulting graph for the manual approximation to the ball bounce.

{{l|Image:manual-graph.png|800px}}

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

The resulting animation and file are those ones.

{{l|Image:manual.gif}}

File: {{l|Media:manual.sifz}}

== Ball Bounce using waypoints interpolations==

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 40f || -75.0 || 92.0 || Highest point
|-
| 60f || -25.0 || -15.522 || Lower point
|-
| ... || ...
|}

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

{{l|Image:waypoint-curves1.png|800px}}

But if you edit the TCB parameters this is the result you obtain:

{{l|Image:waypoint-graph2.png|800px}}

The TCB parameters are the following:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''
|-
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0
|-
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| ... || ... ||... || ... || ... || ... || ... || ...
|}

That's the resulting animation:

{{l|Image:waypoint-2.gif}}

And the sample file: {{l|Media:waypoint-2.sifz}}

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

{{l|Image:waypoint-compare.gif}}

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

== Ball Bounce following a path ==

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

*You can see the complete ball bounces in one shot.
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

{{l|Image:bline-path.png}}

 (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 40f || 0.4 || Highest point
|-
| 60f || 0.6 || Lower point
|-
| 80f || 0.8 || Highest point
|-
| 100f || 1.0 || Lower point
|}

This coincides with the main waypoints of the last method we have seen. But look what's the result:

{{l|Image:bline-track.png|800px}}

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 24f || 0.2626 ||
|-
| 28f || 0.3085 ||
|-
| 32f || 0.3463 ||
|-
| 36f || 0.3741 ||
|-
| 40f || 0.4 || Highest point
|-
| 44f || 0.4245 ||
|-
| 48f || 0.4554 ||
|-
| 52f || 0.4926 ||
|-
| 56f || 0.5280 ||
|-
| 60f || 0.6 || Lower point
|-
| 64f || 0.6629 ||
|-
| 68f || 0.7075 ||
|-
| 72f || 0.7445 ||
|-
| 76f || 0.7783 ||
|-
| 80f || 0.8 || Highest point
|-
| 84f || 0.8253 ||
|-
| 88f || 0.8539 ||
|-
| 92f || 0.8928 ||
|-
| 96f || 0.9375 ||
|-
| 100f || 1.0 || Lower point
|}

Now look to the graphs again and notice that the X travel is now a ''straight'' line.

{{l|Image:bline-track2.png|800px}}

This is the resulting animation and the sifz file.

{{l|Image:bline.gif}}

The sample file: {{l|Media:bline.sifz}}

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

== Mathematical emulation ==

Anyone want to try? :)

==Conclusions==

Doc:Ball Bounce/es

2011-11-13T03:54:16Z

Naturalin: /* Rebote manual de la pelota */

{{Title|Rebote de una pelota}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


Esta página se está traduciendo. Por favor, ten paciencia.

<center>This tutorial is under construction. Please be patient.</center>

This is a tutorial to explain how to create a bounce tutorial. The main target of the tutorial covers the ball movement. It is known that cartoon like balls have also a very deformed poses meanwhile thery are travelling and especially when it hits the ground. This could be covered in a second stage.

==Diferentes aproximaciones para el mismo resultado==

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.
#En la primera se hace el rebote de la pelota manualmente. Eso implicaría crear muchos puntos de interepolación y ajustarlos para concordar con un movimiento parabólico (en tiempo y trayectoria). 
#La segunda manera es usar parámetros de interpolación de los puntos de interpolación (puntos verdes) cuando están colocados en la interpolación TCB. Esto reduciría drásticamente la cifra de interpolaciones y también hace que el tiempo de los rebotes sea más fácil. 
#Para la tercera forma se hace uso del enlace con la línea Béizer. Si se dibuja el camino del rebote de la pelota usando una línea Béizer es fácil hacer siga el camino incluso variando la velocidad. 
#The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

== Rebote manual de la pelota ==

La regla para hacer el rebote manual es dibujar en un papel el rebote deseado. Después marcar la línea horizontal con intervalos regulares y hacerlos coincidir en la intersección de la curva en vertical. Véase la imagen:

{{l|Image:bounce.jpg|256px}}

Teniendo intervalos regulares en el eje horizontal (X) nos da intervalos irregulares en el eje vertical (Y). Esto se debe a la naturaleza de la curva.

Ya que se tengan los puntos localizados en una cuadricula 2D éstos se pueden dibujar directamente en Synfig haciendo uso de la cuadrícula (F12). Después se normalizan los valores para que sean completamente simétricos. Eso nos da la siguiente tabla:

{|
| '''Tiempo''' || '''Posición X''' || '''Posición Y''' || '''Comentarios'''
|-
| 0f || -175.0 || 92.0 || Punto más alto
|-
| 4f || -165.0 || 92.0 ||
|-
| 8f || -155.0 || 81.118 ||
|-
| 12f || -145.0 || 63.678 ||
|-
| 16f || -135.0 || 29.479 ||
|-
| 20f || -125.0 || -15.522 || Punto más bajo
|-
| 24f || -115.0 || 29.479 ||
|-
| 28f || -105.0 || 63.782 ||
|-
| ... || ... ||
|}

You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.

To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

This is the resulting graph for the manual approximation to the ball bounce.

{{l|Image:manual-graph.png|800px}}

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

The resulting animation and file are those ones.

{{l|Image:manual.gif}}

File: {{l|Media:manual.sifz}}

== Ball Bounce using waypoints interpolations==

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 40f || -75.0 || 92.0 || Highest point
|-
| 60f || -25.0 || -15.522 || Lower point
|-
| ... || ...
|}

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

{{l|Image:waypoint-curves1.png|800px}}

But if you edit the TCB parameters this is the result you obtain:

{{l|Image:waypoint-graph2.png|800px}}

The TCB parameters are the following:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''
|-
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0
|-
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| ... || ... ||... || ... || ... || ... || ... || ...
|}

That's the resulting animation:

{{l|Image:waypoint-2.gif}}

And the sample file: {{l|Media:waypoint-2.sifz}}

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

{{l|Image:waypoint-compare.gif}}

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

== Ball Bounce following a path ==

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

*You can see the complete ball bounces in one shot.
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

{{l|Image:bline-path.png}}

 (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 40f || 0.4 || Highest point
|-
| 60f || 0.6 || Lower point
|-
| 80f || 0.8 || Highest point
|-
| 100f || 1.0 || Lower point
|}

This coincides with the main waypoints of the last method we have seen. But look what's the result:

{{l|Image:bline-track.png|800px}}

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 24f || 0.2626 ||
|-
| 28f || 0.3085 ||
|-
| 32f || 0.3463 ||
|-
| 36f || 0.3741 ||
|-
| 40f || 0.4 || Highest point
|-
| 44f || 0.4245 ||
|-
| 48f || 0.4554 ||
|-
| 52f || 0.4926 ||
|-
| 56f || 0.5280 ||
|-
| 60f || 0.6 || Lower point
|-
| 64f || 0.6629 ||
|-
| 68f || 0.7075 ||
|-
| 72f || 0.7445 ||
|-
| 76f || 0.7783 ||
|-
| 80f || 0.8 || Highest point
|-
| 84f || 0.8253 ||
|-
| 88f || 0.8539 ||
|-
| 92f || 0.8928 ||
|-
| 96f || 0.9375 ||
|-
| 100f || 1.0 || Lower point
|}

Now look to the graphs again and notice that the X travel is now a ''straight'' line.

{{l|Image:bline-track2.png|800px}}

This is the resulting animation and the sifz file.

{{l|Image:bline.gif}}

The sample file: {{l|Media:bline.sifz}}

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

== Mathematical emulation ==

Anyone want to try? :)

==Conclusions==

Doc:Ball Bounce/es

2011-11-13T03:46:16Z

Naturalin: /* Rebote manual de la pelota */

{{Title|Rebote de una pelota}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


Esta página se está traduciendo. Por favor, ten paciencia.

<center>This tutorial is under construction. Please be patient.</center>

This is a tutorial to explain how to create a bounce tutorial. The main target of the tutorial covers the ball movement. It is known that cartoon like balls have also a very deformed poses meanwhile thery are travelling and especially when it hits the ground. This could be covered in a second stage.

==Diferentes aproximaciones para el mismo resultado==

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.
#En la primera se hace el rebote de la pelota manualmente. Eso implicaría crear muchos puntos de interepolación y ajustarlos para concordar con un movimiento parabólico (en tiempo y trayectoria). 
#La segunda manera es usar parámetros de interpolación de los puntos de interpolación (puntos verdes) cuando están colocados en la interpolación TCB. Esto reduciría drásticamente la cifra de interpolaciones y también hace que el tiempo de los rebotes sea más fácil. 
#Para la tercera forma se hace uso del enlace con la línea Béizer. Si se dibuja el camino del rebote de la pelota usando una línea Béizer es fácil hacer siga el camino incluso variando la velocidad. 
#The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

== Rebote manual de la pelota ==

La regla para hacer el rebote manual es dibujar en un papel el rebote deseado. Después marcar la línea horizontal con intervalos regulares y hacerlos coincidir en la intersección de la curva en vertical. Véase la imagen:

{{l|Image:bounce.jpg|256px}}

Teniendo intervalos regulares en el eje horizontal (X) nos da intervalos irregulares en el eje vertival (Y). Esto se debe a la naturaleza de la curva.

Ya que se tengan los puntos localizados en una cuadricula 2D éstos se pueden dibujar directamente en Synfig haciendo uso de la cuadrícula (F11). Después se normalizan los valores para que sean completamente simétricos. Eso nos da la siguiente tabla:

{|
| '''Tiempo''' || '''Posición X''' || '''Posición Y''' || '''Comentarios'''
|-
| 0f || -175.0 || 92.0 || Punto más alto
|-
| 4f || -165.0 || 92.0 ||
|-
| 8f || -155.0 || 81.118 ||
|-
| 12f || -145.0 || 63.678 ||
|-
| 16f || -135.0 || 29.479 ||
|-
| 20f || -125.0 || -15.522 || Punto más bajo
|-
| 24f || -115.0 || 29.479 ||
|-
| 28f || -105.0 || 63.782 ||
|-
| ... || ... ||
|}

You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.

To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

This is the resulting graph for the manual approximation to the ball bounce.

{{l|Image:manual-graph.png|800px}}

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

The resulting animation and file are those ones.

{{l|Image:manual.gif}}

File: {{l|Media:manual.sifz}}

== Ball Bounce using waypoints interpolations==

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 40f || -75.0 || 92.0 || Highest point
|-
| 60f || -25.0 || -15.522 || Lower point
|-
| ... || ...
|}

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

{{l|Image:waypoint-curves1.png|800px}}

But if you edit the TCB parameters this is the result you obtain:

{{l|Image:waypoint-graph2.png|800px}}

The TCB parameters are the following:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''
|-
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0
|-
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| ... || ... ||... || ... || ... || ... || ... || ...
|}

That's the resulting animation:

{{l|Image:waypoint-2.gif}}

And the sample file: {{l|Media:waypoint-2.sifz}}

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

{{l|Image:waypoint-compare.gif}}

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

== Ball Bounce following a path ==

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

*You can see the complete ball bounces in one shot.
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

{{l|Image:bline-path.png}}

 (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 40f || 0.4 || Highest point
|-
| 60f || 0.6 || Lower point
|-
| 80f || 0.8 || Highest point
|-
| 100f || 1.0 || Lower point
|}

This coincides with the main waypoints of the last method we have seen. But look what's the result:

{{l|Image:bline-track.png|800px}}

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 24f || 0.2626 ||
|-
| 28f || 0.3085 ||
|-
| 32f || 0.3463 ||
|-
| 36f || 0.3741 ||
|-
| 40f || 0.4 || Highest point
|-
| 44f || 0.4245 ||
|-
| 48f || 0.4554 ||
|-
| 52f || 0.4926 ||
|-
| 56f || 0.5280 ||
|-
| 60f || 0.6 || Lower point
|-
| 64f || 0.6629 ||
|-
| 68f || 0.7075 ||
|-
| 72f || 0.7445 ||
|-
| 76f || 0.7783 ||
|-
| 80f || 0.8 || Highest point
|-
| 84f || 0.8253 ||
|-
| 88f || 0.8539 ||
|-
| 92f || 0.8928 ||
|-
| 96f || 0.9375 ||
|-
| 100f || 1.0 || Lower point
|}

Now look to the graphs again and notice that the X travel is now a ''straight'' line.

{{l|Image:bline-track2.png|800px}}

This is the resulting animation and the sifz file.

{{l|Image:bline.gif}}

The sample file: {{l|Media:bline.sifz}}

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

== Mathematical emulation ==

Anyone want to try? :)

==Conclusions==

Doc:Ball Bounce/es

2011-11-13T03:33:15Z

Naturalin: /* Rebote manual de la pelota */

{{Title|Rebote de una pelota}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


Esta página se está traduciendo. Por favor, ten paciencia.

<center>This tutorial is under construction. Please be patient.</center>

This is a tutorial to explain how to create a bounce tutorial. The main target of the tutorial covers the ball movement. It is known that cartoon like balls have also a very deformed poses meanwhile thery are travelling and especially when it hits the ground. This could be covered in a second stage.

==Diferentes aproximaciones para el mismo resultado==

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.
#En la primera se hace el rebote de la pelota manualmente. Eso implicaría crear muchos puntos de interepolación y ajustarlos para concordar con un movimiento parabólico (en tiempo y trayectoria). 
#La segunda manera es usar parámetros de interpolación de los puntos de interpolación (puntos verdes) cuando están colocados en la interpolación TCB. Esto reduciría drásticamente la cifra de interpolaciones y también hace que el tiempo de los rebotes sea más fácil. 
#Para la tercera forma se hace uso del enlace con la línea Béizer. Si se dibuja el camino del rebote de la pelota usando una línea Béizer es fácil hacer siga el camino incluso variando la velocidad. 
#The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

== Rebote manual de la pelota ==

La regla para hacer el rebote manual es dibujar en un papel el rebote deseado. Después marcar la línea horizontal con intervalos regulares y hacerlos coincidir en la intersección de la curva en vertical. Véase la imagen:

{{l|Image:bounce.jpg|256px}}

Teniendo intervalos regulares en el eje horizontal (X) nos da intervalos irregulares en el eje vertival (Y). Esto se debe a la naturaleza de la curva.

Ya que se tengan los puntos localizados en una cuadricula 2D éstos se pueden dibujar directamente en Synfig haciendo uso de la cuadrícula (F11). Después se normalizan los valores para que sean completamente simétricos. Eso nos da la siguiente tabla:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 4f || -165.0 || 92.0 ||
|-
| 8f || -155.0 || 81.118 ||
|-
| 12f || -145.0 || 63.678 ||
|-
| 16f || -135.0 || 29.479 ||
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 24f || -115.0 || 29.479 ||
|-
| 28f || -105.0 || 63.782 ||
|-
| ... || ... ||
|}

You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.

To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

This is the resulting graph for the manual approximation to the ball bounce.

{{l|Image:manual-graph.png|800px}}

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

The resulting animation and file are those ones.

{{l|Image:manual.gif}}

File: {{l|Media:manual.sifz}}

== Ball Bounce using waypoints interpolations==

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 40f || -75.0 || 92.0 || Highest point
|-
| 60f || -25.0 || -15.522 || Lower point
|-
| ... || ...
|}

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

{{l|Image:waypoint-curves1.png|800px}}

But if you edit the TCB parameters this is the result you obtain:

{{l|Image:waypoint-graph2.png|800px}}

The TCB parameters are the following:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''
|-
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0
|-
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| ... || ... ||... || ... || ... || ... || ... || ...
|}

That's the resulting animation:

{{l|Image:waypoint-2.gif}}

And the sample file: {{l|Media:waypoint-2.sifz}}

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

{{l|Image:waypoint-compare.gif}}

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

== Ball Bounce following a path ==

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

*You can see the complete ball bounces in one shot.
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

{{l|Image:bline-path.png}}

 (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 40f || 0.4 || Highest point
|-
| 60f || 0.6 || Lower point
|-
| 80f || 0.8 || Highest point
|-
| 100f || 1.0 || Lower point
|}

This coincides with the main waypoints of the last method we have seen. But look what's the result:

{{l|Image:bline-track.png|800px}}

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 24f || 0.2626 ||
|-
| 28f || 0.3085 ||
|-
| 32f || 0.3463 ||
|-
| 36f || 0.3741 ||
|-
| 40f || 0.4 || Highest point
|-
| 44f || 0.4245 ||
|-
| 48f || 0.4554 ||
|-
| 52f || 0.4926 ||
|-
| 56f || 0.5280 ||
|-
| 60f || 0.6 || Lower point
|-
| 64f || 0.6629 ||
|-
| 68f || 0.7075 ||
|-
| 72f || 0.7445 ||
|-
| 76f || 0.7783 ||
|-
| 80f || 0.8 || Highest point
|-
| 84f || 0.8253 ||
|-
| 88f || 0.8539 ||
|-
| 92f || 0.8928 ||
|-
| 96f || 0.9375 ||
|-
| 100f || 1.0 || Lower point
|}

Now look to the graphs again and notice that the X travel is now a ''straight'' line.

{{l|Image:bline-track2.png|800px}}

This is the resulting animation and the sifz file.

{{l|Image:bline.gif}}

The sample file: {{l|Media:bline.sifz}}

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

== Mathematical emulation ==

Anyone want to try? :)

==Conclusions==

Doc:Ball Bounce/es

2011-11-13T03:27:00Z

Naturalin: /* Rebote manual de la pelotaFile:Example.jpg */

{{Title|Rebote de una pelota}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


Esta página se está traduciendo. Por favor, ten paciencia.

<center>This tutorial is under construction. Please be patient.</center>

This is a tutorial to explain how to create a bounce tutorial. The main target of the tutorial covers the ball movement. It is known that cartoon like balls have also a very deformed poses meanwhile thery are travelling and especially when it hits the ground. This could be covered in a second stage.

==Diferentes aproximaciones para el mismo resultado==

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.
#En la primera se hace el rebote de la pelota manualmente. Eso implicaría crear muchos puntos de interepolación y ajustarlos para concordar con un movimiento parabólico (en tiempo y trayectoria). 
#La segunda manera es usar parámetros de interpolación de los puntos de interpolación (puntos verdes) cuando están colocados en la interpolación TCB. Esto reduciría drásticamente la cifra de interpolaciones y también hace que el tiempo de los rebotes sea más fácil. 
#Para la tercera forma se hace uso del enlace con la línea Béizer. Si se dibuja el camino del rebote de la pelota usando una línea Béizer es fácil hacer siga el camino incluso variando la velocidad. 
#The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

== Rebote manual de la pelota ==

[[File:Example.jpg]]

La regla para hacer el rebote manual es dibujar en un papel el rebote deseado. Después marcar la línea horizontal con intervalos regulares y hacerlos coincidir en la intersección de la curva en vertical. Véase la imagen:

{{l|Image:bounce.jpg|256px}}

Teniendo intervalos regulares en el eje horizontal (X) nos da intervalos irregulares en el eje vertival (Y). Esto se debe a la naturaleza de la curva.

Once the points are located in a 2D grid then it can be drawn directly in Synfig doing use of the grid (F11). After drawing them we normalized the values to be completely symmetrical. That gives the following table:e

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 4f || -165.0 || 92.0 ||
|-
| 8f || -155.0 || 81.118 ||
|-
| 12f || -145.0 || 63.678 ||
|-
| 16f || -135.0 || 29.479 ||
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 24f || -115.0 || 29.479 ||
|-
| 28f || -105.0 || 63.782 ||
|-
| ... || ... ||
|}

You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.

To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

This is the resulting graph for the manual approximation to the ball bounce.

{{l|Image:manual-graph.png|800px}}

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

The resulting animation and file are those ones.

{{l|Image:manual.gif}}

File: {{l|Media:manual.sifz}}

== Ball Bounce using waypoints interpolations==

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 40f || -75.0 || 92.0 || Highest point
|-
| 60f || -25.0 || -15.522 || Lower point
|-
| ... || ...
|}

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

{{l|Image:waypoint-curves1.png|800px}}

But if you edit the TCB parameters this is the result you obtain:

{{l|Image:waypoint-graph2.png|800px}}

The TCB parameters are the following:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''
|-
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0
|-
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| ... || ... ||... || ... || ... || ... || ... || ...
|}

That's the resulting animation:

{{l|Image:waypoint-2.gif}}

And the sample file: {{l|Media:waypoint-2.sifz}}

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

{{l|Image:waypoint-compare.gif}}

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

== Ball Bounce following a path ==

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

*You can see the complete ball bounces in one shot.
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

{{l|Image:bline-path.png}}

 (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 40f || 0.4 || Highest point
|-
| 60f || 0.6 || Lower point
|-
| 80f || 0.8 || Highest point
|-
| 100f || 1.0 || Lower point
|}

This coincides with the main waypoints of the last method we have seen. But look what's the result:

{{l|Image:bline-track.png|800px}}

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 24f || 0.2626 ||
|-
| 28f || 0.3085 ||
|-
| 32f || 0.3463 ||
|-
| 36f || 0.3741 ||
|-
| 40f || 0.4 || Highest point
|-
| 44f || 0.4245 ||
|-
| 48f || 0.4554 ||
|-
| 52f || 0.4926 ||
|-
| 56f || 0.5280 ||
|-
| 60f || 0.6 || Lower point
|-
| 64f || 0.6629 ||
|-
| 68f || 0.7075 ||
|-
| 72f || 0.7445 ||
|-
| 76f || 0.7783 ||
|-
| 80f || 0.8 || Highest point
|-
| 84f || 0.8253 ||
|-
| 88f || 0.8539 ||
|-
| 92f || 0.8928 ||
|-
| 96f || 0.9375 ||
|-
| 100f || 1.0 || Lower point
|}

Now look to the graphs again and notice that the X travel is now a ''straight'' line.

{{l|Image:bline-track2.png|800px}}

This is the resulting animation and the sifz file.

{{l|Image:bline.gif}}

The sample file: {{l|Media:bline.sifz}}

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

== Mathematical emulation ==

Anyone want to try? :)

==Conclusions==

Doc:Ball Bounce/es

2011-11-13T03:25:33Z

Naturalin: /* Manual Ball Bounce */

{{Title|Rebote de una pelota}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


Esta página se está traduciendo. Por favor, ten paciencia.

<center>This tutorial is under construction. Please be patient.</center>

This is a tutorial to explain how to create a bounce tutorial. The main target of the tutorial covers the ball movement. It is known that cartoon like balls have also a very deformed poses meanwhile thery are travelling and especially when it hits the ground. This could be covered in a second stage.

==Diferentes aproximaciones para el mismo resultado==

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.
#En la primera se hace el rebote de la pelota manualmente. Eso implicaría crear muchos puntos de interepolación y ajustarlos para concordar con un movimiento parabólico (en tiempo y trayectoria). 
#La segunda manera es usar parámetros de interpolación de los puntos de interpolación (puntos verdes) cuando están colocados en la interpolación TCB. Esto reduciría drásticamente la cifra de interpolaciones y también hace que el tiempo de los rebotes sea más fácil. 
#Para la tercera forma se hace uso del enlace con la línea Béizer. Si se dibuja el camino del rebote de la pelota usando una línea Béizer es fácil hacer siga el camino incluso variando la velocidad. 
#The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

== Rebote manual de la pelota[[File:Example.jpg]] ==

La regla para hacer el rebote manual es dibujar en un papel el rebote deseado. Después marcar la línea horizontal con intervalos regulares y hacerlos coincidir en la intersección de la curva en vertical. Véase la imagen:

{{l|Image:bounce.jpg|256px}}

Teniendo intervalos regulares en el eje horizontal (X) nos da intervalos irregulares en el eje vertival (Y). Esto se debe a la naturaleza de la curva.

Once the points are located in a 2D grid then it can be drawn directly in Synfig doing use of the grid (F11). After drawing them we normalized the values to be completely symmetrical. That gives the following table:e

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 4f || -165.0 || 92.0 ||
|-
| 8f || -155.0 || 81.118 ||
|-
| 12f || -145.0 || 63.678 ||
|-
| 16f || -135.0 || 29.479 ||
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 24f || -115.0 || 29.479 ||
|-
| 28f || -105.0 || 63.782 ||
|-
| ... || ... ||
|}

You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.

To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

This is the resulting graph for the manual approximation to the ball bounce.

{{l|Image:manual-graph.png|800px}}

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

The resulting animation and file are those ones.

{{l|Image:manual.gif}}

File: {{l|Media:manual.sifz}}

== Ball Bounce using waypoints interpolations==

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 40f || -75.0 || 92.0 || Highest point
|-
| 60f || -25.0 || -15.522 || Lower point
|-
| ... || ...
|}

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

{{l|Image:waypoint-curves1.png|800px}}

But if you edit the TCB parameters this is the result you obtain:

{{l|Image:waypoint-graph2.png|800px}}

The TCB parameters are the following:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''
|-
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0
|-
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| ... || ... ||... || ... || ... || ... || ... || ...
|}

That's the resulting animation:

{{l|Image:waypoint-2.gif}}

And the sample file: {{l|Media:waypoint-2.sifz}}

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

{{l|Image:waypoint-compare.gif}}

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

== Ball Bounce following a path ==

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

*You can see the complete ball bounces in one shot.
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

{{l|Image:bline-path.png}}

 (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 40f || 0.4 || Highest point
|-
| 60f || 0.6 || Lower point
|-
| 80f || 0.8 || Highest point
|-
| 100f || 1.0 || Lower point
|}

This coincides with the main waypoints of the last method we have seen. But look what's the result:

{{l|Image:bline-track.png|800px}}

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 24f || 0.2626 ||
|-
| 28f || 0.3085 ||
|-
| 32f || 0.3463 ||
|-
| 36f || 0.3741 ||
|-
| 40f || 0.4 || Highest point
|-
| 44f || 0.4245 ||
|-
| 48f || 0.4554 ||
|-
| 52f || 0.4926 ||
|-
| 56f || 0.5280 ||
|-
| 60f || 0.6 || Lower point
|-
| 64f || 0.6629 ||
|-
| 68f || 0.7075 ||
|-
| 72f || 0.7445 ||
|-
| 76f || 0.7783 ||
|-
| 80f || 0.8 || Highest point
|-
| 84f || 0.8253 ||
|-
| 88f || 0.8539 ||
|-
| 92f || 0.8928 ||
|-
| 96f || 0.9375 ||
|-
| 100f || 1.0 || Lower point
|}

Now look to the graphs again and notice that the X travel is now a ''straight'' line.

{{l|Image:bline-track2.png|800px}}

This is the resulting animation and the sifz file.

{{l|Image:bline.gif}}

The sample file: {{l|Media:bline.sifz}}

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

== Mathematical emulation ==

Anyone want to try? :)

==Conclusions==

Doc:Ball Bounce/es

2011-11-08T21:33:59Z

Naturalin: /* Diferentes aproximaciones para el mismo resultado */

{{Title|Rebote de una pelota}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


Esta página se está traduciendo. Por favor, ten paciencia.

<center>This tutorial is under construction. Please be patient.</center>

This is a tutorial to explain how to create a bounce tutorial. The main target of the tutorial covers the ball movement. It is known that cartoon like balls have also a very deformed poses meanwhile thery are travelling and especially when it hits the ground. This could be covered in a second stage.

==Diferentes aproximaciones para el mismo resultado==

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.
#En la primera se hace el rebote de la pelota manualmente. Eso implicaría crear muchos puntos de interepolación y ajustarlos para concordar con un movimiento parabólico (en tiempo y trayectoria). 
#La segunda manera es usar parámetros de interpolación de los puntos de interpolación (puntos verdes) cuando están colocados en la interpolación TCB. Esto reduciría drásticamente la cifra de interpolaciones y también hace que el tiempo de los rebotes sea más fácil. 
#Para la tercera forma se hace uso del enlace con la línea Béizer. Si se dibuja el camino del rebote de la pelota usando una línea Béizer es fácil hacer siga el camino incluso variando la velocidad. 
#The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

== Manual Ball Bounce ==

The rule to make the ball bounce manually is to draw in a paper the desired bounce. Then mark the horizontal line with regular intervals and match the curve intersection in vertical. See the image:

{{l|Image:bounce.jpg|256px}}

You can notice that having regular intervals in the horizontal axis gives irregular intervals to the vertical axis. It is due to the nature of the curve.

Once the points are located in a 2D grid then it can be drawn directly in Synfig doing use of the grid (F11). After drawing them we normalized the values to be completely symmetrical. That gives the following table:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 4f || -165.0 || 92.0 ||
|-
| 8f || -155.0 || 81.118 ||
|-
| 12f || -145.0 || 63.678 ||
|-
| 16f || -135.0 || 29.479 ||
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 24f || -115.0 || 29.479 ||
|-
| 28f || -105.0 || 63.782 ||
|-
| ... || ... ||
|}

You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.

To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

This is the resulting graph for the manual approximation to the ball bounce.

{{l|Image:manual-graph.png|800px}}

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

The resulting animation and file are those ones.

{{l|Image:manual.gif}}

File: {{l|Media:manual.sifz}}

== Ball Bounce using waypoints interpolations==

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 40f || -75.0 || 92.0 || Highest point
|-
| 60f || -25.0 || -15.522 || Lower point
|-
| ... || ...
|}

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

{{l|Image:waypoint-curves1.png|800px}}

But if you edit the TCB parameters this is the result you obtain:

{{l|Image:waypoint-graph2.png|800px}}

The TCB parameters are the following:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''
|-
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0
|-
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| ... || ... ||... || ... || ... || ... || ... || ...
|}

That's the resulting animation:

{{l|Image:waypoint-2.gif}}

And the sample file: {{l|Media:waypoint-2.sifz}}

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

{{l|Image:waypoint-compare.gif}}

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

== Ball Bounce following a path ==

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

*You can see the complete ball bounces in one shot.
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

{{l|Image:bline-path.png}}

 (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 40f || 0.4 || Highest point
|-
| 60f || 0.6 || Lower point
|-
| 80f || 0.8 || Highest point
|-
| 100f || 1.0 || Lower point
|}

This coincides with the main waypoints of the last method we have seen. But look what's the result:

{{l|Image:bline-track.png|800px}}

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 24f || 0.2626 ||
|-
| 28f || 0.3085 ||
|-
| 32f || 0.3463 ||
|-
| 36f || 0.3741 ||
|-
| 40f || 0.4 || Highest point
|-
| 44f || 0.4245 ||
|-
| 48f || 0.4554 ||
|-
| 52f || 0.4926 ||
|-
| 56f || 0.5280 ||
|-
| 60f || 0.6 || Lower point
|-
| 64f || 0.6629 ||
|-
| 68f || 0.7075 ||
|-
| 72f || 0.7445 ||
|-
| 76f || 0.7783 ||
|-
| 80f || 0.8 || Highest point
|-
| 84f || 0.8253 ||
|-
| 88f || 0.8539 ||
|-
| 92f || 0.8928 ||
|-
| 96f || 0.9375 ||
|-
| 100f || 1.0 || Lower point
|}

Now look to the graphs again and notice that the X travel is now a ''straight'' line.

{{l|Image:bline-track2.png|800px}}

This is the resulting animation and the sifz file.

{{l|Image:bline.gif}}

The sample file: {{l|Media:bline.sifz}}

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

== Mathematical emulation ==

Anyone want to try? :)

==Conclusions==

Doc:Ball Bounce/es

2011-11-07T18:43:37Z

Naturalin: /* Diferentes aproximaciones para el mismo resultado */

{{Title|Rebote de una pelota}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


Esta página se está traduciendo. Por favor, ten paciencia.

<center>This tutorial is under construction. Please be patient.</center>

This is a tutorial to explain how to create a bounce tutorial. The main target of the tutorial covers the ball movement. It is known that cartoon like balls have also a very deformed poses meanwhile thery are travelling and especially when it hits the ground. This could be covered in a second stage.

==Diferentes aproximaciones para el mismo resultado==

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.
#La primera es hacer el rebote de la pelota manualmente. Eso implicaría crear muchos puntos de interepolación y ajustarlos para concordar con un movimiento parabólico (en tiempo y trayectoria). 
#La segunda manera es usar parámetros de interpolación de los puntos de interpolación (puntos verdes) cuando están colocados en la interpolación TCB. Esto reduciría drásticamente la cifra de interpolaciones y también hace que el tiempo de los rebotes sea más fácil. 
#Third way to perform a bounced ball is to make use of the Link to bline ability. If you draw the path of a bouncing ball using a bline it is quite easy to make the ball follow the path even changing the bouncing speed. 
#The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

== Manual Ball Bounce ==

The rule to make the ball bounce manually is to draw in a paper the desired bounce. Then mark the horizontal line with regular intervals and match the curve intersection in vertical. See the image:

{{l|Image:bounce.jpg|256px}}

You can notice that having regular intervals in the horizontal axis gives irregular intervals to the vertical axis. It is due to the nature of the curve.

Once the points are located in a 2D grid then it can be drawn directly in Synfig doing use of the grid (F11). After drawing them we normalized the values to be completely symmetrical. That gives the following table:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 4f || -165.0 || 92.0 ||
|-
| 8f || -155.0 || 81.118 ||
|-
| 12f || -145.0 || 63.678 ||
|-
| 16f || -135.0 || 29.479 ||
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 24f || -115.0 || 29.479 ||
|-
| 28f || -105.0 || 63.782 ||
|-
| ... || ... ||
|}

You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.

To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

This is the resulting graph for the manual approximation to the ball bounce.

{{l|Image:manual-graph.png|800px}}

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

The resulting animation and file are those ones.

{{l|Image:manual.gif}}

File: {{l|Media:manual.sifz}}

== Ball Bounce using waypoints interpolations==

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 40f || -75.0 || 92.0 || Highest point
|-
| 60f || -25.0 || -15.522 || Lower point
|-
| ... || ...
|}

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

{{l|Image:waypoint-curves1.png|800px}}

But if you edit the TCB parameters this is the result you obtain:

{{l|Image:waypoint-graph2.png|800px}}

The TCB parameters are the following:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''
|-
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0
|-
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| ... || ... ||... || ... || ... || ... || ... || ...
|}

That's the resulting animation:

{{l|Image:waypoint-2.gif}}

And the sample file: {{l|Media:waypoint-2.sifz}}

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

{{l|Image:waypoint-compare.gif}}

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

== Ball Bounce following a path ==

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

*You can see the complete ball bounces in one shot.
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

{{l|Image:bline-path.png}}

 (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 40f || 0.4 || Highest point
|-
| 60f || 0.6 || Lower point
|-
| 80f || 0.8 || Highest point
|-
| 100f || 1.0 || Lower point
|}

This coincides with the main waypoints of the last method we have seen. But look what's the result:

{{l|Image:bline-track.png|800px}}

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 24f || 0.2626 ||
|-
| 28f || 0.3085 ||
|-
| 32f || 0.3463 ||
|-
| 36f || 0.3741 ||
|-
| 40f || 0.4 || Highest point
|-
| 44f || 0.4245 ||
|-
| 48f || 0.4554 ||
|-
| 52f || 0.4926 ||
|-
| 56f || 0.5280 ||
|-
| 60f || 0.6 || Lower point
|-
| 64f || 0.6629 ||
|-
| 68f || 0.7075 ||
|-
| 72f || 0.7445 ||
|-
| 76f || 0.7783 ||
|-
| 80f || 0.8 || Highest point
|-
| 84f || 0.8253 ||
|-
| 88f || 0.8539 ||
|-
| 92f || 0.8928 ||
|-
| 96f || 0.9375 ||
|-
| 100f || 1.0 || Lower point
|}

Now look to the graphs again and notice that the X travel is now a ''straight'' line.

{{l|Image:bline-track2.png|800px}}

This is the resulting animation and the sifz file.

{{l|Image:bline.gif}}

The sample file: {{l|Media:bline.sifz}}

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

== Mathematical emulation ==

Anyone want to try? :)

==Conclusions==

Doc:Ball Bounce/es

2011-11-07T01:54:01Z

Naturalin: /* Different aproximations for the same result */

{{Title|Rebote de una pelota}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


Esta página se está traduciendo. Por favor, ten paciencia.

<center>This tutorial is under construction. Please be patient.</center>

This is a tutorial to explain how to create a bounce tutorial. The main target of the tutorial covers the ball movement. It is known that cartoon like balls have also a very deformed poses meanwhile thery are travelling and especially when it hits the ground. This could be covered in a second stage.

==Diferentes aproximaciones para el mismo resultado==

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.
#La primera es hacer el rebote de la pelota manualmente. Eso implicaría crear muchos "waypoints" y ajustarlos para concordar con un movimiento parabólico (en tiempo y trayectoria). 
#La segunda manera es usar parámetros de interpolación de los puntos verdes (waypoints) cuando están colocados en la interpolación TCB. Esto reduciría drásticamente la cifra de interpolaciones y también hace que el tiempo de los rebotes sea más fácil. 
#Third way to perform a bounced ball is to make use of the Link to bline ability. If you draw the path of a bouncing ball using a bline it is quite easy to make the ball follow the path even changing the bouncing speed. 
#The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

== Manual Ball Bounce ==

The rule to make the ball bounce manually is to draw in a paper the desired bounce. Then mark the horizontal line with regular intervals and match the curve intersection in vertical. See the image:

{{l|Image:bounce.jpg|256px}}

You can notice that having regular intervals in the horizontal axis gives irregular intervals to the vertical axis. It is due to the nature of the curve.

Once the points are located in a 2D grid then it can be drawn directly in Synfig doing use of the grid (F11). After drawing them we normalized the values to be completely symmetrical. That gives the following table:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 4f || -165.0 || 92.0 ||
|-
| 8f || -155.0 || 81.118 ||
|-
| 12f || -145.0 || 63.678 ||
|-
| 16f || -135.0 || 29.479 ||
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 24f || -115.0 || 29.479 ||
|-
| 28f || -105.0 || 63.782 ||
|-
| ... || ... ||
|}

You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.

To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

This is the resulting graph for the manual approximation to the ball bounce.

{{l|Image:manual-graph.png|800px}}

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

The resulting animation and file are those ones.

{{l|Image:manual.gif}}

File: {{l|Media:manual.sifz}}

== Ball Bounce using waypoints interpolations==

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 40f || -75.0 || 92.0 || Highest point
|-
| 60f || -25.0 || -15.522 || Lower point
|-
| ... || ...
|}

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

{{l|Image:waypoint-curves1.png|800px}}

But if you edit the TCB parameters this is the result you obtain:

{{l|Image:waypoint-graph2.png|800px}}

The TCB parameters are the following:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''
|-
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0
|-
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| ... || ... ||... || ... || ... || ... || ... || ...
|}

That's the resulting animation:

{{l|Image:waypoint-2.gif}}

And the sample file: {{l|Media:waypoint-2.sifz}}

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

{{l|Image:waypoint-compare.gif}}

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

== Ball Bounce following a path ==

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

*You can see the complete ball bounces in one shot.
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

{{l|Image:bline-path.png}}

 (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 40f || 0.4 || Highest point
|-
| 60f || 0.6 || Lower point
|-
| 80f || 0.8 || Highest point
|-
| 100f || 1.0 || Lower point
|}

This coincides with the main waypoints of the last method we have seen. But look what's the result:

{{l|Image:bline-track.png|800px}}

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 24f || 0.2626 ||
|-
| 28f || 0.3085 ||
|-
| 32f || 0.3463 ||
|-
| 36f || 0.3741 ||
|-
| 40f || 0.4 || Highest point
|-
| 44f || 0.4245 ||
|-
| 48f || 0.4554 ||
|-
| 52f || 0.4926 ||
|-
| 56f || 0.5280 ||
|-
| 60f || 0.6 || Lower point
|-
| 64f || 0.6629 ||
|-
| 68f || 0.7075 ||
|-
| 72f || 0.7445 ||
|-
| 76f || 0.7783 ||
|-
| 80f || 0.8 || Highest point
|-
| 84f || 0.8253 ||
|-
| 88f || 0.8539 ||
|-
| 92f || 0.8928 ||
|-
| 96f || 0.9375 ||
|-
| 100f || 1.0 || Lower point
|}

Now look to the graphs again and notice that the X travel is now a ''straight'' line.

{{l|Image:bline-track2.png|800px}}

This is the resulting animation and the sifz file.

{{l|Image:bline.gif}}

The sample file: {{l|Media:bline.sifz}}

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

== Mathematical emulation ==

Anyone want to try? :)

==Conclusions==

Doc:Ball Bounce/es

2011-11-07T01:46:06Z

Naturalin: /* Different aproximations for the same result */

{{Title|Rebote de una pelota}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


Esta página se está traduciendo. Por favor, ten paciencia.

<center>This tutorial is under construction. Please be patient.</center>

This is a tutorial to explain how to create a bounce tutorial. The main target of the tutorial covers the ball movement. It is known that cartoon like balls have also a very deformed poses meanwhile thery are travelling and especially when it hits the ground. This could be covered in a second stage.

==Different aproximations for the same result==

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.
#La primera es hacer el rebote de la pelota manualmente. Eso implicaría crear muchos "waypoints" y ajustarlos para concordar con un movimiento parabólico (en tiempo y trayectoria). 
#La segunda manera es usar parámetros de interpolación de los puntos verdes (waypoints) cuando están colocados en la interpolación TCB. Esto reduciría drásticamente la cifra de interpolaciones y también hace que el tiempo de los rebotes sea más fácil. 
#Third way to perform a bounced ball is to make use of the Link to bline ability. If you draw the path of a bouncing ball using a bline it is quite easy to make the ball follow the path even changing the bouncing speed. 
#The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

== Manual Ball Bounce ==

The rule to make the ball bounce manually is to draw in a paper the desired bounce. Then mark the horizontal line with regular intervals and match the curve intersection in vertical. See the image:

{{l|Image:bounce.jpg|256px}}

You can notice that having regular intervals in the horizontal axis gives irregular intervals to the vertical axis. It is due to the nature of the curve.

Once the points are located in a 2D grid then it can be drawn directly in Synfig doing use of the grid (F11). After drawing them we normalized the values to be completely symmetrical. That gives the following table:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 4f || -165.0 || 92.0 ||
|-
| 8f || -155.0 || 81.118 ||
|-
| 12f || -145.0 || 63.678 ||
|-
| 16f || -135.0 || 29.479 ||
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 24f || -115.0 || 29.479 ||
|-
| 28f || -105.0 || 63.782 ||
|-
| ... || ... ||
|}

You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.

To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

This is the resulting graph for the manual approximation to the ball bounce.

{{l|Image:manual-graph.png|800px}}

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

The resulting animation and file are those ones.

{{l|Image:manual.gif}}

File: {{l|Media:manual.sifz}}

== Ball Bounce using waypoints interpolations==

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 40f || -75.0 || 92.0 || Highest point
|-
| 60f || -25.0 || -15.522 || Lower point
|-
| ... || ...
|}

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

{{l|Image:waypoint-curves1.png|800px}}

But if you edit the TCB parameters this is the result you obtain:

{{l|Image:waypoint-graph2.png|800px}}

The TCB parameters are the following:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''
|-
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0
|-
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| ... || ... ||... || ... || ... || ... || ... || ...
|}

That's the resulting animation:

{{l|Image:waypoint-2.gif}}

And the sample file: {{l|Media:waypoint-2.sifz}}

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

{{l|Image:waypoint-compare.gif}}

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

== Ball Bounce following a path ==

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

*You can see the complete ball bounces in one shot.
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

{{l|Image:bline-path.png}}

 (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 40f || 0.4 || Highest point
|-
| 60f || 0.6 || Lower point
|-
| 80f || 0.8 || Highest point
|-
| 100f || 1.0 || Lower point
|}

This coincides with the main waypoints of the last method we have seen. But look what's the result:

{{l|Image:bline-track.png|800px}}

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 24f || 0.2626 ||
|-
| 28f || 0.3085 ||
|-
| 32f || 0.3463 ||
|-
| 36f || 0.3741 ||
|-
| 40f || 0.4 || Highest point
|-
| 44f || 0.4245 ||
|-
| 48f || 0.4554 ||
|-
| 52f || 0.4926 ||
|-
| 56f || 0.5280 ||
|-
| 60f || 0.6 || Lower point
|-
| 64f || 0.6629 ||
|-
| 68f || 0.7075 ||
|-
| 72f || 0.7445 ||
|-
| 76f || 0.7783 ||
|-
| 80f || 0.8 || Highest point
|-
| 84f || 0.8253 ||
|-
| 88f || 0.8539 ||
|-
| 92f || 0.8928 ||
|-
| 96f || 0.9375 ||
|-
| 100f || 1.0 || Lower point
|}

Now look to the graphs again and notice that the X travel is now a ''straight'' line.

{{l|Image:bline-track2.png|800px}}

This is the resulting animation and the sifz file.

{{l|Image:bline.gif}}

The sample file: {{l|Media:bline.sifz}}

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

== Mathematical emulation ==

Anyone want to try? :)

==Conclusions==

Doc:Animation Basics/es

2011-11-07T01:40:58Z

Naturalin: /* La lista de fotogramas claves */

{{Title|Bases de la Animación}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Basic}}

== Introducción ==

Crear una animación en Synfig es realmente sencillo: Significa básicamente cambiar un dibujo - solo necesitas crear el primer estado y el ultimo estado de un cambio, y Synfig se hará cargo de los pasos entre ambos.

Demos un vistazo a un ejemplo sencillo. Considera una luz en movimiento similar a la que está en frente del auto del Caballero Andante. Deja el realismo y obtendrás un circulo que se mueve de derecha a izquierda, y lo repite. En otras palabras, necesitarás crear tres 'pasos' o 'etapas':
# El circulo está en la Izquierda.
# El circulo está en la Derecha.
# El circulo está de regreso en la Izquierda.

Vamos a hacerlo.

== Preparando el espacio de trabajo ==

Inicia Synfig Studio, y crea un nuevo archivo. Haz click en el menú 'Circunflejo' (entre la regla horizontal y vertical, en la esquina superior izquierda del lienzo), luego "Editar" y luego "Propiedades". Un dialogo llamado 'Propiedades' aparecerá. Dale un nuevo nombre a tu archivo y agrégale una descripción, luego dale click a "Aplicar" (no hagas click en "guardar" aun -- aun no hemos terminado con la explicacion del dialogo de "propiedades"). Asegúrate de que editaste 'tiempo de fin'. La extraña vista '0f' cambiara hacia una presentación mas familiar en cuanto hagas click en "Aplicar". Establecerlo a 2 segundos.

{{l|Image:File Properties Dialog - End Time.jpg}}

Ahora crea un simple rectángulo negro que servirá como nuestro fondo. No es necesario que cubra todo el lienzo.

{{l|Image:synfig_tut_2.png}}

Ahora necesitamos un circulo. Cambia el color de pintar a rojo, y dibuja un circulo. No importa si no es perfecto: Puedes editarlo. Activa la 'Herramienta Normal', y haz click en el circulo. Esto te llevará a varias modos de edición los cuales son fáciles de detectar por el pequeño punto verde en el medio del circulo y el rectángulo blanco al rededor de él. Puedes mover el circulo arrastrándolo por el punto verde en el medio.

{{l|Image:synfig_tut_3.png}}

Estos son los primeros pasos para dibujar un objeto y moverlo, pero aun no animarlo, dirás. Es más. Demos un vistazo a como esto funciona.

== Agregando movimiento ==

Al principio, colocaste un valor de 2 segundos en el dialogo de 'propiedades'. Debido a esto, tu ventana del lienzo (en la que haces tus dibujos) obtuvo capacidades adicionales. Hay un deslizador gris, por ejemplo. Puedes hacer click en el, y un pequeño indicador naranja aparecerá pero nada cambiará. Esto es porque necesitas cambiar primero al 'Modo de Edición Animado' haciendo click en el punto verde justo a la derecha del deslizador gris del tiempo. Notarás que tu lienzo tomará un delineado rojo; esto te recordará que los cambios que hagas a tus objetos, ahora afectarán la animación.

{{l|Image:synfig_tut_4.png}}

Anteriormente, tres 'pasos' o 'etapas' fueron mencionados. Estos son representados por los llamados '{{l|Keyframe|fotogramas claves}}' (solo en caso de que estes familiarizado con la codificación de vídeo: No, no es lo mismo!!). Un fotograma clave es una imagen en el tiempo donde algo importante pasa con tus objetos.

Haz click en la ficha del Fotograma clave -- esta es la que tiene la pequeña llave en la ventana de 'Parámetros, etc.' -- para ser capaz de editar los fotogramas. Ahora haz click en el pequeño signo de 'más' y podrás obtener una nueva entrada en la lista de mostrados '0f, 0f, (JPM)'.

{{l|Image:params.png}}

Si esto no paso, hiciste algo que no se menciono hasta ahora. Cierra tus archivos y empieza de nuevo.

Si la entrada aparece, ve a la marca '1s 0f' en la barra del tiempo. El pequeño indicador naranja debería moverse hasta ahí. Luego agrega otro fotograma clave haciendo click en el pequeño símbolo de más. Repite el proceso con el indicador de la barra de tiempo puesta en '2s 0f'. Deberías tener 3 fotogramas claves en la lista, ahora.

== El s's y f's: Entendiendo la línea de tiempo ==
Oye ahora, Ya te habrás dado cuenta lo que esos misteriosos '1s 0f' -tipos de marcas representan. Ellos indican un punto específico en la línea de tiempo, expresando la ubicación en términos de segundos (s) y marcos (f).

Cada segundo es dividido en 24 marcos, muy parecido a una métrica o cinta de medir dividida en 100 centímetros. Las marcas del marco empiezan en cero (0) y suben hasta 24, en cuyo caso un nuevo segundo es introducido y la cuenta de los marcos regresa a cero.

Por ejemplo: "tres marcos en el sexto segundo" de una animación usando la notación de esta línea de tiempo serían "5s 3f." ¿Por qué "5s" en vez de "6s"? Porque la cuenta siempre empieza ''desde cero''.

== La lista de fotogramas claves ==

La lista de fotogramas claves es bastante fácil de entender: Ella muestra el 'tiempo' lo que es básicamente el inicio del tiempo, 'Longitud' que es auto explicativa, 'Saltos' que los cubriremos luego, y 'Descripción' que es, nuevamente, auto explicativa.

Ahora, ¿te estás preguntando sobre las entradas llamadas '(JMP)'? De hecho, estos son enlaces justo como lo son el la web: Haz click sobre ellos, y el indicador de tu linea de tiempo saltará hacia el tiempo exacto.

Puedes usar esto para editar tu imagen para un momento dado en el tiempo. Por ejemplo, ahora puedes saltar al primer segundo, y mover el circulo rojo a la derecha. ¡Ahí! hiciste tu primer movimiento; ¡tu primera animación con Synfig!

{{l|Image:synfig_tut_5.png}}

¿Te preguntarás donde está la animación? Solo haz click en una posición arbitraria en la linea de tiempo: Notarás que el circulo rojo esta en posiciones donde tu no lo moviste! ¿Qué paso? Synfig se dio cuenta de lo que querías hacer, saber que querías mover el circulo, y dibujar todas las imágenes entre estos estados. Cada imagen hará luego un fotograma en tu animación; y el circulo parecerá estarse moviendo.

== Renderizando tu animación ==

Antes de que puedas ver tu animación, necesitas procesar (o renderizar) tu trabajo. Hay dos maneras de hacerlo; usando el synfigstudio (lo que has estado usando hasta ahora), o el programa de línea de comando de synfig.

Para hacer eso, cierra el modo de edición de animación haciendo click en el punto rojo en la pestaña del editor de la línea de tiempo, y graba tu archivo; por instancia bajo el nombre de CaballeroAndanteBasico.sif. Luego presiona el símbolo > en la esquina superior izquierda de la ventana del lienzo para abrir el menú, abre el menú de 'archivo' y haz click en el artículo 'mostrar'. Cambia el nombre a CaballeroAndanteBasico.gif en la misma ubicación donde guardaste CaballeroAndanteBasico.sif y escoje "gif" en vez del formato "Auto", luego haz click en "mostrar". Dependiendo de la velocidad de tu procesador esto solo debería tomar un momento, pero finalmente una ventana con una barra de estado te dirá "Archivo Renderizado Satisfactoriamente". El atributo "magick++" (si está disponible) produce gifs mucho mejores que el "gif" porque optimiza la paleta para las imágenes.

Abre CaballeroAndanteBasico.gif en Firefox o cualquier otra aplicación que sea capáz de mostrar gifs animados. De todas formas, Firefox reproducirá el gis todo el tiempo lo que hace que una animación corta dure bastante tiempo. Si estás viendo un circulo rojo moverse de izquierda a derecha y regresarse: Felicitaciones! Haz hecho tu primera animación!

''Nota: también puedes ver una vista previa de tu animación. Presiona el símbolo > en la esquina superior izquierda de la ventana del lienzo para abrir el menú. Luego escoge Archivo-> Previsualizar.''

{{l|Image:synfig_tut_6.png}}

Si prefieres usar la línea de comandos en vez del renderizado por el menú, abre un terminal (en Windows, ve a Inicio -> Ejecutar -> tipea cmd<enter>), cambia al directorio donde guardaste el archivo, y tipea algo como

synfig -t gif CaballeroAndanteBasico.sif

ADVERTENCIA: La versión que estas usando posiblemente no soporte salidas GIF por el momento, dependerá de la versión y las opciones de compilación.

Unos pocos mensajes aparecerán que no importan en este momento. Dependiendo de la velocidad de tu procesador debería tomar un momento, pero finalmente una linea como

CaballeroAndanteBasico.sif ==> CaballeroAndanteBasico.gif: DONE

deberá aparecer, luego estas listo para ver tu gif animado usando firefox o cualquier programa mencionado como arriba.

== Conclusión ==

Claro, la posición de un objeto no es la única cosa que puedes cambiar con Synfig Studio. Otras posibilidades incluyen su tamaño, delineado, color, etc. Synfig viene con varios archivos de ejemplo que deberían dejarte indagar mas profundo en las posibilidades.

Doc:Getting Started/es

2011-11-07T01:32:29Z

Naturalin: /* La Interfaz de Usuario */

{{Title|Cómo empezar}}
{{Navigation|Category:Manual|Doc:Animation_Basics}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Basic}}


== Introducción ==

Synfig, como la mayoría de los otros programas gráficos competentes, rompe individualmente los elementos del {{l|canvas.es|lienzo}} en varias {{l|layer|capas}}. De todas formas, difiere de los otros programas en dos grandes formas:

{| border="0" cellspacing="0" align="center" width="100%"
|
# Una capa individual en Synfig usualmente representa una “Primitiva” única. Por ejemplo: Una región única, el delineado de una región, un JPEG importado, etc... Esto le permitirá tener un gran trato con la flexibilidad y con el control. No es muy inusual, tener para una composición cientos de capas (organizadas en la jerarquía de la cordura del artista).

# Una capa no solo puede tener información en el tope de la imagen, debajo de ella, sino que además modificarla o distorsionarla de alguna forma. En este sentido, las capas en Synfig actúan mas como filtros, al igual que en Adobe Photoshop o en GIMP. Por ejemplo, si tenemos una {{l|Blur Layer|capa con desenfoque}}, una {{l|Radial Blur Layer|capa con desenfoque radial}}, {{l|Spherize Layer|capa esferizada}}, {{l|Color Correct Layer|capa con corrección de color}}, {{l|Bevel Layer|capa con bisel}}, etc...

Cada capa tiene su serie de parámetros, que determinan como se debe comportar. Cuando haces click en una capa (bien sea en la ventana del lienzo, o en el {{l|Layers Panel|panel de Capas}}), verás sus parámetros en el {{l|Params Panel|Panel de Parámetros}}.

|| ||
http://i170.photobucket.com/albums/u243/zenoscope/layer.png
|}

Synfig Studio tiene una propiedad de auto-recuperación. Si se bloquea, incluso si el archivo actual no se ha grabado, no se perderán mas de 5 minutos de trabajo. Al reiniciar, automática y rápidamente alertará al usuario para que recupere los cambios no guardados. Desafortunadamente el historial aun no se recupera. Esa propiedad vendrá mas adelante.

Una de las cosas de las que te habrás percatado, es que Synfig Studio es LENTO, siendo prácticamente obsoleto en hardware que tenga mas de 3 años de antigüedad. Esto es debido a que todo el calculo de color es hecho en un punto-flotante, porque Synfig Studio fue construido desde la base hacia arriba con un Rango-Dinámico-Alto de imágenes en la mente. SIN EMBARGO, este no será el caso por siempre.

darco tiene bastantes re-implementaciones y optimizaciones que planea agregar y que deberían mejorar dramáticamente el desempeño de Synfig en todas las plataformas. La meta no es lograr una mejora del 200% en la velocidad, es por lo menos mejorarla en un 2000%. Con la optimización que esta planificada para ser implementada, estaremos en capacidad de hacer operaciones de tuberías. Debería también aplanar el camino hacia la aceleración de hardware usando los grandes procesadores gráficos, los cuales nos darían mejoras en medida equivalente a la magnitud.

== La Interfaz de Usuario ==

{| border="0" cellspacing="5" align="center" width="100%"
| |
|http://i170.photobucket.com/albums/u243/zenoscope/toolbar.png
|| ||

Cuando comienzas Synfig Studio, esto abrirá un splash gráfico y se levantará. Luego de que termine de cargar, deberías ver un árbol de ventanas (estructurada). La ventana en la esquina superior izquierda es la {{l|toolbox|caja de herramientas}}. Aquí es donde puedes abrir archivos, cambiar de {{l|tools|herramientas}}, etc. Te darás cuenta de que la mayoría de los botones están oscurecidos, ya que no tienes ningún archivo abierto aun.

Las otras dos ventanas (una en la parte baja, y otra a la derecha) son {{l|dock dialogs|muelles de diálogo}} configurables. Puedes reorganizar el contenido de estas en la forma que quieras solo arrastrando la tabla hacia donde quieras que se ubique. Puedes incluso crear un nuevo diálogo arrastrando una {{l|dock tab|ventana}} fuera del diálogo en el que estaba insertado.

Si accidentalmente cierras cualquier {{l|dock tab|ventana de dialogo}} (arrastrandola fuera del diálogo, y cerrando la nueva ventana en la que se creo), no te preocupes. Simplemente ve a la caja de herramientas y accede a “Archivo->Dialogos”, y haz click sobre el dialogo que necesitas.

Existen muchos {{l|dock tab|cuadros de dialog}}. Si no tienes la mas minima idea de lo que hace un cuadro de diálogo, simplemente mantén el puntero del ratón sobre su icono y un cuadro de ayuda saldrá, describiendo el nombre de ese cuadro.
|}

Aquí están algunas de las más importantes:

* {{l|Layers Panel|Panel de Capas}} - Este cuadro muestra la jerarquía de las capas para el lienzo seleccionado. Adicionalmente te permite manipular esas capas.
* {{l|Params Panel|Panel de Parámetros}} - Este cuadro te mostrará los parametros de la capa seleccionada en el momento, (O, si son seleccionadas varias capas, te mostrará únicamente los parámetros que las capas tengan en común) .
* {{l|Categorical Help#Synfig Dialogs|Panel de Herramientas}} - Te muestra cualquier opción especifica de la herramienta seleccionada.
* {{l|Navigator|Navegador}} - Muestra una miniatura de lo que esté seleccionado en ese momento sobre el lienzo, mostrándote como se verá. Ademas, puedes hacerle acercamiento o alejamiento, y mover el foco por el lienzo.
* {{l|History Panel|Panel del Historial}} - Muestra la lista del historial de la composición actual. Puedes modificar las acciones en el historia.

Si haces click en en botón “Nueva Composición” que esta en la Caja de Herramientas, una nueva {{l|Work Area Window|Área de Trabajo}} se abrira.. Haciendo click en el menú circunflejo (entre la regla horizontal y vertical que están en la esquina superior izquierda del área de trabajo), luego en “Ver”, luego en "Propiedades", y el {{l|Canvas Properties Dialog|dialogo de propiedades del lienzo}} aparecerá.

El diálogo de propiedades del lienzo es un desastre, lo sé. Tendré que rediseñarlo en algo mucho mas comprensible en algún momento del futuro. Por ahora, ignora la sección "Área de imagen" y "Bloques y enlaces".

Si haces click en OK, el dialogo de propiedades del lienzo desaparecera y verás la {{l|Canvas window|Ventana del lienzo}}. Esta ventana representa el {{l|Root Canvas|lienzo Raíz}}, eso no significa mucho en este momento, pero eso esta BIEN-- solo estoy tratando de mostrarte los alrededores.

En la esquina superior izquierda de la ventana del lienzo, veras un botón con un simbolo de acénto {{l|Canvas Menu Caret|circunflejo}}. Si haces click en este botón, la ventana del {{l|Canvas Menu Caret|menú del lienzo}} se abrirá. (Como acotación, si haces click en cualquier área del {{l|layer|lienzo}} que no sea parte de la capa, este menú también aparecerá) Ahora, ya sabes donde esta el menu en la ventana del lienzo. Bien. Todo lo demas debería ser bastante auto-explicativo en la ventana del lienzo. (La explicación de las cosas en ese menu viene en un segundo)

== Primeros Pasos ==

Creemos algo para poder jugar. Ahora que tienes una nueva composición abierta y el dialogo de propiedades esta fuera del camino, ve sobre la caja de herramientas y haz click sobre la {{l|Circle Tool|herramienta de circulo}}. (Si no sabes cual de todas es, solo mueve el puntero del ratón sobre todas hasta que encuentres la que en la ventana de ayuda dice “círculo”).

En el segundo en el que hagas click sobre la herramienta circular, deberías darte cuenta de que el {{l|Tool Options Panel|Panel de opciones de herramientas}} ha cambiado. Pero iremos luego hacia esa parte.

: '''Nota''': Algunos usuarios de portátiles podrían experimentar problemas con el click-arrastrar sobre el lienzo usando la {{l|Circle Tool|herramienta de circulo}}, produciendo círculos exagerados o no haciendo nada. El problema es que Synfig ha detectado la almohadilla táctil del ratón y ha activado ese dispositivo (incorrectamente!) Para arreglar esto: Click sobre Archivo->Dispositivos de Entrada... El resultado será una ventana de dialogo, selecciona “deshabilitar” para tu almohadilla táctil del ratón. Luego de cambiar esto, tu ratón externo y la almohadilla táctil del ratón trabajarán según lo esperado.

Con la herramienta de circulo seleccionada, ahora puedes crear círculos en el {{l|Work Area|Área de trabajo}}. Esto trabaja casi exactamente como esperabas que lo hiciese. Anda y crea dos círculos (o más, si así lo quieres). Si por accidente haces click sobre el lienzo en vez de hacer click y arrastrar (con el botón del ratón presionado) para dibujar el circulo, lo que sucedió, fue que creaste un circulo con un radio de 0 y efectivamente es invisible! No hay necesidad de preocuparse, puedes arreglar esto fácilmente. En el panel de parámetros, puedes cambiar los parámetros del objeto seleccionado en ese momento. Si ves una seleccionada con un radio de 0, ese debe ser tu circulo. Puedes cambiar el valor del radio a otro que no sea 0, digamos 10, y manipular desde este panel el objeto que tienes en el lienzo.

Ahora vuelve a la caja de herramientas y haz click en la {{l|Normal Tool|herramienta normal}} (el circulo azul con el puntero encima). Luego de que hagas esto, haz click sobre cualquiera de los círculos. Verás entonces una {{l|bounding box|caja de atado}}(que es medio inservible en este momento, pero yo no estoy de acuerdo), un punto verde en el centro, y un punto cian en el radio. Esos puntos son llamados {{l|duck|patos}}. Si quieres modificar el circulo, agarra uno de los patos y arrástralo al rededor. Fácil!

Ahora puedes seleccionar una {{l|layer|capa}} haciendo click sobre ella. Si quieres seleccionar mas de una capa, mantén presionado CONTROL mientras les estás haciendo click – esto funciona tanto en el {{l|Work Area|Área de trabajo}} como en el {{l|Layers Panel|Panel de capas}}. Pruébalo!

También puedes seleccionar múltiples patos. Puedes hacer esto de varias formas. Primero, puedes mantener presionado CONTROL e individualmente hacer click en los patos que quieras seleccionar, pero esto puede ser tedioso. Sin embargo, hay un método mucho más rápido – solo crea un {{l|Selection|cuadro de selección}} haciendo click con el ratón y arrastrándolo por sobre el área donde están los patos que quieras seleccionar.

Anda y selecciona los dos círculos, y selecciona todos sus patos. Con varios patos seleccionados, moviendo uno moverás el resto. Este comportamiento depende de la {{l|Normal Tool|herramienta normal}}. Así, un nombre más descriptivo para esta herramienta hubiese sido “mover” o “traducir”.

La {{l|Rotate Tool|herramienta de rotar}} y {{l|Scale Tool|escalar}} trabajan muy parecido a la {{l|Normal Tool|herramienta normal}}, excepto en el caso donde tienes varios patos seleccionados. Es mucho más fácil probarlo que leer a cerca de ello. Selecciona algunos círculos, selecciona todos sus patos, y trata de usar las herramientas de rotar y escalar.

Nota que, a diferencia de la herramienta normal, las otras herramientas de manipulación de patos TIENEN opciones asociadas con ellas. Si una herramienta particular no esta haciendo lo que quieres que haga, hecha un vistazo en el {{l|Tool Options Panel|Panel de opciones de la herramienta}} y ve si esta configurada como lo deseas.

== Enlazando ==

Ahora probemos {{l|linking|enlazar}}. Supongamos que queremos que estos dos círculos siempre sean del mismo tamaño. Selecciona los dos círculos y luego selecciona los patos correspondientes al radio de ambos (los puntos cian). Para seleccionar múltiples patos, lo haces creando un rectángulo de selección sobre ellos, o seleccionando primero uno, y presionas la tecla CONTROL mientras seleccionas el resto. Una vez que hayas seleccionado el radio de ambos, haz click derecho sobre cualquiera de los dos radios y aparecerá una nueva ventana. Haz click en “enlazar”. Boom. Los parámetros están enlazados juntos. Puedes probarlo tu mismo seleccionado solo uno de los círculos y cambiando su radio – el otro cambiará también. Buena cosa, eh?

Enlazar es un concepto fundamental en Synfig. Puedes crear enlaces no solo entre patos, también puedes hacerlo sobre parámetros seleccionando múltiples capas, haciendo click derecho sobre los parámetros en la ventana, y seleccionando “enlazar”.

DIGRESIÓN: Esto es sobre como los {{l|Outline Layer|border}} son adjuntados a sus {{l|Region Layer|regiones}}—pero me estoy adelantando a mi mismo. En este momento, el poder fundamental y la flexibilidad de enlazar en Synfig Core esta mas allá de lo que Synfig Studio actualmente permite hacer. Esto cambiará en el futuro. De cualquier forma, volvamos a la vía...

Digamos que quieres que uno de los círculos sea de diferente color. Si ves en la caja que está debajo de las herramientas, verás selector de color, el selector de borde, y algunas otras cosas como el método por defecto de mezcla y las gradientes. La solapa de color de fondo funciona exactamente como crees que va a funcionar – puedes hacer click en el color de fondo, y una modesta paleta de selección de colores aparecerá. Ahora, cambiar el color es bastante fácil.

Pero a veces solo quieres seleccionar un color y seguir de largo. Aquí es donde el editor de paletas sale a relucir. Su el funcionamiento aun no cumple al 100% (ie: guardar y recargar la paleta personalizada aún no ha sido implementado), pero la paleta por defecto es bastante decente. Haz click en la barra del editor de la Paleta y dale un vistazo – es la que que tiene el botón de paleta. Haciendo click en los colores cambiará inmediatamente en la ventana.

Todo hasta ahora va bien, pero seguimos sin cambiar el color del círculo. Hay dos formas de hacerlo. La primera forma es seleccionar el círculo que quieres modificar, ir a los parámetros y hacer doble click sobre el parámetro de color – un dialogo con el selector de colores aparecerá y podrás modificarlo como quieras. Fácil. Solo haz click sobre la “herramienta de relleno” de la caja de herramientas, luego haz click en el círculo de la ventana del lienzo. Boom. El círculo cambio de color. Esto funciona con mas de un círculo, pero llegaremos a eso en un segundo.

Prueba jugar un poco con los círculos por un rato. Cambia un poco los parámetros, y ve que sucede. Para empezar, juega un poco con el lápiz.

== En profundidad ==

Por supuesto, hasta ahora sólo has aprendido a utilizar las características básicas de Synfig Studio pero no como animar un dibujo. Esto podrás verlo en el {{l|Animation_Basics.es|próximo tutorial}}.

Doc:Ball Bounce/es

2011-11-07T01:25:04Z

Naturalin: /* Different aproximations for the same result */

{{Title|Rebote de una pelota}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


Esta página se está traduciendo. Por favor, ten paciencia.

<center>This tutorial is under construction. Please be patient.</center>

This is a tutorial to explain how to create a bounce tutorial. The main target of the tutorial covers the ball movement. It is known that cartoon like balls have also a very deformed poses meanwhile thery are travelling and especially when it hits the ground. This could be covered in a second stage.

==Different aproximations for the same result==

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.
#La primera es hacer el rebote de la pelota manualmente. Eso implicaría crear muchos "waypoints" y ajustarlos para concordar con un movimiento parabólico (en tiempo y trayectoria). 
#La segunda manera es usar parámetros de interpolación de los "waypoints" cuando están colocados en la interpolación TCB. Esto reduciría drásticamente la cifra de "waypoints" y también hace que el tiempo de los rebotes sea más fácil. 
#Third way to perform a bounced ball is to make use of the Link to bline ability. If you draw the path of a bouncing ball using a bline it is quite easy to make the ball follow the path even changing the bouncing speed. 
#The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

== Manual Ball Bounce ==

The rule to make the ball bounce manually is to draw in a paper the desired bounce. Then mark the horizontal line with regular intervals and match the curve intersection in vertical. See the image:

{{l|Image:bounce.jpg|256px}}

You can notice that having regular intervals in the horizontal axis gives irregular intervals to the vertical axis. It is due to the nature of the curve.

Once the points are located in a 2D grid then it can be drawn directly in Synfig doing use of the grid (F11). After drawing them we normalized the values to be completely symmetrical. That gives the following table:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 4f || -165.0 || 92.0 ||
|-
| 8f || -155.0 || 81.118 ||
|-
| 12f || -145.0 || 63.678 ||
|-
| 16f || -135.0 || 29.479 ||
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 24f || -115.0 || 29.479 ||
|-
| 28f || -105.0 || 63.782 ||
|-
| ... || ... ||
|}

You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.

To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

This is the resulting graph for the manual approximation to the ball bounce.

{{l|Image:manual-graph.png|800px}}

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

The resulting animation and file are those ones.

{{l|Image:manual.gif}}

File: {{l|Media:manual.sifz}}

== Ball Bounce using waypoints interpolations==

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 40f || -75.0 || 92.0 || Highest point
|-
| 60f || -25.0 || -15.522 || Lower point
|-
| ... || ...
|}

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

{{l|Image:waypoint-curves1.png|800px}}

But if you edit the TCB parameters this is the result you obtain:

{{l|Image:waypoint-graph2.png|800px}}

The TCB parameters are the following:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''
|-
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0
|-
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| ... || ... ||... || ... || ... || ... || ... || ...
|}

That's the resulting animation:

{{l|Image:waypoint-2.gif}}

And the sample file: {{l|Media:waypoint-2.sifz}}

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

{{l|Image:waypoint-compare.gif}}

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

== Ball Bounce following a path ==

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

*You can see the complete ball bounces in one shot.
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

{{l|Image:bline-path.png}}

 (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 40f || 0.4 || Highest point
|-
| 60f || 0.6 || Lower point
|-
| 80f || 0.8 || Highest point
|-
| 100f || 1.0 || Lower point
|}

This coincides with the main waypoints of the last method we have seen. But look what's the result:

{{l|Image:bline-track.png|800px}}

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 24f || 0.2626 ||
|-
| 28f || 0.3085 ||
|-
| 32f || 0.3463 ||
|-
| 36f || 0.3741 ||
|-
| 40f || 0.4 || Highest point
|-
| 44f || 0.4245 ||
|-
| 48f || 0.4554 ||
|-
| 52f || 0.4926 ||
|-
| 56f || 0.5280 ||
|-
| 60f || 0.6 || Lower point
|-
| 64f || 0.6629 ||
|-
| 68f || 0.7075 ||
|-
| 72f || 0.7445 ||
|-
| 76f || 0.7783 ||
|-
| 80f || 0.8 || Highest point
|-
| 84f || 0.8253 ||
|-
| 88f || 0.8539 ||
|-
| 92f || 0.8928 ||
|-
| 96f || 0.9375 ||
|-
| 100f || 1.0 || Lower point
|}

Now look to the graphs again and notice that the X travel is now a ''straight'' line.

{{l|Image:bline-track2.png|800px}}

This is the resulting animation and the sifz file.

{{l|Image:bline.gif}}

The sample file: {{l|Media:bline.sifz}}

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

== Mathematical emulation ==

Anyone want to try? :)

==Conclusions==

Doc:Ball Bounce/es

2011-11-07T00:35:43Z

Naturalin: /* Different aproximations for the same result */

{{Title|Rebote de una pelota}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


Esta página se está traduciendo. Por favor, ten paciencia.

<center>This tutorial is under construction. Please be patient.</center>

This is a tutorial to explain how to create a bounce tutorial. The main target of the tutorial covers the ball movement. It is known that cartoon like balls have also a very deformed poses meanwhile thery are travelling and especially when it hits the ground. This could be covered in a second stage.

==Different aproximations for the same result==

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.
#La primera es hacer el rebote de la pelota manualmente. Eso implicaría crear muchos "waypoints" y ajustarlos para concordar con un movimiento parabólico (en tiempo y trayectoria). 
#Second way is to use the interpolations parameters of the waypoints when they are set to TCB interpolation. This would drastically reduce the amount of waypoints and also make the timing of the bounces easier. 
#Third way to perform a bounced ball is to make use of the Link to bline ability. If you draw the path of a bouncing ball using a bline it is quite easy to make the ball follow the path even changing the bouncing speed. 
#The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

== Manual Ball Bounce ==

The rule to make the ball bounce manually is to draw in a paper the desired bounce. Then mark the horizontal line with regular intervals and match the curve intersection in vertical. See the image:

{{l|Image:bounce.jpg|256px}}

You can notice that having regular intervals in the horizontal axis gives irregular intervals to the vertical axis. It is due to the nature of the curve.

Once the points are located in a 2D grid then it can be drawn directly in Synfig doing use of the grid (F11). After drawing them we normalized the values to be completely symmetrical. That gives the following table:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 4f || -165.0 || 92.0 ||
|-
| 8f || -155.0 || 81.118 ||
|-
| 12f || -145.0 || 63.678 ||
|-
| 16f || -135.0 || 29.479 ||
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 24f || -115.0 || 29.479 ||
|-
| 28f || -105.0 || 63.782 ||
|-
| ... || ... ||
|}

You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.

To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

This is the resulting graph for the manual approximation to the ball bounce.

{{l|Image:manual-graph.png|800px}}

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

The resulting animation and file are those ones.

{{l|Image:manual.gif}}

File: {{l|Media:manual.sifz}}

== Ball Bounce using waypoints interpolations==

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 40f || -75.0 || 92.0 || Highest point
|-
| 60f || -25.0 || -15.522 || Lower point
|-
| ... || ...
|}

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

{{l|Image:waypoint-curves1.png|800px}}

But if you edit the TCB parameters this is the result you obtain:

{{l|Image:waypoint-graph2.png|800px}}

The TCB parameters are the following:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''
|-
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0
|-
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| ... || ... ||... || ... || ... || ... || ... || ...
|}

That's the resulting animation:

{{l|Image:waypoint-2.gif}}

And the sample file: {{l|Media:waypoint-2.sifz}}

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

{{l|Image:waypoint-compare.gif}}

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

== Ball Bounce following a path ==

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

*You can see the complete ball bounces in one shot.
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

{{l|Image:bline-path.png}}

 (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 40f || 0.4 || Highest point
|-
| 60f || 0.6 || Lower point
|-
| 80f || 0.8 || Highest point
|-
| 100f || 1.0 || Lower point
|}

This coincides with the main waypoints of the last method we have seen. But look what's the result:

{{l|Image:bline-track.png|800px}}

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 24f || 0.2626 ||
|-
| 28f || 0.3085 ||
|-
| 32f || 0.3463 ||
|-
| 36f || 0.3741 ||
|-
| 40f || 0.4 || Highest point
|-
| 44f || 0.4245 ||
|-
| 48f || 0.4554 ||
|-
| 52f || 0.4926 ||
|-
| 56f || 0.5280 ||
|-
| 60f || 0.6 || Lower point
|-
| 64f || 0.6629 ||
|-
| 68f || 0.7075 ||
|-
| 72f || 0.7445 ||
|-
| 76f || 0.7783 ||
|-
| 80f || 0.8 || Highest point
|-
| 84f || 0.8253 ||
|-
| 88f || 0.8539 ||
|-
| 92f || 0.8928 ||
|-
| 96f || 0.9375 ||
|-
| 100f || 1.0 || Lower point
|}

Now look to the graphs again and notice that the X travel is now a ''straight'' line.

{{l|Image:bline-track2.png|800px}}

This is the resulting animation and the sifz file.

{{l|Image:bline.gif}}

The sample file: {{l|Media:bline.sifz}}

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

== Mathematical emulation ==

Anyone want to try? :)

==Conclusions==

Doc:Ball Bounce/es

2011-11-07T00:35:19Z

Naturalin: /* Different aproximations for the same result */

{{Title|Rebote de una pelota}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


Esta página se está traduciendo. Por favor, ten paciencia.

<center>This tutorial is under construction. Please be patient.</center>

This is a tutorial to explain how to create a bounce tutorial. The main target of the tutorial covers the ball movement. It is known that cartoon like balls have also a very deformed poses meanwhile thery are travelling and especially when it hits the ground. This could be covered in a second stage.

==Different aproximations for the same result==

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.
#La primera es hacer el rebote de la pelota manualmente. Eso implicaría crear muchos "waypoints" y ajustarlos para concordar con un movimiento parabólico (en tiempo y ). 
#Second way is to use the interpolations parameters of the waypoints when they are set to TCB interpolation. This would drastically reduce the amount of waypoints and also make the timing of the bounces easier. 
#Third way to perform a bounced ball is to make use of the Link to bline ability. If you draw the path of a bouncing ball using a bline it is quite easy to make the ball follow the path even changing the bouncing speed. 
#The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

== Manual Ball Bounce ==

The rule to make the ball bounce manually is to draw in a paper the desired bounce. Then mark the horizontal line with regular intervals and match the curve intersection in vertical. See the image:

{{l|Image:bounce.jpg|256px}}

You can notice that having regular intervals in the horizontal axis gives irregular intervals to the vertical axis. It is due to the nature of the curve.

Once the points are located in a 2D grid then it can be drawn directly in Synfig doing use of the grid (F11). After drawing them we normalized the values to be completely symmetrical. That gives the following table:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 4f || -165.0 || 92.0 ||
|-
| 8f || -155.0 || 81.118 ||
|-
| 12f || -145.0 || 63.678 ||
|-
| 16f || -135.0 || 29.479 ||
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 24f || -115.0 || 29.479 ||
|-
| 28f || -105.0 || 63.782 ||
|-
| ... || ... ||
|}

You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.

To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

This is the resulting graph for the manual approximation to the ball bounce.

{{l|Image:manual-graph.png|800px}}

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

The resulting animation and file are those ones.

{{l|Image:manual.gif}}

File: {{l|Media:manual.sifz}}

== Ball Bounce using waypoints interpolations==

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''
|-
| 0f || -175.0 || 92.0 || Highest point
|-
| 20f || -125.0 || -15.522 || Lower point
|-
| 40f || -75.0 || 92.0 || Highest point
|-
| 60f || -25.0 || -15.522 || Lower point
|-
| ... || ...
|}

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

{{l|Image:waypoint-curves1.png|800px}}

But if you edit the TCB parameters this is the result you obtain:

{{l|Image:waypoint-graph2.png|800px}}

The TCB parameters are the following:

{|
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''
|-
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0
|-
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0
|-
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0
|-
| ... || ... ||... || ... || ... || ... || ... || ...
|}

That's the resulting animation:

{{l|Image:waypoint-2.gif}}

And the sample file: {{l|Media:waypoint-2.sifz}}

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

{{l|Image:waypoint-compare.gif}}

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

== Ball Bounce following a path ==

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

*You can see the complete ball bounces in one shot.
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

{{l|Image:bline-path.png}}

 (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 40f || 0.4 || Highest point
|-
| 60f || 0.6 || Lower point
|-
| 80f || 0.8 || Highest point
|-
| 100f || 1.0 || Lower point
|}

This coincides with the main waypoints of the last method we have seen. But look what's the result:

{{l|Image:bline-track.png|800px}}

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

{|
| '''Time''' || '''Amount''' || '''Comments'''
|-
| 0f || 0.0 || Highest point
|-
| 20f || 0.2 || Lower point
|-
| 24f || 0.2626 ||
|-
| 28f || 0.3085 ||
|-
| 32f || 0.3463 ||
|-
| 36f || 0.3741 ||
|-
| 40f || 0.4 || Highest point
|-
| 44f || 0.4245 ||
|-
| 48f || 0.4554 ||
|-
| 52f || 0.4926 ||
|-
| 56f || 0.5280 ||
|-
| 60f || 0.6 || Lower point
|-
| 64f || 0.6629 ||
|-
| 68f || 0.7075 ||
|-
| 72f || 0.7445 ||
|-
| 76f || 0.7783 ||
|-
| 80f || 0.8 || Highest point
|-
| 84f || 0.8253 ||
|-
| 88f || 0.8539 ||
|-
| 92f || 0.8928 ||
|-
| 96f || 0.9375 ||
|-
| 100f || 1.0 || Lower point
|}

Now look to the graphs again and notice that the X travel is now a ''straight'' line.

{{l|Image:bline-track2.png|800px}}

This is the resulting animation and the sifz file.

{{l|Image:bline.gif}}

The sample file: {{l|Media:bline.sifz}}

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

== Mathematical emulation ==

Anyone want to try? :)

==Conclusions==

Doc:Flower Animation/es

2011-11-05T03:13:19Z

Naturalin: /* Animar el tallo */

{{Title|Animación de una Flor}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}

Esta página debería estar escrita en Español. Por favor ayúdanos a traducirla!

'''Este tutorial te mostrará cómo crear una simple animación de una flor que crece hecha con la herramienta Blines (linea Bezier).'''

== Ajustes Básicos ==

Haz click sobre ''Fichero > Nuevo''. Puedes mantener los valores por defecto aquí y simplemente hacer click sobre OK.

Haz click sobre los colores de frente y de fondo en la caja de herramientas, para crear un gradiente como desees. (También puedes editar el gradiente directamente haciendo click sobre él).

Selecciona la Herramienta de Gradiente y arrastra el cursor verticalmente sobre el tapiz para rellenarlo con el gradiente.

Selecciona la Herramienta Bline (Línea de Bezier) y en el diálogo de las opciones de la herramienta, asegúrate de que solamente "''Rellenar''" está seleccionado.

En la caja de herramientas, fija el color de frente a verde. Dibuja una especie de triángulo con la herramienta Bline. Para cerrar el contorno después de poner tres vértices, haz click con el botón derecho del ratón sobre el primer vértice y selecciona "''Loop Bline''" (Hacer Bucle).
: '''Nota:''' Si la única opción disponible es "Separar Tangentes", arrastra un poco el punto rojo (el "{{l|pato}}") que cubre el primer vértice, y entonces haz click con el botón derecho de nuevo sobre el vértice (el punto naranja) para que aparezca la opción Hacer Bucle.

Ahora que el contorno está cerrado, puedes "crear" la figura Bline seleccionando otra herramienta o presionando el boton Crear (el icono como unas ruedas dentadas) debajo de las opciones de herramienta.

http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/flower_1.png

Esto será la base del tallo. Puedes tocar los manejadores de tangentes (los puntos rojos) un poco, para hacer un triángulo más redondo. Con la {{l|Herramienta Normal}}, haz click con el botón derecho sobre cada vértice y selecciona "''Separar tangentes''", de modo que las dos tangentes de cada vértice se pueden manejar separadamente.
Hemos acabado con los ajustes básicos.


http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/flower_2.png

== Animar el tallo ==

Necesitamos cambiar nuestra imagen simple en algo que pueda ser animado.
En el Menú del Lienzo selecciona ''Editar > Propiedades''. Ve a la pestaña de tiempo y fija el ''Tiempo Final'' en 6s.

Ahora hay una pequeña linea de tiempo bajo el lienzo.

Haz click en el comienzo de la línea de tiempo (<tt>0f</tt>), luego, en el {{l|Panel Fotogramas Clave}} (el que tiene un icono de una llave) haz click en "+" (añadir un fotograma clave). Los fotogramas clave nos permiten ''Asentar'' la escena; esto es, en un fotograma clave, las propiedades de cada elemento se recordarán.

Haz click de nuevo en la línea de tiempo, en <tt>4.5s</tt>. Presiona el círculo verde en la esquina inferior derecha del lienzo ( o el icono que tengas ahí, dependiendo del tema que uses), para cambiar {{l|Modo de Edición de Animación}} (el círculo es rojo ahora).

Con la {{l|Herramienta Normal}}, selecciona la punta verde, y mueve el vértice superior hacia arriba para hacer un tallo.

Puedes jugar con los manejadores de las tangentes para mover un poco la forma si lo deseas.

http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/flower_3.png

Estando aún en <tt>4.5s</tt>, haz click con el botón derecho en el borde del tallo cerca de la parte más alta, y elige, "''Insertar Vértice''". Haz lo mismo en el otro lado del tallo. Haz click con el botón derecho sobre esos puntos nuevos y elige de nuevo ''Dividir Tangentes''. Intenta hacer una figura que se parezca a la de la imagen para crear el brote.

http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/flower_4.png

Si ahora pinchas en <tt>2s</tt> (por ejemplo), verás que la figura del brote es ligeramente visible, incluso si es más bien pequeña, e incluso si los patos del brote son invisibles. Digamos que queremos que el brote aparezca en el momento 3.5s, y el tamaño completo en el momento 4.5s.

Pincha en <tt>3.5s</tt> en la línea de tiempo. Échale un vistazo a los ''Parámetros'' y al diálogo ''Línea de tiempo''. Verás que cada parámetro en el {{l|Panel de Parámetros}} corresponde a una fila en el diálogo de la {{l|Línea de tiempo}}. El último parámetro es la lista de vértices. Haz click sobre la flecha pequeña a la izquierda para desempaquetar la lista. Deberías ver algo como esto:

http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/flower_5.png

Cada punto grande verde es un valor grabado (aquí las posiciones de los vértices se grabaron en el momento cero con el fotograma clave, y en el momento 4s cuando movimos algunos vértices o manejadores de vértices). Los dos vértices que añadimos para hacer la yema o brote están marcados en "DYN" (dinámico). Haz click sobre ellos en la lista de parámetros, y selecciona "Mark Activepoint as Off".
El diálogo debería aparecer ahora como en la imagen, la parte en gris es la parte donde los vértices del brote no tienen efecto sobre el tallo.

http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/flower_6.png

Por ejemplo si haces click ahora sobre <tt>2s</tt> o sobre <tt>3s</tt>, el contorno de la yema no es visible. Comienza a verse un poco tras el momento 3.5s.

Sin embargo, el contorno del tallo puede no parecer bonito durante el crecimiento desde 0 a 4s. Asegúrate de que estás aún en Modo de Edición de Animación, y retoca la figura, en varios momentos del tiempo, hasta conseguir algo que te guste.

La animación del tallo se ha terminado, pero aún faltan los pétalos.

Puedes observar una previsualización: Ve a ''Fichero > Previsualización'', selecciónalo y espera hasta que la previsualización se genere, y observa:) (Las previsualizaciones son a menudo alisadas y desenfocadas, pero el resultado final será claro. Se pueden obtener previsualizaciones de mejor calidad usando el zoom y el número de imágenes por segundo en la ventana de diálogo de previsualizaciones.

== Añadiendo los pétalos ==

Ahora puedes abandonar el "Modo de Edición de Animación" haciendo click sobre el círculo rojo en la esquina inferior derecha del lienzo.

 
Cambia el color de pintura a rosa, y crea un pétalo con la herramienta bline. Notarás que el pato {{l|duck}} verde que permite el movimiento fácil de un perfil está en el centro del lienzo. Selecciona todos los vértices del pétalo con Ctrl+A y muevelos junto al pato verde (con la Herramienta Normal), como se muestra.

http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/flower_7.png


Arrastra entonces el pato verde muy cerca de la parte superior del brote. Toca un poco el pétalo si es necesario. Selecciona también, en el panel de capas {{l|Layers Panel}}la capa del pétalo y olócala debajo de la capa del tallo. Haz click en el pétalo para seleccionarlo, y entonces haz Ctrl-Click sobre el tallo. Ahora ambos objetos deben aparecer seleccionados.

Haz click ahora sobre el vértice superior del tallo y ctrl-click sobre el pato verde del pétalo (ambos deben aparecer en un color más ligero, por estar seleccionados). Haz click con el botón derecho sobre el vértice superior del tallo, y selecciona "link". El pétalo se moverá un poco puesto que el pato verde se ha ligado con el vértice del tallo.

http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/flower_8.png

Ahora que hay una unión entre el pétalo y el extremo del tallo, cuando el extremo del tallo se mueve, el pétalo le seguirá. ( Y si el pato verde el pétalo se mueve, el extremo del tallo se moverá, pero no queremos hacer eso aquí).

En el {{l|Layers Panel}} (panel de capas), selecciona la recién creada capa del pétalo y duplícala (con el tercer botón del diálogo). En el lienzo, presiona Ctrl+A para seleccional todos los vértices del pétalo duplicado, y muévelos un poco, de forma que los pétalos no estén sobrepuestos (''No muevas el pato verde, solo los naranjas''). Repite el proceso varias veces para tener algo parecido a la imagen.

http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/flower_9.png

Nota que los pétalos duplicados también están ligados al tallo.

Si vas al primer fotogramaclave, verás que los pétalos son visibles. No queremos eso. Queremos que los pétalos aparezcan y florezcan el final del crecimiento.

== Escondiendo los pétalos ==

: Esta parte es, quizás, la más complicada. Supongo que debe haber una forma más sencilla de hacerlo, y si la encuentro, actualizaré el tutorial;)

Digamos que queremos que los pétalos aparezcan un poco después de los 4 segundos de animación, y que alcancen el tamaño completo a los 5 segundos, en lugar de ser visibles y de tamaño completo en todo momento.
Cambia a ''Modo de Edición de Animación'' de nuevo haciendo click en el círculo verde en la esquina inferior derecha del lienzo.

En la línea de tiempo, haz click para colocar el cursor en los 5 segundos.
En el panel de fotogramas clave {{l|Keyframes Panel}}, haz click en "+" para añadir un fotograma clave nuevo en <tt>5s</tt>, asegúrate de que los cambios que haremos no afectarán a los fotogramas siguientes.
Haz click en <tt>4s</tt>, y en el Panel de Capas, selecciona todas la capas de pétalos (con Ctrl+click), y entonces presiona Ctrl+A para seleccionar todos los vértices de los pétalos. Escalalos minimizándolos con la Herramienta Escala {{l|Scale Tool}}, y muévelos, para que estén ocultos tras el tallo como se muestra.

http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/flower_10.png

Entre el segundo 4 y 5, los pétalos aparecerán y florecerán. Pero el problema es que aún son visibles desde la primera imagen hasta los 4 segundos.
Podríamos bien cambiar el tamaño de los pétalos y hacerlos pequeños y ocultos en cada imagen desde el segundo 0 a los 4s, o bien podríamos hacerlos invisibles en esas imágenes.

Escojamos la segunda opción. Para hacer las cosas más simples, vamos a {{l|encapsulate}} (encapsular) las capas de pétalos en un {{l|Paste Canvas|Inline Canvas}}. Con todas las capas de pétalos seleccionadas, haz click con el botón derecho sobre ellas en el panel de capas y selecciona ''Encapsulate'' (encapsular). Puedes renombrar las capas para hacer las cosas inteligibles.

http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/flower_11.png

Selecciona los "Pétalos" inline lienzo y salta al primer fotograma clave. En la pestaña de Parámetros, fija el {{l|Amount Parameter|Amount}} (parámetro de cantidad) valor a <tt>0</tt>. Los pétalos ahora son visibles en ese fotograma clave.
Nota que dos puntos de dirección son añadidos al frente del parámetro "Cantidad", uno en el segundo 0s y el otro en el 5s. Arranstra el punto 5s a 4s de forma que la opacidad de los pétalos esté entre los segundos 1 y 4.

http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/flower_12.png

Aun hay un problema : De 0s a 4s, la opacidad de los pétalos crece lentamente, haciendo los pétalos visibles cuando no deberían serlo. Para resolver esto, cambiaremos el método de interpolación de la Cantidad: Haz click con el botón derecho en el punto direccional 0f, y selecciona ''Edit waypoint''. Aparecerá un nuevo diálogo, en el que puedes elegir la interpolación In y Out. Fija la interpolación Out a constante, mientras otra punto direccional es encontrado. Así desde 0f a 4s el valor de Cantidad será igual a 0, y en el segundo 4 cambiará de momento a 1, y hará los pétalos visibles, como se esperaba.
Alternativamente, podríamos alcanzar el mismo efecto fijando la interpolación In (de entrada) del punto direccional en 4s a ''Constante''.

Nota como (la mitad del) punto direccional cambia de círculo verde (significando animación suave del parámetro Cantidad) a paso rojo (significando que el parámetro Cantidad ha saltado repentinamente)

http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/flower_13.png

Ahora has acabado.

El tallo crece durante 4.5 segundos y entonces permanece quieto los últimos 1.5 segundos. Los pétalos están escondidos hasta el segundo 4, y entonces crecen rápidamente entre el segundo 4 y 5, y permanecen parados también los últimos 1.5 segundos.

Haz click sobre ''Fichero > Render'' (Fichero > Mostrar) para ver tu animación. Selecciona cualquier formato que quieras, y no olvides desmarcar la opción "''Use current frame''" (de otro modo tan solo un fotograma se mostrará).