9 abril 2013
9 abril 2013,
 0

Bueno para empezar en este POST quiero hacer mención de algunas cosas, si eres un novato en este tema ten por seguro que no hablaré de cálculos matemáticos ni mucho menos de términos complejos de programación, en este POST hablare de cómo ¡SI se puede aprender la programación grafica sin tantos rodeos o elementos indescifrables a una lectura de código sin fin.

Quiero darte la confianza para que de una vez por todas te animes a entrar a este mundo tan fascinante de la programación gráfica, de las matemáticas después hablamos, claro es un tema inevitable y muy interesante pero que con un poco de paciencia lo entenderemos y tratare de hacerlo de una forma muy simple y coloquial.

Si ya estas dentro de este mundo bueno que te digo, quizá estés buscando la forma de cómo crear una súper aplicación o videojuego en 3D. Pero date la oportunidad de ver mi trabajo y ¿porqué no? de hacerlo más atractivo para nuevas y brillantes mentes que están sedientas de conocimiento.

Muy bien empecemos ya con el tema.

Para esta ocasión utilizaremos el programa QB64 que puede ser descargado del siguiente link

Todo el código descrito en estos post’s será migrado a visual studio 2010 y en él hablaremos de la programación gráfica vectorial.

Iniciaremos nuestra aplicación dando un doble clic a la aplicación qb64.exe y se mostrara la siguiente ventana.

Para este ejemplo utilizaremos varias declaraciones, estas son SCREEN, CIRCLE y LINE además de darle un toque especial con funciones matemáticas como SIN y COS, especialmente éstas le darán vida a nuestro reloj ya que calcularan las coordenadas para que las manecillas funcionen.

Existen varios modos de pantalla para el manejo de gráficos, para nuestro ejemplo utilizaremos la función SCREEN 13, este modo de pantalla cuenta con 320 pixeles horizontalmente y 200 pixeles verticalmente. Tengo que mencionar que las coordenadas empleadas son de 320 puntos (pixeles) de izquierda a derecha y de 200 puntos (también pixeles) de arriba a la base de la pantalla o zona grafica.

Blog Programación básica

Las declaraciones gráficas para dibujar círculos (bolitas) y líneas (palitos) son:

Circle, esta declaración dibuja un círculo en la zona gráfica, la sintáxis es la siguiente.

CIRCLE (x,y),radio, color,[iniciar arco],[finalizar arco],[aspecto de elipse]

X: coordenada horizontal

Y; coordenada vertical

Color: número tipo entero del 0 al 255

En este caso se pueden utilizar hasta 255 colores por el modo gráfico, cuando se utilizan otros modos gráficos estos pueden tener configuraciones diferentes de tipo monocromáticas o donde sólo se pueden ocupar 16 colores dependiendo cual o qué modo gráfico se llegue a utilizar.

Las declaraciones que se encuentran entre los corchetes son opcionales y de estas hablaré más adelante.

Line, esta declaración la ocuparemos para dibujar líneas en nuestra zona gráfica y la sintáxis es la siguiente.

LINE (x,y)-(x1,y1), color, [rectángulo], [estilo de punteado]

X: coordenada inicial horizontal.

Y: coordenada Inicial vertical.

X1: coordenada horizontal final.

Y1: coordenada vertical final.

Color: bueno aquí también aplicamos un rango de números enteros del 0 al 255.

Sin, esta función calcula el seno de un ángulo medido en radianes y su sintáxis es la siguiente.

SIN (Radian numero de tipo doble)

Cos, esta función calcula el coseno de, medido en radianes, la sintáxis es la siguiente.

COS (Radian numero de tipo doble)

Bueno creo que aquí es el punto en donde piensas que esto no es para ti, crees que eso de los radianes, senos y cosenos nunca te va a entrar a la cabeza, pero date la oportunidad de seguir ya que en este tuto no hablaremos de matemáticas, pero sí de sentido común.

Muy bien empecemos a escribir algo de código.

SCREEN 13

CIRCLE (160, 100), 5, 14, , , 1

CIRCLE (160, 100), 85, 14, , , 1

CIRCLE (160, 100), 90, 14, , , 1

LINE (160, 90)-(160, 25), 14

Muy bien, vamos a explicar nuestro código hasta aquí. En la primera línea tenemos nuestro modo gráfico, es muy importante esta declaración ya que es la responsable de iniciar un espacio de trabajo gráfico.

Después dibujamos tres círculos de diferentes tamaños de radio y estos son de 5, 85 y 90 pixeles, a todos ellos les estamos dando el color amarrillo con el numero entero 14 y estos tres tienen las mismas coordenadas de origen, el punto centro de nuestro espacio de trabajo gráfico.

Y por último dibujamos una línea de 65 pixeles indicado dos coordenadas y del mismo color de nuestras circunferencias.

El resultado es el siguiente:

Blog Programación básica

Ahora para continuar ¿que te parece si dibujamos las marcas que se encuentran como indicadores de salto de 5 minutos? Para esto agregaremos las siguientes líneas de código al anterior.

Circle (240,100), 3, 14, , , 1

Circle (229,140), 3, 14, , , 1

Circle (200,169), 3, 14, , , 1

Circle (160,180), 3, 14, , , 1

Circle (120,169), 3, 14, , , 1

Circle (091,140), 3, 14, , , 1

