|
|
ANIMACION
Una de las mas divertidas y atractivas ramas de la programación es la animación, es decir poder simular el movimiento de figuras en la pantalla sea en dos o tres dimensiones con uno o varios patrones de cambio de acuerdo a las circunstancias presentadas; así es como se han construido peliculas o comerciales de TV. Este proceso demanda un poco mas de atención y conocimiento de funciones trigonométricas pero al final con un poco de paciencia se logran unos resultados bastante agradables.
La animación con computadora se puede hacer de dos formas a saber:
Animación combinada
Es similar a como se construye un dibujo animado, se crean una a una biblioteca de imagenes que constituiran el movimiento y despues se combinan en un ciclo para simular este; si observas el movimiento de algunos de los iconos animados de que se compone este tutor, se construyeron asi.
¿Como crear imagenes y almacenar imagenes?
Toda figura parte de las primitivas tales como lineas, circulos, rectangulos, elipses, etc, y sus respectivos atributos como color, rellenos, tipos y grosor de linea. Lo primero que se debe hacer es dibujar en una parte de la pantalla la figura, luego capturarla, y posteriormente hacer el llamado en la parte que se necesita para simular la animación.
Para ello haremos uso de los procedimientos
getmem, getimage, imagezise,y putimage
Por ejemplo dibujemos un fantasma similar a los del conocido videojuego Pacman y movamoslo con las flechas de dirección, primero definimos una variable de tipo Pointer llamada fantasma1, luego en el procedimiento pinta_fantasma construimos la imagen por multiples instrucciones primitivas como lineas, arcos y circulos, despues se hace el proceso de "captura" y luego en el procedimiento movimiento se habilita una instrucción para que entienda que teclas se estan presionado y de acuerdo a ello realizar la animación respectiva.
A continuación se muestra el listado completo:
Program animacion_combinada;
Uses crt,graph;
var
gd,gm : integer;
fantasma1 :pointer;
{Definimos un procedimiento para inicializar el modo gráfico}
procedure inicia_graficas;
begin
GD := Detect;{Se autodetecta el tipo de tarjeta o controlador
gráfico para el monitor en el que se este ejecutando el programa}
InitGraph(GD, GM, 'c:\lenguaje\turbo7\bgi');{Inicializa el modo gráfico}
if GraphResult <> grOk then Halt(1);{Evalua, si la inicialización no
fue correcta entonces Termina}
setcolor(YELLOW);
outtextxy(0,0,'TUTOR DE PROGRAMACION');
setcolor(CYAN);
outtextxy(0,15,'Animacion Combinada');
end;
{Definimos un procedimiento para pintar el fantasma}
procedure pinta_fantasma;
begin
{Cada instrucción conforma una parte del dibujo}
cleardevice;{Limpia la pantalla}
setcolor(lightblue);{Se fija el color a azul brillante}
setfillstyle(1,lightblue);{Se fija el estilo de relleno a solido en azul brillante}
arc(40,40,0,180,20);{Se pinta un arco en la columna 40, fila 40, que
empieza en 0 grados y termina en 180 grados, con un radio de 20 pixels}
line(20,40,20,60);{Se pinta una linea desde la columna 20, fila 40 hasta la
columna 20, fila 60 }
line(20,60,25,55);{Se pinta una linea desde la columna 20, fila 60
hasta la columna 25, fila 55 }
line(25,55,30,60);{Se pinta una linea desde la columna 25, fila 55
hasta la columna 30, fila 60}
line(30,60,35,55);{Se pinta una linea desde la columna 30, fila 60
hasta la columna 35, fila 55}
line(35,55,40,60); {Se pinta una linea desde la columna 35, fila 55
hasta la columna 40, fila 60}
line(40,60,45,55);{Se pinta una linea desde la columna 40, fila 60
hasta la columna 45, fila 55}
line(45,55,50,60);{Se pinta una linea desde la columna 45, fila 55
hasta la columna 50, fila 60}
line(50,60,55,55);{Se pinta una linea desde la columna 50, fila 60
hasta la columna 55, fila 55}
line(55,55,60,60);{Se pinta una linea desde la columna 55, fila 55
hasta la columna 60, fila 60}
line(60,60,60,40);{Se pinta una linea desde la columna 60, fila 60
hasta la columna 60, fila 40}
floodfill(50,50,lightblue);{Se rellena la figura con color azul brillante}
setcolor(white);{Se fija el color en blanco}
arc(40,43,200,350,10);
setfillstyle(1,white);{Se fija el estilo de relleno a solido en blanco}
fillellipse(35,35,4,5);{Se pinta una elise rellena en la columna 35, fila 35
con 4 pixels de radio en "X" y 4 en "Y"}
fillellipse(45,35,4,5);{Se pinta una elise rellena en la columna 45, fila 35
con 4 pixels de radio en "X" y 4 en "Y"}setfillstyle(1,BLUE);{Se fija el estilo de relleno a solido en azul brillante}
fillellipse(35,38,2,2);{Pinta una el elipse en la columna 35, fila 38 de
2 pixels de radio en "X" y "Y"}
fillellipse(45,38,2,2);{Pinta una el elipse en la columna 45, fila 38 de
2 pixels de radio en "X" y "Y"}{Una vez hemos dibujado la imagen del fantasma, procedemos a capturarla en
una posición determinada de la memoria para despues copiarla y hacer la
animación}getmem(fantasma1,imagesize(20,20,60,60));
{La función imagesize devuelve el número de bytes requeridos para almacenar
el mapa de bits de la porción de la pantalla comprendida entre la columna 20
fila 20 hasta la columna 60 fila 60.
El procedimiento Getmem reserva el número de bytes que le entrega la función
imagesize y pone la dirección al comienzo de la variable de tipo Pointer fantasma1
observese detenidamente que en este caso fantasma va sin ^ }
getimage(20,20,60,60,fantasma1^);{Este procedimiento almacena en la variable
fantasma1 los pixels contenidos entre la columna 20, fila 20 hasta la
columna 60 fila 60, notese que en este caso la variable fantasma1 si lleva
el signo ^ }
end;{Final del procedimiento
que pinta el fantasma}
procedure movimiento;
var
x,y,desplazamiento,valor,pausa : integer;
contador : byte;
tecla : char;
begin
desplazamiento:=20;{Numero de Pixels que va a avanzar el fantasma en
cualquier dirección}
pausa:=100;{Se hace una espera en milisegundos}
x:=getmaxx div 2; {El valor de X se situa en la mitad de la pantalla}
y:=getmaxy div 2; {El valor de Y se situa en la mitad de la pantalla}
cleardevice;{Se limpia la pantalla}
setcolor(Yellow);
outtextxy(10,10,'TUTOR DE PROGRAMACION');
setcolor(White);
outtextxy(10,20,'Movimiento de una figura con las flechas de dirección');
outtextxy(10,30,'Presione flechas de direccionamiento para mover o [ESC] para terminar');
repeat{Este ciclo se repite hasta que se presiona la tecla [ESC] o sea la #27}tecla:=readkey;{La variable tecla de tipo char se le asigna el valor dela tecla capturado mediante la función readkey}
valor:=ord(tecla);{La variable valor de tipo integer, toma el valor ordinal de la tecla leida}
if valor=0 then valor:=-ord(readkey);
{En este case se evalua el valor de la tecla}
case valor of-75:begin{En caso de que se halla presionado la tecla FLECHA IZQUIERDA}
x:=x-desplazamiento;
{El procedimiento PUTIMAGE pinta sobre la pantalla en las coordenadas
respectivas (columna x, fila y) la imagen almacenada previamente y
asignada a la variable fantasma1; la sentencia XORPUT quiere decir
que va a pintar la imagen y restablecer el fondo, si quieres probar,
puedes cambiar este valor por : COPYPUT, ORPUT, ANDPUT, o NOTPUT,
observar que pasa y de ahi sacar tus propias conclusiones}repeat
putimage(x,y,fantasma1^,xorput);
delay(pausa);
putimage(x,y,fantasma1^,xorput);
until keypressed;end;
-77:begin{En caso de que se halla presionado la tecla FLECHA DERECHA}
x:=x+desplazamiento;
repeat
putimage(x,y,fantasma1^,xorput);
delay(pausa);
putimage(x,y,fantasma1^,xorput);
until keypressed;
end;
-80:begin{En caso de que se halla presionado la tecla FLECHA ABAJO}
y:=y+desplazamiento;
repeat
putimage(x,y,fantasma1^,xorput);
delay(pausa);
putimage(x,y,fantasma1^,xorput);
until keypressed;
end;
-72:begin{En caso de que se halla presionado la tecla FLECHA ARRIBA}
y:=y-desplazamiento;
repeat
putimage(x,y,fantasma1^,xorput);
delay(pausa);
putimage(x,y,fantasma1^,xorput);
until keypressed;
end;
else{En caso de que se presione una tecla diferente a las flechas
de direccionamiento, se emite un pitido}
begin
sound(400);
delay(50);
nosound;
end;end;{case}
until tecla=#27;{Se repite hasta que se presiona la tecla [ESC]}
end;{Final del procedimiento}
begin{Inicio del programa principal}
inicia_graficas;{Llamado a el procedimiento para inicializar el modo gráfico}
pinta_fantasma;{Llama al procedimiento que pinta y "captura" el fantasma}
movimiento;{Realiza el movimiento de la figura}
closegraph;{Se cierra el modo gráfico}
end.{Final del programa principal}
Listado de programas
de animación combinada
Simulación de la caida libre de un objeto
caida.pas
Imagenes construidas por primitivas
fantasma.pas
Imagenes construidas por matrices sprites.pas
Movimiento de imagenes flechas.pas
Animación Morfológica
La imagen en movimiento se origina en respuesta a un conjunto de ordenes de programación, esta se pueden adaptar a un conjunto de ordenes para situaciones inesperadas, para ello se hace uso de varias formulas matemáticas. A continuación se muestra una serie de códigos fuente que hacen uso de este tipo de animación, debido a su gran longitud se deben descargar y correr en tu computador, cada linea está documentada para indicar que proceso se realiza.
Robot plano con tres grado de libertad Robot.pas
Movimiento de una linea en el sentido de las manecillas del
reloj Rotar.pas
Simulación del movimiento de las ruedas de un automovil Ruedas.pas
Rotación de figuras geométricas Rotar_2d.pas
Rotación y desplazamiento de figuras geométricas Figuras.pas
Regresar
Indice 
