Taller02CGrafica2011 I

Universidad Nacional Mayor de San Marcos
Facultad de Ingeniera de Sistemas e Informtica

E.A.P. Ingeniera de Sistemas e Informtica
Departamento Acadmico de Ciencias de la Computacin
Curso de Computacin Grafica
Laboratorio de Computacin Grafica 2010 II
Construccin de Primitivas Grficas

Mg. Johnny R. Avendao Q. Pag. No. 1

Objetivo: El objetivo de esta prctica, es que el alumno conozca y sepa como aplicar los principales
algoritmos de discretizacin de lneas en 2D para rectas: algoritmo bsico, algoritmo DDA (Digital
Differential Analyzer), algoritmo de punto medio (BRESENHAM); de igual manera que efecte la
implementacin del algoritmo de punto medio para circunferencias.

Duracin de la Prctica: 2 Horas.

Lugar de realizacin: Laboratorio de cmputo.

El conocimiento requerido para realizar esta Prctica es de haber asimilado los conceptos
bsicos de C/C++ y OpenGL.

El desarrollo tendr la siguiente estructura de temas:

1. Introduccin
2. Discretizacin de lneas
3. Algoritmo Bsico
4. Algoritmo DDA
5. Algoritmo de Punto Medio (de Bresenham)
6. Coordenadas cartesianas 2D y localizacin de las coordenadas de trabajo
7. Programa ejemplo con OpenGL (para lneas)
8. Ejercicios propuestos
9. Circunferencias
10. Algoritmo basado en una representacin paramtrica
11. Algoritmo basado en una representacin explcita
12. Algoritmo de Punto Medio para circunferencias
13. Algoritmo de Punto Medio para elipses
14. Ejercicios propuestos
15. Referencias

Laboratorio 02

Construccin de
Primitivas graficas

Algoritmo de punto medio para rectas.


1. INTRODUCCIN

En este taller se presentan, esencialmente, algoritmos que tienen que ver con la conversin a
puntos de primitivas grficas para dibujar lneas.

Estos algoritmos se encuentran normalmente implementados en el procesador interno de las
pantallas de barrido y en algunos trazadores, por lo que el programador de aplicaciones grficas
no tendr, en general, que programarlos.

No obstante, es til conocerlos, al menos por las siguientes razones:

- Pueden utilizarse para convertir impresoras grficas en perifricos grficos cmodos de
usar.
- Ayudan a comprender mejor los problemas de eficiencia asociados a la conversin a
pxeles.
- Son la base para implementaciones en hardware.
- Son imprescindibles para disear un perifrico de barrido.

Un paquete grfico raster aproxima las primitivas grficas matemticas (ideales), descritas en
trminos de un plano cartesiano, a un conjunto de pxeles de una determinada intensidad de gris
o color. Estos pxeles son almacenados como mapas de bits en un buffer de memoria grfica.

2. DISCRETIZACION DE LNEAS

Un algoritmo de discretizacin de lneas calcula las
coordenadas de los pxeles que estn sobre o cerca de
una lnea ideal infinitamente delgada sobrepuesta a
una trama bidimensional (vea la Figura No. 1).

En principio nos gustara que la secuencia de
pxeles estuviera lo ms cerca posible de la lnea ideal
y que adems fuera lo ms recta posible.

Para visualizar la geometra supondremos que
mostraremos un pxel como un punto circular centrado
en la posicin (x, y) de la trama.

3. ALGORITMO BSICO

Es la forma ms simple de abordar el problema, recordar que si no se tiene en cuenta el valor
de la pendiente esta podra dar una representacin grafica de la recta de manera errada.
El respectivo cdigo en C/C++ se representa a continuacin:

void recta_simple (int x0, int y0, int x1, int y1)
{
int x;
float dx, dy, m;
dx = x1 - x0;
dy = y1 - y0;
m = dy/dx;
b = y0 - m*x0;
y = y0;
for (x=x0; x<=x1; x++)
{
Figura No. 1. Relacin de pxeles con
lnea ideal


pintar(x, round(y), atributo);
y = m*x + b;
}
}

