11 junio 2011

Convertir de 3D a 2D usando perspectiva caballera


Hay varias formas de representar en un plano de 2 dimensiones, puntos que realmente pertenecen al espacio de 3 dimensiones. Algunas de ellas son muy típicas de dibujo técnico, como la perspectiva caballera, la perspectiva isométrica o la perspectiva cónica. Otras aprovechan la capacidad de cálculo de los ordenadores, para permitir cualquier punto de vista o cualquier posición de los ejes.

Vamos a empezar por la perspectiva caballera. En ella, el eje X (anchura) y el Z (altura) se muestran "en verdadera magnitud" (a tamaño real), y el eje Y (profundidad) forma 135 grados con ellos:



Las distancias en el eje Y se suelen representar "reducidas", en un factor de 1/2, o bien de 2/3 o de 3/4.

Representar un punto 3D en pantalla usando este método es fácil:
  • La coordenada X se representará tal cual, correspondiendo con la coordenada X de nuestra pantalla, salvo quizás un desplazamiento a un lado o a otro, para colocar el origen de coordenadas en un punto que no sea la esquina de la pantalla, y salvo quizá un factor de escala para poder ver las cosas con mayor o menor detalle.
  • La coordenada Z del espacio (vertical) corresponderá con la coordenada Y de nuestra pantalla, salvo el desplazamiento del origen, quizá un factor de escala, y con una diferencia importante: es habitual que la Y de una pantalla crezca hacia abajo, y la Z del sistema de coordenadas suele crecer hacia arriba, así que habrá que cambiar de signo.
  • Cada avance en el eje Y del espacio (profundidad), se reflejará en un ligero avance hacia abajo en la pantalla (y*0.5) y un ligero retroceso en horizontal (-y*0.5)

Por tanto, las coordenadas X e Y en pantalla de un punto de coordenadas reales (X,Y,Z), si no hacemos ningún cambio de escala, serían:

xPantalla = x + desplazX
yPantalla = -z + (y * 0.5) - (x * 0.5) + desplazY

Así un fuente de Basic256 que dibujara un "muelle" (un círculo "estirado hacia arriba", para que sus puntos tengan coordenadas X, Y, Z, distintas de cero en su mayoría, y se note el efecto de la profundidad y el de la altura) podría ser:

REM Datos del circulo
xCentroCirculo = 200
yCentroCirculo = 180
radioCirculo = 50

REM Desplazamiento del origen
desplazX = 0
desplazY = 200

clg
for i = 1 to 360
REM Calculo la x,y,z reales
x = xCentroCirculo + radioCirculo * cos(radians(i))
y = yCentroCirculo + radioCirculo * sin(radians(i))
z = i

REM Y las coordenadas de pantalla equivalentes
xPantalla = x + desplazX
yPantalla = -z + (y * 0.5) - (x * 0.5) + desplazY
plot xPantalla, yPantalla
pause (0.01)
next i

(Puedes leer más sobre perspectiva caballera, por ejemplo aquí:)

10 junio 2011

Tiro parabólico


Dibujar una parábola es fácil: basta aplicar la ecuación y = a* x2 + bx + c, de modo que se obtiene un valor de y para cada valor de x.

Es un poco más complejo cuando se trata de un tiro parabólico, que sale desde unas ciertas coordenadas, con una cierta velocidad inicial y un cierto ángulo. La ecuación es de la forma:

y = x · tan a - ( g · x2 / 2 · v2 · cos2 a)

(siendo a el ángulo de salida, v la velocidad inicial, g la constante de la gravedad 9.8)

Para un programa de ordenador, posiblemente habría que cambiar el signo de Y, si las coordenadas de pantalla empiezan en la esquina superior izquierda de la pantalla y crecen hacia abajo. También puede ser necesario ajustar la escala, para no salirnos muy rápido de las coordenadas de la pantalla (por ejemplo, dividiendo entre 10).

Un fuente en Basic256 para dibujar este movimiento podría ser así:

REM Datos del punto de origen
x1 = 10
y1 = 90

REM Datos del punto final
x2 = 200

REM gravedad, angulo de salidad y velocidad inicial
g = 9.8
a = 70
v = 40


REM Borrar pantalla gráfica
clg

REM Parte repetitiva
for x = x1 to x2 step 2
REM Ecuacion de Y a partir de X en tiro parabolico
REM y = x · tan a - ( g · x2 / 2 · v2 · cos2 a)
y = x * tan(radians(a)) - (( g* x* x) / (2 * v * v * cos(radians(a))* cos(radians(a)) ))
REM Cambio la escala a 1/10 para que se vea mejor
y = y1 - (y / 10)
plot x, y
pause 0.1
next x

(Más detalles sobre estas ecuaciones, por ejemplo en estos sitios:)


(la imagen animada está tomada de este último artículo)

08 junio 2011

Movimiento circular


Hemos visto cómo dibujar una recta entre dos puntos (o como hacer que algo se mueva en línea recta). Vamos a ver ahora cómo dibujar un círculo punto a punto, que se podría aplicar para imitar un movimiento circular.

