S.E.P. D.G.E.S.T. D.I.T.D.

INSTITUTO TECNOLÓGICO SUPERIOR DE LIBRES

Organismo Público Descentralizado del Gobierno del Estado de Puebla

INGENIERÍA EN SISTEMAS COMPUTACIONALES

WebQuest: Primitivas gráficas

PRESENTA:

IVONNE SALGADO BENITO

LIBRES, PUEBLA, FEBRERO DE 2012

INTRODUCCIÓN

La graficación hecha por computadora es el campo de la computación, donde se

utilizan computadoras tanto para generar imágenes visuales sintéticamente como

integrar o cambiar la información visual y espacial probada del mundo real.

El primer mayor avance en la gráfica realizada por computadora fue el

desarrollo de Sketchpad en 1962 por Ivan Sutherland; el cual utilizaba como base

el trazo de puntos, líneas y polígonos, para crear objetos a partir de un rayo de luz.

Esta trabajo pretende que el estudiante en ésta área conozca y aplique los

fundamentos teóricos que integran las primitivas gráficas, a partir de la ejecución

de algoritmos sustentados por la geometría. Esto a través del uso de la plataforma

.NET y las librerías OpenGL.

CONCEPTOS FUNDAMENTALES DE LAS PRIMITIVAS GRÁFICAS

Sistema De Coordenadas Cartesianas

Método para definir la posición de un punto por medio de su distancia

perpendicular a dos o más líneas de referencia.

En geometría plana, dos líneas rectas, llamadas eje x y eje y, forman la

base de un sistema de coordenadas Cartesianas en dos dimensiones. Por lo

general, el eje x es horizontal y el eje y es perpendicular a él. Al punto de

intersección de los dos ejes se le llama origen (O). Cualquier punto en este plano

se puede identificar por un par ordenado de números que representan las

distancias a los dos ejes. Por ejemplo, el punto (4, 2) es el punto que se encuentra

alejado 4 unidades del eje y en la dirección positiva del eje x y a 2 unidades del eje

x en la dirección positiva del eje y. [1]

Plano cartesiano

Está formado por dos rectas numéricas perpendiculares, una horizontal y otra

vertical que se cortan en un punto. La recta horizontal es llamada eje de las

abscisas o de las equis (x), y la vertical, eje de las ordenadas o de las yes, (y); el

punto donde se cortan recibe el nombre de origen.

El plano cartesiano tiene como finalidad describir la posición de puntos, los

cuales se representan por sus coordenadas o pares ordenados.

Las coordenadas se forman asociando un valor del eje de las equis a uno

de las yes, respectivamente, esto indica que un punto (P) se puede ubicar en el

plano cartesiano tomando como base sus coordenadas, lo cual se representa

como: P (x, y) [2]

Pixel

Abreviatura de Picture Element, es un único punto en una imagen gráfica. Los

monitores gráficos muestran imágenes dividiendo la pantalla en miles (o millones)

de pixeles, dispuestos en filas y columnas. Los pixeles están tan juntos que parece

que estén conectados.

El número de bits usados para representar cada pixel determina cuántos

colores o gamas de gris pueden ser mostrados. Por ejemplo, en modo color de 8-

bits, el monitor en color utiliza 8 bits para cada pixel, permitiendo mostrar 2

elevado a 8 (256) colores diferentes o gamas de gris. [3]

Línea

La línea geométrica por definición es un arte invisible. Es la traza que el punto deja

al moverse y por lo tanto es un producto suyo. Surge de la alteración del reposo

total del punto. Con ella se salta de una situación estática a una dinámica. La línea

se halla en el extremo opuesto al elemento primario, es decir al punto, y constituye

un elemento derivado o secundario. [4]

Círculo

La palabra círculo proviene del vocablo latino circŭlus, que es el diminutivo

de circus (“cerco”). Se trata de un sinónimo de redondel y, en el lenguaje

cotidiano, de circunferencia.

Sin embargo, una circunferencia es el lugar geométrico de los puntos del

plano equidistantes del centro. El círculo, en cambio, es el lugar geométrico de los

