TUTORIAL 25 FUNCIONES MATEMÁTICAS APLICADAS A LA PROGRAMACIÓN

[roger]

 

1.- INTRODUCCIÓN

 

Por la complejidad de las matemáticas en la programación y pensando que no todos los programadores en Flash tienen los conocimientos matemáticos necesarios para dominar todos los conceptos, creo adecuado introducir los conceptos básicos geométricos y trigonométricos siguientes:

 
1.- Coordenadas

2.- Puntos de inserción

3.- Uso de conceptos trigonométricos para representación y manipulación de elementos gráficos.

 

2..- DISTANCIA ENTRE DOS OBJETOS

 

En esta práctica, utilizando el teorema de Pitágoras. Podréis ver cómo podéis crear aplicaciones donde se necesite saber en cualquier momento la distancia entre dos clips de película. Muy importante para craer juegos. Recordemos el teorema de Pitágoras:

En todo triángulo rectángulo el cuadrado de la hipotenusa es igual a la suma de los cuadrados de los catetos.

Entonces la hipotenusa será igual a la raíz cuadrada de la suma de los catetos al cuadrado.

 

¿Cómo saber entonces la distancia a la que se encuentran dos clips de película? 

 

Pues muy fácil. Como se puede observar en la imagen anterior y teniendo en cuenta las coordendas x e y podremos hallar la hipotenusa que sería la distancia. 

 

Vamos a construir un programa que calcule la distancia dinámicamente al arrastrar una de las bolas.

 

Aqui os dejo el swf para ver como quedaría el programa:

 

Distancia entre dos objetos: tutorial25_1.swf

 

Cualquier concepto que no se entienda quedamos en este foro. Es importante entenderlo.

Podéis ir publicando ya esta práctica aquí.

 

 

 

 

 

 

 

[Nani]

Pero es que no sé exactamente qué es lo que quieres hacer.

[Amalia Casas]

Nani quería integrar la serpiente (que gira los ojos siguiendo a la mosca)  en una actividad  de halloween. De momento lo he solucionado añadiendo una escena y pegando los fotogramas, porque si importaba el archivo swf la serpiente dejaba de mover los ojos.

Gracias.

[Nani]

Bueno, a mi se me ha ocurrido hacer esto. El código de los ojos da para mucho: COPIAR Y PEGAR.

[Alfredo Rodrigálvarez]

Nani está realmente genial.

¡Muy bien!

[roger]

4.- DESPLAZAR UN OBJETO PARA LLEGAR DE UN PUNTO  A OTRO.

 

Utilizaremos las funciones matemáticas Math.sin y Math.cos. Estas funciones nos servirán para hallar coordenadas a partir de una rotación.

 

Partiremos de  que la circunferencia de arriba es unitaria, es decir, su radio vale 1, y que el punto A es el punto (0,0) de nuestro sistema de coordenadas. No vamos a explicar todo el teorema del seno y el coseno pero al menos vamos a tener en cuenta estos dos conceptos:

• El seno (Math.sin(α)) nos dice cuánto tendremos que desplazarnos en el eje horizontal para llegar de A a B (longitud de BC)
• El coseno (Math.cos(α)) nos da esa misma información sobre la coordenada Y (longitud de AB). 

 

Ahora vamos a imaginar que en el punto A tenemos un objeto, por ejemplo un pez, y queremos que se desplace en dirección hacia un mosquito.

 

Primero crearemos una función que la llamaremos animación()

 

function animacion() {

//Cáculamos las distancias entre los dos objetos

_root.disty = _root.mosquit._y-_root.peix._y;

_root. distx = _root.mosquit._x-_root.peix._x;

// Orientamos el ángulo del pez en dirección al mosquito

_root.gir_radians = Math.atan2(disty, distx)  // Nos devuelve el águlo en  radianes

// Como la propiedad rotation se expresa en grados, habrá que convertir los radianes.

_root.gir_graus= gir_radians*(180/Math.PI);

 

_root.peix._rotation = gir_graus; // El pez se orienta hacia el mosquito.

 

Hasta aquí no hemos hecho nada nuevo, solo hemos orientado el pez. Ahora toca programar el desplazamiento del pez. Y para ello calculamos el seno y el coseno. Dentro del parénteis ya convertimos los grados en radianes porque las funciones seno y coseno exigen radianes.

seno=Math.cos(Math.PI/180*_root.peix._rotation); 

coseno=Math.sin(Math.PI/180*_root.peix._rotation);

 

Ahora sumamos a las coordenadas que tenía el pez el seno y el coseno. Y si esta función la repetimos dentro de un intervalo haremos que se produzca la animación. El pez se irá acercando al mosquito poco a poco.

 

_root.peix._x = _root.peix._x+seno;

_root.peix._y = _root.peix._y+coseno;

Una vez que colisonen, pez y mosquito, haremos invisible a este último para que parezca que el pez se lo ha comido.

if(_root.peix.hitTest(_root.mosquit)) {_root.mosquit._visible=false}

}  // cerramos la animación.

 

Introducimos la animación en un bucle-intervalo:

 

intervalo=setInterval(animacion,100)

 

Pero resulta que el pez parece que va demasiado lento y queremos más velocidad. Entonces modificamos estas líneas:

 

_root.peix._x = _root.peix._x+seno*20; // multiplicamos por 20 por ejemplo

_root.peix._y = _root.peix._y+coseno*20;

Os dejo un ejemplo en el que hay que salvar al soldado mosquito. 

 

Ahora os pido que hagáis algún jueguecito.

 

 

 

 

 

 

 

 

 

[roger]

Os dejo una versión con dos peces para aumentar la dificultad:

[roger]

Otro ejemplo: el pez serpiente. En este caso cuando movemos el mosquito la serpiente le seguirá y se irá haciendo más grande. ¿Sabéis como se puede conseguir este efecto?

[Alfredo Rodrigálvarez]

Gracias Roger el problema anterior era, efectivamente, la version de ActionScript.

Aquí dejo la última ejemplificacion, no es gran cosa pero lo he conseguido.

 

 

[Emilia Alcaraz Delgado]

Hola a tod@s,

 

Mi aplicación también es sencillita, pero como Alfredo estoy contenta de haberlo conseguido.

 

Hasta pronto, Emilia

 

[Nani]

¡Qué chulas! A ver si me pongo con ellas.

[Amalia Casas]

Siguiendo con el tema de mosquitos y demás bichos preparados para Samaín.

 

[Emilia Alcaraz Delgado]

Amalia,

 

Has hecho tú los dibujos ? Son una monada !

 

Hasta  ronto, Emilia