laboratorio grafica.docx

Laboratorio 001: Herramientas de desarrollo de la Asignatura

publicado a la(s) 09/05/2012 08:48 por Hernan Nina Hanco [ actualizado el 17/09/2012 14:47 ] I) Objetivo

Proporcionar al estudiante opciones de herramientas de desarrollo para el desarrollo de aplicativos en la asignatura de Computación Gráfica I.

II) Marco conceptual

Introducción a OpenGLEn OpenGL se proporciona una biblioteca básica de funciones para especificar primitivas gráficas, atributos, transformaciones geométricas, transformaciones de visualización y muchas otras operaciones. Está diseñada para ser independiente del hardware, por tanto, muchas operaciones, tales como las subrutinas de entrada y salida, no están incluidas en la biblioteca básica. Sin embargo, las subrutinas de entrada y salida y muchas funciones adicionales están disponibles en bibliotecas auxiliares que se han desarrollado para programas OpenGL.

Sintaxis básica de OpenGLLos nombres de las funciones de la biblioteca básica de OpenGL utiliza como prefijo gl.glBegin, glClear, glCopyPixels, glPolygonModeTodas las constantes comienzan con las letras GL en mayúsculas.GL_2D, GL_RGB, GL_CCW, GWOLYGON, GL_AMB I ENT_AND_D IFFUSELas funciones de OpenGL también esperan tipos de datos específicos. Por ejemplo, GLbyte, GLshort, GLint, GLfloat, GLdouble, GLboolean.

A algunos argumentos de funciones de OpenGL se les puede asignar valores empleando una matriz que enumera un conjunto de valores de datos. Esta opción se utiliza para especificar una lista de valores como un puntero a una matriz, en lugar de especificar cada elemento de la lista explícitamente como un argumento. Un ejemplo típico del uso de esta opción es la especificación de los valores de las coordenadas xyz.

Bibliotecas relacionadasExiste un gran número de bibliotecas relacionadas para la realización de operaciones especiales, además de la biblioteca básica de OpenGL. La utilidad GLU (OpenGL Utility) proporciona subrutinas para la configuración de las matrices de visualización y proyección, descripción de objetos complejos mediante líneas y aproximaciones poligonales, visualización de cuádricas y splines B empleando aproximaciones lineales, procesamiento de operaciones de representación de superficies y otras tareas complejas. Toda implementación de OpenGL incluye la biblioteca GLU. Todos los nombres de las funciones de GLU comienzan con el prefijo glu. También existe un conjunto de herramientas orientadas a objetos basado en OpenGL, llamado Open Inventor que proporciona subrutinas y formas de objetos predefinidos para su uso en aplicaciones tridimensionales interactivas.Para crear gráficos utilizando OpenGL, necesitamos en primer lugar configurar una ventana de visualización en nuestra pantalla de vídeo. Se trata simplemente de la zona rectangular de la pantalla en la que nuestra imagen se mostrará. No podemos crear directamente la ventana de visualización con las funciones de OpenGL básicas, ya que esta biblioteca contiene únicamente funciones gráficas independientes del dispositivo, y las operaciones de gestión de ventanas dependen de la computadora que estemos utilizando. Sin embargo, existen varias bibliotecas de sistema de ventanas que soportan las funciones de OpenGL en una gran variedad de máquinas. El kit de herramientas GLUT (OpenGL Utility Toolkit) proporciona una biblioteca de funciones para interactuar con cualquier sistema de ventanas. Las funciones de la biblioteca GLUT utilizan como prefijo glut. Esta biblioteca también contiene métodos para describir y representar superficies y curvas cuádricas.

Programación OpenGL en Java

OpenGL es compatible con principales sistemas operativos, funciona con cualquier sistema de ventanas, y se puede utilizar desde muchos lenguajes de programación. Ofrece total independencia de los protocolos de red y topologías.En java existen APIs variadas que permite la escritura de aplicaciones OpenGL en java, por ejemplo las siguientes:

Proyecto JOGL soportado por OpenGL API (JSR-231), JOGL provee un acceso completo a las APIs de OpenGL 1.3 - 3.0.

Lightweight Java Game Library Java 3D Java 3D for Mac OS X OpenGL for Java (GL4Java) YAJOGLB jGL: a 3D graphics library for the Java

III) Prácticas1) Configuración inicial de JOGL en NetbeansEsta práctica está destinado a practicar la implementación JOGL desde sus inicios. Ayuda a configurar una instalación reciente JOGL en Netbeans en Windows.En primer lugar se necesita descargar JOGL. se puede descargar los últimos binarios JOGL de http://schabby.de/jogl-download/.Para esta práctica se utilizó los binarios:

