Computacin Grfica Animaciones Procedimentales

III ANIMACIONES PROCEDIMENTALES Y FISICAS

Coordenadas cartesianas.
El movimiento de objetos en el desarrollo de cualquier juego de tipo 2D, obedece a las transformaciones propias dentro de un plano cartesiano, como el mostrado a la izquierda de este texto. El plano cartesiano est formado por dos rectas numricas, una horizontal y otra vertical que se cortan en un punto. La recta horizontal es llamada eje de las abscisas o de las equis (x), y la vertical, eje de las ordenadas o de las yes, (y); el punto donde se cortan recibe el nombre de origen. El plano cartesiano tiene como finalidad describir la posicin de puntos, los cuales se representan por sus coordenadas o pares ordenados. Las coordenadas se forman asociando un valor del eje de las 'X' y uno de las 'Y', respectivamente, esto indica que un punto se puede ubicar en el plano cartesiano con base en sus coordenadas, lo cual se representa como: P (x, y)

Computacin Grfica Animaciones Procedimentales

En una pelcula de Flash, al igual que en otros muchos lenguajes de programacion, cuando estamos trabajando en dos diemnsiones (2D), disponemos de la capacidad de ubicar objetos en un determinado tapiz o canvas, mediante el uso de las propiedades _x e _y del propio objeto. Cocretamente en Flash, son las propiedades de un determinado clip de pelcula. En una pelcula de Flash, al igual que en otros muchos lenguajes de programacion, cuando estamos trabajando en dos diemnsiones (2D), disponemos de la capacidad de ubicar objetos en un determinado tapiz o canvas, mediante el uso de las propiedades _x e _y del propio objeto. Cocretamente en Flash, son las propiedades de un determinado clip de pelcula. Sin embargo, el sistema de coordenadas en Flash, al igual que otros muchos lenguajes de programacin, no funciona como un plano cartesiano. Muestra una pequea diferencia, pero suficientemente importante, y es que invierten el eje Y, es decir los valores positivos de la coordenada Y, fluyen en direccin opuesta a un plano cartesiano, hacia abajo de la pantalla. Adems el origen de coordenadas (el punto 0,0), se situa en la parte superior-izquierda de la ventana principal.

Computacin Grfica Animaciones Procedimentales

Velocidad
La velocidad es una magnitud fsica de carcter vectorial que expresa el desplazamiento de un objeto por unidad de tiempo. Se la representa por Sus dimensiones son [L]/[T]. Su unidad en el Sistema Internacional es el m/s. Esta propiedad de algo que se mueve es la velocidad. Muchas personas comparan la velocidad a largo plazo con la velocidad. Eso es parte de ella, pero slo una parte. El concepto de velocidad contiene un segundo factor muy importante: la direccin. Y eso es ms o menos nuestra definicin del laico para la velocidad: la velocidad en una direccin particular. Vamos a echar un vistazo a exactamente cmo esta definicin difiere de velocidad simple.

La parte de la velocidad que se define generalmente en trminos de pixeles por cuadro (PxF). En otras palabras, si un clip de pelcula en un momento determinado, ya que entra en un marco, que va a ser tantos pxeles de distancia de ese punto en el final de la trama. En la mayora de los casos, con pxeles por cuadro funciona bien, y es sin duda el ms simple de programar. Sin embargo, debido a la naturaleza inestable de las velocidades de fotogramas en Flash, con pxeles por imagen puede hacer que su animacin ms lento en ciertos momentos, cuando mucho est sucediendo, hay mucho para calcular, o la CPU est ocupado haciendo otra cosa. Si se programa algn tipo de juego o simulacin en la que es crucial

Computacin Grfica Animaciones Procedimentales

que el producto de animacin a un ritmo muy uniforme, es posible que desee utilizar un intervalo de animacin basada en su lugar.

Vectores y velocidad
Un vector es algo que tiene magnitud y direccin. En el caso de la velocidad, la magnitud es la velocidad. Vectores se dibujan como flechas. La longitud de la flecha es la magnitud y la direccin de la flecha apuntan la direccin del vector.

Computacin Grfica Animaciones Procedimentales

