Proyecto Final ESTRELLA
Transcript of Proyecto Final ESTRELLA
INSTITUTO TECNOLOGICO DE TIJUANA
SUBDIRECCIÓN ACADEMICA
DEPARTAMENTO DE SISTEMAS Y COMPUTACIÓN
AGOSTO-DICIEMBRE 2011
Graficación
Entrega 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 S C 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 conoce
có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 un
pentá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étodo
con 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 del
picturebox 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 sustituyo Brushes.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 sea
animados 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 mandarlas
llamar con el using system.