Donde la funcin pintar puede ser diseada de la siguiente manera (criterio del programador):

void pintar(int x,int y,char atributo)
{
// Puede ser empleando glPoint(x,y);
// Se sugiere que se implemente lo sugerido en las clases
// detalles del atributo
}

4. ALGORITMO DDA (Digital Differential Analyzer)

Este algoritmo, llamado tambin de algoritmo incremental, representa una mejora con
respecto al algoritmo Bsico, donde aminora el nmero de operaciones bsicas (elementales).
void recta_dda(int x0, int y0, int x1, int y1)
{
int x;
float dx, dy, m;
dx = x1-x0;
dy = y1-y0;
m = dy/dx;
y = y0;
for(x=x0; x<=x1; x++)
{
pintar(x, round(y), atributo);
y += m;
}
}

5. ALGORITMO DE PUNTO MEDIO (BRESENHAM)

Una versin optimizada para el diseo de una recta viene dada por la aritmtica entera,
adems de un nmero reducido de operaciones bsicas con respecto a las anteriores.

void recta_punto_medio(int x0, int y0, int x1, int y1)
{
int dx, dy, dE, dNE, d, x, y;
dx = x1 - x0;
dy = y1- y0;
d = 2*dy - dx;
dE = 2*dy;
dNE = 2*(dy - dx);
x = x0;
y = y0;
pintar(x, y, atributo);
while (x<x1)
{
if(d<=0){
d += dE;
x++;
}


else{
d += dNE;
x++;
y++;
}
pintar(x, y, atributo);
}
}

Recuerde que estos dos ltimos algoritmos estn restrictos al valor de la pendiente menor
que uno, por lo tanto deber hacer las consideraciones del caso para el ploteo adecuado de la
recta.

6. COORDENADAS CARTESIANAS 2D Y LOCALIZACION DE LAS COORDENADAS DE
TRABAJO

El sistema de coordenadas ms comn para el
dibujo bidimensional es el sistema de ejes
coordenadas Cartesiano (Figura No 2).
Una ventana se mide fsicamente en trminos de
pxeles. Antes de que pueda empezar a trazar
puntos, lneas y formas en una ventana, tenemos
que indicarle a OpenGL como trasladar los pares de
coordenadas especificadas a coordenadas de la
ventana.

Esto se hace especificando la regin del espacio
cartesiano que ocupa la ventana; este espacio se
conoce como el rea de trabajo.

En el espacio bidimensional, el rea de trabajo es
el mximo y el mnimo valor x e y que hay dentro de
la ventana (Figura No 3).

Figura No. 3. Dos reas de trabajo.

Figura No. 2. Sistema de coordenadas cartesiano.


7. PROGRAMA EJEMPLO CON OPENGL (motivacin)

Nos gustara generar una recta usando el algoritmo bsico, para esto tenga en cuenta:
0 1
0 1
x x
y y
y
x
m
b mx y
=
A
A
=
+ =

donde m es el valor de la pendiente.

Un programa realizado con el lenguaje VC++ para resolver el problema planteado, se
describe a continuacin:

#include <iostream.h>
#include <math.h>
#include <GL/glut.h>
#include <stdio.h>
#include <stdlib.h>

void init(void);
void display(void);
void reshape(int, int);
void abasico(int, int, int, int);
void ingresoDatos(void);
int px0,py0,px1,py1;

int main(int argc, char** argv)
{
ingresoDatos();
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);
glutInitWindowSize(200, 200);
glutInitWindowPosition(100,100);
glutCreateWindow("Algoritmo Basico");

init();
glutDisplayFunc(display);
glutReshapeFunc(reshape);
glutMainLoop();
return 0;
}

void init(void)
{
glClearColor(1.0,1.0,1.0,0.0); //parametros: rojo, amarillo y azul, el cuarto es el
parametro alpha
glShadeModel(GL_FLAT);
}