puntos contenidos en una circunferencia determinada. Por lo tanto, el círculo es la

superficie contenida dentro de la circunferencia y ésta es el perímetro del círculo.

[5]

Polígono

Un polígono es una porción de plano limitada por líneas rectas. Se trata de

una figura geométrica que está formada por segmentos consecutivos no

alienados, que reciben el nombre de lados.

Existen diversas clasificaciones de los polígonos. Se conoce como polígono

simple a aquel en el que dos de sus aristas no consecutivas no se cortan. En

el polígono complejo, en cambio, dos de sus aristas consecutivas sí se cortan. [6]

OpenGL

Open Graphics Library. Conjunto de especificaciones estándar que definen una

API multilenguaje ymultiplataforma para escribir aplicaciones o juegos que

producen gráficos en 3D. Fue desarrollada originalmente por Silicon Graphics

Incorporated (SGI).Ofrece al programador un API sencilla y estable para que

pueda generar gráficos en 2D y 3D porhardware. Consiste en más de 250

funciones diferentes que pueden ser usadas para graficar complejos escenarios

tridimensionales usando simples primitivas.

Es muy popular en la industria de los videojuegos y es competencia directa

(en plataformas Windows) del Direct3D desarrollado por Microsoft, Además es

compatible para múltiples plataformas como ser Windows, Unix (Linux, MacOS),

Playstation3. [7]

DEFINICIONES MATEMÁTICAS Y GEOMÉTRICAS

Pixel

(x,y,color);

Es la única primitiva a la que no se le aplica estilo alguno. Se pinta un pixel en

la posición (x,y) de la pantalla, del color especificado en color. Esto significa que

las direcciones de los ejes de imagen son las siguientes:

La dirección del eje X es de izquierda a derecha.

La dirección del eje Y es de arriba hacia abajo, contrario a la notación

convencional de matemática, donde la dirección del eje Y es hacia arriba.

Línea

(x0,y0,x1,y1);

Pinta una línea que va del punto (x0,y0) al punto (x1,y1) con el estilo que se haya

definido. Si no hay estilos definidos, se aplica el estilo por defecto.

Círculo

(x,y,radio);

Se pinta un círculo de centro (x,y) y radio „radio‟. El valor del radio debe ser un

número positivo para que tenga sentido. [8]

La circunferencia de un círculo es el conjunto de todos los puntos “α” que son

equidistantes de un punto fijo sobre el plano. Al punto fijo se le llama centro y a la

distancia de cualquier punto se le llama radio. [9]

Polígono

Por polígono se entiende una figura cuyos elementos sobresalientes son los

vértices („esquinas‟) y las aristas, completamente cerrada y de cada vértice

únicamente salen dos aristas.

Comenzamos con el caso particular de un rectángulo: los datos que

necesitamos depende de cómo vayamos a implementarlo. Si pensamos en él

considerando como información relevante una esquina, el ancho y el alto, lo

dibujaríamos como sigue:

Supongamos que la esquina escogida es la superior izquierda, y tiene por

coordenadas (x0,y0); las coordenadas de las cuatro esquinas son:

Por tanto, para dibujarlo haremos:

Linea(x0,y0,x0+ancho,y0);

Linea(x0,y0,x0,y0+alto);

Linea(x0+ancho,y0,x0+ancho,y0+alto);

Linea(x0,y0+alto,x0+ancho,y0+alto);

Ahora, si pensamos en un rectángulo considerando como información

relevante dos esquinas situadas en diagonal, lo pintaríamos de la siguiente forma:

Supongamos que las esquinas elegidas son la superior izquierda y la

inferior derecha, y tienen por coordenadas (x0,y0), (x1,y1), respectivamente; las

coordenadas de las cuatro esquinas son:

Y lo dibujamos con las siguientes funciones:

Linea(x0,y0,x1,y0);

Linea(x0,y0,x0,y1);

Linea(x1,y0,x1,y1);

Linea(x0,y1,x1,y1);

Ahora veamos cómo dibujar un polígono. Para ello, lo único que realmente

necesitamos conocer son las coordenadas de sus vértices, pues luego no