jogl-2.0-b752-20120504-windows-i586 gluegen-2.0-b552-20120504-windows-i586

Descargados estos archivos, debemos descomprimirlos y luego añadir a la librería de nuestra aplicación en java los paquetes de clases Jar siguientes:

gluegen-rt.jar gluegen-rt-natives-windows-i586.jar jogl.all.jar jogl-all-natives-windows-i586.jar

Una vez cargados estos Jar en la librería crear las Renderer y Ventana como se muestra en la

figura:

Clase Ventana

package geometrias.frontend;

import geometrias.Renderer_Punto;import java.awt.event.WindowAdapter;import java.awt.event.WindowEvent;import javax.media.opengl.GLCapabilities;import javax.media.opengl.GLProfile;import javax.media.opengl.awt.GLCanvas;import javax.swing.JFrame;

/**** @author hernan*/public class Ventana {

public static void main(String[] args) { // 1. Configuración de OpenGL Version 2 GLProfile profile = GLProfile.get(GLProfile.GL2); GLCapabilities capabilities = new GLCapabilities(profile);

// 2. Canvas es el aplicativo gráfico que se empotra en un JFrame GLCanvas glcanvas = new GLCanvas(capabilities); glcanvas.addGLEventListener(new Renderer_Punto()); glcanvas.setSize(400, 400);

// 3. Crear la ventana para mostrar la aplicación de dibujo JFrame frame = new JFrame("Aplicación de OpenGL"); frame.getContentPane().add(glcanvas); // 4. Añadir el evento para cerrar la ventana frame.addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent ev) { System.exit(0); } }); // 5. Cambiar el tamaño de la ventana y visualizarla frame.setSize(frame.getContentPane().getPreferredSize()); frame.setVisible(true); }}

Clase Renderer_Punto

package geometrias;

import java.util.logging.Level;import java.util.logging.Logger;import javax.media.opengl.GL2;import javax.media.opengl.GLAutoDrawable;import javax.media.opengl.GLEventListener;

/**

** @author hernan*/public class Renderer_Punto implements GLEventListener {

static final Logger logger = Logger.getLogger("BasicLoggingExample"); // private GL2 gl;

@Override public void init(GLAutoDrawable gLDrawable) { logger.log(Level.INFO, "método - init"); // Provee un objeto que enlaza las APIs del OpenGL // Que se encargara de realizar las instrucciones de dibujos gl = gLDrawable.getGL().getGL2();

// 6. Especificar el color del dibujo: gris gl.glColor3f(0.5f, 0.5f, 0.5f); gl.glDrawBuffer(GL2.GL_FRONT_AND_BACK); }

@Override public void reshape(GLAutoDrawable glad, int x, int y, int width, int height) {

logger.log(Level.INFO, "Reshape");

// 7. Especificar el área de dibujo (frame) utilizamos coordenadas gl.glMatrixMode(GL2.GL_PROJECTION); gl.glLoadIdentity(); gl.glOrtho(0, width, 0, height, -1.0, 1.0); }

@Override public void display(GLAutoDrawable drawable) { logger.log(Level.INFO, "Display"); // 8. Especificar el dibujo de un punto gl.glPointSize(10); // Determina el tamaño de un punto gl.glBegin(GL2.GL_POINTS); gl.glVertex2i(350, 350); gl.glEnd(); } @Override public void dispose(GLAutoDrawable glad) { throw new UnsupportedOperationException("Not supported yet."); }

}

Resultado:

IV) Tarea1) En base a la aplicación de la práctica modifique la aplicación cambiar el color de la ventana a blanco.2) Modificar el programa de la práctica para dibujar puntos aleatorios en la ventana.3) Modificar el programa de la práctica para que el programa pueda solicitar al usuario coordenadas de puntos para que se dibujen en la ventana.

V) Referencias JOGL in Eclipse: http://schabby.de/jogl-example-hello-world/ JOGL (Java OpenGL) Tutorial: http://www.land-of-kain.de/docs/jogl/ JogAmp: http://jogamp.org/ Ejemplos de Swing y JOGL: http://www.genedavissoftware.com/books/jogl/ljogl_ch2.html

VI) Solución de EjerciciosEjercicio 2: Modificar el programa de la práctica para dibujar puntos aleatorios en la ventana.

La Clase Ventana no varia, solo se cambiar el Renderer_Punto utilizado en anteriores programas, por esta nueva clase Renderer_Punto_Aleatorios. El método Display es la que hace los dibujos en este caso dibuja puntos, se ha añadido un bucle for donde se genera puntos aleatorios con la el Math.Random y luego de ello se llama a un método que dibujo un punto, de esta manera obtenemos el dibujo de puntos.

