CONCEPTOS BSICOS DE GRAFICACIN EN C++

Resumen: En numerosas ocasiones los estudiantes requieren representar grficamente el

comportamiento de modelos matemticos, estadsticos, de investigacin de operaciones,
etc. mediante programas computacionales diseados a la medida sin necesidad de
apoyarse en paquetes de cmputo comerciales. Por esto, se presentan las siguientes
consideraciones bsicas de graficacin en lenguaje C++, Palabras claves: Graficacin,
resolucin, pxel, lenguaje C++, monitor.

1 INTRODUCCIN
Tal como un artista selecciona diversos medios para representar sus pinturas, los
programadores, escogen un modo y formato especial para habilitar el monitor para
graficar. Cada modo proporciona ciertas caractersticas como la resolucin, nmero
posible de colores, modo texto o modo grfico y otros elementos donde cada modo
requiere de cierto equipo (hardware).
1.1 Resolucin
Las imgenes grficas mostradas en un monitor de computadora se componen de
pequeos untos llamados pxeles, los cuales estn distribuidos en la pantalla en filas;
existe una cantidad especfica de filas y cada fila tiene una cantidad especfica de pxeles.
La cantidad de pxeles usada en la pantalla se conoce como resolucin. Cada modo
grfico tiene una resolucin particular.
1.2 Inicializar el monitor en modo grfico
Para habilitar el monitor en modo grfico y utilizar sus pxeles y funciones de grficos, es
necesario incluir el encabezado #include <graphics.h> que contiene las declaraciones y
funciones relacionadas con graficacin e inicializar el monitor en modo grfico y utilizar
sus pxeles con la uncin initgraph().
Dicha funcin requiere las siguientes declaraciones:
int monitor=DETECT; // Variable para detectar el tipo de monitor
int modo; // Modo de operacin del monitor
tambin se puede declarar e inicializar con un tipo de monitor especfico como:
int monitor=VGA; // Variable para usar el monitor// tipo VGA
int modo=VGAHI; // Usar el monitor VGA a su mxima resolucin
Para terminar de usar el monitor en modo grfico y devolverlo a su modo de texto
normal se usa la funcin closegraph().

1.2.1 La funcin initgraph()

Una vez declaradas las variables monitor y modo que controlarn la resolucin
identificando el tipo de pantalla o monitor y su modo de operacin respectivamente, se
utiliza la funcin initgraph() para habilitar el monitor seleccionado en modo grfico. La
funcin initgraph() tiene 3 parmetros o argumentos:

La variable que identifica el monitor.

El modo de operacin grfico.
Subdirectorio que contiene los controladores de los monitores (archivos con
extensin BGI) y los archivos con los tipos de letra (extensin CHR) como se
muestra a continuacin:

int monitor=DETECT, modo;

initgraph(&monitor,&modo,"\\tc\\bgi");
Si se desea usar el directorio actual por defecto, se utiliza la funcin initgraph() como se
indica a continuacin:
int monitor=DETECT, modo;
initgraph(&monitor,&modo,"");
1.3 Uso de coordenadas
Una vez que se inicializa el monitor en modo grfico, las coordenadas tienen al pxel
como unidad de medida. La funcin getmaxx() calcula la cantidad de pxeles por
rengln y la funcin getmaxy() calcula la cantidad de renglones de la pantalla.
Las funciones de grficos tienen como estndar el orden de manejo de coordenadas
como columna, rengln; es decir, primero se anota la columna y despus el rengln
para posicionarse en dicha coordenada.

Cabe destacar que el conteo de columnas y renglones inicia partiendo de la

esquina superior izquierda del monitor.

LNEAS, FIGURAS GEOMTRICAS, COLORES Y RELLENOS

Sera muy difcil considerar todas las opciones posibles de todas las funciones de
graficacin; sin embargo, en este artculo se tratan los temas fundamentales para
implementarlas. Bsicamente se mostrar que antes de utilizar un color, un tipo de lnea,
de relleno, o cualquier funcin de definicin del tipo de trazo, etc. es necesario definirlo.
A continuacin se muestran las funciones bsicas de graficacin.
2.1 La funcin line()
Esta funcin se utiliza para dibujar una lnea entre 2 puntos. Para ello, la funcin requiere
4 parmetros que representan las coordenadas (en pixeles) de los dos puntos que se
desea unir mediante una lnea recta. A continuacin se muestra un ejemplo que une los
puntos 50,100 y 300,200 (columna, rengln respectivamente).

line(50,100,300,200);
2.2 La funcin setlinestyle()
Esta funcin se utiliza para determinar el tipo de lnea o trazo que se desea. Se pueden
utilizar trazos con lnea continua, lnea punteada, lnea interrumpida, o un patrn de lnea
definido por el usuario. Esta funcin requiere 3 argumentos:

1) Tipo de lnea: Puede ser SOLID_LINE, DOTTED_LINE, CENTER_LINE,

