Coordenadas 3D con ActionScript 3

El siguiente tip está referido a simular un espacio 3D (x,y,z) teniendo sólo 2 coordenadas X e Y (x,y). El cual es parte de un tema más amplio llamado Isometría , que se usa mucho en Juegos.
Comencemos:

1.- Crear el ambiente 3D

Flash maneja el siguiente sistema de coordenadas en 2d (Acuérdense que Y está en sentido contrario)



La idea es manejarlas en 3d (no es tan fácil dibujar esto en Fireworks )



Ahora juntemos estos sistemas



* Aquí hay un pequeño truco, estoy utilizando 2 coordenadas que ya existen(x y), solo las he cambiado de ubicación(z y) .
Es la forma más sencilla, creanme... . Si se fijan bien, el nuevo eje X (3D) es una línea oblicua al nuestro eje normal (2D) formando cierto ángulo.

Luego, si proyectamos el 3D en 2D tenemos lo siguiente


Observemos tanto en el cuadro amarillo como en el triángulo verde , el eje XY y X'Y'Z' :
B: Es el ángulo formado entre X y X'
Punto en 2D: (x,y)
Punto en 3D: (x',y',z')
En el cuadro amarillo, 2 líneas verdes que tiene la misma longitud(eso es demostrable por geometría)
También observemos la longitudes de X' y Y'.

Si nos concentramos en el triángulo verde :



Podemos proyectar X' en XY sabiendo el ángulo de inclinación B (trigonometría), con cual si usamos esto en la longitudes de X' y Y' obtenemos:

Código :

//En Y'
x+x'cos(180-B) = y'
//En X'
x'sen(180-B)+z' = y

// Si ordenamos XY para un lado y X'Y'Z' en el otro

x = y' - x'cos(180-B)
y = z' + x'sen(180-B)

Por tanto, podemos dar la coordenadas (x',y',z') y dibujarlas en (x,y)
En AS3
* Asumamos un ángulo de inclinación de 120 grados, con lo cual tendríamos 60 grados (180-B).Tengan presente que el ángulo debe estar en radianes (60 grados es equivalente a PI/3 radianes)

Código :

public static function coordenadas3d(_x:Number = 0, _y:Number = 0, _z:Number = 0):Point
{
var p:Point = new Point(0,0);
p.x = _y - _x*Math.cos((1/3)*Math.PI);
p.y = _z + _x*Math.sin((1/3)*Math.PI);

return p;
}

Nuestro código en Action

Código :

package view
{
import flash.display.MovieClip;
import flash.geom.Point;

/**
* ...
* @author ASD Eduardo Medina A.
*/
public class Lab01 extends MovieClip
{

public function Lab01()
{
init();
}

private function init():void
{
this.graphics.lineStyle(1, 0x00ff00);
this.graphics.moveTo(200,150); //Centrarlo en el eje
this.graphics.beginFill(0x00ff00, 1);

this.graphics.lineTo(200 + coordenadas3d(0, 100, 0).x,
150+coordenadas3d(0,100,0).y);
this.graphics.lineTo(200 + coordenadas3d(100, 100, 0).x,
150+coordenadas3d(100,100,0).y);
this.graphics.lineTo(200 + coordenadas3d(100, 0, 0).x,
150+coordenadas3d(100,0,0).y);
this.graphics.lineTo(200 + coordenadas3d(0, 0, 0).x,
150 + coordenadas3d(0, 0, 0).y);
this.graphics.endFill();
}
public function coordenadas3d(_x:Number,_y:Number,_z:Number):Point
{
var p:Point = new Point();
p.x = _y - _x*Math.cos((1/3)*Math.PI);
p.y = _z + _x*Math.sin((1/3)*Math.PI);
return p;
}

}

}

2.- Paramétricas en 3d , se acuerdan... enlace
Cono :

Código :

private function mframe(e:Event):void
{
if (t < 150)
{
var _x:Number = t*Math.cos(t);
var _y:Number = t*Math.sin(t);
var _z:Number = t;
cont1.graphics.lineTo(200+coordenadas3d(_x, _y, _z).x, 150+coordenadas3d(_x, _y, _z).y);
cont2.graphics.lineTo(200+coordenadas3d(_x,_y,_z).x, 150+coordenadas3d(_x, _y, -_z).y);

t += 10*Math.PI/180;
}else
{
this.removeEventListener(Event.ENTER_FRAME, mframe);
}
}

Esfera :

Código :

private function mframe(e:Event):void
{
if (t < 150)
{
var _x:Number = 100*Math.cos(u)*Math.cos(t);
var _y:Number = 100*Math.sin(u)*Math.cos(t);
var _z:Number = 100 * Math.sin(t);

cont1.graphics.lineTo(200+coordenadas3d(_x, _y, _z).x, 150+coordenadas3d(_x, _y, _z).y);

t += 16*Math.PI/180;
u += Math.PI/180;
}else
{
this.removeEventListener(Event.ENTER_FRAME, mframe);
}
}

* Ojo aquí hay 2 variables.
Y así como les dije en el tip anterior, las ecuaciones están ahí!!! pero ahora en 3D
Espero que les haya gustado

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.