package geometrias.puntos; import java.util.logging.Level; import java.util.logging.Logger; import javax.media.opengl.GL import javax.media.opengl.GL2; import javax.media.opengl.GLAutoDrawable; import javax.media.opengl.GLEventListener; /** * * @author hernan */ public class Renderer_Punto_Aleatorios implements GLEventListener { static final Logger logger = Logger.getLogger("BasicLoggingExample"); // protected GL2 gl; @Override public void init(GLAutoDrawable gLDrawable) { logger.log(Level.INFO, "método - init"); // Provee un objeto que enlaza las APIs del OpenGL // Que se encargara de realizar las instrucciones de dibujos gl = gLDrawable.getGL().getGL2(); // 6. Especificar el color del dibujo: Rojo gl.glColor3f(1.0f, 0.0f, 0.0f); gl.glDrawBuffer(GL2.GL_FRONT_AND_BACK); } @Override public void reshape(GLAutoDrawable glad, int x, int y, int width, int height) { logger.log(Level.INFO, "Reshape"); // 7. Especificar el área de dibujo (frame) utilizamos coordenadas gl.glMatrixMode(GL2.GL_PROJECTION); gl.glLoadIdentity(); gl.glOrtho(0, width, 0, height, -1.0, 1.0); } @Override public void display(GLAutoDrawable drawable) { for (int i = 1; i <= 20; i++) { // 7. Generar un punto de coordenadas aleatorias double x = Math.random() * 400; double y = Math.random() * 400; // Especificar aleatoriamente el color de dibujo gl.glColor3d(Math.random(), Math.random(), Math.random()); gl.glPointSize(5); // Dibujar un punto dibujarPunto(x, y); } } protected void dibujarPunto(double x, double y) { gl.glBegin(GL.GL_POINTS); gl.glVertex2d(x, y); gl.glEnd(); } @Override public void dispose(GLAutoDrawable glad) { // throw new UnsupportedOperationException("Not supported yet."); } }

Resultado:

Ejercicio 3) Modificar el programa de la práctica para añadir un panel de ingreso de valores

http://hanconina.nubeuniversitaria.com/unsaac/computacion-grafica-i/laboratorio-de-computacion-grafica-i/laboratorio1herramientasdedesarrollodelaasignatura/puntos_aleatorios.jpg?attredirects=0

de coordenadas x, y de un punto por el usuario, y en base a ello dibujar el punto correspondiente en la ventana.

Para dar solución a este problema vamos a generar una nueva ventana la cual lleva el siguiente diseño de la figura. Se requiere, dos paneles para visualizar el gráfico de OpenGL y un panel de ingreso de datos.

El diseño lo desarrollamos en la siguiente clase: Ventana_Entrada

