Este sitio web usa cookies de terceros para analizar el tráfico y personalizar los anuncios. Si no está de acuerdo, abandone el sitio y no siga navegando por él. ×


Tema 5 - Gráficos con un CPC

Vamos a empezar a dibujar...

 

5.1 Coordenadas de pantalla. Líneas.

En un CPC, las coordenadas de la pantalla gráfica comienzan en la esquina inferior izquierda. A pesar de que el modo 0 tiene de resolución 160x200 puntos, el modo 1 tiene 320x200 y el modo 2 tiene 640x200, en todo ellos se usa el mismo sistema de coordenadas: se considera que la esquina superior derecha de la pantalla tiene las coordenadas (640,400). Eso quiere decir que si dibujamos una línea desde el punto (0,0) hasta el (320,200), la línea terminará en el centro de la pantalla, usemos el modo gráfico que usemos:

Como se puede ver en la imagen anterior, la orden MOVE sitúa el cursor gráfico en una cierta posición de la pantalla, y la orden DRAW dibuja una línea desde la posición actual hasta las coordenadas que le digamos.

 

5.2 Puntos, colores y modos de tinta

También podemos dibujar puntos aislados, que no formen parte de ninguna línea, con la orden PLOT, para la que indicaremos las coordenadas X e Y del punto: PLOT 100, 120.

Tanto en PLOT como en DRAW podemos indicar un tercer dato: el color a emplear. Por ejemplo, un programa que dibujara 50 puntos en posiciones al azar de la pantalla y con colores al azar podría ser:

10 MODE 1
20 FOR i = 1 TO 50
30   PLOT RND*640, RND*400, RND*2 +1
40 NEXT
 

Los códigos de color se pueden ver en el apartado 2.4 del curso.

Una forma alternativa de indicar el color es usar la orden GRAPHICS PEN. Usándola, el programa anterior se podría escribir también así:

10 MODE 1
20 FOR i = 1 TO 50
30   GRAPHICS PEN RND*2 +1
40   PLOT RND*640, RND*400
50 NEXT
 

Tanto DRAW como PLOT permiten indicar un cuarto dato: el modo de tinta, que indica si que habrá hacer alguna operación entre el color de cada punto y el color de fondo. Las operaciones posibles son: dibujar el punto normalmente (modo 0) o hacer una operación XOR (modo 1), AND (modo 2), OR (modo 3). No entraremos por ahora en detalles sobre lo que es cada una de esas operaciones, pero sí merece la pena comentar una curiosidad: la operación XOR es "reversible", lo que quiere decir que si hacemos un XOR dos veces, el punto recupera su color original. Esto es una forma sencilla de crear animaciones, que veremos más adelante, pero además permite crear efectos visuales curiosos como éste:

10 MODE 1
20 FOR i = 1 TO 640 STEP 2
30   MOVE 0,0: DRAW i,400,1,1
40 NEXT
50 FOR i = 1 TO 400 STEP 2
60   MOVE 0,0: DRAW 640,i,1,1
70 NEXT
 

 

5.3 Coordenadas relativas

La órdenes MOVE, DRAW y PLOT trabajan con "coordenadas absolutas" Eso quiere decir que si escribimos MOVE 100, 50 situaremos el cursor en la posición (100,50) de la pantalla. Pero también existen las variantes MOVER, DRAWR y PLOTR, que calculan su nueva posición como "coordenadas relativas", es decir, desplazándose una cierta distancia desde la posición actual. Por ejemplo, si hacemos MOVE 50,20 el cursor quedará en las coordenadas (50,20) de la pantalla; si a continuación hacemos DRAWR 110,35 la línea se dibuja hasta la posición (50+110, 20+35), es decir hasta (160,55).

 

5.4 Líneas discontinuas. Borrando la pantalla

Si no decimos lo contrario, las líneas que dibujemos con DRAW serán "sólidas". Pero también tenemos la posibilidad de dibujar líneas discontinuas, que sigan un determinado patrón. Para eso usaremos la orden MASK, a la que se le indica la secuencia de ceros y unos que detalla qué puntos dibujar y cuales no.

La forma más cómoda de usar esta orden sería indicándole la secuencia de números en formato binario (para eso, debemos usar los símbolos &X antes de la serie de ceros y unos):

MASK &X10101010

pero también podemos indicar la secuencia como número decimal... si sabemos convertir de binario a decimal.

MASK 170

Un ejemplo de su uso podría ser éste:

10 MODE 1
20 MASK &X10101010
30 MOVE 0,0
40 DRAW 640,400
50 MASK &X11001100
60 MOVE 0,10
70 DRAW 630,400
80 MASK &X11110000
90 MOVE 0,20
100 DRAW 620,400
 

 

Un detalle más: igual que tenemos GRAPHICS PEN para cambiar el color en el que se dibuja, también existe GRAPHICS PAPER, para indicar el color de fondo. Ese color se usará en los puntos de la máscara indicados con 0.

 

También podemos borrar la pantalla, usando la orden CLG. Si no indicamos ninguna opción, se borrará con el color gráfico de fondo (0, salvo que hayamos pedido otro con GRAPHICS PAPER). Si lo preferimos, podemos decir en qué color queremos que quede:

CLG 2

 

5.5 Rellenar zonas

Podemos rellenar una zona cerrada con un cierto color. Para eso nos situamos (con MOVE) dentro de ella y a continuación usamos la orden FILL, a la que hay que indicarle el número de color que queremos usar:

10 MODE 1
20 MOVE 10,10
30 DRAW 630,10
40 DRAW 630,390
50 DRAW 10,390
60 DRAW 10,10
70 MOVE 0,0: FILL 2
80 MOVE 20,20: FILL 3
 