Velocidad en un eje:
Mediante la limitacin de velocidad a un solo eje: el eje x, o el movimiento horizontal. Esto es que la direccin es de cero grados, al este, o desde el lado izquierdo de la pantalla a la derecha de la pantalla como quiera que mires. La velocidad es slo el nmero de pxeles que se mueve en esa direccin cada fotograma. Por lo tanto, si digo que la velocidad en el eje x es de 5, es decir que el objeto se mueve 5 pxeles cada fotograma de izquierda a derecha. Esto tambin significa que la velocidad es de -5 en el eje x, se mover de derecha Se usar el identificador vx para representar la velocidad en el eje x, y vy a la velocidad en el eje y vx positivo significa a la derecha, y -vx negativo significa que a la izquierda. Vy positivo significa hacia abajo, y -vy negativo significa arriba. Para la velocidad en un eje, slo tiene que aadir la velocidad a la posicin del objeto en dicho eje. Sea cual sea su vx es, se agrega a la propiedad _x del objeto en cada cuadro. //ejemplo 01 var vx:Number=5 //velocidad de x onEnterFrame = function(){ cuadrado._x=cuadrado._x+vx; }

Velocidad de dos ejes:

Mueve a lo largo de dos ejes es bastante simple. Usted acaba de definir una vx y vy uno, y luego agregar el vx a la propiedad _x y vy el de la propiedad _y en cada fotograma. Por lo tanto, lo que est diciendo es que para cada marco, el objeto se va a mover tantos pxeles en el eje X y tantos pxeles en el eje y.

Computacin Grfica Animaciones Procedimentales

var vx:Number=2 //velocidad de x var vy:Number=-3 //velocidad de x onEnterFrame=function(){ cuadrado._x+=_x+vx; cuadrado._y+=_y+vy; }

Limitacin de pantalla:
var vx:Number=-9; //velocidad de x var vy:Number=3; //velocidad de y var anchocuadrado:Number = 82; var altocuadrado:Number = 82; onEnterFrame=function(){ cuadrado._x+=_x+vx; cuadrado._y+=_y+vy; trace(cuadrado.width); //invertimos el valor del movimiento if (cuadrado._x <0){ cuadrado._x=0; vx=vx * -1; } else if (cuadrado._x > Stage.width anchocuadrado){ cuadrado._x = Stage.width anchocuadrado; vx=vx* -1; } //invertimos el valor del movimiento if (cuadrado._y <0){ cuadrado._y=0; vy= vy * -1; }
6

Computacin Grfica Animaciones Procedimentales

else if (cuadrado._y > Stage.height- altocuadrado){ cuadrado._y = Stage.height - altocuadrado; vy= vy * -1; } }

Retorno de salida por la misma posicin:

var vx:Number=-9; //velocidad de x var vy:Number=3; //velocidad de y var anchocuadrado:Number = 82; var altocuadrado:Number = 82; onEnterFrame=function(){ cuadrado._x+=_x+vx; cuadrado._y+=_y+vy; if (cuadrado._x >Stage.width){ cuadrado._x= - anchocuadrado; vx=vx * -1; } else if (cuadrado._x < -anchocuadrado){ cuadrado._x = Stage.width; } if (cuadrado._y > Stage.height){ cuadrado._y=-altocuadrado; } else if (cuadrado._y > Stage.height){ cuadrado._y = Stage.height; } }

Computacin Grfica Animaciones Procedimentales

Velocidad angular
Al dar dos velocidades diferentes en dos direcciones diferentes., si slo tiene un valor para la velocidad y el ngulo de direccin, por la definicin. Digamos que usted quiere que algo se mueva en un ngulo de 45 grados y una velocidad de 3 pxeles por imagen. Como se muestra en la figura, tenemos un tringulo rectngulo, con un ngulo y se define la hipotenusa. Tenga en cuenta que las dos lneas del tringulo que se encuentran en los ejes X e Y. De hecho, la lnea que se encuentra en el eje x es igual a la distancia que el punto se va a mover en el eje x. Lo mismo ocurre con la lnea en el eje y. Recuerde que en un tringulo rectngulo, si se tiene uno de los lados y un ngulo, se puede encontrar todo lo dems, teniendo en cuenta los 45 grados y la hipotenusa de 3 pxeles, debe ser capaz de utilizar Math.cos y Math.sin para encontrar las longitudes de vx y vy. El lado adyacente al ngulo es vx. El coseno de un ngulo es el adyacente / hipotenusa. O, dicho de otro modo, el lado adyacente es el coseno del ngulo de los tiempos de la hipotenusa. Del mismo modo, el lado opuesto se vy. Seno es opuesto / hipotenusa, o lo opuesto es la hipotenusa seno veces. //ejemplo movimiento angular var velocidad:Number=3;

Computacin Grfica Animaciones Procedimentales

var angulo:Number = 45; //covertiendo radianes =(angulo * Math.PI)/180; function onEnterFrame(){ vx = velocidad * Math.cos(radianes); vy = velocidad * Math.sin(radianes); trace(vx +" "+vy); balon._x = balon._x+vx; balon._y = balon._y+vy; }

Vector Adicin
La suma de vectores es cuando usted tiene dos vectores de trabajo en un sistema y que desea encontrar el vector global resultante. Aqu, usted tiene un vector en el eje x, otro vector en el eje y, y un vector de la velocidad en general. Agregar vectores simplemente colocndolos junto al inicio o final. El vector resultante es la lnea que usted puede llamar desde el punto de partida del primer vector de la cadena hasta el punto final de la ltima. //Ejemplo bsico de adicin Velocidad = 5; velocidad = 5; function onEnterFrame(){ dx = _xmouse - flecha._x; dy =_ymouse - flecha._y;

Computacin Grfica Animaciones Procedimentales

angle = Math.atan2(dy, dx); flecha._rotation = angle * 180 / Math.PI; vx = Math.cos(angle) * velocidad; vy = Math.sin(angle) * velocidad; flecha._x += vx; flecha._y += vy; } Si bien esto es un efecto bastante complejo, no debe haber algo aqu que no entienden por completo por ahora. Que est recibiendo la distancia x y la distancia y al ratn, y de que el uso de Math.atan2 para obtener el ngulo que se forma. Utilizar ese ngulo para girar la flecha, y el uso de Math.cos y Math.sin junto con la velocidad para encontrar la x y la velocidad y. Por ltimo, va a aadir la velocidad a la posicin.

Aceleracin
Existen muchas similitudes entre la velocidad y la aceleracin en cuanto a la forma en que se describen. Ellos son los dos vectores. Al igual que la velocidad, la aceleracin es descrito como un valor y una direccin. En trminos puramente ActionScript, se puede decir que la aceleracin es un valor que se agrega a una propiedad de la velocidad. He aqu otro ejemplo. Digamos que tienes una nave espacial que tiene que ir de planeta en planeta A B. Su direccin ser cualquier direccin planeta B pasa a ser en relacin con el planeta A. Se apunta en esa direccin y dispara sus cohetes. Mientras los cohetes estn disparando, la fuerza se est aplicando a la nave, y

10

Computacin Grfica Animaciones Procedimentales

su velocidad va a cambiar. En otras palabras, la nave espacial seguir cada vez ms rpido.

Aceleracin en un solo eje

Al igual que el ejemplo de la velocidad en primer lugar, este ejemplo de aceleracin primero se queda en un eje. //Ejemplo de aceleracion vx = 0; //velocidad x ax = 0.05; //aceleracion bola._x = 0; function onEnterFrame() { vx = vx + ax; bola._x = bola._x + vx; } En este caso, se inicia con la velocidad (vx) es cero. La aceleracin (ax) es de 0,2. Esto se suma a la velocidad en cada cuadro, y luego la velocidad se aade a la posicin de la pelota. Prueba este ejemplo. Vers que la pelota empiece a moverse muy lentamente, pero por el momento en que abandona el escenario, se va de largo en el escenario.

Aceleracin con teclas

En este caso, se inicia con la velocidad (vx) es cero. La aceleracin (ax) es de 0,2. Esto se suma a la velocidad en cada cuadro, y luego la velocidad se aade a la posicin de la pelota. Prueba este ejemplo. Vers que la pelota empiece a moverse muy lentamente, pero por el momento en que abandona el escenario, es comprimir la derecha a lo largo.

11

Computacin Grfica Animaciones Procedimentales

En este ejemplo vamos a permitir que la bola acelere de vez en cuando, e incluso revertirlo. Puede utilizar las teclas del cursor para esto. //ejemplo de aceleracin con teclas vx = 0; ax = 0.2; bola._x = Stage.width / 2; bola._y = Stage.height / 2; function onEnterFrame():Void { if (Key.isDown(Key.LEFT)) { vx -= ax; } else if (Key.isDown(Key.RIGHT)) { vx += ax; } bola._x += vx; }

Aceleracin en dos ejes

Al igual que con la velocidad, puede tener una aceleracin en el eje X y eje Y, al mismo tiempo. Daremos un valor de aceleracin para cada eje (que suelen utilizar los nombres de variable ax y ay), aadir los de vx y vy, y por ltimo aadir vx y vy a las propiedades _x y _y. Es muy fcil de adaptar el ejemplo anterior para trabajar con el eje y as. Slo tiene que aadir lo siguiente: Las variables ay y vy

12

Computacin Grfica Animaciones Procedimentales

Los controles para las teclas de cursor arriba y abajo La aceleracin de la derecha a la velocidad es la correcta La velocidad a la posicin del eje correspondiente Ejemplo: vx = 0; vy = 0; ax = 0.2; ay = 0.2; bola._x = Stage.width / 2; bola._y = Stage.height / 2; function onEnterFrame():Void { if (Key.isDown(Key.LEFT)) { vx -= ax; } else if (Key.isDown(Key.RIGHT)) { vx += ax; } if (Key.isDown(Key.UP)) { vy -= ay; } else if (Key.isDown(Key.DOWN)) { vy += ay; } bola._x += vx; bola._y += vy; }
13

Computacin Grfica Animaciones Procedimentales

Aceleracin Angular
Recordando el ejemplo del raton y hacer que funcione con la aceleracin. Recuerde que en ejemplos anteriores, se tom el ngulo de la flecha con el ratn y lo usaron para determinar vx y vy. Esta vez, vamos a usar los mismos clculos, pero los emplean para determinar Ax y Ay en su lugar. A continuacin, vamos a aadir los valores de aceleracin para los valores de velocidad y los valores de velocidad de las propiedades _x e _y. //ejemplo aceleracin angular fuerza = 0.5; vx = 0; vy = 0; flecha._x = Stage.width / 2; flecha._y = Stage.height / 2; function onEnterFrame() { dx = _xmouse - flecha._x; dy = _ymouse - flecha._y; angulo = Math.atan2(dy, dx); flecha._rotation = angulo * 180 / Math.PI; ax = Math.cos(angulo) * fuerza; ay = Math.sin(angulo) * fuerza; vx += ax; vy += ay; flecha._x += vx; flecha._y += vy; }

Frenado

14

Computacin Grfica Animaciones Procedimentales

La ecuacin del frenado es x=(x-b)/2, donde el valor de A es remplazado por x, el cual se desplaza la mitad de cada mitad de la distancia recorrida hasta llegar al punto b, que ser donde se detenga el objeto el valor de 2, cuando ms se aproxime a 1 ser un frenad ms rpido y cuando se aleje lo inverso.

//ejemplo Xfinal = Stage.width; frenado = 20; A onEnterFrame = function(){ X =(Xfinal - bola._x)/frenado; bola._x = bola._x +X; trace (X); } // Muestra la continuidad de la ecuacin //bola.duplicateMovieClip("bola"+bola,getNextHighestDepth());

X=

Formulas importantes de esta unidad Velocidad angular:

vx = velocidad * Math.cos(angulo); vy = velocidad * Math.sin(angulo);

Aceleracin con ngulo

ax = fuerza * Math.cos(angulo); ay = fuerza * Math.sin(angulo);

Adicion de velocidad:
vx += ax;

15

Computacin Grfica Animaciones Procedimentales

vy += ay;

Adicion de velocidad en nueva posicin:

clip._x += vx; clip._y += vy;

16

Computacin Grfica Animaciones Procedimentales

Movimiento senoidal
Para entender el tema antes debemos analizar la funcin seno, utilizando el valor mximo y mnimo para generar un rebote en funcin a la velocidad el cual representamos en la variable ngulo. Consideremos un movimiento de tipo oscilatorio en el que el objeto deba desplazarse con suavidad. Este tipo de movimiento recuerda a la onda sinusoidal, representada por el grfico de la funcin seno sobre un eje de coordenadas. Aplicando la ecuacin correspondiente y adaptndola de acuerdo a nuestras necesidades logramos el movimiento deseado: angulo = 0; function onEnterFrame(){ flecha._y = 200 + Math.sin(angulo) * 60; angulo= angulo +0.1; }

MOVIMIENTO CIRCULAR
Si tomamos el crculo en la figura y convertirlo por lo que se busca directamente en el borde de la derecha, obsrvamos que el objeto se

17

Computacin Grfica Animaciones Procedimentales

desplaza arriba a abajo. Su centro sera el centro del crculo, y su rango sera el radio del crculo. Se podra calcular su posicin, tal como hizo en el experimento de seno en primer lugar: por tomar el seno de las veces el ngulo, en este caso, seno (angulo) sera la funcin apropiada de usar, porque si nos fijamos en el tringulo formado, se est calculando la longitud de y el cateto opuesto al ngulo. Ahora, pensemo que en buscar en el crculo de su borde inferior en su lugar. En este punto de vista, se ve el objeto que se mueve adelante y atrs, de izquierda a derecha. Esta vez, se est calculando la longitud de x-el cateto adyacente al coseno del ngulo, de modo que usted debe utilizar. angulo = 0; centroX = 270; centroY = 200; radio = 100; velocidad = .1; onEnterFrame = function(){ balon._x = centroX + Math.cos(angulo) * radio; balon._y = centroY + Math.sin(angulo) * radio; angulo += velocidad; }

Movimiento elptico
Mientras que los crculos son encantadores, a veces un crculo perfecto no es exactamente lo que necesita. Lo que podra estar buscando ms de un valo o elipse. El problema es con el radio. Hace de los rangos del movimiento x y el movimiento y el mismo, razn por la cual se obtiene un crculo.

18

Computacin Grfica Animaciones Procedimentales

Para hacer una forma ms ovalada, todo lo que necesita hacer es usar diferentes valores para el radio al calcular las posiciones x e y. RadioX y RadioY. angulo = 0; centroX = 270; centroY = 200; radio = 100; velocidad = .1; radioX = 200; radioY = 100 onEnterFrame = function(){ balon._x = centroX + Math.cos(angulo) * radioX; balon._y = centroY + Math.sin(angulo) * radioY; angulo += velocidad; }

Friccin
He aqu un ejemplo. Coge un trozo de papel, se estrujan muy libremente, y tirar lo ms fuerte posible. Hay una buena probabilidad de que ni siquiera lo hacen a travs de la habitacin. Por supuesto, la gravedad es que tira hacia abajo (eje Y), pero cuando sali de su mano, que se estaba moviendo muy rpido en el eje x. Sin embargo, muy rpidamente, tena la velocidad x casi cero. Obviamente, no "aceleracin negativa" fue tirando del papel hacia atrs hacia su mano, sin embargo, su velocidad ha cambiado. Esto se conoce como friccin, friccin, resistencia o amortiguamiento. A pesar de que tcnicamente no es una fuerza, que hace clase de actuar de esa manera, ya que los cambios de velocidad de un

19

Computacin Grfica Animaciones Procedimentales

objeto. La regla es que la friccin se reduce slo la magnitud de la velocidad. Cualquiera que sea la direccin del objeto se dirige en esto no se cambiar por la friccin. En otras palabras, la friccin se puede reducir la velocidad a cero, pero nunca va a hacer que un objeto dar la vuelta y en la otra direccin. As que, cmo poner en prctica la friccin en el cdigo? Resulta que hay dos formas. Como la mayora de las cosas en la vida, usted tiene el camino correcto y el camino ms fcil. Pero a diferencia de sus padres, yo voy a recomendar el camino ms fcil. Aun as, yo te voy a mostrar en ambos sentidos, empezando por el "correcto", y le permiten hacer su propia decisin.