Las ecuaciones de cada punto X e Y de una circunferencia, a partir de su radio (r) y del ángulo (t) que forma ese punto con la horizontal son:

x = r · cos t
y = r · sin t
Si el centro de la circunferencia no es (0,0) sino otro punto de coordenadas (xCentro, yCentro), quedaría:

x = xCentro + r · cos t
y = yCentro + r · sin t

Si aplicamos esto a un fuente con Basic256, podría quedar así:

xCentro = 200
yCentro = 150
radio = 50
clg
for i = 1 to 360
plot xCentro + radio * cos(radians(i)), yCentro + radio * sin(radians(i))
pause (0.01)
next i

Sólo dos consideraciones:
  • Normalmente "a un humano" le resulta cómodo medir en grados, pero las funciones "seno" (sin) y "coseno" (cos) suelen esperar que se indique el ángulo en radianes, por lo que habrá que convertir, usando órdenes como "DEG" (trabajar en grados), funciones como "radians" (convertir a grados, como en el ejemplo anterior) o bien convertir "a mano" de radianes a grados, multiplicando por 180 y dividiendo entre PI.
  • Si los dos radios (horizontal y vertical) no son iguales, obtendremos una elipse en lugar de una circunferencia.



07 junio 2011

Movimiento entre dos puntos en línea recta

Hacer que algo se mueva en línea recta entre dos puntos de la pantalla no es difícil. Basta aplicar la ecuación "punto-pendiente" de la recta:

y - y1 = m (x-x1)

donde (x1,y1) son las coordenadas del punto por el que pasa la recta, y "m" es la pendiente de la recta.

Si lo queremos expresar en función de las coordenadas de dos puntos (x1,y1) y (x2,y2) en vez de usar la pendiente, los cambios no son muy grandes:

y = y1 + ((y2-y1)/(x2-x1)) * (x-x1)

De modo que conociendo x1, x2, y1, y2, podemos obtener la coordenada "y" que corresponde a cada punto "x" de la recta.

Un fuente que lo hiciera con algún intérprete de Basic sencillo y que permita dibujar, como Basic256, podría ser:

REM Datos del primer punto
x1 = 10
y1 = 20

REM Datos del segundo punto
x2 = 100
y2 = 205

REM Borrar pantalla gráfica
clg

REM Parte repetitiva
for x = x1 to x2 step 2
REM Recta con punto y pendiente : y - y1 = m (x - x1)
y = y1 + ((y2-y1) / (x2-x1)) * (x-x1)
plot x, y
pause 0.1
next x



Cuando se trata de un juego, el movimiento se suele repetir como parte del "bucle de juego", así que no existiría ese "for", porque de lo contrario, todo el juego se paralizaría mientras se mueve este elemento.

En este caso, se iría incrementando paso a paso, con algo que podría ser como (siguiendo la sintaxis del lenguaje C y sus derivados):

if (moviendo)
{
x += incrX;
y = y1 + ((y2-y1)/(x2-x1)) * (x-x1)
}
dibujar(x,y);

06 junio 2011

Turbo Pascal en Windows 7 64 bits

Hay quien sigue usando, como herramienta de aprendizaje, antiguos compiladores de MsDos, como Turbo Pascal, Borland Pascal, Turbo C, Borland C++...

El problema es que con las versiones 64 bits de Windows no se pueden utilizar ya estos compiladores. En el caso de Turbo Pascal, el problema no es demasiado grave, porque hay al menos un par de soluciones sencillas:

  • Usar FreePascal, que es muy compatible con Turbo Pascal 7, pero no da problemas con Windows 7 64 bits. De hecho, hay versiones incluso para Windows, Linux y Mac OS. Además, se puede elegir entre el editor en modo texto (al estilo del Turbo Pascal original) o un entorno más moderno "al estilo Windows", si se descarga todo el paquete llamado Lazarus.
  • Usar el propio Turbo Pascal (o Turbo C, o el programa del que se trate) desde algún "emulador de MsDos. El más senciillo de usar es DosBox, pero tiene un problema: no viene "totalmente instalado y listo para usar", porque no crea un "disco C" en el que instalar nuestro compilador. Una alternativa más cómoda es usar "D-Fend Reloaded", que es un entorno mejorado que incluye DosBox, pero lo instala junto con varias utilidades, y deja un "disco C" listo para usar. Además, es fácil copiar cosas desde Windows en ese "falso disco C", porque es una carpeta llamada "VirtualHD" que se encuentra en nuestra carpeta de usuario: C:\Documents and Settings\Usuario\D-Fend Reloaded\VirtualHD Todo lo que copiemos en esa carpeta (por ejemplo, los ficheros de instalación de nuestro compilador) estará visible cuando entremos a D-Fend Reloaded. Una última consideración: en Turbo Pascal, Borland C++ y toda esa familia de productos se pulsaba Ctrl+F5 para lanzar nuestro programa, pero esa tecla está reservada en DosBox para hacer una captura de pantalla, por lo que deberemos ejecutar nuestros programas entrando al menú "Run".