(Nota: esta orden existe en los CPC664 y posteriores -CPC6128, gama Plus- pero no en los CPC 464. Se podía imitar, pero no daremos más detalles por ahora)

 

5.6 Texto en coordenadas gráficas

Ya que estamos en modo gráfico y que tenemos unas coordenadas de 640x400 posiciones (aunque la resolución efectiva sea algo menor), sería ideal poder escribir texto en cualquier de esas posiciones de pantalla, en vez de sólo en las 80x25 de la pantalla de texto. Es posible. Basta con usar la orden TAG para decir que queremos escribir en coordenadas gráficas, y situarnos con MOVE, antes de escribir con PRINT:

10 MODE 2
20 TAG
30 FOR i = 1 TO 600 STEP 2
40   MOVE i, 200+ 180*SIN(i/70)
50   PRINT"Hola";
60 NEXT i
 

Nota: deberemos usar un punto y coma ( ; ) después de la orden PRINT, porque de lo contrario, se verían en pantalla después de nuestro texto los símbolos avance de línea y de retorno de carro.

Nota 2: podemos desactivar el modo "tag" con la orden TAGOFF, y a partir de entonces, el texto se escribirá en la posición en la que antes estaba el cursor de texto.

 

5.7 Animaciones sin parpadeos

Si queremos mover algo en la pantalla, puede ocurrir que la imagen parpadee. La forma habitual de evitarlo es sincronizar la escritura en pantalla con el momento en el que se está redibujando la imagen en pantalla. En los CPC, esto se podía conseguir usando la orden FRAME justo antes de comenzar a dibujar cada "fotograma" de nuestra animación (eso sí, debemos tardar "relativamente poco" en dibujar en pantalla, si queremos que este método sea efectivo; si pasamos demasiado tiempo dibujando, tardaremos más que el redibujado de la pantalla y se verán parpadeos a pesar de la orden FRAME).

Podrás ver ejemplos de su uso en el el apartado 16 del curso.

Nota: La orden FRAME está disponible en la versión 1.1 del Basic de los CPC, la que usan el CPC664 y el CPC6128. No se puede utilizar en los CPC464, pero existe una alternativa que se comporta igual: CALL &BD19.

 

5.8 Círculos y otras figuras

El Basic de los CPC no incluye órdenes para dibujar círculos. Si queremos hacerlo, la forma habitual es usando alguna expresión matemática. Por ejemplo, se puede calcular la posición de cada punto de la circunferencia como [radio * coseno(angulo), radio*seno (angulo)], así:

10 MODE 1
20 DEG
30 centroX = 320: centroY = 200: radio = 50
40 FOR angulo = 1 TO 360
50   PLOT centroX + radio*COS(angulo), centroY + radio*SIN(angulo)
60 NEXT angulo
 

De igual modo, no tenemos órdenes para dibujar otras figuras habituales:

  • Los triángulos se pueden dibujar a partir de sus tres vértices.
  • Los rectángulos se dibujarán como cuatro líneas (no es necesario saber todos los vértices, basta con dos opuestos, por ejemplo el superior derecho y el inferior izquierdo).
  • Los polígonos en general se tendrían que dibujar como secuencia de líneas entre cada punto y el siguiente.
  • Los polígonos regulares se pueden basar en la fórmula del círculo, si sabemos el centro y el radio (por ejemplo, para un pentágono nos interesarían 5 puntos, con un ángulo entre ellos de 360/5 = 72 grados).
  • La elipse es muy parecida al círculo, pero con un radio horizontal y otro radio distinto en vertical.
  • Para otros tipos de figuras que tengan representación matemática... en general habrá que dibujar a partir de su fórmula matemática.

En el ejercicio propuesto habrá que intentar implementar alguna de ellas...

 

5.9 Lo que aún no sabemos

Hay mucho que no sabemos. Algunas cosas porque son "menos importantes" y algunas porque son "demasiado avanzadas".

Por ejemplo, dentro de las "menos importantes" está la orden ORIGIN, que nos permite indicar dónde estará el origen de nuestra pantalla. Si hacemos ORIGIN 320,200 ese origen pasará a ser el centro de la pantalla, de modo que si después usamos PLOT 10,20 estaremos dibujando realmente en las coordenadas (330, 220).

Otra cosa "poco importante" es que podemos saber qué color tiene un cierto punto de la pantalla, con la orden TEST, a la que le indicaremos las coordenadas del punto: IF TEST(100,50) = 1 THEN... .También existe su variante TESTR, que mira en una posición relativa a la posición actual del cursor gráfico. Esta órden permite hacer con facilidad jueguecitos como las clásicas "motos de luz".

Dentro de las "demasiado avanzadas" se podría incluir el acceso directo a la memoria de pantalla, para poder hacer las cosas más rápido (quizá) que usando las órdenes existentes. Eso queda para un (posible) apartado posterior, cuando tengamos claros todos los conocimientos básicos.

 

5.10 Ejercicio propuesto

Dibujar las siguientes figuras geométricas en modo 1, con fondo de la pantalla negro y borde negro:
- Un rectángulo que tenga como vértices opuestos los puntos (5,5) y (200,100), con borde blanco y relleno gris.
- Un círculo con centro en (320,200) y radio 75, con borde blanco y relleno azul claro.
- Una línea discontinua del punto (0,0) al (640,400), en color azul claro. El patrón de la línea debe ser: dos puntos visibles, dos puntos no visibles.
- Un triángulo con vértices (600,380), (500,200), (510,395), con borde de línea continua en color rojo y relleno blanco.
- Un pentágono regular, de centro (500,300) y radio 80, de color gris y relleno negro. - Una nube de puntos grises (50 puntos), dibujados al azar en cualquier posición de la pantalla.