Proyecto Final

5/17/2018 Proyecto Final - slidepdf.com

http://slidepdf.com/reader/full/proyecto-final-55ab59e1c097d 1/23

INSTITUTO TECNOLOGICO DE TIJUANA

SUBDIRECCIÓN ACADEMICADEPARTAMENTO DE SISTEMAS Y COMPUTACIÓN

AGOSTO-DICIEMBRE 2011

GraficaciónEntrega Final

Integrantes :

Gonzales Villela Christian de Jesús

León Duran Salvador

Rodrí guez Márquez José Luis

Samario Martí nez Erik

12/12/2011

I N G E N I E R I A E N S Í S T E M A SC O M P U T A C I O N A L E S

Prof. Arnulfo Castro Trasvina



1

Índice

Introducción .................................................................................................................................. 2

Lenguaje. ....................................................................................................................................... 3

Librerías. ...................................................................................................................................... 4

System.Drawing......................................................................................................................... 4

Clases de Drawing que se podrían implementar en el desarrollo del proyecto: .................. 4

Desarrollo ...................................................................................................................................... 6

Creación de Estrella ................................................................................................................... 6

TRANSFORMACIONES ................................................................................................................. 12

Escalación ................................................................................................................................ 13

Traslación ................................................................................................................................ 13

Rotación .................................................................................................................................. 14

Creación del Fondo. ................................................................................................................ 16

Código para creación de chispeado. ....................................................................................... 17

Creación de Planetas. .............................................................................................................. 18

Creación de estrellas de fondo estático. ................................................................................. 19

Conclusión. .................................................................................................................................. 22



2

Introducción

La Graficación por computadora (infografía) continúa siendo una de las áreas más

excitantes y de más rápido crecimiento de la tecnología moderna. Los métodos se

aplican de forma rutinaria en el diseño y la mayoría los productos, en los simuladores

para actividades de programación, en la producción de películas, anuncios de

televisión, en el análisis de los datos, en los estudios científicos, en las intervenciones

médicas y en demás aplicaciones.

En la actualidad, se utiliza una gran variedad de técnicas y de dispositivos de hardware

en diversas áreas de aplicación y existen muchas técnicas y hardware en proceso de

desarrollo. Están relacionadas con la mejora de la efectividad, el realismo y la

velocidad de generación de imágenes.

La Graficación por computadora estudia los procedimientos para producir una

representación 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 programación

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 tamaño de la estrella para lograrlo, la segunda

transformación a realizar será la traslación, esta lograra mover al objeto en forma

vertical sin que pierda la forma del objeto y la ultima será la rotación, lograra que la

estrella se mueva de en dirección de las manecillas del reloj sin que cambie de

posición.

Para lograr todo lo antes mencionado se utilizaran 2 librerías existentes en el lenguaje

de programación Visual Studio 2010:

System.Drawing: Esta librería se utilizara para utilizar los gráficos 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 librería será utilizada para dibujar un elipse

para poder recrear los planetas que nos servirán como fondo de la estrella,

para poder aplicar gradientes a los planetas



3

Lenguaje.

Se ha determinado que c Sharp es la mejor herramienta para el diseño del proyecto ya

que se ha venido trabajando con anterioridad con este lenguaje, también se conocecómo funcionan la librería 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 creación de primitivas de dibujo, se pueden hacer animaciones y

es fácil de comprender. También se pueden implementar algunas funciones como lo es

el random para los colores del dibujo. Esta función se podría programar para que se

puedan usar colores aleatorios para un mejor diseño de la figura. Con el componente

timmer se puede implementar para la generación de una animación lo que le dará un

toque elegante al diseño del programa.



4

Librerías.

System.Drawing.

En este proyecto, al conocer que se manejaran imágenes en 2D, se eligió utilizar la

librería Drawing que viene incluida en el Net Framework 2.0 ya que esta librería es una

de las más completas que se puede implementar en el lenguaje que elegimos el cual es

Visual C#

La clase Graphics proporciona métodos para dibujar en el dispositivo de pantalla.

Clases como Rectangle y Point encapsulan primitivos de GDI+. La clase Pen se utiliza

para dibujar líneas 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 creación y manipulación de primitivas

y cuenta con subclases como Matrix para el manejo de matrices, y la clase

GraphicsPath.

Clases de Drawing que se podrían implementar en el desarrollo del proyecto:

Brush, Define los objetos que se utilizan para rellenar formas de gráficos, por ejemplo

rectángulos, elipses, gráficos circulares y rutas.

Pen, Define un objeto utilizado para dibujar líneas y curvas. No se puede heredar esta

clase.

Matrix, Encapsula una matriz afín de 3 por 3 que representa una transformación

geométrica, 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 (líneas y curvas

conectadas). Las aplicaciones usan estas secuencias de datos con líneas 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 más utilizada ya que será la que nos permitirá crear nuestras

figuras primitivas como son, círculos, líneas, rectángulos, etc.

Los métodos para dibujar líneas, rectángulos, elipses, curvas, etc. son parte de la clase

