Tema 5 .- Animación

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

1

5.1.- Introducción z

Animación= gráficos e imágenes estáticas entre las que existe una relación temporal. q p

z

Animación= imágenes realizadas mediante gráficos y generadas por ordenador.

z

Una secuencia de imágenes está caracterizada por su resolución, número de colores y el número de imágenes que se muestra por unidad de tiempo (frame rate), de forma que la impresión obtenida sea la de que existe movimiento.

z

Sensación de movimiento continuo: fr ≈ 25 imágenes por segundo. Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

2

1

5.2.- Conceptos básicos (I). z

El término animación viene del griego “anemos”=viento, aliento y del latín “animus”=dar vida, por eso se asocia habitualmente con el de movimiento.

z

ANIMACIÓN POR ORDENADOR= GENERACIÓN, ALMACENAMIENTO y PRESENTACIÓN DE IMÁGENES QUE EN SUCESIÓN RÁPIDA PRODUCEN SENSACIÓN Ó DE MOVIMIENTO.

z

Persistencia de visión – –

Semejanza entre fotogramas. Fluidez de movimiento. Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

3

5.2.- Conceptos básicos (II). z

Reproducción de movimientos reales – Aliasing temporal – Difuminado de movimiento

z

Si disponemos de una serie de fotogramas de una animación, y suponiendo una frecuencia de presentación constante: – Al aumentar el número de fotogramas mostrados por segundo el movimiento se hace más lento. – Al disminuir el número de fotogramas mostrados por segundo el movimiento se hace más rápido. – Por ejemplo, si se elimina una imagen de cada tres, la velocidad aumenta un 50%.

z

Animación en tiempo real Vs Animación fotograma a fotograma. fotograma.

z

Origen de los fotogramas Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

4

2

5.2.- Conceptos básicos (III). z

En un sistema de animación por ordenador se distinguen los siguientes componentes: – – –

– – –

Guión: Descripción detallada de las escenas de la animación. Decorado: Elementos inmóviles de la escena. Actores: Elementos móviles definidos mediante unas variables que se modifican a lo largo del tiempo siguiendo unas reglas determinadas. Focos: Fuentes de luz que iluminan la escena.Se pueden modificar tanto posición como características a lo largo del tiempo tiempo. Cámaras: Se definen por su posición, su punto de visión y ángulo de visión. Panorámicas, zooms, fundidos, etc. Coreografía: Creación de elementos, descripción de sus movimientos y sincronización de los mismos.

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

5

5.2.- Proceso de obtención de animaciones. z

Entrada – –

z

Composición –

z

Digitalización/creación de dibujos Postprocesamiento

Composición de imágenes para combinar elementos de fondos y primeros planos

Intermedio –

Necesidad de posiciones intermedias para la sensación de animación de una posición a otra.

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

6

3

5.3.- La prehistoria de la animación z z z z z z z z z z

1824 Peter Roget presenta el trabajo "The persistence of vision with regard d to t moving i objects" bj t " en la l British B iti h Royal R lS Society. i t …… 1895 Los hermanos Louis y Auguste Lumière patentan un dispositivo llamado cinematógrafo, capaz de proyectar imágenes en movimiento. 1906 J. Stuart Blackton realiza la primera película de animación titulada "Humorous phases of funny faces". 1909 Winsor McCay realiza unos dibujos animados llamados "Gertie the Trained Dinosaur" conteniendo unos 10000 dibujos. … 1927 La Warner Brothers lanza "El cantante de Jazz", primera película sonora. 1928 Walt Disney crea los primeros dibujos animados con sonido sincronizado: el ratón Mickey. …….. 1964 Ken Knowlton de los laboratorios Bell, comienza a desarrollar técnicas informáticas para generar animaciones. Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

7

5.4.- Animación tradicional aplicada a la animación por ordenador (I). z

Los p principios p básicos de la animación tradicional son los siguientes: g 1.

Anticipación: Se prepara la siguiente acción (por ejemplo, antes de salir corriendo postura forzada en sentido contrario). La anticipación permite: z z z

Preparar los músculos para la acción. Preparar al espectador y captar la atención hacia la acción principal. Indicar la velocidad de acción.

2.

Estiramiento y compresión: Para conseguir movimientos fluidos y sensación de elasticidad. Los objetos se deforman en la dirección de p p para dar sensación de p peso y g gravedad. desplazamiento

3.

Solapamiento y continuación de las acciones: z z

