miércoles, 19 de febrero de 2014

Práctica 2 Code Blocks

En esta práctica utilizaremos la primitiva llamada GL_QUADS y GL_TRIANGLEs para dibujar cuadros y triángulo sobre sí mismos. GL_QUADS necesita 4 vértices (gVertex) para poder ser dibujado, mientras que GL_TRIANGLES necesita 3.
Para empezar, todos los códigos son exactamente los mismos, lo único que cambiaremos será en glBegin al darle los parámetros. Como las paqueterías son las mismas, no las he puesto en el código.


void display(void)
{
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glClear(GL_COLOR_BUFFER_BIT);
    glPointSize(1);
    glLineWidth(5);
    gluOrtho2D(-10,10,-10,10);
    glColor3f(1.0,0.0,0.0);
    float j=0;//Esta variable es usada para cambiar el color de cada cuadro y se diferencien.
    glBegin(GL_QUADS); /*Aquí es donde colocaremos una de las primitivas ya mencionadas, en este caso es GL_QUADS*/
    for(int i=10;i>0;i--)//Usamos un ciclo para dibujar el cuadro en sí mismo un determinado número de veces
        {
                    j=j+0.1;
                    glColor3f(0.0,0.0,j);//Como la variable cambia de valor, el color también
/*A continuación se dibujan cada uno de los vértices del cuadro que cambiarán de posición con cada iteración*/
                    glVertex2i(-i,i);//Vértice superior izquierdo
                    glVertex2i(i,i);//Vértice superior derecho
                    glVertex2i(i,-i);//Vértice inferior derecho
                    glVertex2i(-i,-i);//Vértice inferior izquierdo
        }
    glEnd();
    glFlush();
}

El resultado será:


Ahora para usar la primitiva GL_TRIANGLES solo lo ponemos como parámetro en el glBegin mientras que todo lo demás se queda igual.
float j=0;
    glBegin(GL_TRIANGLES);
    for(int i=10;i>0;i--)
        {
                    j=j+0.1;
                    glColor3f(j,j,0.0);
                    glVertex2i(0,i);//Vértice superior
                    glVertex2i(i,-i);//Vértice derecho
                    glVertex2i(-i,-i);//Vértice izquierdo
        }
Esta es la imagen de como queda dibujado:



El ciclo comienza abarcando toda la pantalla, mientras se decrementa con cada iteración, así logramos que se haga pequeño cada vez más y más.


martes, 18 de febrero de 2014

Practica 1 con Code Blocks

#ifdef __APPLE__
#include <GLUT/glut.h>
#else
#include <GL/gl.h>
#include <GL/glut.h>
#endif

#include <stdlib.h>

/* Aquí todas las paqueterías son las mismas que en el ejemplo que vimos anteriormente solo le agregamos #include <GL/gl.h> después del else */

void display(void)//Usamos el método display para mostrar lo que dibujaremos en la ventana de opengl
{
    glMatrixMode(GL_PROJECTION);//Le decimos que será en modo matriz
    glLoadIdentity();
    glClear(GL_COLOR_BUFFER_BIT);
    glPointSize(10);//Indicamos que el tamaño del punto será de 10
    glLineWidth(5);//Indicamos el tamaño de línea de 5
    gluOrtho2D(-10,10,-10,10);
         /*Indicamos que nuestra ventana la manejaremos de -10 a 10 tanto en x como y*/
    glColor3f(1.0,0.0,0.0);//Color de las cosas que dibujaremos
    glBegin(GL_POINTS);
/*Usamos el glbegin para decirle que comenzaremos a dibujar y el GL_POINTS para indicarle que las coordenadas que le daremos serán de puntos*/
    for(float i=11; i!=-11 ;i-- ) //Usamos dos ciclos anidados para que cubra toda la pantalla de puntos
        {
            for(float j=11;j!=-11;j--)
            {
            glVertex2f( i , j ); //Instrucción para dibujar un punto (de parametro se da x y y)
            }
        }

    glEnd();//Indicamos que termine de dibujar
    glFlush();//Le decimos que pare
}

//Todo este código es para configurar la ventana como lo vimos en el paso anterior
int main(int arge, char** argv)
{
    glutInit(&arge, argv);
    glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);
    glutInitWindowSize(600,600);
    glutCreateWindow("Clase 1");
    glutDisplayFunc(display);
    glutMainLoop();
}


El resultado debe de ser el siguiente:




Para hacer el mismo ejercicio pero con líneas usamos todo lo anterior visto pero con el ciclo diferente.

for(float i=-10;i<10;i++)
    {
    glColor3f(1.0,0.0,0.0);
       glVertex2f( i , 10 );
       glVertex2f( i , -10 );
       glVertex2f( 10 , i);
       glVertex2f( -10 ,i );
    }
