Universidad Nacional del Nordeste Facultad de Ciencias ...exa.unne.edu.ar/informatica/cgrafica/pdf/Primitivas del dibujo.pdf · Líneas, poliedros, superficies y texto Primitivas

Monografía: Primitivas del Dibujo

Profesora a Cargo: Mgter. Petris, Raquel Profesora Adscripta: Lic. Dos Santos, Romina

Facultad de Ciencias Exactas y Naturales y Agrimensura - 2006

1

Universidad Nacional del Nordeste Facultad de Ciencias Exactas y Naturales y Agrimensura Materia: Computación Gráfica Profesora: Raquel Petris

Romina Dos Santos

Tema

Integrantes:

Marina Salome Jara LU: 33004

Carolina Elizabeth Rolnik LU: 32702

Maria de los Angeles Vanderland LU: 31013 Año:2006

id8546406 pdfMachine by Broadgun Software - a great PDF writer! - a great PDF creator! - http://www.pdfmachine.com http://www.broadgun.com




2

Índice:

1. Concepto a. Tipos de Primitivas b. Primitivas Disponibles

2. La Pantalla

a. Contexto Gráfico b. Color c. Texto

3. Gráficos Vectoriales e Bitmap 4. Líneas 5. El Lápiz y La Pluma 6. Dibujo de Polígonos




3

1. Concepto Las primitivas de dibujo son los elementos básicos de los que disponemos para realizar

cualquier representación gráfica: puntos, líneas, círculos. La primera de estas primitivas es dependiente del hardware de la máquina, del sistema operativo, del modo de vídeo, y dado

que siempre podemos usar la función para este fin que viene en alguna librería de gráficos,

vamos a tomarla como básica-disponible, es decir, cuando queramos dibujar algo, denotaremos PIXEL(x, y, color) a una función que vamos a tener a nuestra disposición

siempre que la necesitemos. Una escena puede contener distintos tipos de objetos planos 2D para los que existen diferentes modelos de representación. Muchos objetos 3D parten de primitivas 2D que posteriormente se trabajan para dotarlas de profundidad o grosor. Primitiva: Unidad mínima de representación. Están formados por dos tipos de datos: Parámetricos(definen la geometría);

Atributos(definen el aspecto final) Tipos de primitivas

2D(SRGP): Líneas, polígonos, círculos,

elipses y textos Líneas y polilíneas; requiere la cantidad de vértices y la posición de cada uno de

ellos. Atributos: Estilo, anchura de línea y

color Polígonos: requiere el número de

vértices y posición de cada uno de ellos. Las aristas no deben interceptarse y deben ser convexos