El solapamiento consiste en comenzar la siguiente acción antes de terminar la anterior. La continuación significa que los movimientos no se detienen bruscamente, sino que continúan más allá de su posición final

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

8

4

5.4.- Animación tradicional aplicada a la animación por ordenador (II). z

Otros efectos que podemos realizar sobre las animaciones son: –

Exageración: Sirve para llamar la atención sobre los elementos más importantes.

–

Acción principal y acciones secundarias: z z

z

La acción principal ha de ser única y clara: debe pasar una sola cosa en cada d momento. t Se utilizan acciones secundarias (anticipación, continuación, etc.) que complementan la acción principal sin competir con ella.

La mayoría de los desplazamientos siguen trayectorias curvas. Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

9

5.4.- Animación tradicional aplicada a la animación por ordenador (III).

z

Uso de terminología cinematográfica en animación: – – – – –

Película: toda la animación en su conjunto Escena: cierta continuidad en cuanto a lugares, actores y acciones Secuencia: sucesión de planos Plano: serie de fotogramas captados por la cámara de forma ininterrumpida Fotograma: imágenes individuales Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

10

5

5.5 Especificación de animaciones z

Listas lineales – –

z

Lenguajes de programación de alto nivel – –

z

Eventos definidos por frame de inicio inicio, frame de fin y acción a realizar Ej: 42,53,ROTATE “PALM”,1,30

Primitivas como vectores, colores, polígonos, puntos de vista submundos vista, submundos, transformaciones geométricas geométricas, etc etc. Ej: (grasp my-cube) ; (cw 0.05) ; (right panning-speed)

Lenguajes gráficos –

Describen las animaciones de forma visual Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

11

5.6 Métodos para controlar una animación (I) z

Control explícitamente declarado –

z

Control procedural – –

z

Comunicación entre diferentes objetos Cada objeto conoce propiedades estáticas/dinámicas de otros objetos

Control basado en restricciones – – –

z

Descripción de todos los eventos posibles

Movimientos limitados por el entorno Jerarquías de condiciones Ej: reglas sobre dinámica de los cuerpos, propiedades de materiales

Control por análisis de la acción en vivo – – –

Estudio de movimientos de objetos en el mundo real Actuación de seres reales, procesamiento del resultado y cambiar seres reales por animados. Asignar indicadores a puntos clave del cuerpo humano y cálculo del modelo de animación en base a ello Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

12

6

5.6 Métodos para controlar una animación (II) z

Control cinemático y dinámico –

Cinemática: Estudio del movimiento independientemente de las fuerzas z z

–

Cinemática directa: Calcular posiciones de las estructuras en base a la rotación de articulaciones Cinemática inversa: A partir de una posición, obtener la rotación

Dinámica Estudio Dinámica: Est dio del movimiento mo imiento teniendo en cuenta c enta las fuerzas que intervienen z z

Dinámica directa: a partir de las masas y fuerzas, obtener aceleraciones Dinámica inversa: a partir de masas y aceleraciones, calcular las fuerzas a aplicar Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

13

5.7.- Técnicas de animación por ordenador (I). z

Algunas de las técnicas de animación por ordenador más comunes son: –

ROTOSCOPIA: Capturar un movimiento real y utilizar esa información para mover un diseño generado por ordenador. z

z z z

–

Simplificación del modelo. modelo. Normalmente los movimientos reales son demasiados complejos para intentar capturarlos íntegramente. Hay que identificar las partes fundamentales del movimiento. Identificación y marcado de puntos de referencia. referencia. Normalmente, son las articulaciones, y se suelen marcar con círculos de color rojo. Realización de movimientos y recogida de datos (mediante múltiples cámaras de vídeo, traje de datos, dataglobe, etc...). Una vez digitalizada la información, se aplica esta al modelo generado por ordenador para controlar su movimiento.

ANIMACIÓN PASO A PASO: Consiste en definir manualmente cada uno de los fotogramas. z z

En algunos tipos de animación tradicional (animación de figuras de plastilina) se usa esta técnica. Esta técnica es muy lenta y sólo se utiliza para pequeñas animaciones.

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

14

7

5.7.- Técnicas de animación por ordenador (II). ANIMACIÓN POR COTAS: Consiste en basar el movimiento en unos fotogramas fundamentales (keyframes) y luego dejar que el sistema genere automáticamente t áti t los l fotogramas f t intermedios i t di mediante di t métodos de interpolación.

–

z z