Indicamos que dibuje una línea desde i con 10 hasta -10 para las líneas verticales y para las orizontales lo contrario. El resultado es este:



Programa inicial de code blocks

El siguiente código de programa que mostraré fue hecho con Code Blocks como un código predefinido. Partiremos desde la idea de que ya tenemos instalado Code Blocks en nuestra PC. Lo abrimos y nos encontramos con el menú, donde seleccionaremos Create new project.



Luego nos aparecerá el siguiente sub-menu en el cual desplazamos todas las opciones (All-categories) y seleccionamos 2D/3D Graphics. Para continuar le picamos en Go.


Y luego nos aparecerá una pantalla donde nos pedirá el título y la dirección a guardar (el nombre de proyecto se auto escribe conforme al título). Colocamos el que queramos y luego damos en next.


Las siguientes dos pantallas muestran en dónde queremos la ubicación de los glut y la otra información del compilador, en mi caso daré ok pues no tengo algo que configurar en ninguna de las dos.




En la última imagen nos muestra como debería de quedar el programa después de todo lo anterior, desplegamos la carpeta que dice sources y damos doble clic en main.cpp para mostrar el código fuente.

El siguiente código se muestra:

#ifdef __APPLE__
#include <GLUT/glut.h>
#else
#include <GL/gl.h> //Original mente esto no venía incluido así que se lo incluí para que corriera el programa
#include <GL/glut.h>
#endif

#include <stdlib.h>
//El símbolo # significa incluir paqueterías


static int slices = 16;
static int stacks = 16;

/* GLUT callback Handlers */

static void resize(int width, int height)
//método resize el cual permite re-dimensionar las figuras dentro de la pantalla sí esta se altera de tamaño
{
    const float ar = (float) width / (float) height;

    glViewport(0, 0, width, height);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glFrustum(-ar, ar, -1.0, 1.0, 2.0, 100.0);

    glMatrixMode(GL_MODELVIEW); //Indica que la pantala estará en modo matriz
    glLoadIdentity() ;
}

