INSTITUTO TECNOLOGICO DE TIJUANA SUBDIRECCIN ACADEMICA DEPARTAMENTO DE SISTEMAS Y COMPUTACIN AGOSTO-DICIEMBRE 2011

Graficacin
Entrega Final
Integrantes : Gonzales Villela Christian de Jess Len Duran Salvador Rodrguez Mrquez Jos Luis Samario Martnez Erik

12/12/2011
INGENIERIAEN SSTEMAS COMPUTACIONALES

Prof. Arnulfo Castro Trasvina

ndice
Introduccin .................................................................................................................................. 2 Lenguaje. ....................................................................................................................................... 3 Libreras. ...................................................................................................................................... 4 System.Drawing......................................................................................................................... 4 Clases de Drawing que se podran implementar en el desarrollo del proyecto: .................. 4 Desarrollo ...................................................................................................................................... 6 Creacin de Estrella................................................................................................................... 6 TRANSFORMACIONES ................................................................................................................. 12 Escalacin ................................................................................................................................ 13 Traslacin ................................................................................................................................ 13 Rotacin .................................................................................................................................. 14 Creacin del Fondo. ................................................................................................................ 16 Cdigo para creacin de chispeado. ....................................................................................... 17 Creacin de Planetas. .............................................................................................................. 18 Creacin de estrellas de fondo esttico. ................................................................................. 19 Conclusin. .................................................................................................................................. 22

Introduccin
La Graficacin por computadora (infografa) contina siendo una de las reas ms excitantes y de ms rpido crecimiento de la tecnologa moderna. Los mtodos se aplican de forma rutinaria en el diseo y la mayora los productos, en los simuladores para actividades de programacin, en la produccin de pelculas, anuncios de televisin, en el anlisis de los datos, en los estudios cientficos, en las intervenciones mdicas y en dems aplicaciones. En la actualidad, se utiliza una gran variedad de tcnicas y de dispositivos de hardware en diversas reas de aplicacin y existen muchas tcnicas y hardware en proceso de desarrollo. Estn relacionadas con la mejora de la efectividad, el realismo y la velocidad de generacin de imgenes. La Graficacin por computadora estudia los procedimientos para producir una representacin visual de un objeto al que se le pueden aplicar una serie de formular para poder modificarla, este aspecto se recreara en el lenguaje de programacin Microsoft Visual Studio 2010 con una figura en forma de estrella a la cual se le aplicaran 3 transformaciones. La primera se lograra reducir el tamao de la estrella para lograrlo, la segunda transformacin a realizar ser la traslacin, esta lograra mover al objeto en forma vertical sin que pierda la forma del objeto y la ultima ser la rotacin, lograra que la estrella se mueva de en direccin de las manecillas del reloj sin que cambie de posicin. Para lograr todo lo antes mencionado se utilizaran 2 libreras existentes en el lenguaje de programacin Visual Studio 2010: System.Drawing: Esta librera se utilizara para utilizar los grficos y poder dibujar la estrella, poder utilizar los colores y pinceles para poder pintar y dibujar ya sea los planetas o las estrella System.DrawingDrawing2D: Esta librera ser utilizada para dibujar un elipse para poder recrear los planetas que nos servirn como fondo de la estrella, para poder aplicar gradientes a los planetas

Lenguaje.
Se ha determinado que c Sharp es la mejor herramienta para el diseo del proyecto ya que se ha venido trabajando con anterioridad con este lenguaje, tambin se conoce cmo funcionan la librera System.Drawing. La interfaz para trabajar con este lenguaje es muy visual, se conocen las operaciones matriciales que se implementaran. Es eficiente y permite la creacin de primitivas de dibujo, se pueden hacer animaciones y es fcil de comprender. Tambin se pueden implementar algunas funciones como lo es el random para los colores del dibujo. Esta funcin se podra programar para que se puedan usar colores aleatorios para un mejor diseo de la figura. Con el componente timmer se puede implementar para la generacin de una animacin lo que le dar un toque elegante al diseo del programa.

Libreras.
System.Drawing.

En este proyecto, al conocer que se manejaran imgenes en 2D, se eligi utilizar la librera Drawing que viene incluida en el Net Framework 2.0 ya que esta librera es una de las ms completas que se puede implementar en el lenguaje que elegimos el cual es Visual C# La clase Graphics proporciona mtodos para dibujar en el dispositivo de pantalla. Clases como Rectangle y Point encapsulan primitivos de GDI+. La clase Pen se utiliza para dibujar lneas y curvas, mientras que las clases derivadas de la clase abstracta Brush se utilizan para rellenar el interior de las formas. Dentro de este espacio de nombres System.Graphics, se encuentra la clase System.Drawing.Drawing2D, la cual permitir la creacin y manipulacin de primitivas y cuenta con subclases como Matrix para el manejo de matrices, y la clase GraphicsPath.