Es importante que las cotas sean representativas del movimiento para que la interpolación tenga suficiente información. Esta técnica está basada en los métodos de animación tradicionales, en los que los animadores más expertos dibujan los momentos fundamentales del movimiento (cotas o keyframes) y los animadores principiantes dibujan los fotogramas intermedios (inbetweens).

ANIMACIÓN PROCEDURAL: Consiste en describir el movimiento de forma algorítmica.

–

z z

Hay una serie de reglas que controlan como se van modificando los distintos parámetros, como la posición o la forma a lo largo del tiempo. Es una buena solución para movimientos sencillos pero no para movimientos más complejos. Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

15

5.9.- Transmisión de animaciones z

Transmisión de la representación simbólica – – –

z

El receptor debe interpretar esa representación El receptor debe hacer la conversión Rápida transmisión, lenta visualización

Transmisión de mapas de píxels – –

El receptor sólo visualiza Lenta transmisión, rápida visualización Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

16

8

La historia reciente de la animación z

1989: – –

La sirenita, última película Disney rodada del modo tradicional Tin Toy (John Lasseter): Primera película animada por ordenador en ganar Oscar a mejor corto animado

z

1991: La Bella y la Bestia (Disney), primera película animada nominada al Oscar a mejor película

z

1995: Toy Story (Pixar), primer largo de animación por ordenador 3D

z

2001: Shrek (Dreamworks), Oscar a mejor película animada

z

2005: Chicken Little, primera película Disney completa por animación por ordenador

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

17

5.10.- Formatos para describir animaciones z

FLC/FLI

z

GIF

z

VRML

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

18

9

5.10.1.- FLC/FLI (I). z

FLC/FLI (Animator Pro File Formats). –

– – – –

z

La idea del formato FLI es simple: p “NO HAY QUE PREOCUPARSE DE GUARDAR LAS PARTES DE UN CUADRO QUE SE MANTIENEN DEL CUADRO ANTERIOR”. Con ello ahorramos espacio de almacenamiento y ganamos en velocidad. El fichero está compuesto por una cabecera de 128 bytes seguida por una secuencia de frames. El primero de los frames está comprimido utilizando un esquema run-length encoding. Los siguientes frames se guardan como la diferencia con el cuadro anterior. Existe un frame extra al final que recoge la diferencia entre el último y el primer frame.

Cabecera 128 bytes – –

22 comunes FLC/FLI 106 válidos solo para FLC Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

19