package geometrias.frontend; import geometrias.puntos.Renderer_Punto_Entrada; import java.awt.Container; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.media.opengl.GLCapabilities; import javax.media.opengl.GLProfile; import javax.media.opengl.awt.GLCanvas; import javax.swing.JFrame; import javax.swing.JButton; import javax.swing.JPanel; import javax.swing.JLabel; import javax.swing.JTextField; import javax.swing.border.TitledBorder; import javax.swing.border.EtchedBorder; public class Ventana_Entrada extends JFrame implements ActionListener { // Atributos de Clase // objetos de swing private JPanel pOpenGL; private JPanel pEntrada; private JButton btnDibujar; private JTextField txtX; private JTextField txtY; // objetos de libreria JOGL private GLCanvas glCanvas; // Objeto graficador de un punto private Renderer_Punto_Entrada render_punto; public Ventana_Entrada() { inicializarVentana(); } // Inicializar la ventana private void inicializarVentana() { // habilita el botón cerrar de la ventana setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // Crear un panel para ubicar el graficador Opengl pOpenGL = new JPanel(new BorderLayout()); pOpenGL.setBorder(new TitledBorder( new EtchedBorder(), // Tipo de Borde

http://hanconina.nubeuniversitaria.com/unsaac/computacion-grafica-i/laboratorio-de-computacion-grafica-i/laboratorio1herramientasdedesarrollodelaasignatura/muestra_ventana.jpg?attredirects=0

"OpenGL")); // Título del borde // Añadir el graficador al panel de OpenGL // 1. Configuración de OpenGL Version 2 GLProfile profile = GLProfile.get(GLProfile.GL2); GLCapabilities capabilities = new GLCapabilities(profile); // 2. Canvas es el aplicativo gráfico que se empotra en un JFrame - Ventana glCanvas = new GLCanvas(capabilities); render_punto = new Renderer_Punto_Entrada(); glCanvas.addGLEventListener(render_punto); pOpenGL.add(glCanvas); // Se añade el graficador OpenGL al panel glCanvas.setSize(500,500); // Crear el panel de entrada de datos pEntrada = new JPanel(); pEntrada.setBorder(new TitledBorder( new EtchedBorder(), // Tipo de Borde "Datos de gráfico")); // Añadir controles JLabel lblX = new JLabel("X: "); txtX = new JTextField(5); JLabel lblY = new JLabel("Y: "); txtY = new JTextField(5); btnDibujar = new JButton("Dibujar"); // Añadir los controles al panel de entrada de datos pEntrada.add(lblX); pEntrada.add(txtY); pEntrada.add(lblY); pEntrada.add(txtX); pEntrada.add(btnDibujar); // hacer que el botón capte eventos cuando se hace click sobre él. btnDibujar.addActionListener(this); // Añadir los paneles en la ventana // Obtener el contenedor de componentes Container content = getContentPane(); content.add(pOpenGL, BorderLayout.CENTER); content.add(pEntrada, BorderLayout.SOUTH); // Mostrar ventana pack(); setVisible(true); } /* * Método para tratar eventos en el formulario. */ @Override public void actionPerformed(ActionEvent e) { // Identificar el objeto o control donde se genero el evento Object source = e.getSource(); if (source == btnDibujar) { // si hay evento click en el botón // ubicar las nuevas coordenadas del punto int x = Integer.parseInt(txtX.getText()); int y = Integer.parseInt(txtY.getText()); // actualizar los valores de los puntos en el dibujador render_punto.setX(x); render_punto.setY(y); // repintar el nuevo punto glCanvas.repaint(); } } public static void main(String args[]) { // iniciar la ventana Ventana_Entrada ventana; ventana = new Ventana_Entrada(); } }

La siguiente clase denominada Renderer_Punto_Entrada, se añade dos atributos x,y que representan las coordenadas el punto, estos valores son utilizados para dibujar el punto.

package geometrias.puntos; import java.util.logging.Level; import java.util.logging.Logger; import javax.media.opengl.GL; import javax.media.opengl.GL2; import javax.media.opengl.GLAutoDrawable; import javax.media.opengl.GLEventListener; /** * * @author hernan */ public class Renderer_Punto_Entrada implements GLEventListener { static final Logger logger = Logger.getLogger("BasicLoggingExample"); // protected GL2 gl; private int x; private int y; public Renderer_Punto_Entrada() { this.x = 0; this.y = 0; } public Renderer_Punto_Entrada(int x, int y) { this.x = x; this.y = y; } public int getX() { return x; } public void setX(int x) { this.x = x; } public int getY() { return y; } public void setY(int y) { this.y = y; } @Override public void reshape(GLAutoDrawable glad, int x, int y, int width, int height) { logger.log(Level.INFO, "Reshape"); // 7. Especificar el área de dibujo (frame) utilizamos coordenadas gl.glMatrixMode(GL2.GL_PROJECTION); gl.glLoadIdentity(); gl.glOrtho(0, width, 0, height, -1.0, 1.0); } @Override public void display(GLAutoDrawable drawable) { gl.glClear(GL2.GL_COLOR_BUFFER_BIT); // Especificar aleatoriamente el color de dibujo gl.glColor3d(Math.random(), Math.random(),

Math.random()); gl.glPointSize(10); // Dibujar un punto dibujarPunto(this.x, this.y); } protected void dibujarPunto(double x, double y) { gl.glBegin(GL.GL_POINTS); gl.glVertex2d(x, y); gl.glEnd(); } @Override public void init(GLAutoDrawable glad) { logger.log(Level.INFO, "método - init"); // Provee un objeto que enlaza las APIs del OpenGL // Que se encargara de realizar las instrucciones de dibujos gl = glad.getGL().getGL2(); // 6. Especificar el color del dibujo: Rojo gl.glColor3f(1.0f, 0.0f, 0.0f); gl.glDrawBuffer(GL2.GL_FRONT_AND_BACK); } @Override public void dispose(GLAutoDrawable glad) { } }

Laboratorio 002: Algoritmos de dibujo de Líneas


Implementar algoritmos para el dibujo de líneas como parte de las primitivas geométricas.II) Marco conceptual

Ver Guía de Computación Grafica: Temas Algoritmos de dibujo de líneas

III) Prácticas

1) Crear una aplicación para dibujar una línea con pendiente positiva y menor a 1. Utilizar varios métodos. Se crea la clase Renderer_Punto.