Friccin, de la manera correcta

La friccin es en realidad de sustraccin de la velocidad, es decir, que tienen un cierto valor de la friccin, y que le resta de su velocidad. En realidad, es necesario para protegerlo de la magnitud, o la velocidad, de la velocidad. Usted no slo puede restar la friccin del eje x y el eje y por separado. Si lo haces para un objeto que viaja en un ngulo, una de las velocidades componentes llegar a cero antes que el otro, y el objeto continuar por un tiempo, ya sea vertical u horizontalmente, que se ver bastante extrao. Por lo tanto, lo que tiene que hacer es encontrar la velocidad angular en funcin de la velocidad y direccin. Para encontrar la velocidad, se toma la raz cuadrada del cuadrado ms vy al cuadrado (s, ese es el teorema de Pitgoras (ya se vio anteriormente). vx = Math.cos(angulo) * velocidad; vy = Math.sin(angulo) * velocidad;

20

Computacin Grfica Animaciones Procedimentales

friccion = 0.1; balon._x = Stage.width / 2; balon._y = Stage.height / 2; vx = Math.random() * 10 - 5; vy = Math.random() * 10 - 5; function onEnterFrame() { var velocidad:Number = Math.sqrt(vx * vx + vy * vy); var angulo:Number = Math.atan2(vy, vx); if (velocidad > friccion) { velocidad -= friccion; } else { velocidad = 0; } vx = Math.cos(angulo) * velocidad; vy = Math.sin(angulo) * velocidad; balon._x += vx; balon._y += vy; }

La friccin, el camino ms fcil

Como era de esperar, la manera fcil de hacer friccin no es tan precisa como la tcnica que acabamos de describir, pero apuesto a que nadie se d cuenta. Se compone de dos lneas de simple multiplicacin. Todo lo que necesitas hacer es multiplicar la x y la velocidad y por una fraccin de 1. Un nmero como 0,9 o 0,8 por lo general funciona bastante bien. Por lo tanto, en cada cuadro, el

21

Computacin Grfica Animaciones Procedimentales

vx y vy a ser del 80% o 90% de lo que estaban la ltima vez. En teora, la velocidad se aproxima a cero, pero en realidad nunca lo alcance. En la prctica, la computadora puede calcular esas cifras a corto plazo slo hasta el momento, y con el tiempo se va a redondear a la baja a velocidad cero. Pero mucho antes de eso, el movimiento ser tan pequeo que ser imperceptible. La buena noticia es que la velocidad no va a ser negativo con este mtodo, por lo que no tiene que preocuparse acerca de la comprobacin de eso. Adems, la x y la velocidad y se aproxima a cero en la misma proporcin, lo que no hay necesidad de convertir la velocidad angular del eje de y hacia atrs. vx = Math.cos(angulo) * velocidad; vy = Math.sin(angulo) * velocidad; friccion = 0.9; balon._x = Stage.width / 2; balon._y = Stage.height / 2; vx = Math.random() * 10 - 5; vy = Math.random() * 10 - 5; function onEnterFrame() { vx *= friccion; vy *= friccion; balon._x += vx; balon._y += vy; }

Gravedad
La gravedad tiene una descripcin muy simple: Tira las cosas. De hecho, tira las cosas a un ritmo muy especfico. La aceleracin

22

Computacin Grfica Animaciones Procedimentales

que se aplica es igual a unos 32 metros por segundo por segundo. Una forma de expresar la aceleracin es por la cantidad de velocidad que aade ms de un perodo de tiempo especfico. La gravedad hace que las cosas van de 32 centmetros por segundo ms rpido, cada segundo que tira de ellos. Usted puede ir a la montaa ms alta o ms baja del valle, y que el nmero 32 no va a cambiar lo suficiente como para que se d cuenta (es decir, sin algunos instrumentos sensibles).

Fuerza gravitacional
Cuanto ms lejos estn de un planeta o una gran masa, menor es la gravedad se hace. Esto es una cosa muy buena. De lo contrario, todos seramos absorbidos por el sol, que sera absorbida por cada otro sol y el planeta, todos los cuales terminaran estrellan con bastante rapidez. As que, cuando salga al punto en que se puede hacer referencia a los planetas como las partculas, la distancia entre ellos afecta en gran medida la fuerza de gravedad. Cunto afecta la distancia de la fuerza es muy fcil de describir. Es inversamente proporcional al cuadrado de la distancia. Bueno, tal vez que necesita alguna explicacin. En primer lugar, la gravedad es tambin muy ligado a la masa. La masa tiene, ms fuerza va a tirar en otras cosas, y cuanto ms se tira de ellos. Tambin hay algo llamado la constante de gravitacin (abreviado G) que se ajusta en ese pas. Esta es la ecuacin completa de la fuerza de gravedad: fuerza = G * m1 * m2 / Distancia2 La fuerza de la gravedad sobre un objeto por otro objeto es igual a la gravedad veces constante, tanto de las masas, dividido por el

23

Computacin Grfica Animaciones Procedimentales

cuadrado de la distancia entre ellos. Slo se necesita saber lo que esta constante gravitacional, aqu est la definicin oficial: G = (6.6742 0.0010) * 10.11 * * m3 kg-1 * s-2 En ActionScript se escribe la frmula gravedad de esta manera: fuerza = m1 * m2 / Distancia2

Ejemplo 01: aceleracion = 10; x = 200; y = 200; function onEnterFrame () { balon._x += (x-balon._x)/aceleracion; balon._y += (y-balon._y)/aceleracion; if (Math.abs(x-balon._x)<0.5 && Math.abs(y-balon._y)<0.5) { balon._x = x; balon._y = y; //delete balon.onEnterFrame; } };

ELASTICIDAD
En primer lugar, echemos un vistazo a lo que es un resorte. En lugar de verlo como un objeto, vamos a ver como una fuerza. Cuando usted comienza a pensar de un muelle como una fuerza, es probable que sea mejor utilizar la palabra "elasticidad". Despus de que usted comience a mirar de esa manera, usted

24

Computacin Grfica Animaciones Procedimentales

puede comenzar a pensar en muchas ms maneras de utilizar esta fuerza que se genera. Entonces, qu esta fuerza no? Tira un objeto hacia un punto particular. Un punto importante de esta fuerza es que cuanto ms lejos se obtiene desde el punto de destino, ms fuerte ser la atraccin. Esto se opondra a la gravedad, donde la fuerza se debilita con la distancia. En caso de que usted est teniendo problemas para visualizar este, tome una cinta de goma, lo sostiene contra su brazo, tire de l una o dos pulgadas y la dej ir. Ahora es sacar lo ms que pueda, y djelo presin contra el brazo. Qu fuerza fue ms fuerte? //Ejemplo 01 // Curva elstica // Nota configurar flash placer versin 6.0 stop(); //estos valores para el rebote velX=0 velY=0 aceleracion = .6 deceleracion = 1.6 this.onMouseDown =function(){ presionado = true } this.onMouseUp =function(){ presionado = false } //creo la funcion que luego se repite 2 veces function crearLinea(){
25

Computacin Grfica Animaciones Procedimentales

this.createEmptyMovieClip("clip",1) with (this["clip"]) { lineStyle( 5, 0x336699, 100 ); moveTo(100,200); curveTo(x,y,300,200); } } this.onEnterFrame=function() { if(presionado==true){ //codigo reducido y=(this._ymouse-200)*4/2; y+=200; x=(this._xmouse-125)*4/2; x+=50; //llama a la funcion que dibuja crearLinea() //fin codigo }else { velX = (velX+(200-x)/aceleracion)/deceleracion; velY = (velY+(200-y)/aceleracion)/deceleracion; x+= velX; y+= velY; //llamo a la funcion que dibuja crearLinea() } } //Ejemplo 02 // Funcin en fotograma
26

Computacin Grfica Animaciones Procedimentales

// Developed by dns r5 - www.chucruts.cjb.net // Based on script by Jae Young, Choi on Designers Forum (corea) Movieclip.prototype.elasticPos = function(targetX, targetY, accel, convert) { tellTarget (this) { xPos = xPos * accel + (targetX - _x) * convert; yPos = ypos * accel + (targetY - _y) * convert; _x += xPos; _y += yPos; } }; //Cdigo en clip de pelcula onClipEvent (load) { x = this._x; y = this._y; } onClipEvent (enterFrame) { if (!pressed) { elasticPos(x, y, .9, .5); // elasticPos( targetX, targetY, accel, convert); } } //Cdigo en botn dentro del clip de pelcula on (press) { pressed = true; this.startDrag(); } on (release, releaseOutside) { pressed = false; this.stopDrag();
27

Computacin Grfica Animaciones Procedimentales

} //Ejemplo 03 function iniciomouse () { // inicializa la posicin de Mouse en un arreglo raton = [_xmouse,_ymouse]; } function elasticidad () { // initialise la variable en un array fisica = [0.25, 0.9] /* la clasi formula de la lesticidad */ vx = ((raton[0]-balon._x)*fisica[0])+(vx*fisica[1]); vy = ((raton[1]-balon._y)*fisica[0])+(vy*fisica[1]); balon._x += vx; balon._y += vy; } // En clip bola onClipEvent (enterFrame) { _root.elasticidad(); } onClipEvent (mouseMove) { _root.iniciomouse(); }

28

Computacin Grfica Animaciones Procedimentales

//Ejemplo 04 // lnea configurar flash 6.0 //estos valores para el rebote velX=0; velY=0; aceleracion = 0.6; deceleracion = 1.6; this.onMouseDown =function(){ presionado = true; } this.onMouseUp =function(){ presionado = false; } //creo la funcion que luego se repite 2 veces function crearLinea(){ this.createEmptyMovieClip("Linea",1) with (this["Linea"]) { lineStyle( 5, 0x336699, 100 ); moveTo(100,200); curveTo(x,y,300,200); } } this.onEnterFrame=function() { if(presionado==true){ y=(this._ymouse-200)*4/2; y+=200; x=(this._xmouse-125)*4/2; x+=50; //llamo a la funcion que dibuja crearLinea();
29

Computacin Grfica Animaciones Procedimentales

}else { velX = (velX+(200-x)/aceleracion)/deceleracion; velY = (velY+(200-y)/aceleracion)/deceleracion; x+= velX; y+= velY; //llamo a la funcion que dibuja crearLinea(); } } //ejemplo pndulo 05

onClipEvent(load){ a0 = 10/180*Math.PI; //ngulo inicial de 10 grados

30

Computacin Grfica Animaciones Procedimentales

g = 9.8; //aceleracin de la gravedad r = 200; //longitud de la cuerda t = 0; oscilar = 1; } onClipEvent(enterFrame){ //muestra el ngulo actual redondeado a 2 decimales _parent.controles.a = Math.round(a*18000/Math.PI)/100; x = _parent._xmouse; y = _parent._ymouse; if(oscilar){ //libre oscilacin a = a0*Math.cos((t/48)/Math.sqrt(g/r)); //oscilacin del ngulo (radianes) t++; } else{ //arrastrar pndulo c = Math.sqrt((x-250)*(x-250)+y*y); //distancia del cursor al punto de apoyo if((x-250)*(x-250)+y+y < c*c){ //cursor dentro de la bola a = -Math.atan2((x-250),y); //ngulo arrastrado (radianes) a0 = a; //iguala la amplitud al ngulo arrastrado } else{ oscilar = 1; //cuando se escapa del cursor ;) } } _rotation = a*180/Math.PI; //rota el pndulo segn el ngulo (grados)
31

Computacin Grfica Animaciones Procedimentales

_parent.sombra._x = 250 - 200*Math.sin(a); _parent.sombra._xscale = 0.5*Math.abs(_parent.sombra._x-250)+100; updateAfterEvent(); }

//dentro del botn V3 on (press) { oscilar = 0; //no oscila libremente t = 0; //t inicial 0 } on (release,releaseOutside,dragOut) { oscilar = 1; }

32