Graphics. Algunos de los métodos que ésta contiene y que pueden ser útiles para

realizar dibujos sencillos son:



5

DrawArc, para dibujar un arco.

DrawBezier, para una curva spline de Bézier 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 rectángulo que la contiene.

DrawIcon, para dibujar una imagen representada por un icono (Icon).

DrawImage, para mostrar una imagen (Image).

DrawLine, para una línea.

DrawPolygon, para un polígono, a partir de un array de puntos.

DrawRectangle, para un rectángulo.

DrawString, para mostrar una cadena de texto.

FillEllipse, para rellenar el interior de una elipse.

FillPolygon, para rellenar el interior de un polígono.

FillRectangle, para rellenar el interior de un rectángulo.

De las cuales se usaran

FillRectangle

FillPolygon

FillEllipse



6

Desarrollo

Creación de Estrella

Para construir la estrella se considero la construcción de los polígonos regulares.

Una característica de los polígonos regulares, es que se pueden trazar inscritos en una

circunferencia que tocará cada uno de los vértices del polígono.

Por ejemplo para trazar un polígono regular de 5 lados (pentágono) se requiere

primero trazar una circunferencia para que sirva como guía como la siguiente.

Después se debe tomar como vértice inicial cualquier punto de la circunferencia.



7

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 número de vértices

que queramos que tenga nuestro polígono. En este caso queremos dibujar unpentágono así que los grados de separación son 72.

Al unir estos puntos se obtiene un pentágono como era de esperarse.

Si analizamos la estructura de la estrella, pareciera como si existiera una circunferencia

interior con un polígono inscrito en ella. Solo que el polígono interior debe esta

desplazado la mitad de grados que hay de separación entre cada punto para que se

produzca el efecto como se muestra en la siguiente figura.



8

Después de esta observación es posible construir estrellas de cualquier cantidad de

picos solo que ahora sin usar puntos, circunferencias ni otros polígonos 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 información del entorno en donde se

dibujara la estrella en este caso el objeto Graphics de un PictureBox.

Debido a que el lenguaje de programación C# solo utiliza los grados en forma de

radianes se hizo un método de conversión de grados Sexagesimales a Radianes.

Se utilizo la regla de 3 para hacer la conversión. 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 método llamado PintarEstrella conformado de la siguiente manera.

public void DibujarEstrella(Brush brushColor, float XCentro, float YCentro, float DiametroInterior, float DiametroExterior, int NumerodePicos, int gradosRotacion)



9

Atributos:

brushColor: Es un objeto de la clase Brush que indica el color que tendrá la estrella.

XCentro: Es la posición del centro de la estrella en el eje X.

YCentro: Es la posición del centro de la estrella en el eje Y.

DiametroInterior: Es la medida del diámetro de la circunferencia imaginaria interior de

la estrella.

DiametroExterior: Es la medida del diámetro de la circunferencia imaginaria exterior

de la estrella.

NumerodePicos: Indica la cantidad de Picos que tendrá la estrella.

Para empezar el método lo primero que se hizo fue calcular los radios de la estrella de

tal manera debido a que se utilizaran después. Para calcularlo lo único que se hizo fue

dividir los diámetros entre dos como se muestra en el siguiente código.

En el código 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 polígono se requieren los puntos para generarlas. La

cantidad de vértices de una estrella es el doble de la cantidad de de sus picos. Esto se

puede explicar fácilmente teniendo en cuenta que tiene vértices internos y externos

con cantidades iguales.

Entonces se declara un arreglo de puntos con la cantidad de elementos del número de

picos multiplicado por dos.

También se calculara la separación entre los vértices.

Lo único que falta es generar los puntos y dibujar el polígono. Para ello se utilizó un

ciclo for que irá desde 0 hasta el numero de vértices (Numero de Picos * 2).



10

La idea es que se calcule un vértice por ciclo.

Por convención se comienza con un vértice exterior. Y para facilitar las cosas primero

se calculan las coordenadas del punto por separado.

Para calcular la coordenada X y Y del vértice exterior se utilizo el siguiente código.

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 vértices 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 rotación, 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

método.

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

polígono

Ya terminado el ciclo for se crea un método para dibujar y rellenar la estrella, para ello

se utiliza el método FillPoligon al cual se le dará los parámetros de los puntos ya

almacenados y el color que se desee.



11

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, después se invoca la clase y se le dan los

parámetros 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 códigos de los colores entre el rango de rojo y verde, Se indicara

también las posición inicial de la estrella y se les suman las posiciones de rotación,

traslación y escalación que luego se indicara los métodos que se usaron al final nos

dará la estrella con una serie de colores aleatorios



12

TRANSFORMACIONES

Para realizar la rotación utilizamos dos variables públicas para poder trasladarlo sobre

el eje x y

Se crea una variable pública llamada FactorEscalacion para poder escalar la estrella

principal y se inicializa en 1 para que la estrella no cambie de tamaño hasta que se le

indique

Se creara una variable estática para la rotación a la que llamaremos GradosRotacion y

se iniciara en cero para evitar que cambie de tamaño al inicio del programa