/* * Creado el 23 de mayo, 2012 por Hernán Nina Hanco * * Este trabajo es parte del proyecto CG1, que corresponde a la * implementación de algoritmos de Dibujo de graficas. * * Universidad Nacional de San Antonio Abad del Cusco * Carrera Profesional de Ingeniería Informática y de Sistemas * Asignatura: Computación Gráfica I */

package geometrias.lineas;/* * Dibujo de líneas con pendiente -1<m<1 * @author Hernan Nina Hanco */

import java.util.logging.Level;import java.util.logging.Logger;import javax.media.opengl.*;

public class Renderer_Linea implements GLEventListener {

static final Logger logger = Logger.getLogger("BasicLoggingExample"); protected GL2 gl;

/* * Inicializar graficador OpenGL */


// Color de fondo del GLCanvas gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); gl.glClear(GL2.GL_COLOR_BUFFER_BIT);

// definir el color del pincel gl.glColor3f(1.0f, 0.0f, 0.0f);

} /* * Método para actualizar el dibujo cuando, * se modifica el tamaño de la ventana. */

@Override public void reshape(GLAutoDrawable glad, int x, int y, int width, int height) { logger.log(Level.INFO, "Reshape"); // 7. Especificar el área de dibujo (frame) utilizamos coordenadas gl.glMatrixMode(GL2.GL_PROJECTION); gl.glLoadIdentity(); gl.glOrtho(-300, 300, -300, 300, -1.0, 1.0); // Dibujar un Sistema de Referencia.

} /* * */

@Override public void dispose(GLAutoDrawable glad) { // no implementado }

/* * Inicializar y presentar el dibujo de OpenGL */ @Override public void display(GLAutoDrawable drawable) { int x0, y0, xn, yn, dx, dy; // Establecer el tamaño y color del punto gl.glPointSize(1); gl.glColor3f(0.0f, 0.0f, 1.0f);

// Dibujo de Líneas de pendiente positiva y menor a 1 // utilizando diferentes métodos

// A) Dibujar una Línea según la ecuación punto pendiente lineaPuntoPendiente(50, 50, 290, 120); // B) Dibujar una Línea utilizando el algoritmo de línea DDA lineaDDA(50, 70, 290, 140); // C) Dibujar una Línea utilizando el algoritmo de línea de Bresenham lineaBresenham(50, 90, 290, 160); // D) Dibujar una Línea utilizando el algoritmo de OpenGL lineaOpenGL(50, 110, 290, 180); }

/* * Algoritmo DDA con pendiente -1<m<1 */

void lineaDDA(int x0, int y0, int xn, int yn) { int x; float m, y; // Calcular la pendiente m = (float) (yn - y0) / (xn - x0); x = x0; y = y0; // Tomar el intervalo del eje X y determinar Y while (x < xn + 1) { //Dibujar un punto en la coordenada X, Y dibujarPunto(x, Math.round(y)); /* Determinar el siguiente pixel */ x++; y += m; // el incremento es la pendiente } } /* * Algoritmo para el dibujo de Línea con la ecuación * punto pendiente con pendiente -1<m<1 */

void lineaPuntoPendiente(int x0, int y0, int xn, int yn) { int x; float m, b, y; // Calcular la pendiente y la constante b m = (float) (yn - y0) / (xn - x0); b = (float) (y0 - m * x0);

x = x0; y = y0; // Tomar el intervalo del eje X y determinar Y while (x < xn + 1) { //Dibujar un pixel en la posición X, Y dibujarPunto(x, Math.round(y)); x++; y = m * x + b; /* Ecuación punto pendiente de la recta */ } }

/* * Algoritmo para el dibujo de Línea con el algoritmo de * Bresenham con pendiente -1<m<1

*/

public void lineaBresenham(int x0, int y0, int xn, int yn) {

// Identificar los valores x0,y0 int x = x0; int y = y0; // Calcular la constantes deltax, deltay, 2.deltay y 2deltay-2deltax int deltax = xn-x0; int deltay = yn-y0; int incrA = 2*deltay; // incremento si Pk es menor a 0 int incrB = 2 * (deltay - deltax); int pk = 2*deltay-deltax; // calcular p0 // Tomar el intervalo del eje X y determinar Y while (x < xn + 1) { dibujarPunto(x, y); /* Escribir en el framebuffer */ /* Deteminar el siguiente pixel */ x++; if (pk < 0) { pk += incrA; } else { y++; pk += incrB; } } } /* * Algoritmo para el dibujo de Línea con el algoritmo implementado * por OpenGL considere la pendiente -1<m<1 */

void lineaOpenGL(int x0, int y0, int xn, int yn) { // Determinar el grosor de la línea gl.glLineWidth(1.0f); // Activar el estado de dibujo de líneas gl.glBegin(GL2.GL_LINES); // Establecer el punto inicial y final gl.glVertex2i(x0, y0); gl.glVertex2i(xn, yn); gl.glEnd(); } /* * Dibujar un punto */

protected void dibujarPunto(int x, int y) { gl.glBegin(GL.GL_POINTS); gl.glVertex2i(x, y); gl.glEnd(); }}

Resultado de la aplicación, utilice la clase Ventana del Laboratorio 1, para mostrar los resultados.

IV) Tarea1) Modifique el programa anterior para dibujar un sistema de coordenadas como se muestra en la Figura.

2) Modificar el programa de la práctica donde se modifique los algoritmos de dibujo de línea para el dibujo de líneas con pendiente arbitraria.3) Modificar el programa de la práctica que considere el ingreso por parte del usuario, los extremos de una línea recta.4) Evalué el tiempo de ejecución de los algoritmos de dibujo de líneas, considere tabulación de datos y gráficas. (Ayuda: Tiempo en nanosegundo en java se obtiene con la sentencia):

