Vectores

 

Representación de formas en gráficos 2D mediante puntos, líneas y curvas matemáticas

Concepto básico

En animación digital, un vector es una representación matemática de una forma.
En lugar de usar píxeles (como en los gráficos rasterizados), los gráficos vectoriales usan coordenadas y ecuaciones matemáticas para definir puntos, líneas y curvas.

Esto hace que las imágenes vectoriales se puedan escalar infinitamente sin perder calidad (por eso se usan en logos, tipografía, animación, etc.).

Puntos

• Son las unidades básicas en un plano 2D.
• Se representan como pares de coordenadas:   P(x,y)

• En gráficos digitales, un punto marca una posición exacta en la pantalla, pero no tiene ancho ni alto.

Ejemplo: Un vértice de un polígono o el inicio de una línea.

 Líneas

• Una línea conecta dos puntos en el plano.
• Matemáticamente, puede representarse como:

L (t) = (1-t)  P₁+ tP₂, 0 ≤ t ≤ 1

          donde P₁ y P₂ ntos extremos.

• En animación, las líneas forman contornos de objetos, esqueleto de personajes (rigging) o trayectorias de movimiento.

Ejemplo: un segmento que forma el borde de un cuadrado.

Curvas matemáticas

Aquí entra lo más importante en gráficos vectoriales:

a) Curvas Bézier

• Muy usadas en animación digital (Illustrator, After Effects, Figma, etc.).
• Se definen por puntos de control que determinan su forma.
• La curva no pasa necesariamente por todos los puntos, sino que los utiliza como "guías".
• Una curva Bézier cúbica, por ejemplo, usa 4 puntos de control.

Ejemplo: suavizar un trazo en un personaje o diseñar la ruta de una animación.

b) Splines

• Son un conjunto de curvas suaves conectadas.
• B-Splines y NURBS (Non-Uniform Rational B-Splines) permiten modelar formas más complejas y suaves.
• Se usan en modelado 2D y 3D.

Ejemplo: curvas de autos, rostros, letras animadas.

5. Aplicación en animación digital

• Dibujar personajes y escenarios: usando curvas Bézier para definir contornos.
• Interpolación de movimiento: la ruta de un objeto se define con una línea o curva.
• Escalabilidad: no importa el tamaño de la pantalla, la forma no pierde calidad.
• Rigging y morphing: deformaciones controladas por líneas y curvas para dar naturalidad al movimiento.

 ---------------------------------------------------------------------------------------------------------------------------

Vectores usados en animaciones escalables (SVG, Flash, Spine)

Concepto de animaciones escalables

• Una animación escalable es aquella que no pierde calidad sin importar cuánto se aumente o reduzca su tamaño.
• Esto se logra gracias a los gráficos vectoriales, que se basan en fórmulas matemáticas y no en píxeles.
• La ventaja principal es que la animación se ve nítida en cualquier pantalla, desde un celular hasta una pantalla gigante.

SVG (Scalable Vector Graphics)

• Definición: Es un formato basado en XML para describir imágenes y animaciones vectoriales en 2D.
• Características:
• Escalable sin pérdida de calidad.
• Compatible con navegadores web modernos.
• Permite animaciones usando CSS o JavaScript.
• Usos comunes:
• Iconos, logotipos y gráficos en páginas web.
• Animaciones simples como transiciones, movimientos y transformaciones.

Ejemplo: un logotipo que gira o cambia de color al pasar el cursor.

 

Flash (Adobe Flash / Animate)

• Definición: Fue uno de los softwares más populares para crear animaciones vectoriales en la web.
• Características:
• Usaba vectores para que las animaciones fueran ligeras y escalables.
• Permitía interacción mediante ActionScript (su lenguaje de programación).
• Usos comunes (antes de quedar obsoleto):
• Juegos en navegador.
• Animaciones interactivas.
• Videos animados.
• Aunque Flash ya no se usa en la web, su legado sigue en Adobe Animate, que exporta animaciones en formatos modernos como HTML5 y SVG.

Ejemplo: los primeros juegos y caricaturas en páginas como Newgrounds.

Spine

• Definición: Es un software especializado en animación 2D de esqueletos (skeletal animation) para videojuegos.
• Características:
• En lugar de animar pixel por pixel, se crean huesos (bones) y se asocian imágenes vectoriales o bitmap.
• Permite interpolaciones suaves y reutilizar animaciones para distintos personajes.
• Escalable y optimizado para motores de videojuegos como Unity, Godot o Unreal Engine.
• Usos comunes:
• Animación de personajes en videojuegos 2D.
• Cinemáticas ligeras dentro de juegos móviles o de PC.

Ejemplo: un personaje que camina, corre o ataca con el mismo esqueleto, sin tener que dibujar cada cuadro.

Importancia en animación digital

• Escalabilidad: imágenes siempre nítidas sin importar el tamaño.
• Optimización: archivos más ligeros que los gráficos rasterizados.
• Versatilidad: sirven para web, videojuegos, interfaces y cine digital.
• Interactividad: especialmente en SVG y Flash, donde se puede responder a clics, movimientos de mouse o eventos.