Para lograr la escalación, rotación y rotación se crearon tres timers para poder mostrar

solo un método el timer uno se usar para ala traslación el 2 para escalación y el tres

para rotación



13

Escalación

Lo primero que se realizara será la estalación en este ejemplo solo se reducirá la

estrella para ello se usara un if el cual reducirá el tamaño en 0.01 para que se logre

apreciar la reducción y se actualizara para mostrarlo en la pantalla

Traslación

Para el método de traslación se usó un ciclo if en donde se indicara la posición que se

moverá en el eje de las Y, se invocara el picturebox1 para que actualice la imagen cada

vez que cambie su posición cuando haya recorrido lo que se indicó habrá un else, este

lo que realizara será detener el timer3 para que continúe con la rotación



14

Rotación

Para la rotación se hizo en una condición if donde se indicara el límite 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 métodocon el picturebox1

Ya concluidos procederemos a regresar la estrella a su figura inicial, así que procederemos a

realizar la traslación 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 método llamado traslación inversa el cual contendrá una

condición if que se ejecutara cuando la posición en el eje de las Y sea menor e igual a cero lo

que realizara será aumentar el número en la posición 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.



15

Para lograr la escalación en forma inversa se creó otro timer llamado timer5 este se ejecutara

al finalizar la traslación inversa y el método que se usó se llamó EscalacionInversa, este

método contiene una condición if el cual se ejecutara cuando el tamaño de la imagen sea igual

o menor a uno aumentara el factor escalación en 0.01 hasta mostrar la estrella como estaba

originalmente antes de aplicarle las transformaciones



16

Creación del Fondo.

Para la creación 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 gráficos 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 tamaño será

de 500 por 500 pixeles

Entre otras que se utilizan por default.

Figura 1.1 Creación de fondo.



17

Código para creación de chispeado.

Para aplicar un efecto de chispeado al picturebox se crea un objeto random para

generar pequeños planetas en posiciones aleatorias. Esto quiere decir que aparecerán

pequeñas atenuaciones de planetas de forma aleatoria y arbitraria dentro delpicturebox esto con el fin de crear un efecto un poco elegante y darle otro aspecto a la

animación. Cabe destacar que con estas atenuaciones se pretende simula el espacio

exterior.

Código.

Se utiliza un ciclo for para dar iteraciones a los planetas después se dibujan y se le da

color una posición aleatoria dentro de un rango y el ultimo parámetro corresponde al

tamaño.

Figura1.3 Creación de chispeado.



18

Creación de Planetas.

Para la creación de planetas o las figuras que simularan serlo se utilizara el método

dibujar planeta el cual es del tipo público para poder acceder a él en las ocasiones que

se requiera de este método. A este método se le sobrecargan los parámetros.

ColorPlaneta: indica el color con el que será pintado el elipse

Xcentro y Ycentro: Variables del tipo flotante para establecer la ubicación de la

figura.

Tamaño: variable del tipo flotante para el tamaño de la figura.

path.AddEllipse: Dibuja el planeta con el metodo AddEllipse con los parametros

Xpos,Ypos y el tamaño del planeta.

PathGradientBrush: Es una clase para pintar con colores gradientes.

brush.SurroundColors: Se utiliza para el color exterior del planeta. brush.CenterColor: Método para pintar el interior de la elipse.

g.FillRectangle: Metodo para aplicar los colores gradientes a la elipse.

Código.



19

Figura 1.2 Creación de planetas.

Creación de estrellas de fondo estático.

Para la creación de estrellas del fondo se utilizó la estrella anterior, cambiándole la

posición y el tamaño. Ver figura 1.4.

Código: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 tamaños del centro y del exterior, el siguiente valor indica el

número de vértices de la estrella y el cero indica los grados de rotación que en este

caso no se le aplica rotación.

Figura 1.4. Creación de estrellas de fondo.



20

Para lograr que las estrellas cambiaran de color aleatoriamente se sustituyoBrushes.LightYellow por new SolidBrush(Color.FromArgb(colorAleatorio.Next(128,

255), colorAleatorio.Next(128, 255), 0))



21

Presentación Final.

Aplicando todos los métodos descritos anteriormente podremos obtener la siguiente

aplicación.



22

Conclusión.

Las primitivas de dibujo 2D son muy necesarias para la creación de gráficos ya seaanimados o estáticos. En el proyecto se puede observar que C Sharp nos da amplias

opciones para la manipulación de este tipo de gráficos aplicando muchas técnicas y

componente como el Timer para dar efectos a las figuras.

También C Sharp nos proporciona una amplia gama de colores para la aplicación de

coloreado de las primitivas. Pudiendo utilizar desde colores solidos hasta colores

gradientes, solo es cuestión de jugar un poco con el lenguaje de programación que se

aplique. C Sharp es muy fácil de usar una vez que se ha trabajado con las librerías

Drawing y Drawing 2D que ya vienen en el compilador solo es cuestión de mandarlasllamar con el using system.

Proyecto Final

Documents

Transcript of Proyecto Final