http://hanconina.nubeuniversitaria.com/unsaac/computacion-grafica-i/laboratorio-de-computacion-grafica-i/laboratorio2algoritmosdedibujodelineas/algoritmo%20de%20dibujo%20de%20l%C3%ADneas%201.jpg?attredirects=0

http://hanconina.nubeuniversitaria.com/unsaac/computacion-grafica-i/laboratorio-de-computacion-grafica-i/laboratorio2algoritmosdedibujodelineas/algoritmo%20de%20dibujo%20de%20l%C3%ADneas.jpg?attredirects=0

long tiempo = System.nanoTime();

Laboratorio 003: Algoritmos de dibujo de círculos y elipses


Implementar algoritmos para el dibujo de círculos y elipses descritos en la teoría de la asignatura.


Ver Guía de Computación Grafica: Temas Algoritmos de dibujo de Círculos y Elipses

III) Prácticas

1) Implementar una clase para dibujar el octante de un Círculo con el algoritmo de la ecuación canónica y el punto medio. Además dibujar un circulo con las ecuaciones polares del circulo.

/* * Creado el 23 de mayo, 2012 por Hernán Nina Hanco * * Este trabajo es parte del proyecto CG1, que corresponde a la * implementación de algoritmos de Dibujo de graficas. * * Universidad Nacional de San Antonio Abad del Cusco * Carrera Profesional de Ingeniería Informática y de Sistemas * Asignatura: Computación Gráfica I */package geometrias.curvas;/* * Dibujo de líneas con pendiente -1<m<1 * @author Hernan Nina Hanco */

import java.util.logging.Level;import java.util.logging.Logger;import javax.media.opengl.*;