static void display(void)//Este método despliega las figuras
{
    const double t = glutGet(GLUT_ELAPSED_TIME) / 1000.0;
    const double a = t*90.0;

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glColor3d(1,0,0);

    glPushMatrix();
        glTranslated(-2.4,1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
        glutSolidSphere(1,slices,stacks);//Este crea la figura sólida de la esfera
    glPopMatrix();

    glPushMatrix();
        glTranslated(0,1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
        glutSolidCone(1,1,slices,stacks);//Muestra la figura solida del cono
    glPopMatrix();

    glPushMatrix();
        glTranslated(2.4,1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
        glutSolidTorus(0.2,0.8,slices,stacks);//Muestra la figura sólida del círculo
    glPopMatrix();

    glPushMatrix();
        glTranslated(-2.4,-1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
        glutWireSphere(1,slices,stacks);//La figura esfera con líneas
    glPopMatrix();

    glPushMatrix();
        glTranslated(0,-1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
        glutWireCone(1,1,slices,stacks);//Figura del cono con líneas
    glPopMatrix();

    glPushMatrix();
        glTranslated(2.4,-1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
        glutWireTorus(0.2,0.8,slices,stacks);//Figura del anillo con líneas
    glPopMatrix();

    glutSwapBuffers();
}


static void key(unsigned char key, int x, int y)
{
    switch (key)
    {
        case 27 :
        case 'q':
            exit(0);
            break;

        case '+':
            slices++;
            stacks++;
            break;

        case '-':
            if (slices>3 && stacks>3)
            {
                slices--;
                stacks--;
            }
            break;
    }

    glutPostRedisplay();
}

static void idle(void)
{
    glutPostRedisplay();
}

const GLfloat light_ambient[]  = { 0.0f, 0.0f, 0.0f, 1.0f };
const GLfloat light_diffuse[]  = { 1.0f, 1.0f, 1.0f, 1.0f };
const GLfloat light_specular[] = { 1.0f, 1.0f, 1.0f, 1.0f };
const GLfloat light_position[] = { 2.0f, 5.0f, 5.0f, 0.0f };

const GLfloat mat_ambient[]    = { 0.7f, 0.7f, 0.7f, 1.0f };
const GLfloat mat_diffuse[]    = { 0.8f, 0.8f, 0.8f, 1.0f };
const GLfloat mat_specular[]   = { 1.0f, 1.0f, 1.0f, 1.0f };
const GLfloat high_shininess[] = { 100.0f };

/* Program entry point */

int main(int argc, char *argv[])
{
    glutInit(&argc, argv);
    glutInitWindowSize(640,480);//Las dimenciones de la ventana a desplegar
    glutInitWindowPosition(10,10);//Posición inicial de la ventana
    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
    glutCreateWindow("GLUT Shapes");//Nombre que tendrá ventana

    glutReshapeFunc(resize);//Llama al método resize
    glutDisplayFunc(display);//Llama a la muestra de las figuras
    glutKeyboardFunc(key);
    glutIdleFunc(idle);

    glClearColor(1,1,1,1);
    glEnable(GL_CULL_FACE);
    glCullFace(GL_BACK);

    glEnable(GL_DEPTH_TEST);
    glDepthFunc(GL_LESS);

    glEnable(GL_LIGHT0);
    glEnable(GL_NORMALIZE);
    glEnable(GL_COLOR_MATERIAL);
    glEnable(GL_LIGHTING);

    glLightfv(GL_LIGHT0, GL_AMBIENT,  light_ambient);
    glLightfv(GL_LIGHT0, GL_DIFFUSE,  light_diffuse);
    glLightfv(GL_LIGHT0, GL_SPECULAR, light_specular);
    glLightfv(GL_LIGHT0, GL_POSITION, light_position);

    glMaterialfv(GL_FRONT, GL_AMBIENT,   mat_ambient);
    glMaterialfv(GL_FRONT, GL_DIFFUSE,   mat_diffuse);
    glMaterialfv(GL_FRONT, GL_SPECULAR,  mat_specular);
    glMaterialfv(GL_FRONT, GL_SHININESS, high_shininess);

    glutMainLoop();

    return EXIT_SUCCESS;
}

Todo esto muestra la siguiente figura:






























Conceptos Básicos de graficación

Introducción
La gráfica por computadora es la creación, almacenamiento, manipulación y despliegue de imágenes con la asistencia de una computadora.



Gráfica interactiva

Es la técnica de utilizar comunicación bidireccional entre la computadora y el usuario en la que la computadora se comunica con imágenes gráficas. La computadora, al recibir señales del usuario, modifica la imagen. Y el usuario, viendo la imagen, puede tomar acciones para modificarla. Un ejemplo son los video-juegos, en ellos miramos como nuestro personaje se mueve conforme nosotros queramos, dependiendo de la situación que presente el video.









Gráfica pasiva
La gráfica pasiva es simplemente una representación de datos en una manera visual, sin alguna interacción entre el programa y el usuario. Ejemplos de estos son programas que crean gráficas como el Geogebra , o programas que crean videos (windows movie maker, Sony vegas, etc).





El beneficio más grande que aportan las gráficas por computadoras es en el ambiente educativo, ya que mediante una imagen podemos representar una gran cantidad de datos. Ejemplos de aplicaciones en estas son:
Películas
Juegos
Simulación
Nuevos espacios de información
Realidad virtual y aumentada
Generación de imágenes médicas
Visualización



Interacción

A continuación daré algunos conceptos en la interacción de la graficación, cabe resaltar que solo puse los conceptos con los cuales estoy familiarizado, todos los demás que son desconocidos para mi los omití.
La interacción afecta a las fases donde transformamos datos en información y ésta en representaciones (gráficas).

La manera en que la interacción trabaja con las visualizaciones es por medio de datos. Los datos muestran información que depende de los datos. Dependiendo de esta información será visualizada una representación.
Existe 3 tipos de interacción: La interacción con transformaciones de datos, con el tipo de representación gráfica y transformaciones geométricas.

Interacción con trasformaciones de datos***
Aquí se trabaja con consultas de bases de datos, mostrando los subconjuntos de datos que queramos mostrar de igual forma con transformaciones estadísticas (sí deseáramos visualizar promedios o algunas magnitudes estadísticas). El último tipo de interacción es con las transformaciones geométricas, este afecta a la representación del objeto podemos alterar la perspectiva o el ángulo de rotación al igual que el zoom.

Además de estos tipos de interacción, existen varias técnicas de interacción que podemos usar:

***Interacción con transformaciones de datos:
1.-Consultas dinámicas:
Solo se presenta cierta cantidad de información al usuario, como por ejemplo cuando usamos sliders. Nosotros podemos ver la información que está seleccionada por el slider, mientras que la otra permanece oculta.


2.-Recorrido directo: Esta técnica es usada para desplegar información por medio de hyper-vínculos.

3.-Detalles a la carta: Permite al usuario expandir los detalles de un pequeño conjunto de objetos.


4.-Brushing: Se usa para mostrar los mismos objetos con diferentes vistas.



***Interacción con la correspondencia entre datos y forma visual:

1.-Tablas dinámicas: Con esta técnica es posible manipular los datos con tablas y columnas, este tipo de técnica se aprecia en las hojas de cálculo.

***Interacción con las transformaciones geométricas

1.-Selección directa: Enfatiza objetos, ya sean individuales o en grupo.


2.-Movimiento de cámara: Visualiza diferentes áreas de la presentación de datos. Nosotros escogemos el lugar que deseamos visualizar.


3.-Zoom: Reduce los objetos que se encuentran al rededor para enfocarse en uno o algunos.