DASHED_LINE o USERBIT_LINE.
2) Patrn: Este argumento regularmente es ignorado (excepto cuando se trata de
un tipo de lnea definido por el usuario).
3) Ancho de lnea: Define la amplitud del trazo.

En el ejemplo, se muestran los puntos 50,100 y 300,200 con una lnea punteada.
setlinestyle(DOTTED_LINE,0, NORM_WIDTH);
line(50,100,300,200);
2.3 La funcin circle()
Esta funcin dibuja un crculo y requiere 3 argumentos:
1) Coordenada de la columna del centro (en pixeles).
2) Coordenada del rengln del centro (en pixeles).
3) Radio del crculo (en pixeles).
En el ejemplo se dibuja un crculo cuyo centro se encuentra en el punto 300,150 y su
radio es de 27 pixeles.
circle(300,150,27);
2.4 La funcin rectangle()
Esta funcin dibuja un rectngulo indicando las coordenadas de las esquinas superior
izquierda e inferior derecha respectivamente. El ejemplo muestra una funcin que
dibuja un rectngulo desde el punto 50,100 hasta el punto 400,250.
rectangle(50,100,400,250);
2.5 La funcin setcolor()
Se utiliza esta funcin para definir el color de los trazos siguientes; es decir, antes de
dibujar un trazo de un color especfico, ste debe definirse. Esta funcin slo tiene un
argumento que representa el cdigo del color deseado o bien su nmero entero
correspondiente. A continuacin se muestra la tabla de colores y sus respectivos valores.

A continuacin, muestra un ejemplo del uso de la funcin setcolor() donde se dibuja un

circulo de color rojo y despus un rectangulo de color azul.
setcolor(RED);
circle(300,150,27);
setcolor(BLUE);
rectangle(50,100,400,250);
2.6 Definiendo el tipo de relleno de una figura con la funcin setfillstyle() Si se desea
rellenar una figura, es necesario definir previamente el patrn y color del relleno. Tabla
que muestra los patrones de relleno disponibles.
PATRN
valor
DESCRIPCIN
EMPTY_FILL
SOLID_FILL
LINE_FILL
LTSLASH_FILL
SLASH_FILL
BKSLASH_FILL
LTBKSLASH_FILL
HATCH_FILL
XHATCH_FILL
INTERLEAVE_FILL
WIDE_DOT_FILL
CLOSE_DOT_FILL
USER_FILL

0
1
2
3
4
5
6
7
8
9
10
11
12

Color del fondo slido con el color

Relleno
determinado
Relleno
con lnea (---)
Relleno
con ///
Relleno
con /// lneas
Relleno
con \\\ lneas
Relleno
con \\\ lneas de ancho
Relleno
de lneas cruzadas ligeras
Relleno
de lneas cruzadas gruesas
Relleno
de lneas espaciados
Relleno
de puntos
Relleno
de puntos cercanos
Relleno
definido

Por ejemplo, si se desea definir el patrn de relleno de puntos cercanos de color rojo, se
usa la funcin setfillstyle() como se muestra a continuacin:

setfillstyle(CLOSE_DOT_FILL, RED);
2.7 La funcin floodfill()
Una vez seleccionado el patrn de relleno mediante la funcin setfillstyle(), se procede a
rellenar una figura usando la funcin floodfill(). Es muy importante resaltar que la figura
que se desea rellenar est completamente cerrada, ya que esta funcin contiene un
algoritmo que busca el contorno de la figura y, en caso de encontrar una apertura, la
funcin extralimitar la figura y tambin rellenar la parte externa de la misma. La
funcin floodfill() requiere identificar un punto que se encuentre dentro del contorno de la
figura y necesita 3 argumentos:
1. Coordenada de la columna del punto interno de la figura.
2. Coordenada del rengln del punto interno de la figura.
3. Color del borde de la figura.
El ejemplo muestra las instrucciones para dibujar un circulo de color ROJO y lo rellena de
color AZUL slido.
setcolor(RED);
circle(300,150,27);
setfillstyle(SOLID_FILL,BLUE);
floodfill(300,150,RED);

3 CMO MOSTRAR MENSAJES EN MODO GRFICO

Aunque el
colocacin
nfasis en
direccin y

monitor se encuentre habilitado en modo grfico, se puede combinar la

de texto y grficas en la pantalla; sin embargo, en esta seccin se hace
la colocacin de mensajes en formato grfico, definiendo el tipo de letra,
tamao del mensaje deseado.

3.1 La funcin settextstyle()

Antes de mostrar un mensaje, debe seleccionarse el tipo de letra, direccin y tamao del
mensaje mediante la funcin setfillstyle() la cual requiere 3 argumentos:
1. El tipo de letra.
2. La direccin del mensaje (horizontal o vertical).
3. Tamao.
A continuacin se muestra una tabla con los algunos tipos de letra.