Clases de Drawing que se podran implementar en el desarrollo del proyecto: Brush, Define los objetos que se utilizan para rellenar formas de grficos, por ejemplo rectngulos, elipses, grficos circulares y rutas. Pen, Define un objeto utilizado para dibujar lneas y curvas. No se puede heredar esta clase. Matrix, Encapsula una matriz afn de 3 por 3 que representa una transformacin geomtrica, La matriz de 3 por 3 contiene valores x en la primera columna, valores y en la segunda y valores w en la tercera. La clase GraphicsPath y sus derivados, del espacio de nombres System.Drawing.Drawing2D, tiene objetos que representan figuras (lneas y curvas conectadas). Las aplicaciones usan estas secuencias de datos con lneas y curvas (path) para dibujar los bordes de las figuras, rellenar el interior de las figuras y crear zonas de recorte. Esta clase ser la ms utilizada ya que ser la que nos permitir crear nuestras figuras primitivas como son, crculos, lneas, rectngulos, etc. Los mtodos para dibujar lneas, rectngulos, elipses, curvas, etc. son parte de la clase Graphics. Algunos de los mtodos que sta contiene y que pueden ser tiles para realizar dibujos sencillos son:

DrawArc, para dibujar un arco. DrawBezier, para una curva spline de Bzier definida por cuatro puntos (estructuras Point). DrawClosedCurve, para una curva spline cerrada, a partir de un array de puntos. DrawCurve, para una curva. DrawEllipse, para dibujar una elipse, a partir del rectngulo que la contiene. DrawIcon, para dibujar una imagen representada por un icono (Icon). DrawImage, para mostrar una imagen (Image). DrawLine, para una lnea. DrawPolygon, para un polgono, a partir de un array de puntos. DrawRectangle, para un rectngulo. DrawString, para mostrar una cadena de texto. FillEllipse, para rellenar el interior de una elipse. FillPolygon, para rellenar el interior de un polgono. FillRectangle, para rellenar el interior de un rectngulo.

De las cuales se usaran FillRectangle FillPolygon FillEllipse

Desarrollo
Creacin de Estrella

Para construir la estrella se considero la construccin de los polgonos regulares. Una caracterstica de los polgonos regulares, es que se pueden trazar inscritos en una circunferencia que tocar cada uno de los vrtices del polgono. Por ejemplo para trazar un polgono regular de 5 lados (pentgono) se requiere primero trazar una circunferencia para que sirva como gua como la siguiente.

Despus se debe tomar como vrtice inicial cualquier punto de la circunferencia.

A partir de ese punto se deben colocar a la misma distancia el resto de los puntos. Como la circunferencia tiene 360 grados dividimos 360 entre el nmero de vrtices que queramos que tenga nuestro polgono. En este caso queremos dibujar un pentgono as que los grados de separacin son 72. Al unir estos puntos se obtiene un pentgono como era de esperarse.

Si analizamos la estructura de la estrella, pareciera como si existiera una circunferencia interior con un polgono inscrito en ella. Solo que el polgono interior debe esta desplazado la mitad de grados que hay de separacin entre cada punto para que se produzca el efecto como se muestra en la siguiente figura.

Despus de esta observacin es posible construir estrellas de cualquier cantidad de picos solo que ahora sin usar puntos, circunferencias ni otros polgonos como la siguiente estrella de 5 picos.

Se cre una clase llamada Estrella. Se le dio el siguiente constructor.

Se tiene la variable privada g la cual contendr la informacin del entorno en donde se dibujara la estrella en este caso el objeto Graphics de un PictureBox. Debido a que el lenguaje de programacin C# solo utiliza los grados en forma de radianes se hizo un mtodo de conversin de grados Sexagesimales a Radianes.

Se utilizo la regla de 3 para hacer la conversin. Si X son los radianes. X es a PI como grados es a 180 X/PI = grados/180 Entonces X=grados*PI/180 Se hizo un mtodo llamado PintarEstrella conformado de la siguiente manera.
public void DibujarEstrella(Brush brushColor, float XCentro, float YCentro, float DiametroInterior, float DiametroExterior, int NumerodePicos, int gradosRotacion)

Atributos: brushColor: Es un objeto de la clase Brush que indica el color que tendr la estrella. XCentro: Es la posicin del centro de la estrella en el eje X. YCentro: Es la posicin del centro de la estrella en el eje Y. DiametroInterior: Es la medida del dimetro de la circunferencia imaginaria interior de la estrella. DiametroExterior: Es la medida del dimetro de la circunferencia imaginaria exterior de la estrella. NumerodePicos: Indica la cantidad de Picos que tendr la estrella.

Para empezar el mtodo lo primero que se hizo fue calcular los radios de la estrella de tal manera debido a que se utilizaran despus. Para calcularlo lo nico que se hizo fue dividir los dimetros entre dos como se muestra en el siguiente cdigo.

En el cdigo anterior se definen dos nuevas variables RadioInterior y RadioExterior que representan el radio interior y exterior de la estrella respectivamente. Debido a que la estrella es un polgono se requieren los puntos para generarlas. La cantidad de vrtices de una estrella es el doble de la cantidad de de sus picos. Esto se puede explicar fcilmente teniendo en cuenta que tiene vrtices internos y externos con cantidades iguales. Entonces se declara un arreglo de puntos con la cantidad de elementos del nmero de picos multiplicado por dos.

Tambin se calculara la separacin entre los vrtices.

Lo nico que falta es generar los puntos y dibujar el polgono. Para ello se utiliz un ciclo for que ir desde 0 hasta el numero de vrtices (Numero de Picos * 2).

La idea es que se calcule un vrtice por ciclo. Por convencin se comienza con un vrtice exterior. Y para facilitar las cosas primero se calculan las coordenadas del punto por separado. Para calcular la coordenada X y Y del vrtice exterior se utilizo el siguiente cdigo.

Primero se obtiene el coseno de los grados donde se encuentra el punto en la circunferencia imaginaria y multiplica por los picos que tendr nuestra estrella. Para obtener las coordenadas de los vrtices interiores se crearon dos variables que calcularan el seno y coseno de cada uno de los picos respectivamente y a estos se les sumara los grados de rotacin, hay que recordar que el valor es cero solo se indica para que se sume los grados que deber de rotar al momento que sea llamado el mtodo.

Ya calculados los punto se agregan a un arreglo de puntos para poder formar el polgono

Ya terminado el ciclo for se crea un mtodo para dibujar y rellenar la estrella, para ello se utiliza el mtodo FillPoligon al cual se le dar los parmetros de los puntos ya almacenados y el color que se desee.

10

Para lograr que la estrella principal generara colores aleatorios se usa un objeto random

Ya realizado es necesario invocar a la clase para que la podamos ver en la pantalla para ello creamos una clase estrella y se inicializa, despus se invoca la clase y se le dan los parmetros necesarios como color de la estrella, en este caso ser aleatorio para eso creamos un SolidBrush y se mandara un color aleatorio con el numero de color en este caso usamos los cdigos de los colores entre el rango de rojo y verde, Se indicara tambin las posicin inicial de la estrella y se les suman las posiciones de rotacin, traslacin y escalacin que luego se indicara los mtodos que se usaron al final nos dar la estrella con una serie de colores aleatorios

11

TRANSFORMACIONES
Para realizar la rotacin utilizamos dos variables pblicas para poder trasladarlo sobre el eje x y

Se crea una variable pblica llamada FactorEscalacion para poder escalar la estrella principal y se inicializa en 1 para que la estrella no cambie de tamao hasta que se le indique

Se creara una variable esttica para la rotacin a la que llamaremos GradosRotacion y se iniciara en cero para evitar que cambie de tamao al inicio del programa

Para lograr la escalacin, rotacin y rotacin se crearon tres timers para poder mostrar solo un mtodo el timer uno se usar para ala traslacin el 2 para escalacin y el tres para rotacin

12

Escalacin

Lo primero que se realizara ser la estalacin en este ejemplo solo se reducir la estrella para ello se usara un if el cual reducir el tamao en 0.01 para que se logre apreciar la reduccin y se actualizara para mostrarlo en la pantalla

Traslacin

Para el mtodo de traslacin se us un ciclo if en donde se indicara la posicin que se mover en el eje de las Y, se invocara el picturebox1 para que actualice la imagen cada vez que cambie su posicin cuando haya recorrido lo que se indic habr un else, este lo que realizara ser detener el timer3 para que contine con la rotacin

13

Rotacin

Para la rotacin se hizo en una condicin if donde se indicara el lmite de vueltas que realizara en este ejemplo ser de 1080 que corresponden aproximadamente a 3 vuelta, ira sumando 2 en 2 para poder apreciar cuando termine detendr el mtodo con el picturebox1

Ya concluidos procederemos a regresar la estrella a su figura inicial, as que procederemos a realizar la traslacin en forma inversa por lo cual se insertara otro timer el que tendr como nombre default Timer4 este se trasladara en forma inversa. Para poder realizarlo se usara un mtodo llamado traslacin inversa el cual contendr una condicin if que se ejecutara cuando la posicin en el eje de las Y sea menor e igual a cero lo que realizara ser aumentar el nmero en la posicin en que se encuentra y de igual manera se desplazara hacia abajo cuando se cumpla lo siguiente que realizara ser detener el timer2 y pondr en modo true el timer 5 que ser el que escalara en forma inversa la estrella.

14

Para lograr la escalacin en forma inversa se cre otro timer llamado timer5 este se ejecutara al finalizar la traslacin inversa y el mtodo que se us se llam EscalacionInversa, este mtodo contiene una condicin if el cual se ejecutara cuando el tamao de la imagen sea igual o menor a uno aumentara el factor escalacin en 0.01 hasta mostrar la estrella como estaba originalmente antes de aplicarle las transformaciones

15

Creacin del Fondo.

Para la creacin del fondo se utiliz la clase picturebox. La cual representa un control de cuadro de imagen de Windows para mostrar una imagen. Se suele utilizar el control PictureBox para mostrar grficos de un archivo de mapa de bits, metarchivo, icono, JPEG, GIF o PNG. Pero en este caso se utiliz para dibujar las figuras primitivas, con el fin de que se pudieran visualizar. Este control tiene muchas propiedades de las cuales se usaran: BackColor.- Obtiene o establece el color de fondo del control. En este caso ser color Black. Size.- Obtiene o establece el alto y el ancho del control. Donde su tamao ser de 500 por 500 pixeles

Entre otras que se utilizan por default.

Figura 1.1 Creacin de fondo.

16

Cdigo para creacin de chispeado.

Para aplicar un efecto de chispeado al picturebox se crea un objeto random para generar pequeos planetas en posiciones aleatorias. Esto quiere decir que aparecern pequeas atenuaciones de planetas de forma aleatoria y arbitraria dentro del picturebox esto con el fin de crear un efecto un poco elegante y darle otro aspecto a la animacin. Cabe destacar que con estas atenuaciones se pretende simula el espacio exterior.
Cdigo.

Se utiliza un ciclo for para dar iteraciones a los planetas despus se dibujan y se le da color una posicin aleatoria dentro de un rango y el ultimo parmetro corresponde al tamao.

Figura1.3 Creacin de chispeado.

17

Creacin de Planetas.

Para la creacin de planetas o las figuras que simularan serlo se utilizara el mtodo dibujar planeta el cual es del tipo pblico para poder acceder a l en las ocasiones que se requiera de este mtodo. A este mtodo se le sobrecargan los parmetros.
Cdigo.

ColorPlaneta: indica el color con el que ser pintado el elipse Xcentro y Ycentro: Variables del tipo flotante para establecer la ubicacin de la figura. Tamao: variable del tipo flotante para el tamao de la figura. path.AddEllipse: Dibuja el planeta con el metodo AddEllipse con los parametros Xpos,Ypos y el tamao del planeta. PathGradientBrush: Es una clase para pintar con colores gradientes. brush.SurroundColors: Se utiliza para el color exterior del planeta. brush.CenterColor: Mtodo para pintar el interior de la elipse. g.FillRectangle: Metodo para aplicar los colores gradientes a la elipse.

18

Figura 1.2 Creacin de planetas.

Creacin de estrellas de fondo esttico.

Para la creacin de estrellas del fondo se utiliz la estrella anterior, cambindole la posicin y el tamao. Ver figura 1.4. Cdigo:
est.DibujarEstrella(Brushes.LightYellow, 50, 100, 30, 60, 5, 0); est.DibujarEstrella(Brushes.LightYellow, 250, 400, 30, 60, 5, 0); est.DibujarEstrella(Brushes.LightYellow, 450, 200, 30, 60, 5, 0);

Donde est es un objeto de la clase estrella. Brushes indica el color los siguientes cuatro valores indican los tamaos del centro y del exterior, el siguiente valor indica el nmero de vrtices de la estrella y el cero indica los grados de rotacin que en este caso no se le aplica rotacin.

Figura 1.4. Creacin de estrellas de fondo.

19

Para lograr que las estrellas cambiaran de color aleatoriamente se sustituyo

Brushes.LightYellow por new SolidBrush(Color.FromArgb(colorAleatorio.Next(128, 255), colorAleatorio.Next(128, 255), 0))

20

Presentacin Final.
Aplicando todos los mtodos descritos anteriormente podremos obtener la siguiente aplicacin.

21

Conclusin.
Las primitivas de dibujo 2D son muy necesarias para la creacin de grficos ya sea animados o estticos. En el proyecto se puede observar que C Sharp nos da amplias opciones para la manipulacin de este tipo de grficos aplicando muchas tcnicas y componente como el Timer para dar efectos a las figuras. Tambin C Sharp nos proporciona una amplia gama de colores para la aplicacin de coloreado de las primitivas. Pudiendo utilizar desde colores solidos hasta colores gradientes, solo es cuestin de jugar un poco con el lenguaje de programacin que se aplique. C Sharp es muy fcil de usar una vez que se ha trabajado con las libreras Drawing y Drawing 2D que ya vienen en el compilador solo es cuestin de mandarlas llamar con el using system.

22