Atributos: Estilo, grosor y color Rectángulos: requiere punto inferior izquierdo y superior derecho Elipses y Círculos: Extensión(rectángulo que lo contiene), ángulo inicial y final 3D(SPHIGS): (Programmer's Hierarchical Interactive Graphics System) Líneas, poliedros, superficies y texto

Primitivas Rellenas Polígono y Elipse Atributos: Estilo y patrón de relleno, color

de fondo Texto Gráfico Parámetros: Punto de origen y cadena de

caracteres Atributos: Color, Fuente




4

Estas son las primitivas que tenemos disponibles:

Point(x,y,color); Dibuja un pixel en la posición (x,y) de la pantalla, del color

especificado en color. Es la única primitiva a la que no se le aplica estilo alguno. Línea(x0,y0,x1,y1); Dibuja 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.

Rectángulo(x0,y0,x1,y1); Dibuja un rectángulo cuya esquina superior izquierda

tiene por coordenadas (x0,y0) y cuya esquina inferior derecha tiene por coordenadas (x1,y1). El trazo de las cuatro líneas será el que venga dado por el estilo de línea. Si

no hay estilo de línea definido, se usará el estilo por defecto, trazo continuo. Círculo(x,y,radio); Dibuja un círculo de centro (x,y) y radio 'radio'. El valor del

radio debe ser un número positivo para que tenga sentido. El círculo se pinta con el

estilo que haya definido en ese momento o con el estilo por defecto si no se han definido estilos.

Elipse(x,y,a,b); Dibuja una elipse de centro (x,y) y semiejes mayor y menor a y b, respectivamente. Ambos deben ser números positivos para que tenga sentido. La

elipse se pinta con el estilo definido en ese momento o con el estilo or defecto si no hay ninguno definido.

2. La Pantalla Hay que hacer notar que en la pantalla, la esquina superior izquierda tiene coordenadas (0, 0), y que la coordenada x crece hacia la derecha mientras que la coordenada y crece hacia abajo. En la resolución en la que trabajemos, tendremos un máximo de XMAX puntos de

ancho por YMAX puntos de alto, por tanto, el rango permitido para dibujar es el rectángulo

de esquina superior izquierda (0, 0) y de esquina inferior derecha (XMAX-1, YMAX-1). Cuando es necesario hacer referencia a una posición concreta de la pantalla (un pixel de la

misma) se utilizan sus coordenadas de pantalla para describir su situación. Las coordenadas

de pantalla son especificadas mediante un par de números en el formato (posición_x,

posición_y). De tal forma, el píxel (400,300) podría considerarse situado aproximadamente

en el centro de una pantalla de resolución 800x600, de la misma forma que el (0,0) es la

esquina superior izquierda y el (799,599) la esquina inferior derecha. El píxel (del inglés picture element, o sea, "elemento de la imagen") es la menor unidad en la que se descompone una imagen digital, ya sea una fotografía, un fotograma de vídeo o un

gráfico. Al ampliar una imagen digital, pueden observarse los píxeles que componen la imagen. Los píxeles aparecen como pequeños cuadrados en color, en blanco o en negro, o en matices de

gris. Las imágenes se forman como una matriz rectangular de píxeles, donde cada píxel

forma un punto diminuto en la imagen total. En las imágenes de mapa de bits o en los dispositivos gráficos cada píxel se codifica

mediante un conjunto de bits de longitud determinada (es la profundidad del color) por ejemplo, puede codificarse un pixel con un byte(conjunto de 8 bits), de manera que cada pixel admite 256 variantes. El contexto gráfico determina el resultado de la primitiva interviniendo en las sucesivas etapas del proceso de dibujo en el servidor:




5

1. La primitiva gráfica junto con algunos atributos del contexto gráfico determinan los

pixels afectados. 2. Al resultado anterior se le aplica un color o un patrón definido en el contexto gráfico

usado. 3. Se aplica la máscara de planos especificada en el contexto para determinar qué

planos serán afectados por la primitiva. 4. Se mezclan, usando una función lógica definida en el contexto, los valores

calculados con los almacenados actualmente.

Siendo el contexto gráfico un conjunto de propiedades que determinan con qué estilo se

van a dibujar las primitivas en pantalla. Estilo son una serie de opciones que se aplican cuando tiene sentido aplicarse (por ejemplo no se puede aplicar trazo a un punto, dado que es solo un punto). De todas formas, no hay que preocuparse por qué primitivas admiten un

estilo y qué primitivas no lo admiten: el esquema general de una librería gráfica en este aspecto es, primero, fijar el estilo, para después dibujar la primitiva con ese estilo, si es

posible aplicarlo, y si no es posible, la dibuja sin aplicarlo, únicamente empleará aquello

aplicable a la primitiva en cuestión. El estilo más básico es el color, que es aplicable a todas las primitivas, pues todas ellas son susceptibles de poder ser dibujadas con algún color.




6

Los cuales son: PseudoColor

El valor del pixel sirve como índice de un mapa de color. Cada entrada del mapa

tiene 3 campos (RGB) y se puede modificar dinámicamente. StaticColor

Igual pero las entradas son sólo de lectura. GrayScale

Cada entrada del mapa se puede modificar dinámicamente. El valor almacenado

controla la intensidad de un único haz de electrones. StaticGray

Igual pero las entradas son sólo de lectura. DirectColor

El valor del pixel se descompone en tres campos (RGB) que sirven como índice

para acceder a tres mapas de color. TrueColor

Igual pero las entradas son sólo de lectura.

Base de datos de colores

Para simplificar la especificación de los colores y aumentar la compartición, el

servidor mantiene una base de datos que relaciona nombres de color con valores RGB. Normalmente está almacenada en el fichero /usr/lib/X11/rgb.txt. Un ejemplo: 70 130 180 SteelBlue Mapas de color

Además del mapa de color por defecto existen otros mapas de carácter estándar en

los que la relación entre el valor del pixel y el color es predecible. Adicionalmente, una aplicación que use muchos colores distribuidos de forma específica

puede crear un mapa de color propio (XCreateColorMap) distinto al que existe por defecto. La mayoría de los displays poseen sólo un mapa de color hardware. Normalmente el gestor

de ventanas se encarga de instalar el mapa de color de la ventana activa en el mapa hardware. También podemos establecer la forma en que las líneas serán dibujadas: grosor y trazo continuo o discontinuo, pudiendo elegir entre varias posibilidades. Como decíamos antes, además de tener grosores distintos, las líneas pueden tener varios

tipos de trazo.




7

El último estilo que vamos a ver es aplicable a figuras que pueden rellenarse, y se conoce

como patrón de relleno. Posibles patrones de relleno son, por ejemplo, SOLIDO, que hace referencia al relleno normal, TRAMADO, que hace una trama de líneas horizontales y

verticales en lugar del relleno sólido, TRAMADO_OBLICUO, que hace una trama de

líneas oblicuas, PUNTEADO, que hace una trama de puntos, TRANSPARENTE, que no

rellenará la figura, entre otros.

Notar lo siguiente: si dibujamos un rectángulo, su borde se pintará con el estilo del trazo de

líneas, mientras que su interior se pintará con el estilo del patrón de relleno. Si no

especificamos estilo alguno, las librerías toman por defecto los siguientes valores:

COLOR es el identificativo del color negro.

LINEA es el identificativo del trazo continuo.

GROSOR es el trazo identificativo de 1 píxel de grosor.

RELLENO es el identificativo del relleno sólido.

Texto

Un font es un vector de bitmaps representando los correspondientes caracteres. Antes de usarlo hay que cargarlo y obtener información que lo describa (XLoadQueryFont). Esta información describe lo que ocupa la caja de cada carácter. Para posicionar un string es necesario obtener información del tamaño que ocupará

mediante XTextWidth o XTextExtents (información más detallada). Las primitivas de texto disponibles son:

XDrawString. Dibuja un string en una zona de dibujo.

XDrawImageString. Igual que el anterior pero rellena la caja de alrededor del texto con el valor background.

XDrawText. Dibuja varios strings con diferentes fuentes de texto.




8

3. Gráficos vectoriales e Bitmap

Imágenes de mapa de bits

Las imágenes de mapa de bits están compuestas por puntos de color, denominados píxeles, organizados en una cuadrícula. Por ejemplo, la imagen de una hoja se describe mediante los

valores de posición y color específicos de cada píxel en la cuadrícula, que crean una imagen

de una manera muy parecida a como se crea un mosaico. Al editar una imagen de mapa de bits, se modifican los píxeles y no las líneas o curvas. Las

imágenes de mapa de bits dependen de la resolución ya que los datos que las definen están

fijados en una cuadrícula que tiene un tamaño determinado. La modificación de una imagen

de mapa de bits puede alterar su calidad. En concreto, el cambio de tamaño de un mapa de

bits puede dejar bordes desiguales en la imagen al redistribuirse los píxeles en la cuadrícula.

La visualización de una imagen de mapa de bits en un dispositivo de salida con menor

calidad de resolución que la propia imagen también disminuye su calidad.

Gráficos Vectoriales

Mediante Flash, se pueden crear y animar gráficos vectoriales compactos. Flash también

permite importar y manipular gráficos vectoriales y de mapa de bits creados en otras aplicaciones. Los gráficos vectoriales representan imágenes mediante líneas y curvas,

denominadas vectores, que también incluyen propiedades de color y posición. Por ejemplo, la imagen de una hoja se representa por puntos a través de los que pasan líneas

que crean el contorno de la hoja. El color de la hoja lo determina el color del contorno y el del área que encierra dicho contorno. Cuando se dibuja en Flash, se crean ilustraciones vectoriales, que son representaciones matemáticas de líneas, curvas, colores y posiciones. Al editar un gráfico vectorial, se

modifican las propiedades de las líneas y curvas que definen su forma. Una ilustración vectorial no depende de la resolución; puede volver a adaptar su escala a

cualquier tamaño o visualizarla con cualquier resolución sin perder la claridad ni calidad.

Además, las ilustraciones vectoriales se descargan con más rapidez que las imágenes de

mapa de bits equivalentes.




9




10

4. Trazado de líneas Hacer una línea no es una tarea tan trivial como pueda parecer en principio, y mucho menos una línea de forma eficiente. Si lo hacemos a mano, todo es muy sencillo: dibujamos dos

puntos y, a continuación trazamos, con ayuda de una regla, el segmento que los une. La

idea de dibujar una línea en la pantalla es igualmente sencilla, se trata, sin más, de dibujar

los extremos y luego dibujar el segmento que los une, pero, ¿cómo pintamos este

segmento?, ¿cómo calculamos los puntos que pertenecen al segmento que une los

extremos? Para ello, necesitaremos un poquito de matemáticas, en concreto, de geometría analítica del

plano. Comenzamos recordando la ecuación vectorial de la recta en el plano: si tenemos dos

puntos P=(x_0,y_0) y Q=(x_1, y_1) de la recta, v=(x_1-x_0,y_1-y_0) es vector director de la recta, y dicha ecuación es: (x, y) = (x_0, y_0) + A*(x_1-x_0, y_1-y_0)




11

También podemos establecer la forma en que las líneas serán dibujadas: grosor y trazo

continuo o discontinuo, pudiendo elegir entre varias posibilidades. El estilo de trazo de líneas pone de manifiesto que cualquier estilo no es susceptible de ser aplicable a cualquier primitiva: por ejemplo, no tiene sentido aplicar un estilo de trazo de líneas a un punto. De

todas formas, no hay que preocuparse por qué primitivas admiten un estilo y qué primitivas no lo admiten: el esquema general de una librería gráfica en este aspecto es, primero, fijar

el estilo, para después dibujar la primitiva con ese estilo, si es posible aplicarlo, y si no es

posible, la dibuja sin aplicarlo, únicamente empleará aquello aplicable a la primitiva en cuestión. Como decíamos antes, además de tener grosores distintos, las líneas pueden tener varios

tipos de trazo.




12

5. El lápiz y La Pluma Para dibujar líneas y formas, se utiliza la herramienta Lápiz, de manera muy similar a como se emplea un lápiz real para realizar un dibujo. Para aplicar un suavizado o un

enderezamiento a las líneas y las formas, según se va dibujando, basta con seleccionar un

modo de dibujo para la herramienta Lápiz.




13

La pluma

Para dibujar trazados precisos como líneas rectas o bien como suaves curvas fluidas, puede

utilizar la herramienta Pluma. Puede crear segmentos de líneas rectas o curvas, y ajustar el ángulo y la longitud de los

segmentos rectos, así como la pendiente de los segmentos curvos. Al dibujar con la herramienta Pluma, puede hacer clic para crear puntos en los segmentos de las líneas rectas

o bien hacer clic y arrastrar para crear puntos en los segmentos de las líneas curvas. Puede ajustar los segmentos de las líneas curvas y rectas ajustando los puntos de las líneas.

Puede convertir líneas curvas en líneas rectas y viceversa. También puede mostrar los

puntos de las líneas creadas con otras herramientas de dibujo de Flash, como las

herramientas Lápiz, Pincel, Línea, Óvalo o Rectángulo, para ajustar estas líneas.

6. Dibujo de polígonos(rectángulo) 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 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. 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);

Para dibujar un polígono, lo único que 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.




14

Para evitar el trazando de 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). La ordenación de los vértices depende del

programador. Finalmente, podemos dibujar las líneas,

aprovechando un bucle: DESDE i=0 MIENTRAS i<4 HACER

Linea(p1[i].x,p1[i].y,p1[i+1].x,p1[i+1].y);

FIN

Linea(p1[4].x,p1[4].y,p1[0].x,p1[0].y);

Documents

Universidad Nacional del Nordeste Facultad de Ciencias ...exa.unne.edu.ar/informatica/cgrafica/pdf/Primitivas del dibujo.pdf · Líneas, poliedros, superficies y texto Primitivas