Tipo de letra

valor

archivo

DEFAULT_FONT
TRIPLEX_FONT
SMALL_FONT
SANS_SERIF_FONT
GOTHIC_FONT

0
1
2
3
4

TRIP.CHR
LITT.CHR
SANS.CHR
GOTH.CHR

3.2 La funcin outtextxy()

Una vez definido el tipo de letra, direccin y tamao correspondiente, se usa la funcin
outtextxy() para desplegar un mensaje grfico en la pantalla. Esta funcin requiere 3
argumentos:

Coordenada de la columna donde se desea mostrar el mensaje.

Coordenada del rengln.
Mensaje a mostrar.

A continuacin se muestra un ejemplo.

settextstyle(GOTHIC_FONT, HORIZ_DIR, 5);
outtextxy(100,200,Tec Laredo);
4 APLICACIN TPICA
El programa siguiente es un claro ejemplo del uso de lneas, figuras geomtricas
elementales, colores y rellenos

/*
Programa para graficar figuras geomtricas, lneas, texto, colores y rellenos
*/
#include <graphics.h> /* Encabezado con
declaraciones de grficos*/
#include <conio.h>
#include <stdio.h>
void main(void)
{
int monitor=DETECT, modo; /* Declaracin de tipo de monitor y modo*/
/* Automticamente detecta el tipo de monitor*/
initgraph(&monitor,&modo,"\\tc\\bgi");
/* Inicializa el modo grafico indicando el monitor y modo utilizado*/
/* El subdirectorio \\tc\\bgi
indica la ruta de localizacin de los archivos *.BGI
(monitores) y *.CHR (tipos de letras) */
gotoxy(1,23);printf("getmaxx()=%d",getmaxx());
gotoxy(1,24);printf("getmaxy()=%d",getmaxy());
setcolor(YELLOW); /* Establece el color amarillo (de aqu en adelante los trazos aparecen

de este color*/
line(0,0,50,50); /* Dibuja una lnea desde 0,0 hasta 50,50*/
setcolor(WHITE); /*Establece el color blanco*/
circle(100,200,30); /* Dibuja un circulo cuyo centro est en 100,200 y de radio=30
pixeles*/
setfillstyle(LINE_FILL,RED); /* Establece el relleno de lneas rojas*/
floodfill(100,200,WHITE); /*Rellena el contorno desde 100,200 hasta encontrar un trazo
blanco*/
rectangle(200,100,300,200); /* Dibuja un rectangulo desde 200,100 hasta300,200*/
setfillstyle(HATCH_FILL,BLUE); /* Establece el relleno como cuadricula*/
floodfill(250,150,WHITE); /* Rellena el contorno desde 100,200 hasta encontrar un trazo
blanco*/
setcolor(GREEN); /*Establece el color verde*/
settextstyle(GOTHIC_FONT,HORIZ_DIR,5);
/* Establece el Font como Gtico en posicin Horizontal de tamao 5*/
outtextxy(330,100,"Gothic");
/*Despliega el mensaje "Gothic" en330,100*/
setcolor(CYAN); /*Establece el color celeste*/
settextstyle(SANS_SERIF_FONT,VERT_DIR,7);
/* Establece el Font como Sanserif en posicin Vertical de tamao 7*/
outtextxy(330,200,"Sanserif");
/* Despliega el mensaje "Sanserif" en330,200*/
getch();
closegraph(); /* Termina el modo grafico (vuelve a su modo de texto normal) */
return;
}

5 CONCLUSIONES

Aunque existen muchas otras funciones de graficacin, este documento presenta los
conceptos y funciones bsicas para iniciar la codificacin de programas en C++ que
permitan utilizar el monitor en modo grfico. Aqu se muestran las operaciones
fundamentales de graficacin y se presentan ejemplos representativos, los cuales pueden
obtenerse en el sitio ttp://www.itnuevolaredo.edu.mx/takeyas o bien solicitarse al autor
escribiendo un correo electrnico a takeyas@itnuevolaredo.edu.mx.

BIBLIOGRAFA
Barkakati Nabajyoti.
The Waite Groups. Turbo C Bible.
Howard W. Sams & Company.
Estados Unidos. 1990.
Deitel y Deitel.
C++ Cmo programar.
Segunda edicin. Pearson-Prentice Hall.
Estados Unidos. 1999.
Lafore, Robert. The Waite Groups. Turbo C. Programming for the PC.
Revised Edition.
Howard W. Sams & Company.
Estados Unidos. 1990.
Lpez Takeyas, Bruno.
Minitaller: Tcnicas avanzadas de programacin en lenguaje C++.
Instituto Tecnolgico de Nuevo Laredo, Tam.
Mxico. 2003.
Schildt, Herbert.
Turbo C. Programacin avanzada.
Segunda edicin, McGraw Hill.
Estados Unidos. 1990.