public class Renderer_Circulo implements GLEventListener {

static final Logger logger = Logger.getLogger("BasicLoggingExample"); protected GL2 gl; /* * Inicializar graficador OpenGL */





@Override public void reshape(GLAutoDrawable glad, int x, int y, int width, int height) { logger.log(Level.INFO, "Reshape"); // 7. Especificar el área de dibujo (frame) utilizamos coordenadas gl.glMatrixMode(GL2.GL_PROJECTION); gl.glLoadIdentity(); gl.glOrtho(-300, 300, -300, 300, -1.0, 1.0); // Dibujar un Sistema de Referencia. // dibujarSistemaReferencia(-300, 300, -300, 300); } /* * */


/* * Inicializar y presentar el dibujo de OpenGL */ @Override public void display(GLAutoDrawable drawable) { int x0, y0, xn, yn, dx, dy; // Establecer el tamaño y color del punto gl.glPointSize(1); gl.glColor3f(0.0f, 0.0f, 1.0f);

// Dibujo de Circulos // utilizando diferentes métodos // Se realiza el dibujo en el segundo octante // A) Dibujar un Círculo según la ecuación Canónica dibujarCirculoCanonica(200, 0, 0); // B) Dibujar un Círculo según la ecuación parámetrica polar dibujarCirculoPolar(150,0,0); // C) Dibujar un Círculo según el algoritmo de punto medio dibujarCirculoPuntoMedio(100,0,0); // D) Dibujar un Círculo según el algoritmo implementado por OpenGL

}

/* * Algoritmo de dibujo de un Círculo basado en la ecuación Canónica */ void dibujarCirculoCanonica(int r, int xc, int yc) { int x = 0; int y = r;

while (x <= y) { this.dibujarPunto(x + xc, y + yc); x++; double yd = Math.sqrt(r * r - x * x); y = (int) Math.round(yd); }

} /* * Algoritmo para el dibujo de círculo basado en la ecuación parámetrica * polar de la circunferencia. */

void dibujarCirculoPolar(int r, int xc, int yc) { // Determinar el angulo de variación double theta = Math.toRadians(0); // Punto inicial int x = r; int y = 0; // Mientras el angulo no exceda a 360 dibujar puntos while (theta <= 2*Math.PI) { this.dibujarPunto(x + xc, y + yc); // Incrementar el ángulo theta=theta+Math.toRadians(5); // Cálcular los valores x e y de forma parámetrica double xd = r * Math.cos(theta); x = (int) Math.round(xd); double yd = r * Math.sin(theta); y = (int) yd; } }

/* * Algoritmo para el dibujo de Círculo con el algoritmo de * punto medio */ public void dibujarCirculoPuntoMedio(int r, int xc, int yc) { // Punto inicial del círculo int x = 0; int y = r; // Cálcular el parámetro inicial de decisión int pk = 1-r;

// verificar el pk para determinar las posiciones de pixel siguuientes while (x<=y) {

System.out.println("(x,y)= "+x+","+y+" pk="+pk); dibujarPunto(xc+x,yc+y); if (pk<0){ pk+=2*(x+1)+1; x++; } else // pk>=0 { pk+=2*(x+1)+1 - 2*(y-1); x++; y--; } } } /* * Algoritmo para el dibujo de Círculo con el algoritmo implementado * por OpenGL. */

void dibujarCirculoOpenGL(int r, int xc, int yc) { }

/* * Dibujar un punto */ protected void dibujarPunto(int x, int y) { gl.glPointSize(2); gl.glBegin(GL.GL_POINTS); gl.glVertex2i(x, y); gl.glEnd(); }}

Resultado de la aplicación:

IV) Tarea1) Modificar la implementación de la práctica para completar el dibujo de los demás octantes del círculo, en los métodos respectivos.2) Cree una clase Renderer_Elipse donde dibuje una elipse utilizando la ecuación general, ecuaciones paramétricas polares y punto medio.

Laboratorio 004: Relleno poligonal


Implementar algoritmos de relleno poligonal descritos en la teoría de la asignatura.II) Marco conceptual

Ver Guía de Computación Gráfica

III) Prácticas1) Dibujar un polígono utilizando polilineas cerradas.

Clase Renderer_RellenoPoligonal

/*

http://hanconina.nubeuniversitaria.com/unsaac/computacion-grafica-i/laboratorio-de-computacion-grafica-i/laboratorio3algoritmosdedibujodecirculosyelipses/circulos.jpg?attredirects=0

* Creado el 23 de mayo, 2012 por Hernán Nina Hanco * * Este trabajo es parte del proyecto CG1, que corresponde a la * implementación de algoritmos de Dibujo de graficas. * * Universidad Nacional de San Antonio Abad del Cusco * Carrera Profesional de Ingeniería Informática y de Sistemas * Asignatura: Computación Gráfica I */package geometrias.rellenoareas;/* * Dibujo de líneas con pendiente -1<m<1 * @author Hernan Nina Hanco */

import java.util.ArrayList;import java.util.List;import java.util.logging.Level;import java.util.logging.Logger;import javax.media.opengl.*;