Circle (080,100), 3, 14, , , 1

Circle (091,060), 3, 14, , , 1

Circle (120,031), 3, 14, , , 1

Circle (160,020), 3, 14, , , 1

Circle (200,031), 3, 14, , , 1

Circle (229,060), 3, 14, , , 1

Circle (240,100), 3, 14, , , 1

Bien, ya que copiaste y pegaste el código ahora veamos cuales son las líneas para dibujar las marcas para limitar los minutos y el diseño de nuestro reloj y sí, como te lo imaginas, son 60 marcas pero para ello empezaremos a simplificar el código.

SCREEN 13

CIRCLE (160, 100), 5, 14, , , 1

CIRCLE (160, 100), 85, 14, , , 1

CIRCLE (160, 100), 90, 14, , , 1

LINE (160, 90)-(160, 25), 14

FOR ciclo = PI * 2 TO 0 STEP -(PI * 2) / 12

CIRCLE (160 + SIN(ciclo) * 80, 100 – COS(ciclo) * 80), 3, 14, , , 1

NEXT

FOR ciclo = PI * 2 TO 0 STEP -(PI * 2) / 60

CIRCLE (160 – COS(ciclo) * 80, 100 + SIN(ciclo) * 80), 1, 15, , , 1

NEXT

Como puedes ver no tenemos que escribir y calcular de forma manual cada una de las coordenadas.

Blog Programación básica

Declaramos en nuestra primera línea de código una constante llamada PI y le damos un valor, este ya lo conoces 3.1415926535897932384626433832795 claro en este caso lo acortaremos un poco y si tu quieres a 3.14 está bien, aun así se alcanzan los mismos resultados visuales.

En nuestro primer ciclo podemos apreciar en los pasos, saltos o intervalos (STEP) del ciclo cómo se dibujan las marcas para los indicadores de cada 5 minutos con un radio de tres pixeles y es donde vemos una operación que realiza el cálculo de las coordenadas, es aquí donde utilizamos las funciones matemáticas SIN y COS dentro de los parámetros de X, Y. las coordenadas para estos cálculos no cambian, de cierta forma podemos ver que en ellas seguimos utilizando 160 para X y 100 para Y con un radio de 80 pixeles.

Con el segundo ciclo pasa lo mismo pero con algunas diferencias, por ejemplo el radio de la circunferencia para las marcas de cada uno de los minutos es de un pixel, y vemos los resultados visuales esperados ya que con esto sólo estamos construyendo la parte visual.

Ahora bien, si tu quieres ver como se dibujan estos círculos puedes anexar las siguientes líneas después de dibujar cada circulo.

……….t = TIMER

……….WHILE TIMER < t + .5: WEND

Este es un temporizador en donde el .5 es un retraso de tiempo de medio segundo y aquí sería bueno que empezaras a experimentar con las funciones de SIN y COS como con los signos aritméticos de más y menos, aquí es donde notarás un cambio tanto de sentidos como de posiciones.

Continuaremos animando el segundero; la línea que esta dibujada sin hacer nada solo apuntando a lo que sería la hora 12 del reloj. Con el siguiente ciclo, fíjate muy bien como lo haremos. Modificaremos nuestro código al siguiente orden.

CONST PI = 3.1415916

SCREEN 13

CIRCLE (160, 100), 5, 14, , , 1

CIRCLE (160, 100), 85, 14, , , 1

CIRCLE (160, 100), 90, 14, , , 1

FOR ciclo = PI * 2 TO 0 STEP -(PI * 2) / 12

……….CIRCLE (160 + SIN(ciclo) * 80, 100 – COS(ciclo) * 80), 3, 14, , , 1

NEXT

FOR ciclo = PI * 2 TO 0 STEP -(PI * 2) / 60

……….CIRCLE (160 – COS(ciclo) * 80, 100 + SIN(ciclo) * 80), 1, 15, , , 1

NEXT

FOR ciclo = PI * 2 TO 0 STEP -(PI * 2) / 60

……….LINE (160 – SIN(ciclo) * 10, 100 – COS(ciclo) * 10)-(160 – SIN(ciclo) * 75, 100 – COS(ciclo) * 75), 14

……….t = TIMER

……….WHILE TIMER < t + 1: WEND

……….LINE (160 – SIN(ciclo) * 10, 100 – COS(ciclo) * 10)-(160 – SIN(ciclo) * 75, 100 – COS(ciclo) * 75), 0

NEXT

LINE (160, 90)-(160, 25), 14

Al ejecutar el código nuestra línea amarrilla realizara una translación y esta tomará un minuto en completar su ciclo. A todo esto quiero mencionarte que estamos utilizando elementos trigonométricos y de geometría.

Hasta aquí este TUTO_POST, en el próximo no hablaré de programación grafica, lo utilizaré para explicar algo que seguramente ya sabes, como calcular las coordenadas para nuestras líneas en el segundero, el minutero y nuestro indicador de hora.

Y por último, dejo la lista de colores por si también quieres experimentar con otros.

0 Negro

1 Azul

2 Verde

3 Aguamarina

4 Rojo

5 Magenta

6 Marrón

7 Blanco (gris claro)

8 Gris (oscuro)

9 Azul claro

10 Verde claro

11 Aguamarina claro

12 Rojo claro

13 Magenta claro

14 Amarillo

15 Blanco de alta intensidad

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *