Este documento presenta 14 prácticas de diseño utilizando el software OpenGL. La introducción explica que OpenGL es una API para crear gráficos 2D y 3D a partir de primitivas geométricas como puntos, líneas y triángulos. Las prácticas 1-4 muestran cómo crear formas básicas como un tablero de ajedrez, una estrella, un cubo con líneas y un cubo delineado utilizando comandos como glBegin, glVertex y glEnd.
1. CECYTEM PLANTEL TECAMAC
(Colegio de Estudios Científicos y Tecnológicos del Estado de México)
Integrantes:
Ana Karen Avila Enciso
Jesica González Aguilar
Grupo: 303
N.L. 1 N.L. 14
Materia:
Utilización de Software de Diseño
Especialidad: Técnico en Informática.
Profesor: René Domínguez Escalona
Manual de Practicas del Segundo Parcial
2. Índice
1.-Tablero de Ajedrez
2.-Estrella
3.-Cubo con Líneas
4.-Cubo Delineado
5.-Muñeco con Triángulos
6.-Casita
7.-Oso
8.-Cubo con Cubitos
9.-Muñeo con Formas
10.-Animacion del Circulo
11.-Animacion del Sistema Solar
12.-Movimiento en Ocho
13.-Semaforo
14.-Piramide
3. INTRODUCCION.
OpenGL (Open Graphics Library) es una especificación estándar que define
una API multilenguaje y multiplataforma para escribir aplicaciones que produzcan
gráficos 2D y3D. La interfaz consiste en más de 250 funciones diferentes que
pueden usarse para dibujar escenas tridimensionales complejas a partir de
primitivas geométricas simples, tales como puntos, líneas y triángulos. Fue
desarrollada originalmente por Silicón Graphics Inc. (SGI) en 19922 y se usa
ampliamente en CAD, realidad virtual, representación científica, visualización de
información y simulación de vuelo. También se usa en desarrollo de videojuegos,
donde compite con Direct3D en plataformas Microsoft Windows
OpenGL tiene dos propósitos esenciales:
Ocultar la complejidad de la interfaz con las diferentes tarjetas gráficas,
presentando al programador una API única y uniforme.
Ocultar las diferentes capacidades de las diversas plataformas hardware,
requiriendo que todas las implementaciones soporten la funcionalidad completa de
OpenGL (utilizando emulación software si fuese necesario).
El funcionamiento básico de OpenGL consiste en aceptar primitivas tales como
puntos, líneas y polígonos, y convertirlas en píxeles. Este proceso es realizado por
una pipeline gráfica conocida como Máquina de estados de OpenGL.8 La mayor
parte de los comandos de OpenGL bien emiten primitivas a la pipeline gráfica o
bien configuran cómo la pipeline procesa dichas primitivas. Hasta la aparición de
la versión 2.0 cada etapa de la pipeline ejecutaba una función prefijada, resultando
poco configurable. A partir de la versión 2.0 algunas etapas son programables
usando un lenguaje de programación llamado GLSL.
OpenGL es una API basada en procedimientos de bajo nivel que requiere que el
programador dicte los pasos exactos necesarios para renderizar una escena. Esto
contrasta con las Apis descriptivas, donde un programador sólo debe describir la
escena y puede dejar que la biblioteca controle los detalles para representarla. El
diseño de bajo nivel de OpenGL requiere que los programadores conozcan en
profundidad la pipeline gráfica, a cambio de darles libertad para implementar
algoritmos gráficos novedosos.
4. Tablero de Ajedrez
Presentación o descripción:
En esta práctica realizaremos una tablero de Ajedrez con puntos esta solo para
empezar a poner en práctica la utilización de este programa.
Esta es la practica numero 1 y con esta empezamos a ver si es posible entenderle
a este programa.
Los cuadros deben de ir de color blanco y negro y este es el código para su
realización.
GlBegin (GL_POINTS);
Y
glPointSize(60); (Para definer el tamaño de los puntos)
Codigo:
//mi primer ventana
#include <GL/glut.h>
#include <GL/gl.h>
#include <GL/glu.h>
void inicializa(void)
{
glClearColor(1.0,0.0,1.0,0.0); //color de fondo
glMatrixMode(GL_PROJECTION); //Modo de proyeccion
glLoadIdentity(); //Establece los parametros de proyeccion
gluOrtho2D(0.0, 1050.0, 0.0, 1000.0); //vista ortogonal
}
8. glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA); //establece el modo de
visualización
glutInitWindowSize(500,500); //tamaño de la ventana
glutInitWindowPosition(0,0); //posicion inicial de la ventana
glutCreateWindow("MI primer ventana"); //nombre de la ventana
inicializa();
glutDisplayFunc(dibuja); //Envia los graficos a la ventana de
visualización
glutMainLoop(); //muestra todo y espera
return 0; //retorna un valor de cero
}
9. Estrella
Presentación o descripción:
En esta práctica realizaremos una estrella como con puras líneas.
Esta es la practica numero 2 y con esta empezamos utilizaremos solamente líneas
que es la siguiente instrucción:
glBegin(GL_LINES);
Codigo:
//mi primer ventana
#include <GL/glut.h>
#include <GL/gl.h>
#include <GL/glu.h>
void inicializa(void)
{
glClearColor(0.0,0.0,0.0,0.0); //color de fondo
glMatrixMode(GL_PROJECTION); //Modo de proyeccion
glLoadIdentity(); //Establece los parametros de proyeccion
gluOrtho2D(0.0, 1000.0, 0.0, 1000.0); //vista ortogonal
}
void dibuja(void) //funcion dibuja
{
glClear(GL_COLOR_BUFFER_BIT); //borra pantalla
glColor3f(1.0 , 0.0 , 0.0);
11. glutDisplayFunc(dibuja); //Envia los graficos a la ventana de
visualización
glutMainLoop(); //muestra todo y espera
return 0; //retorna un valor de cero
}
Y asi es como queda:
12. Cubo con Líneas
Presentación o descripción:
En esta práctica realizamos un cubo con puras líneas asiendo el efecto para que
se vea como en 3D pero aun no se vera asi.
Esta es la practica numero 3 y en esta aprenderemos a utilizar aun mas y poner
en practica las líneas.
En esta práctica podemos utilizar las siguientes instrucciones que ya hemos
aprendido como se utilizan en todas las clases anteriores:
glBegin(GL_LINES);
Codigo:
//TABLERO DE AJEDREZ
#include <GL/glut.h>
#include <GL/gl.h>
#include <GL/glu.h>
void inicializa(void)
{
glClearColor(0.0,0.0,0.0,0.0); //color de fondo
glMatrixMode(GL_PROJECTION); //Modo de proyeccion
glLoadIdentity(); //Establece los parametros de proyeccion
gluOrtho2D(0.0, 1000.0, 0.0, 1000.0); //vista ortogonal
}
15. return 0; //retorna un valor de cero
}
Asi es como queda:
16. Cubo delineado
Presentación o descripción:
En esta práctica realizamos un cubo pro tendremos que marcar muy bien sus
líneas para darle otro tipo de vista
Esta es la practica numero 4 y en esta aprenderemos a utilizar aun mas y poner
en practica las líneas.
En esta práctica podemos utilizar las siguientes instrucciones que ya hemos
aprendido como se utilizan en todas las clases anteriores:
glBegin(GL_LINES);
glBegin(GL_QUADS);
Codigo:
//TABLERO DE AJEDREZ
#include <GL/glut.h>
#include <GL/gl.h>
#include <GL/glu.h>
void inicializa(void)
{
glClearColor(0.0,0.0,1.0,0.0); //color de fondo
glMatrixMode(GL_PROJECTION); //Modo de proyeccion
glLoadIdentity(); //Establece los parametros de proyeccion
gluOrtho2D(0.0, 1000.0, 0.0, 1000.0); //vista ortogonal
}
19. glVertex2i(250,250);
glVertex2i(250,150);
glEnd();
glFlush(); //forza dibujo
}
int main (int argc, char** argv) //metodo main
{
glutInit(&argc, argv); //incializa GLUT
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA); //establece el modo de
visualización
glutInitWindowSize(500,500); //tamaño de la ventana
glutInitWindowPosition(0,0); //posicion inicial de la ventana
glutCreateWindow("MI primer ventana"); //nombre de la ventana
inicializa();
glutDisplayFunc(dibuja); //Envia los graficos a la ventana de
visualización
glutMainLoop(); //muestra todo y espera
return 0; //retorna un valor de cero
}
20.
21. Casita
Presentación o descripción:
En esta práctica realizamos una casa utilizando todo tipo de figuras
acomodándolas en un orden para que represente una casita
Esta es la practica número 6.
En esta práctica podemos utilizar las siguientes instrucciones que ya hemos
aprendido como se utilizan en todas las clases anteriores:
glBegin(GL_QUADS);
glBegin(GL_LINES);
glBegin(GL_POLYGON);
glBegin(GL_TRIANGLES);
glBegin(GL_POINTS);
//mi primer ventana
#include <GL/glut.h>
#include <GL/gl.h>
#include <GL/glu.h>
void inicializa(void)
{
glClearColor(0.0,0.0,0.0,0.0); //color de fondo
glMatrixMode(GL_PROJECTION); //Modo de proyeccion
glLoadIdentity(); //Establece los parametros de proyeccion
gluOrtho2D(0.0, 1000.0,0.0, 1000.0); //vista ortogonal
36. glVertex2i(850,530);
glEnd();
int i,a=9;
glColor3f(0.3 , 1.0 , 0.2);
glLineWidth(3);
glBegin(GL_LINES);
for(i=0;i<=14;i++){
glVertex2i(1000-a*i,530+a*i);
glVertex2i(740+a*i,530+a*i);
}
glEnd();
glFlush(); //forza dibujo
}
int main (int argc, char** argv) //metodo main
{
glutInit(&argc, argv); //incializa GLUT
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA); //establece el modo de
visualización
glutInitWindowSize(750,750); //tamaño de la ventana
glutInitWindowPosition(0,0); //posicion inicial de la ventana
glutCreateWindow("MI primer ventana"); //nombre de la ventana
inicializa();
37. glutDisplayFunc(dibuja); //Envia los graficos a la ventana de
visualización
glutMainLoop(); //muestra todo y espera
return 0; //retorna un valor de cero
}
38. Osita
Presentación o descripción:
En esta práctica realizamos un osito en este caso nosotras hicimos osita y
aprenderemos a manejar los circulos
Esta es la practica numero 7 y debemos de utilizar puros círculos para su
realizacion
En esta práctica podemos utilizar las siguientes instrucciones que ya hemos
aprendido como se utilizan en todas las clases anteriores:
int angulo=0;
glPointSize(t);
glBegin(GL_POINTS);
//glColor3f (1.0, 0.0, 1.0);
glVertex2f(x,y);
//glColor3f(0,0.0,0.0);
for (angulo=0;angulo<=360; angulo+=1){ glVertex2f(x +
sin(angulo) * radio, y + cos(angulo) * radio);}
glEnd();
}
void circulo(int x, int y, int radio)
{
int angulo=0;
glBegin(GL_TRIANGLE_FAN);
// glColor3f (1.0, 0.0, 1.0);
glVertex2f(x,y);
39. for (angulo=0;angulo<=360; angulo+=1){ glVertex2f(x +
sin(angulo) * radio, y + cos(angulo) * radio);}
glEnd();
El código que utilizamos en esta práctica es el siguiente:
//mi primer ventana
#include <GL/glut.h>
#include <GL/gl.h>
#include <math.h>
void inicializa(void)
{
glClearColor(0.2,0.8,1.0,0.0); //color de fondo
glMatrixMode(GL_PROJECTION); //Modo de proyeccion
glLoadIdentity(); //Establece los parametros de proyeccion
gluOrtho2D(0.0, 500.0, 0.0, 500.0); //vista ortogonal
}
void circuloc(int x, int y, int t, int radio)
{
int angulo=0;
glPointSize(t);
glBegin(GL_POINTS);
//glColor3f (1.0, 0.0, 1.0);
glVertex2f(x,y);
//glColor3f(0,0.0,0.0);
for (angulo=0;angulo<=360; angulo+=1){ glVertex2f(x +
sin(angulo) * radio, y + cos(angulo) * radio);}
40. glEnd();
}
void circulo(int x, int y, int radio)
{
int angulo=0;
glBegin(GL_TRIANGLE_FAN);
// glColor3f (1.0, 0.0, 1.0);
glVertex2f(x,y);
for (angulo=0;angulo<=360; angulo+=1){ glVertex2f(x +
sin(angulo) * radio, y + cos(angulo) * radio);}
glEnd();
}
void dibuja(void) //funcion dibuja
{
glClear(GL_COLOR_BUFFER_BIT);
//cuerpo del osito
glColor3f(1.0,0.1,0.7); //borra pantalla
circulo(250,250,100);
//cabeza del osito
glColor3f(1.0,0.1,0.7); //borra pantalla
circulo(250,400,75);
//pansiita
41. glColor3f(1.0,0.0,1.0); //borra pantalla
circulo(250,250,75);
//piessitos del osito
glColor3f(1.0,0.1,0.7); //borra pantalla
circulo(175,175,25);
//piessitos del osito
glColor3f(1.0,0.1,0.7); //borra pantalla
circulo(320,175,25);
//orejitas del osito
glColor3f(1.0,0.1,0.7); //borra pantalla
circulo(300,475,25);
//orejitas del osito
glColor3f(1.0,0.1,0.7); //borra pantalla
circulo(200,475,25);
//manitas del osito
glColor3f(1.0,0.1,0.7); //borra pantalla
circulo(150,300,25);
//manitas del osito
glColor3f(1.0,0.1,0.7); //borra pantalla
circulo(350,300,25);
//ojitos del osito
glColor3f(0.0,0.0,0.0); //borra pantalla
circulo(230,425,15);
//ojitos del osito
glColor3f(0.0,0.0,0.0); //borra pantalla
42. circulo(275,425,15);
//nariz del osito
glColor3f(0.0,0.0,0.0); //borra pantalla
circulo(250,400,5);
//boca dl osito
glColor3f(0.0,0.0,0.0); //borra pantalla
circulo(250,375,15);
//ojitos del osito
glColor3f(1.0,1.0,1.0); //borra pantalla
circulo(230,425,5);
//ojitos del osito
glColor3f(1.0,1.0,1.0); //borra pantalla
circulo(275,425,5);
glFlush(); //forza dibujo
}
int main (int argc, char** argv) //metodo main
{
glutInit(&argc, argv); //incializa GLUT
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA); //establece el modo de
visualización
glutInitWindowSize(500,500); //tamaño de la ventana
glutInitWindowPosition(100,100); //posicion inicial de la ventana
glutCreateWindow("Ventana"); //nombre de la ventana
43. inicializa();
glutDisplayFunc(dibuja); //Envia los graficos a la ventana de
visualización
glutMainLoop(); //muestra todo y espera
return 0; //retorna un valor de cero
}
44. Cubo con Cubitos
Presentación o descripción:
En esta práctica realizamos un cubo echo de cubitos pequeños
Esta es la practica numero 8 y utilizaremos puros cubitos.
En esta práctica podemos utilizar las siguientes instrucciones que ya hemos
aprendido como se utilizan en todas las clases anteriores:
glBegin(GL_QUADS);
El código que utilizamos en esta práctica es el siguiente:
//mi primer ventana
#include <GL/glut.h>
#include <GL/gl.h>
#include <GL/glu.h>
void inicializa(void)
{
glClearColor(0.0,0.0,.0,0.0); //color de fondo
glMatrixMode(GL_PROJECTION); //Modo de proyeccion
glLoadIdentity(); //Establece los parametros de proyeccion
gluOrtho2D(0.0, 4000.0, 0.0,4000.0); //vista ortogonal
}
void dibuja(void) //funcion dibuja
92. Muñeco con Formas.
Presentación o descripción:
En esta práctica realizamos un muñeco con muchas figuras, como triángulos,
cuadrados, rectángulos, círculos, etc.
Debemos realizar esta practica en una clase solamente ya que es como un
examen para ver como trabajamos y todo lo que hemos aprendido sobre este
programa.
En esta práctica podemos utilizar las siguientes instrucciones que ya hemos
aprendido como se utilizan en todas las clases anteriores:
GlBegin (GL_QUADS);
GlBegin (GL_TRIANGLES);
GlBegin (GL_POLYGON);
GlBegin (GL_LINES);
Circulo ();
El código que utilizamos en esta práctica es el siguiente:
Void dibuja (void) //función dibuja
{
GlClear (GL_COLOR_BUFFER_BIT);
//cabello
glColor3f (0.0, 0.0, 0.0);
GlBegin (GL_TRIANGLES);
glVertex2i (280,400);
glVertex2i (290,400);
glVertex2i (350,450);
//cabello
glColor3f (0.0, 0.0, 0.0);
GlBegin (GL_TRIANGLES);
glVertex2i (280,400);
glVertex2i (290,400);
glVertex2i (325,500);
//cabello
glColor3f (0.0, 0.0, 0.0);
96. ANIMACION CÍRCULO.
Presentación o descripción:
En esta práctica realizaremos una animación en Dev c++ esta vez no utilizaremos
cuadrados ni triángulos ahora solo utilizaremos un circulo y unas nuevas
instrucciones que el profesor nos dio.
Lo que tenemos que realizar es que un circulo avance hacia enfrente, hacia abajo,
hacia atrás, hacia arriba, en este orden una y otra vez.
Nos tenemos que guiar con un trabajo que el profesor nos dio pero que solo
avanza hacia enfrente, ahora tenemos que cambiar el código para que realice las
siguientes acciones.
La instrucción que utilizamos fue la siguiente:
if(y>=1 && y<600 && x==1000){
circulo(1000,700-y,40);
glFlush();
y++;
}
El código de toda la práctica es el siguiente:
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
if(x>=1 && x<1000){
circulo(2+1*x,700,40);
glFlush();
x++;
}
if(y>=1 && y<600 && x==1000){
circulo(1000,700-y,40);
glFlush();
y++;
}
if(w>=1 && w<1000 && y==600 && x==1000){
circulo(1000-w,100,40);
glFlush();
w++;
}
if(z>=1 && z<1000 && y==600 && x==1000 && w==1000){
circulo(5,100+z,40);
glFlush();
z++;
if(z==600) {z=1;x=1;y=1;w=1;}
}
98. ANIMACION DEL SISTEMA SOLAR.
Presentación o descripción:
En esta practica también vamos a realizar una animación en Dev c++ pero ahora
realizaremos un sistema solar realizaremos nuestro sistema solar con movimiento
tanto de los planetas como de las orbitas.
Podemos ponerle el diseño que nosotros deseemos, tenemos que guiarnos con
una instrucción que el profesor nos pasó y también con su ayuda.
La instrucción que utilizamos fue la siguiente:
int angulo=0;
glBegin(GL_TRIANGLE_FAN);
glVertex2f(x,y);
for (angulo=0;angulo<=360; angulo++){ glVertex2f(x +
sin(angulo) * radio, y + cos(angulo) * radio);}
glEnd();
El código de toda la práctica fue el siguiente:
void circulo(int x, int y, int radio)
{
int angulo=0;
glBegin(GL_TRIANGLE_FAN);
glVertex2f(x,y);
for (angulo=0;angulo<=360; angulo++){ glVertex2f(x +
sin(angulo) * radio, y + cos(angulo) * radio);}
glEnd();
}
void dibuja(void)
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);//esto
//sol
glColor3f (1.0, 1.0, 0.0);
circulo( 500,500,50);
100. g=g+0.03;
k=k+0.02;
ang=ang+0.01; //velocidad entre mas grande mas rapido y entre menos mas lento
for(int j=1;j<=10000000;j++){}//pausa
if(ang==360){ang=0;}// se repite idefinidamente
glFlush(); //forzar dibujado
glutSwapBuffers(); //y esto
}
SALIDA:
101. MOVIMIENTO EN OCHO.
Presentación o descripción:
En esta practica también realizaremos una animación pero ahora será con dos
círculos, lo que haremos será que en un dibujo parecido en ocho y ahora tenemos
que hacer que dos círculos se muevan como si fueran un carro en una pista.
La instrucción que utilizamos en esta practica es:
if(a>=6.15 && a<=12.41){
circulo(300+ sin (a)*60,300- cos(a)*60,10);
a=a +0.01;
}
else{
circulo(300 + sin (b) *60,180+cos(b)*60,10);
b=b + 0.01;
if(b>12.4){a=6.15;b=6.15;}
for(int j=0; j<=10; j++) {}
El código completo de esta práctica es el siguiente:
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glColor3f(1.0, 1.0, 0.0);
circulo(300, 300, 70);
circulo(300,180,70);
glColor3f(1.0,1.0,1.0);
circulo(300,300,50);
circulo(300,180,50);
glColor3f(0.0,0.0,0.0);
if(a>=6.15 && a<=12.41){
circulo(300+ sin (a)*60,300- cos(a)*60,10);
a=a +0.01;
}
else{
circulo(300 + sin (b) *60,180+cos(b)*60,10);
103. SEMAFORO:
Presentación o descripción:
En esta practica realizaremos un semáforo, logrando que se cambien de color y
que cuando este en verde parpadee un poco después el amarillo y por ultimo en
color rojo.
El profesor nos paso un trabajo ya terminado y después nos explico como
realizarlo además de que igual nos paso un video tutorial de cómo realizarlo.
El código completo de esta practica es el siguiente:
#include <GL/glut.h>
#include <GL/gl.h>
#include <math.h>
void inicializa(void)
{
glClearColor(0.0,0.0,0.0,0.0); //color de fondo
glMatrixMode(GL_PROJECTION); //Modo de proyeccion
glLoadIdentity(); //Establece los parametros de proyeccion
gluOrtho2D(0.0, 500.0, 0.0, 500.0); //vista ortogonal
}
void circuloc(int x, int y, int t, int radio)
{
int angulo=0;
glPointSize(t);
glBegin(GL_POINTS);
//glColor3f (1.0, 0.0, 1.0);
glVertex2f(x,y);
//glColor3f(0,0.0,0.0);
for (angulo=0;angulo<=360; angulo+=1){ glVertex2f(x +
sin(angulo) * radio, y + cos(angulo) * radio);}
glEnd();
}
void circulo(int x, int y, int radio)
{
int angulo=0;
glBegin(GL_TRIANGLE_FAN);
// glColor3f (1.0, 0.0, 1.0);
glVertex2f(x,y);
for (angulo=0;angulo<=360; angulo+=1){ glVertex2f(x +
sin(angulo) * radio, y + cos(angulo) * radio);}
105. PIRAMIDE.
Presentación o Descripción:
En esta practica realizaremos una pirámide que solo se vera por la parte de arriba
para esto tenemos que guiarnos con la instrucción que el profesor ya nos paso
anteriormente.
También con su ayuda realizaremos lo que falta de la práctica.
Esta práctica se realizara más fácilmente con la instrucción Ford para que sea
más fácil.
El código completo de esta práctica es el siguiente:
void dibuja(void) //funcion dibuja
{int i,a=20;
glClear(GL_COLOR_BUFFER_BIT); //borra pantalla
glColor3f(0.0 , 0.0 , 0.0);
glLineWidth(2);
glBegin(GL_LINES);
//valor inicial----valor final
for(i=1;i<=10;i++){
//abajo
glVertex2i(240-20*i,240-20*i);
glVertex2i(260+20*i,240-20*i);
//derecha
glVertex2i(260+20*i,240-20*i);
glVertex2i(260+20*i,260+20*i);
//Izquierda
glVertex2i(240-20*i,240-20*i);
glVertex2i(240-20*i,260+20*i);
//arriba
glVertex2i(240-20*i,260+20*i);
glVertex2i(260+20*i,260+20*i);
}