tendremos más que trazar líneas entre estos puntos para pintarlo. Sin embargo,

cualquier elección para trazar líneas entre vértices no nos van a dibujar un

polígono. Por ejemplo, si tenemos los siguientes cinco vértices:

Trazando líneas al azar podríamos conseguir la siguiente figura:

Cuando en realidad, la figura sería una de las siguientes cuatro posibles:

Para evitar el caso que hemos visto trazando líneas al azar, tenemos que

seguir un criterio a la hora de almacenar los vértices. La idea es la siguiente:

elegimos el orden en que queremos pintar los vértices, y los guardamos en un

vector, siguiendo ese orden. Una vez guardados, lo que hacemos es pintar una

línea que una el primer vértice con el segundo, una línea que una el segundo con

el tercero,…, y así seguimos, pintando una línea que una el penúltimo con el

último, y una línea que una el último con el primero (si no fuera así, no cerraríamos

la figura). Debe quedar claro que la ordenación de los vértices es algo que

depende del programador.

Como ejemplo, vamos a tomar la primera de las cuatro figuras

representadas antes; elegiremos una ordenación para los vértices y pintaremos la

figura siguiendo esa ordenación:

Creamos una estructura en la que almacenar las coordenadas de un punto

bidimensional, por ejemplo:

REGISTRO Punto 2 D?

x, y : real;

FIN

Y, a continuación, creamos un vector con cinco componentes, al que

seguidamente le asignamos las coordenadas (unas cualesquiera puestas a modo

de ejemplo):

Punto 2 D p1[5];

p1 [0].x ← 100;

p1 [0].y ← 20;

p1 [1].x ← 60;

p1 [1].y ← 20;

p1 [2].x ← 50;

p1 [2].y ← 60;

p1 [3].x ← 80;

p1 [3].y ← 40;

p1 [4].x ← 110;

p1 [4].y ← 60;

Finalmente, podemos dibujar las líneas, aprovechando un bucle:

DESDE i=0 MIENTRAS i<4 HACER

Línea (p1[i].x,p1[i].y,p1[i+1].x,p1[i+1].y);

FIN

Línea (p1[4].x,p1[4].y,p1[0].x,p1[0].y);

Queda como ejercicio al lector ordenar los vértices en las tres posibilidades

restantes y dibujar la correspondiente figura. [8]

Perímetro de un polígono

El perímetro de un polígono es igual a la suma de las longitudes de

sus lados.

Área de un polígono

El área de un polígono es la medida de la región

o superficie encerrada por un polígono. [10]

REPRESENTACIONES GRÁFICAS

Pixel

FIG. 1.1 Pixeles a

FIG. 1.2 Pixeles b

Línea

FIG. 2.1 Línea a

FIG. 2.2 Línea b

FIG. 2.3 Líneas

Circulo

FIG. 3.1 Circulo a

FIG. 3.2 Circulo b

FIG. 3.3 Circulo c

FIG. 3.4 Circulo d

FIG. 3.5 Circulo e

FIG. 3.5 Circulo f

Polígono

FIG. 4.1 Polígono a

FIG. 4.2 Polígono b

FIG. 4.3 Polígono c

FIG. 4.4 Polígono d

FIG. 4.5 Polígono e

Sintaxis en OpenGL para el trazo de un pixel

Dentro de las primitivas que permite utilizar OpenGL se encuentran la siguiente para el trazo de un pixel:

GL_POINTS [11]

BIBLIOGRAFÍA

[1] http://www.mathematicsdictionary.com

[2] http://www.profesorenlinea.cl

[3] www.masadelante.com/faqs/pixel

[4] http://www.arqhys.com/arquitectura/linea.html

[5] http://definicion.de/circulo/

[6] http://www.escolares.net/geometria/poligonos/

[7] http://www.alegsa.com.ar/Dic/opengl.php

[8] http://www.mitecnologico.com/Main/PrimitivasDeDibujo

[9] http://www.sectormatematica.cl

[10] http://www.geoka.net/geometria/area.html

[11] http://www.humbertocervantes.net