5.10.1.- FLC/FLI : Cabecera FLI. typedef struct _FlicHeader { DWORD FileSize; /* tamaño del fichero */ WORD FileId; Fil Id /* indicador i di d de d formato f t de d archivo hi 0xAF11: 0 AF11 FLI 0xAF12: 0 AF12 FLC*/ WORD NumberOfFrames; /* número de frames, máximo 4000 */ WORD Width; /* ancho de la pantalla en píxels */ WORD Height; /* alto de la pantalla en píxels */ WORD PixelDepth; /* bits por pixel: valor 8,24 */ WORD Flags; /* valor 03h */ DWORD FrameDelay; /* retardo entre frames; FLI: unidades de 1/70 segundos; FLC: 1/1000 segundos */ WORD Reserved1; /* valor 00h */ // Los siguientes valen 0x00 en un fichero FLI DWORD DateCreated; /* fecha/hora de creación, desde el 1 Enero 1970, formato MSDOS */ DWORD CreatorSN; //* número de serie del programa creador; si fue creado con la librería FlicLib valor 46h 4Ch 49h 42h ("FLIB") ( FLIB ) *// DWORD LastUpdated; /* fecha/hora de la última modificación, como para la creación */ DWORD UpdaterSN; /* número de serie del programa actualizador */ WORD XAspect; /* aspect ratio del eje X*/ WORD YAspect; /* aspect ratio del eje Y */ BYTE Reserved2[38]; /* valor 00h */ DWORD Frame1Offset; /* Offset del primer frame */ DWORD Frame2Offset; /* Offset del segundo frame */ BYTE Reserved3[40]; /* valor 00h */ } FLICHEADER;

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

20

10

5.10.1.- FLC/FLI : Datos FLI (I) typedef struct _ChunkHeader { /* tamaño en bytes y */ DWORD ChunkSize;; WORD ChunkType; /* identificador de tipo de bloque */ WORD NumberOfChunks; /* número de subbloques */ BYTE Reserved[8]; /* valor 00h */ } CHUNKHEADER; Valor

Nombre

Descripción

04h

COLOR_256

Paleta de 256 colores

07h

DELTA_FLC

Datos con compresión delta

0Bh

COLOR_64

Paleta de 64 colores

0Ch h

DELTA_FLI

Datos con compresión delta d l

0Dh

BLACK

Datos de frame en negro

0Fh

BYTE_RUN

Datos con compresión RLE

10h

FLI_COPY

Datos sin comprimir

12h

PSTAMP

Imagen con estampación

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

21

5.10.1.- FLC/FLI : Estructura interna FLI CabeceraFLI Frame 1 (compresión RLE) (sub)bloque PSTAMP (opcional) (sub)bloque COLOR_256 (sub)bloque BYTE_RUN (sub)bloque COLOR_256 (sub)bloque BYTE_RUN Frame 2 (compresión Delta) (sub)bloque COLOR_256 (sub)bloque DELTA_FLI Frame 3 ((sin comprimir) p ) (sub)bloque COLOR_256 (sub)bloque FLI_COPY Frame 4 (Negro) (sub)bloque BLACK Frame n (compresión Delta) (sub)bloque COLOR_256 (sub)bloque DELTA_FLI Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

22

11

5.10.1.- FLC/FLI : Bloque DELTA_FLI typedef struct _DeltaFliChunk { CHUNKHEADER Header; /* cabecera */ WORD LinesToSkip; /* número de líneas iniciales a saltar */ WORD NumberOfLines; /* número de líneas codificadas */ /* para cada línea */ struct _Line { BYTE NumberOfPackets; /* número de paquetes */ BYTE LineSkipCount; /* número de líneas a omitir */ struct _Packet /* Para cada paquete */ { BYTE SkipCount; /* número de pixels a saltar, indica el número del píxel actual */ BYTE PacketType; /* Codificación del paquete */ BYTE PixelData[]; /* datos de pixels del paquete */ } Packet[NumberOfPackets]; } Lines[NumberOfLines]; } DELTAFLICHUNK; Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

23

5.10.1.- FLC/FLI : Bloque DELTA_FLC ttypedef d f struct t t _DeltaFlcChunk D lt Fl Ch k { CHUNKHEADER Header; /* cabecera */ WORD NumberOfLines; /* número de líneas codificadas */ struct _Line /* Para cada línea */ { WORD PacketCount; /* conteo de paquetes, de saltos o valor del último byte */ struct _Packet /* Para cada paquete */ { BYTE SkipCount; /* número de pixels a saltar */ BYTE PacketType; /* tipo de codificación */ WORD PixelData[]; /* datos de píxels */ } Packet[NumberOfPackets]; } Lines[NumberOfLines]; } DELTAFLCCHUNK;

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

24

12

5.10.1.- FLC/FLI : Bloque BYTE_RUN

typedef struct _ByteRunChunk { CHUNKHEADER Header; /* cabecera */ BYTE PixelData[]; /* datos de pixels codificados con RLE */ } BYTERUNCHUNK;

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

25

5.10.1.- FLC/FLI : Bloque FLI_COPY

typedef struct _CopyChunk { CHUNKHEADER Header; /* cabecera */ BYTE PixelData[]; /* valor de los pixels alto*ancho*/ } COPYCHUNK;

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

26

13

5.10.1.- FLC/FLI : Bloque PSTAMP

typedef struct _PstampChunk { DWORD ChunkSize; /* tamaño del bloque */ WORD ChunkType; /* identificador de tipo*/ WORD Height; /* altura en píxels */ WORD Width; /* anchura en píxels */ WORD ColorType; /* tipo de traducción de color */ BYTERUNCHUNK PixelData; /* datos 100x63*/ } PSTAMPCHUNK;;

Los posibles valores como identificador de tipo son: 0Fh Codificación run-length 10h Datos sin comprimir 12h Tabla de traducción de color de 6 cubos

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

27

5.10.1.- FLC/FLI : Bloque BLACK

typedef struct _BlackChunk { CHUNKHEADER Header; /* cabecera */ } BLACKCHUNK;

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

28

14

5.10.1.- FLC/FLI : Bloque COLOR_64/256 typedef struct _ColormapChunk{ CHUNKHEADER Header;

//* cabecera *//

WORD NumberOfElements;

/* número de elementos de color en el mapa */

struct _ColorElement

/* Para cada elemento */

{ BYTE SkipCount;

/* Número de colores a saltar */

BYTE ColorCount;

/* Número de colores */

struct _ColorComponent /* Para cada color */ { BYTE Red;

/* rojo */

BYTE Green;

/* verde */

BYTE Blue;

/* azul */

} ColorComponents[ColorCount]; } ColorElements[NumberOfElements]; } COLORMAPCHUNK; Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

29

5.10.2.- GIF89a (I). z

GIF89a –

–

Un GIF puede tener más de una imagen por fichero, fichero permitiendo llevar a cabo una sucesión de imágenes y no una única imagen. A este formato se le añadieron una serie de especificaciones que dio origen al formato GIF89a, que guarda información acerca de cuestiones como: z z z z z z z

Cuantas centésimas de segundo hay que esperar antes de mostrar el siguiente fotograma. Esperar por la entrada de usuario. usuario Especificar el color transparente. Incluir comentarios no imprimibles. Mostrar líneas de texto. Indicar como deberá ser eliminado después de haber sido mostrado. Extensiones de aplicaciones específicas dentro del fichero. Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

30

15

5.10.2.- GIF89a (II). z

La estructura de un fichero GIF89a está compuesta por bloques y extensiones.

z

Las características básicas de este formato lo han hecho muy popular entre los creadores de páginas Web por por:: – Que mantiene los beneficios de GIF GIF:: transparencia, compresión, entrelazado, paletas y permite un compromiso entre tamaño y compresión.. compresión – Es soportado por la mayoría de navegadores y plataformas plataformas..

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

31

5.10.3.- VRML z

Virtual Reality Modelling Language es un formato estándar de fichero (ISO/IEC 14772) que describe la creación y exploración en la Web de entornos tridimensionales interactivos. interactivos

z

Características – – – – – – – –

Independencia de plataforma Extensibilidad Trabaja con bandos de ancha bajos Puede contener referencias a otros mundos, documentos HTML o MIME Archivos de tamaño reducido Manejo, visión e interpretación a cargo del visualizador (como HTML) Describe escenas e interacciones con el usuario Incluye diferentes niveles de detalle: va mostrando aproximaciones hasta tener todo el modelo cargado Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

32

16

5.10.3.- Estructura básica de VRML z

Descripción de escenas como grafos de escena

z

C Característica t í ti de d un nodo d – – – –

Tipo de objeto (cubo, esfera, transformación, etc) Parámetros o campos que lo diferencian (radio, textura, etc) Nombre identificador Nodos hijos

Separator { Material { emissiveColor 0.3 0.1 0.3 } Cylinder { radius 0.1 height .2 } }

Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

33

5.10.3.- Nodos VRML (I) z

Definen la geometría del mundo, cómo se dibujan las formas los diferentes grupos.

z

Nodos geométricos – – –

z

Nodos de grupo –

z

Formas: AsciiText, Cone, Cube, Cylinder, IndexedFaceSet, IndexedLineSet,PointSet,Sphere. Propiedades geométricas: Coordinate3, FontStyle, Info, Material, MaterialBinding, Normal, Texture2,.. Propiedades de transformaciones: MatrixTransform, Rotation, Scale Translation Scale,

Separator, Switch, WWW Anchor, LOD (level of detail)

Otros nodos –

OrtographicCamera, PerspectiveCamera, PointLight,SpotLight Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

34

17

5.10.3.- Nodos VRML (II) z

Instanciación – Un nodo puede estar contenido en más de un grupo – DEF y USE para usar una ocurrencia múltiples veces.

Ejemplo #VRML V1.0 ascii Separator { DEF Pepe Sphere { } Translation { translation 2 0 0 } Separator { DEF Pepe Sphere { radius .2 } } Translation { translation 2 0 0 } USE Pepe # aquí se usa el radio .2 (el último DEF) Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

35

5.10.3.- Nodos VRML (III) z

Extensibilidad – Las extensiones a VRML se incluyen con nodos auto-definidos, en los que se indica antes de sus campos una descripción de cuáles son esos campos (nombre y tipo de valor), con la palabra fields y entre corchetes. Si Cube no fuera parte del estándar, se indicaría como Ejemplo:Cube { fields [ SFFloat width, SFFloat height, SFFloat depth ] width 10 height 4 depth 3 } –

Extensión de nodos estándares

Ejemplo: ExtendedMaterial { fields [ MFString isA, MFFloat indexOfRefraction, MFColor diffuseColor, MFFloat transparency ] isA [ "Material" ] indexOfRefraction .34 diffuseColor .8 .54 1} Sistemas Multimedia e Interacción Gráfica- Curso 2006/07

36

18