Programación en Lenguaje Ensamblador

-El Verdadero Lenguaje de las Máquinas-

Programación Gráfica para Principiantes

–Solo necesitan papel, lapiz y calculadora–

“Programación Gráfica” Dos palabras que en el pasado hicieron que muchos dedicaran su vida a las computadoras y hoy se han convertido en una especie de creencia malentendida entre muchos desarrolladores aficionados. En las comunidades de desarrollo de videojuegos, la tercera cosa que mas me hace enojar despues del esnobismo y el abuso del outsourcing es esa idea de que programación gráfica es aprenderse todas las funciones de una API o hacer scripts para un engine. En esta entrada voy a concentrarmé en las gráficas mas que en la programación. Tanto así que van a ver que es posible aprender sobre gráficas sin necesidad de una computadora.

Seguro pensarán que es algo imposible. Pero en la imagen que acompaña esta entrada pueden ver todo lo que necesitamos. Así como una descripción de su equivalente dentro de una computadora. Para los que no reconocen estos objetos les diré para que es cada uno:

Libreta de cuadrícula: Puede ser de cuadro de 5 o 7 milímetros. Estas hojas cuadriculadas es lo único que necesitamos para simular la manera en que se comporta un monitor de computadora así como sus registros y memoria interna. Existe un tipo de hoja conocida como cuadro alemán cuyos cuadros son aún mas grandes y que es particularmente util para aprender sobre estructuras de datos en una memoria de computadora. Pues cada cuadro es lo suficientemente grande para escribir un byte con 2 cifras hexadecimales.

Lapiz y borrador: Es importante que el lapiz sea facil de borrar y que la goma no maltrate demasiado el papel, pues va a ser necesario escribir y borrar varias veces los mismos trazos y números. Así como hacer algunos cálculos manuales.

Calculadora: Esta va a ser nuestra unidad de procesamiento gráfico. No es necesario que sea una calculadora muy poderosa aunque algunos modelos capaces de trabajar con sistemas de matrices puede acelerar muchísimo este trabajo. Por cierto, la calculadora electrónica mas sencilla que puedan encontrarse trabaja de manera muy similar a nivel abstracto a una unidad de punto flotante básica con la que vienen equipados de fábrica los procesadores de Intel.

Y eso es todo, no necesitamos mas poder computacional que una modesta calculadora escolar, un cuaderno de cuadrícula y lápices. Con esto podemos comenzar a estudiar lo que son las gráficas por computadora desde cero. Lo primero que haremos será tomar una hoja y dibujar un cuadro lo mas grande que sea posible y que mida la misma cantidad de cuadritos de ancho que de altura. Es importante basarnos en la cuadrícula de la hoja en todo momento. Una vez que tengamos el cuadro estaremos listos para aprender el primer concepto de las gráficas por computadora: Sistemas de coordenadas.


Sistemas de Coordenadas

Coordenadas Físicas: El primer sistema de coordenadas que debemos conoces es el sistema de coordenadas físicas. Para los que no saben matemáticas básicas y desconocen el concepto de coordenadas. Estas son una secuencia de números que indican un punto en el espacio de manera única. En el caso de nuestra hoja se trata de un espacio plano de dos dimensiones. Una dimensión es la horizontal y otra la vertical. Podemos obtener la posición de cualquier punto a partir de un par de números de manera única. No va a haber otro punto al que correspondan esos mismos dos números (en ese orden) ni ese mismo punto. Ese par de números nos indican la cantidad de pasos para llegar a un punto. La pregunta es de donde comenzamos a contar los pasos y en que dirección.

Como estamos trabajando en coordenadas físicas y la hoja trata de imitar el monitor de una computadora. El punto del que se comienzan a contar los pasos y que es conocido como Origen se va a ubicar en la esquina superior izquierda. El lado superior e izquierdo de ese cuadro serán nuestros ejes del sistema de coordenadas físicas. El primero es el eje horizontal que crece a la derecha y el otro el vertical que crece hacia abajo siendo (0,0) el punto superior izquierdo del cuadro. Ya se que así no es como se manejan los verdaderos sistemas de coordenadas pero esto es lo mas parecido a como trabajan los monitores de las computadoras.

Como ubicar puntos individuales. Contrario a lo que casi todos ustedes están pensando. Los cuadros que componen la cuadrícula de la hoja no representan los pixeles. En realidad los sitios en donde se cruzan las lineas que forman la cuadrícula representan los centros de los pixeles. Esto tiene un porqué. A nivel matemático los puntos en el espacio no solo carecen de dimensión sino que son infinitamente pequeños. Mientras que los pixeles son cuadros bidimensionales con ancho y altura perfectamente medibles. En gráficas por computadora se trabaja con lo que los matemáticos llaman Números Reales, y se aproximan por medio del formato de Punto Flotante. Pero no se preocupen, voy a tratar de explicar estos temas de manera que cualquier estudiante de educación pública básica pueda entenderme.

Digamos que el cuadro que dibujamos mide 20 por 20 cuadros. El punto de arriba a la izquierda que corresponde con el origen (0,0). Significa que partiendo de ahí damos 0 pasos a la derecha y cero hacia abajo. Recuerden que los puntos son las intersecciones de las lineas de la cuadrícula y no el interior de los cuadros. El punto mas lejano del origen seria la esquina inferior derecha a las que corresponderian las coordenadas (20, 20). Jueguen un rato a ubicar puntos por sus coordenadas y a obtener las coordenadas de puntos dentro de esa ‘pantalla’