public class Renderer_RellenoPoligonal implements GLEventListener {

static final Logger logger = Logger.getLogger("BasicLoggingExample"); protected GL2 gl; /* * Inicializar graficador OpenGL */





@Override public void reshape(GLAutoDrawable glad, int x, int y, int width, int height) { logger.log(Level.INFO, "Reshape"); // 7. Especificar el área de dibujo (frame) utilizamos coordenadas

gl.glMatrixMode(GL2.GL_PROJECTION); gl.glLoadIdentity(); gl.glOrtho(-width, width, -height, height, -1.0, 1.0); }


/* * Inicializar y presentar el dibujo de OpenGL */ @Override public void display(GLAutoDrawable drawable) { // Establecer el tamaño y color del punto gl.glPointSize(1); gl.glColor3f(0.0f, 0.0f, 1.0f);

// Dibujar polilinea cerrada List<Punto> vertices = new ArrayList<Punto>(); vertices.add(new Punto(0, 0, 0)); vertices.add(new Punto(100, 0, 0)); vertices.add(new Punto(200, 100, 0)); vertices.add(new Punto(300, 0, 0)); vertices.add(new Punto(300, 300, 0)); vertices.add(new Punto(0, 300, 0)); dibujarPolilineasCerrada(vertices); // Identificar poligono concavo // identificarPoligonoConcavo(); } /* * Dibujar un poligono utilizando polilinea cerrada */ private void dibujarPolilineasCerrada(List<Punto> vertices) { int numeroVertices = vertices.size(); for (int i = 0; i < numeroVertices - 1; i++) { int x0 = vertices.get(i).getX(); int y0 = vertices.get(i).getY(); int xn = vertices.get(i + 1).getX(); int yn = vertices.get(i + 1).getY(); lineaBresenham(x0, y0, xn, yn); } // cerrar la figura int x0 = vertices.get(numeroVertices - 1).getX(); int y0 = vertices.get(numeroVertices - 1).getY(); int xn = vertices.get(0).getX(); int yn = vertices.get(0).getY(); lineaBresenham(x0, y0, xn, yn); } /* * Dibujar línea arbitraria con metodo bresenham */ public void lineaBresenham(int x0, int y0, int xn, int yn) { int dx, dy, incrE, incrNE, d, x, y, flag = 0;

if (xn < x0) { //intercambiar(x0,xn); int temp = x0; x0 = xn; xn = temp;

//intercambiar(y0,yn); temp = y0; y0 = yn; yn = temp; } if (yn < y0) { y0 = -y0; yn = -yn; flag = 10; }

dy = yn - y0; dx = xn - x0;

if (dx < dy) { //intercambiar(x0,y0); int temp = x0; x0 = y0; y0 = temp;

//intercambiar(xn,yn); temp = xn; xn = yn; yn = temp;

//intercambiar(dy,dx); temp = dy; dy = dx; dx = temp; flag++; }

x = x0; y = y0; d = 2 * dy - dx; incrE = 2 * dy; incrNE = 2 * (dy - dx);

while (x < xn + 1) { escribirPixel(x, y, flag); /* Dibujar punto */ x++; /* siguiente pixel */ if (d <= 0) { d += incrE; } else { y++; d += incrNE; } } }

void escribirPixel(int x, int y, int flag) { int xf = x, yf = y; if (flag == 1) { xf = y; yf = x; } else if (flag == 10) { xf = x; yf = -y; } else if (flag == 11) { xf = y; yf = -x; } dibujarPunto(xf, yf); }

/* * Dibujar un punto */ protected void dibujarPunto(int x, int y) { gl.glPointSize(2); gl.glBegin(GL.GL_POINTS); gl.glVertex2i(x, y); gl.glEnd(); }}

Resultado:

IV) Tarea1) Implementar un método para Identificar si el polígono es cóncavo o convexo.2) Si en caso fuese el polígono cóncavo dividir el mismo en polígonos convexos. Desarrolle un método para representar gráficamente la división3) Una vez que se identifiquen los polígonos convexos, implementar el método para dividirlo en triángulos. Muestre gráficamente el resultado

Laboratorio 005: Atributos de primitivas


Implementar algoritmos de atributos de primitivas de Puntos, Líneas, Curvas y Caracteres.II) Marco conceptual


III) Prácticas1) Grosor de punto.

IV) Tarea

Implementar una aplicación para dibujar líneas arbitrarias con un determinado grosor de Línea.

Modifique la aplicación anterior para evitar las puyas en las líneas de grosor utilizando extremos cuadrado, redondeado, etc.

Implementar una aplicación para dibujar polilineas de un determinado grosor de línea evitar los huecos en las esquinas.

Implementar una aplicación para dibujar una circunferencia con un derminado grosor de línea.

Implementar una aplicación para dibujar una elipse con un derminado grosor de línea.

Laboratorio 006: Transformaciones Geométricas 2D Básicas


Implementar transformaciones geométricas 2D básicas de traslación, rotación y escalamiento de Poligonos.



III) Prácticas1) Dibujar un poligono.IV) Tarea

Implementar un programa para realizar la traslación, rotación y escalamiento de una figura poligonal.

Laboratorio 007: Transformaciones de escalonado en punto fijo y rotaciones en punto pivot


Implementar operaciones de transformado de escalamiento en punto fijo y rotaciones en punto pivot.




Implementar un programa para realizar las operaciones de transformación.

Laboratorio 008: Transformaciones compuestas


Implementar los operadores para transformaciones compuestas utilizando matrices homogéneas.




Aplicar las operaciones para transformaciones compuestas.

Laboratorio 009: Reflexiones e Inclinaciones


Implementar transformaciones de inclinación y reflexión considerando casos de ejes básicos y genéricos.




Demostraciones de reflexiones

Laboratorio 010: Algoritmos de Recorte


Implementar los algoritmos de recorte.II) Marco conceptual



Implementar Algoritmos de recorte.

laboratorio grafica.docx

Documents