void display(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glPushMatrix(); // salva el estado actual de la matriz
glColor3f(0,0,1); // Azul
glPointSize(2); // Fije el grosor de pixel = 2
abasico(px0, py0, px1, py1);
glPopMatrix(); // recupera el estado del matriz


glFlush();
}

void reshape(int w, int h)
{
glViewport(0,0,(GLsizei)w, (GLsizei)h);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(-50.0, 50.0, -50.0, 50, -1.0, 1.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
}

void abasico(int x0,int y0,int x1,int y1)
{
int x;
float dx, dy, m, b, y;
dx = x1 - x0;
dy = y1 - y0;
m = dy/dx;
b = y0 - m*x0;
y = y0;

glBegin(GL_POINTS);
for(x=x0; x<=x1; x++)
{
y = m*x + b;
cout << x <<" "<< y <<" "<< (int)ceil(y-0.5) <<"\n";
glVertex2f(x, (int)ceil(y-0.5));
}
glEnd();
}

void ingresoDatos(void)
{
cout << "Algoritmo Basico \n";
cout << "Ingrese primera coordenada:\n";
cout << "x0 = "; cin >> px0;
cout << "y0 = "; cin >> py0;
cout << "Ingrese segunda coordenada:\n";
cout << "x1 = "; cin >> px1;
cout << "y1 = "; cin >> py1;
cout << "Las coordenadas ingresadas son: \n";
cout << "(x0, y0) = "<<"("<<px0<<", "<<py0<<") \n";
cout << "(x1, y1) = "<<"("<<px1<<", "<<py1<<") \n";
}

No olvide que para compilar y ejecutar el programa (en Visual C++) debe especificar los
enlaces (LINK) con la librera de OpenGL; revise las indicaciones del taller anterior (glut32.lib,
glu32.lib y opengl32.lib).

Observacin:

Note UD. en el cdigo, que se ha fijado el grosor del pxel a 2 unidades, y que la aplicacin
grafica muestra lo sugerido por el algoritmo. Pero, si usted realiza una maximizacin de su
ventana, notar que el trazo continuo de la grafica se pierde, tendiendo que cambiar el grosor del


pxel a uno apropiado. Esto en realidad no representa problema alguno, al contrario de otras
APIs (algunas), OpenGL trabaja con pxeles con entradas reales, es decir no necesariamente
valores enteros, consiguiendo mejor detalle grafico. Cuando se encapsula dos coordenadas con
el modo GL_LINES, OpenGL hace las cuentas adicionales para mostrar un trazo continuo. Esto
quiere decir, que en las futuras aplicaciones no nos debemos preocupar si debemos plotear
coordenadas reales en general.

8. EJERCICIOS PROPUESTOS

Ejercicio 01:

Implemente los tres algoritmos de trazado de rectas, en una sola ventana de grficos, uno a
continuacin del otro, no lo superponga.

Ejercicio 02:

Disear la funcin LINEA (p, q) que permita pintar una lnea considerando todos los casos (lnea
vertical, horizontal, oblicua, etc.) utilizando el algoritmo de punto medio. Considerar que p(x
0
, y
0
)
y q(x
f
, y
f
) son los puntos inicial y final de la recta respectivamente.

Ejercicio 03:

Con la funcin realizada del taller 3 implementar una aplicacin para dibujar un polgono
estrellado partiendo de un polgono regular de N lados. Un polgono regular estrellado puede
construirse a partir del regular convexo uniendo vrtices no consecutivos de forma continua. Se
denotan por N/M siendo N el nmero de vrtices igual a N del regular convexo y M el salto entre
vrtices. N/M ha de ser fraccin irreducible, de lo contrario no se genera el polgono estrellado que
indica la fraccin. El valor de M toma varios valores y son los nmeros enteros primos relativos a N
menores que N/2.

El heptgono regular genera dos estrellados, 7/2 y 7/3


El enegono genera dos estrellados, 9/2 y 9/4

9. CIRCUNFERENCIAS

Las circunferencias son probablemente las curvas ms utilizadas en los grficos elementales;
generalmente, se utilizan como bloques de construccin para generar imgenes artsticas o
tcnicas de resolucin (por ejemplo vea la Figura No. 4).

Figura No. 4. Uso de circunferencias en los dibujos

De forma anloga al diseo de rectas, tambin se dispone de algoritmos para disear
circunferencias va la discretizacin de los pxeles. Para efectos de una presentacin mas simple
o sencilla trabajaremos con la circunferencia centrada en el origen y luego mediante una
traslacin la llevaremos a su posicin original.

Adems aprovecharemos el hecho de que este tipo de cnica posee propiedades simtricas
con respecto a los ejes cartesianos y con respecto a la recta identidad en el I cuadrante (Figura
No. 5).



Figura No. 5. Propiedades simtricas de la circunferencia

Esto nos conduce a discretizar en un solo octante y en especial en aquella regin en donde
se puede pasterizar horizontalmente; es decir en el II octante donde las coordenadas (x, y) de la
circunferencia satisfacen la relacin x < y, posteriormente se procede a hacer las copias
necesarias en los siete octantes restantes.

10. ALGORITMO BASADO EN UNA REPRESENTACIN PARAMETRICA

Para esto slo se considera lo siguiente:

= R sen
= R cos

El ngulo deber variar de
4
t
a
2
t
para permitir
recorrer el II octante (Figura No 3).
Esto permite plantear el esquema como sigue:

void circunferencia_parametrica(int R)
{
float x,y;
float PI=3.1415..;
float teta=PI/4;
delta=0.1;
while (teta<PI/2)
{
x=R*cos(teta);
y=R*sin(teta);
teta+=delta;
pintar(round(x),round(y),atributo);
}
}

Figura No. 6. Representacin
paramtrica de la circunferencia


11. ALGORITMO BASADO EN UNA REPRESENTACIN EXPLCITA

Se desprende de la ecuacin general de la circunferencia (Figura No 7.):

2 2
x R y =

Obviamente el clculo de las coordenadas va ha ser precedida por un costo adicional o una
sobrecarga de operaciones diferentes a las
bsicas o elementales, como es la potencia y
la funcin raz cuadrada.

El siguiente esquema traduce lo
comentado:

void circunferencia_explicita(int R)
{
float x=0,y=R;
while (x<y)
{
y=sqrt(pow(R,2)-
pow(x,2));
pintar(x,round(y),atribu
to);
x++;
}
}

12. ALGORITMO DE PUNTO MEDIO PARA CIRCUNFERENCIAS

Finalmente abordamos la versin de punto medio para circunferencias, la cul realiza
operaciones aritmticas enteras tal como se ha planteado y desarrollado en las clases
respectivas.
A continuacin se presenta el cdigo propuesto en Computer Graphics: Principles and
Practice, la cul presenta algunos ajustes para evitar el cociente 5/4:

void circunferencia_punto_medio(int R)
{
// discretizacion valida en el II octante
int x=0;
int y=R,d=1-R;
pintar(x,y,atributo);
while (x<y){
if (d<0)
d+=2*x+3;
else{
d+=2(x-y)+5;
y
}
x++;
pintar(x,y,atributo);
}
}

Figura No. 7. Representacin explicita de la
circunferencia.


13. ALGORITMO DE PUNTO MEDIO PARA LA ELIPSE

El planteamiento que se utiliza aqu es similar a aquel empleado en el despliegue de una
circunferencia. Dado los parmetros rx, ry, (xc, yc), se determina los puntos (x, y) para una elipse
en posicin estndar centrada en el origen y luego se altera los puntos, de modo que la elipse
este centrada en (xc, yc).

El mtodo de punto medio para elipse se aplica a lo largo del primer cuadrante en dos partes,
de acuerdo a una elipse con la pendiente rx < ry, como se muestra a continuacin.

Se procesa este cuadrante tomando pasos unitarios en la direccin de x donde la pendiente
de la curva tiene una magnitud menor que -1 y tomando pasos unitarios en la direccin de y
donde la pendiente tiene una magnitud mayor que -1.

Las regiones 1 y 2 pueden procesarse de varias
maneras. Se puede iniciar en la posicin (0, r
y
) y pasar
en el sentido del reloj a lo largo de la trayectoria elptica
en el primer cuadrante, al alternar de pasos unitarios en
x a pasos unitarios en y cuando la pendiente adquiere un
valor menor que -1.

De modo alternativo, se puede iniciar en (r
x
, 0) y
seleccionar puntos en el sentido contrario al de las
manecillas del reloj, alternando de pasos unitarios en y a
pasos unitarios en x cuando la pendiente adquiere un
valor mayor que -1.

La pendiente de la curva (la tangente) se calcula a
partir de la ecuacin:

0 ) , (
2 2 2 2 2 2
= + =
y x x y elipse
r r y r x r y x f

con ) 0 , 0 ( ) , ( =
c c
y x , adems
y r
x r
dx
dy
x
y
2
2
2
2
=

En la frontera entre la regin 1 y la regin 2:
1 =
dx
dy

Anlogamente:
1 <
dx
dy
en la regin 1 y
1 >
dx
dy
en la regin 2
y en la frontera:
y r x r
x y
2 2
2 2 =

Por lo tanto, se mueve hacia fuera de la regin 1 siempre que:

y r x r
x y
2 2
2 2 > .

Figura No. 5. Punto medio para elipses
r
x

r
y

Pendiente = -1
regin
regin
1
2


14. EJERCICIOS PROPUESTOS

Ejercicio 01:

Proceda como en el laboratorio anterior e implemente las tres alternativas (descrita antes) para
representar la circunferencia, para esto el usuario deber ingresar el radio respectivo. El programa
mostrar los grficos con las tres tcnicas.
Ejercicio 02:

Implemente el algoritmo de punto medio con el atributo grosor y color, el usuario elige al inicio de
ingresar los datos.

Ejercicio 03: (Importante)

Ahora haga las modificaciones necesarias para graficar una circunferencia centrada en las
coordenadas
( )
0 0
, x y :
2 2 2
0 0
( ) ( ) x x y y R + =

Naturalmente se deber leer dichas coordenadas adems del radio, y los atributos que el usuario
desea considerar.

Ejercicio 04:

Implementar el algoritmo de punto medio respectivo para
graficar una elipse que tiene como ecuacin:

1
2
2
2
2
= +
b
y
a
x

El usuario deber ingresar los valores de a y b, as mismo
solo deber trabajar en el primer cuadrante y razonar
usando simetra.

Ejercicio 05:

Desarrolle las modificaciones necesarias para obtener el despliegue grfico de la elipse de ecuacin
general.

Ejercicio 06:

Implemente un programa que lea el valor de L, y que permita
mostrar un triangulo equiltero de lado L inscrito en una
circunferencia, adems de 3 circunferencias pequeas de
igual radio contenidas en el mencionado triangulo. Se le
asignar el color azul al triangulo y rojo a las circunferencias,
vea la grafica que se adjunta.

L


Ejercicio 07:

Realizar un programa con OpenGL que permita construir los siguientes diseos geomtricos. Para el
pintado de los crculos y los segmentos de recta, use el respectivo algoritmo del punto medio.

15. REFERENCIAS
Referencias:
1. Computer Graphics. Principles and Practice (Second Edition). Foley J. D., A.van Dam,
S.K.Feiner and J.F. Hughes. Addison-Wesley. 1990
2. OpenGL Superbible. R. Wright and M. Sweet. Waite Group, Inc 1996
3. The OpenGL Utility Toolkit (GLUT) Programming Interface (API Version 3). Mark J. Kilgard,
Silicon Graphics, Inc 1996
4. Programacion en OpenGL. Richard S. Wright JR. Michael Sweet. Ediciones Anaya
Multimedia. 1996.

Taller02CGrafica2011 I

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Taller02CGrafica2011 I

Hochgeladen von

Copyright:

Verfügbare Formate

Universidad Nacional Mayor de San Marcos

Facultad de Ingeniera de Sistemas e Informtica

Das könnte Ihnen auch gefallen