Si les interesa esto de la programación probablemente se han preguntado como le hacen los juegos 3D para poder desplegar el mismo juego en diferentes resoluciones y tipos de pantalla. La respuesta son las coordenadas lógicas normalizadas. En matemáticas se llama normalizar a poner una cantidad en un rango entre cero y uno (no es la definición oficial pero con eso nos basta) Esto tiene aplicaciones muy interesantes como en este caso el poder manejar imágenes que no cambien de tamaño cuando hagamos un cambio de resolución. Las coordenadas lógicas de dispositivo son el primer nivel de abstracción en las gráficas vectoriales. En este sistema el origen sigue estando en (0,0) pero el punto mas alejado es (1,1). Aunque técnicamente es (0.9999999,0.9999999) quedando todos los demás puntos en un rango de cero a uno. De este modo el centro de la pantalla corresponderá siempre con el punto (0.5,0.5) sin importar que resolución en pixeles manejemos.

Como ya se habrán dado cuenta para cambiar de un sistema a otro es necesario hacer una serie de cálculos. Para convertir las coordenadas físicas a coordenadas lógicas dividimos las coordenadas del punto (x,y) por el valor máximo que las ‘x’ y las ‘y’ puedan tomar. Por ejemplo si estamos trabajando con una cuadrícula de 10 por 10 y queremos convertir el punto físico (5,5) basta con dividir entre 10 y obtener (5/10, 5/10) que es igual a (0.5, 0.5). Para convertir de coordenadas lógicas a físicas hacemos el proceso inverso y multiplicamos de modo que (0.5 * 10, 0.5 * 10) es igual a (5, 5). Experimenten con cuadrados de diferentes tamaños y verán como los puntos siempre se mantienen en las mismas posiciones unos respecto a otros sin importar el tamaño del cuadro.

Sistema de Coordenadas Mundiales

Si ustedes pertenecen a esa rama de los otakus que se interesa por programar videojuegos lo mas probables es que no se hayan percatado que algo no está bien en el sistema de coordenadas que acabo de describirles. Y es que por tradición los sistemas coordenados usados en matemáticas tienen su origen en el centro y el eje vertical (conocido como el eje ‘y’) crece hacia arriba y no hacia abajo. Para que me entiendan, un verdadero sistema de coordenadas se parece al dibujo de cabellos cruzados con el que cuentan las miras de los rifles sniper en cualquier FPS. En otra entrada voy a hablar de lo importante que es esto pero por ahora solo tienen que saber que necesitamos de este sistema para que los cálculos nos funcionen. Para convertir coordenadas lógicas de dispositivo a este sistema es necesario primero restar 0.5 a x y para que el origen quede en el centro del area de trabajo. Para voltear el eje ‘y’ basta con multiplicarlo por -1. De nuevo, para convertir a coordenadas de dispositivo a la x se le suma 0.5 y a la ‘y’ primero se multiplica por -1 y a ese resultado se le suma 0.5. En una entrada posterior se van a repasar estas sencillas fórmulas.

Por cierto, aunque estamos trabajando con una hoja de papel plano en realidad hemos definido un espacio de 3 dimensiones. El eje Z es perpendicular a la hoja y crece a medida que los puntos se alejan de ella. Todos los puntos pueden tomarse como que su coordenada Z es igual a cero.

Si todo va bien voy a seguir con estas notas. Como dije alguna vez, tan solo escribo aquello que me hubiera gustado encontrar cuando comenzaba a programar y para que la gente le tenga respeto a las computadoras. Como esta entrada ya quedó muy extensa voy a dejar para la siguiente los temas de los sistemas de coordenadas. Y para los newbies que creen que no necesitan nada de esto porque tienen acceso al unreal engine (o Unity si es que no les alcanza) créanme que tener esta base teórica les va a resultar de mucha utilidad para al menos saber que es lo que hacen esos scripts que copian y pegan de los foros de desarrollo.

Anuncios

septiembre 30, 2011 - Posted by | Uncategorized | , , ,

7 comentarios »

  1. jaja no estoy entendiendo muy bien XD, yo diría que se entendería mejor con mas gráficos de ejemplos

    Comentario por Pavon | octubre 1, 2011 | Responder

    • No hay problema, aun queda mucho por explicar. En cuanto a las imagenes es cierto, hasta he pensado en hacer de esas imagenes enormes llenas de dibujos y explicaciones que ahora llaman infografias. Solo estoy viendo como hacerlas claras y que no consuman demasiada memoria

      Comentario por asm86 | octubre 2, 2011 | Responder

  2. que son las coordenadas de “dispositivo”, esa parte no me quedo clara

    Comentario por Pavon | octubre 18, 2011 | Responder

    • las coordenadas de dispositivo son las coordenadas del sistema donde se representa la imagen, como las coordenadas de pixel en una pantalla digamos de 640 por 480 o 1440 por 800 en los monitores, lo mismo aplica para la cuadricula de una libreta o un papel milimetrico. Hacer la separacion permite representar la misma imagen sin importar las propiedades de los dispositivos. Mas adelante voy a explicar el sistema de los pixeles mas a fondo

      Comentario por asm86 | octubre 18, 2011 | Responder

  3. Gracias, en verdad estoy aprendiendo.

    Comentario por Prometeo | octubre 27, 2011 | Responder

  4. Increible, entendi perfectamente y siempre me dije que me costaria trabajo programar, pero ya viendo los fundamentos y las matematicas se hace mas sencillo el por que de las cosas.

    Comentario por visionaxe | octubre 5, 2012 | Responder

  5. muy bueno, como en la facultad, se entiende mejor ;)

    Comentario por eduardo | abril 3, 2013 | Responder


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: