Bienvenido al siguiente tutorial de QBasic. Dentro de este tutorial te enseñaré algunas técnicas básicas de programar gráficos. La presentación del programa es gráfica para atraer al usuario. La mayoría de los programas de ahora contienen algún gráfico desde simplemente subrayar el texto hasta todas las ventanas llenas de colores y efectos. Puedes crear cualquier cosa que te guste en QBasic con un simple juego de pasos gráficos.
En cualquier ordenador que programes gráficos en todos los idiomas debes
pensar un poco. Primero has de conocer dónde vas a poner los gráficos en la
pantalla. Eso es tal vez lo que has pensado hasta ahora pero no lo has
conseguido. Si te fijas de cerca en la pantalla del ordenador o de la televisión
verás pequeños pixels cuadraditos formando la imagen en la pantalla. Cada uno de
esto pixel representa una simple localización en el monitor. Para colocar un
punto muy en la esquina superior izquierda de tu pantalla necesitas una
coordenada. Una coordenada es un número específico de localización. No me dejes
confundirte, pero por ejemplo si quieres tener un punto en el medio de la
pantalla necesitarías tener un valor donde situar el punto. Mira al diagrama de
abajo:
El diagrama de arriba se impone al representar el la pantalla del monitor o de la televisión. Si nos desplazamos sobre la pantalla hacia arriba lo haremos sobre el eje y. Si nos desplazamos a lo largo de la parte baja de la pantalla lo haremos sobre el eje x. Ahora si miras de cerca verás un punto en las cercanías del lado izquierdo de la pantalla buscada. Si queremos situar un punto ahí necesitaríamos saber el valor de la coordenada en la pantalla. Podríamos hacer esto con bastante facilidad en QBasic. Dentro de QBasic la esquina superior izquierda de la pantalla es la coordenada 0,0. Este valor de la coordenada representa los ejes x,y como explique arriba. Ahora vamos a crear el punto en la pantalla buscada , necesitaremos unas coordenadas aproximadas de 100,100. Estas coordenadas desplazarán el punto 100 pixels en la pantalla hacia la izquierda y 100 de arriba hacia abajo. Si queremos desplazar el punto mas hacia abajo necesitaremos una coordenada aproximada de 100,300. Déjame enseñarte un simple programa que haga lo que acabo de explicar arriba. Escríbelo y presiona "F5" para correrlo.
SCREEN 12 PSET (100,100),2
El programa anterior es muy simple. Primero estamos cambiando la pantalla del texto por omisión a la pantalla gráfica. La siguiente línea es nuestro comando gráfico que se llama "PSET", que creo que significa código de puntos. El la línea de código anterior preguntamos para tener un pequeño punto (lunar) dibujado en la pantalla en las coordenadas 100,100. 100 pixels hacia la izquierda y 100 hacia arriba. El número siguiente es el color del punto situado en la pantalla. En el anterior programa hemos utilizado un simple color de verde. Si tu no introduces el número de color cogerá por defecto el blanco.
El comando "PSET" puede ser usado en otros muchos modos de pantalla como otros comandos gráficos. Necesitarás intentar probar deferentes modos de pantalla, pero recuerda que la resolución podrá cambiar. Resolución es lo que se conoce como diferentes tamaños como el modo estándar de ventana que podría ser de 800*600 pixels. La resolución de la pantalla que usamos en el anterior ejemplo es 640 pixels a lo largo y 480 hacia abajo. Así que puedes situar un punto (lunar) en cualquier valor dentro de éstos.
Ahora "PSET" es un comando muy simple. Déjame que te adentre ahora en algo un poco diferente. Las líneas son muy populares y usadas con bastante frecuencia en los programas. Por ejemplo una línea puede construir formas como un rectángulo o un cuadrado. El comando "LINE" trabaja un poco diferente al comando "STEP" en la forma de dibujar las formas en la pantalla. Debajo hay un simple ejemplo de cómo lo debes escribir
SCREEN 12 LINE (100,100)-(200,100)
El programa anterior dibujará una línea de una posición a otra. Primero estamos pidiendo que sea puesto de nuevo en un modo gráfico. Luego nosotros dibujaremos la línea de una posición en la pantalla a otra. Por ejemplo estamos dibujando una línea desde 100 a lo largo y 100 abajo a 200 a lo largo y 100 hacia abajo. Es bastante sencillo si piensas de ésta manera. Escribe lo siguiente en el programa.
SCREEN 12 LINE (100,100)-(200,100) LINE (200,100)-(200,200)
El programa de arriba es virtualmente el mismo que el anterior pero el
siguiente comando "LINE" está dibujando una línea recta hacia abajo en la
pantalla desde el primer comando "LINE".
Tarea 3
Mira a ver si puedes dibujar un simple programa que dibuje un simple cubo en
la pantalla usando las partes del que acabas de aprender antes. Consejo:
recuerda que sólo necesitas información que esté incluida en este tutorial para
escribir el programa. El programa ha sido escrito al final del programa para ver
si lo haces bien.
Incluso más gráficos
Para extender tus conocimientos de QBasic a las características gráficas voy a adentrarte en un comando que amplia tus conocimientos aprendidos antes. El siguiente comando gráfico es llamado "CIRCLE".
"CIRCLE" funciona parecido al comando "STEP" excepto que requiere un importante valor al final del comando. Por favor, escríbelo e inténtalo en el siguiente programa.
SCREEN 12 CIRCLE (100,100) ,50
Este programa dibujará un círculo en tu pantalla. Primero nosotros simplemente nos cambiaremos al modo de pantalla gráfico y luego pondremos una localización de coordenadas en tu pantalla. La siguiente parte del comando pone el radio del círculo. Antes usamos un pequeño radio de sólo 50 pero se puede poner mucho mayor. El comando "CIRCLE" pone el círculo de forma diferente en tu pantalla. Si no quieres confundirte no leas el siguiente párrafo.
Cuando dibujes un círculo en la pantalla del ordenador no lo estará dibujando realmente en 100,100. Como verás si cambias la línea de arriba a:
SCREEN 12 CIRCLE (0,100), 50
Cuando corras este programa verás que sólo la mitad del círculo ha sido
dibujado. El valor de la coordenada del círculo es el centro del círculo. Esto
parece complicado pero cierto. Observarás que si usas mucho el comando "CIRCLE"
aprenderás como funciona.
Extendiendo Líneas a Cubos
Las líneas están muy bien en un programa; pero ¿qué haces si estás dibujando cubos?. Bien, en principio el comando "LINE" puede hacer todo el trabajo por ti. Escribe el siguiente programa y luego pruébalo.
SCREEN 12 LINE (100,100)-(200,200), 4, B
¡Oh!, sí. Hemos creado una simple caja. Antes de avanzar me gustaría decir que el programa anterior no es una solución a la tarea que te di hace un rato. La solución a la tarea se da provechosamente un poco más tarde.
El programa anterior dibujará un simple cubo con sólo una línea de código. El cubo es creado en un color rojo y hace todo lo posible a partir de un simple cambio de código. El comando "LINE" tiene ahora una letra "B" al final que significa "BOX". Para avanzar un paso más que éste intenta cambiar "B" a "BF". Corre el programa, y sí, tú has creado ahora un simple cubo coloreado.
Así que como puedes ver, muchos efectos diferentes pueden ser creados con
apenas unos pocos comandos gráficos. Tendrás que experimentar con los comandos
gráficos para hacer las cosas perfectamente bien. Encontrarás que el sistema de
coordenadas de QBasic te quitará además un poco de tiempo para comprenderlo.
Después de un rato de tiempo podrás realmente dar color a tus programas.
Solución a la Tarea 3
Para dibujar un simple cubo usando el cuarto comando "LINE" es como sigue. ¡Inténtalo!
SCREEN 12 LINE (100, 100)-(200, 100) LINE (200, 100)-(200, 200) LINE (200, 200)-(100, 200) LINE (100, 200)-(100, 100)
El comando te ha mostrado un simple juego de comandos gráficos provechosos en
QBasic. Recuerda que sólo estamos tratando superficialmente lo que QBasic puede
hacer. En posteriores tutoriales te enseñaré más comandos gráficos y les
añadiremos lo que has aprendido hasta ahora. En el siguiente tutorial
te adentraré en caminos a través del uso de procedimientos con los que puedas
mejorar tu código de programación. Con esto podrás hacer que tus programas
parezcan mejore y más fáciles de entender. Sigue experimentando.