Embed Size (px)
Citation preview
UNIVERSIDAD CENTRAL DEL ECUADOR
FACULTAD DE INGENIERÍA, CIENCIAS FÍSICAS Y MATEMÁTICA
CARRERA DE INGENIERÍA EN COMPUTACIÓN GRÁFICA
GENERACIÓN AUTOMÁTICA DE DISEÑOS A PARTIR DE
PROCEDIMIENTOS MATEMÁTICOS
TRABAJO DE GRADUACIÓN PREVIO A LA OBTENCIÓN DEL TÍTULO
DE INGENIERO EN COMPUTACIÓN GRÁFICA
AUTOR: LUCIA FERNANDA MALDONADO VELASCO
TUTOR: MSc. PEDRO ALMAGRO BLANCO
QUITO – MAYO 2016
ii
DEDICATORIA
Dedico esto a quienes han sido
testigos y partícipes de todo mi
esfuerzo, compromiso y
dedicación. En especial a mi
hermana Renata por su gran
corazón y apoyo incondicional, a
mi mamá y a mis hermanos por
su cariño y amor, a mi abuelita
que me vio crecer, y a mi futura
familia que quiero formar con
mi novio Francisco, por ser el
motivo principal de lucha en esta
etapa final.
iii
AGRADECIMIENTO
Quiero agradecer a Dios por concederme salud, vida y sabiduría permitiéndome así
llegar hasta aquí. A todos los profesores quienes supieron transmitir su
conocimiento y formarme como profesional en esta Universidad. A mi mamá por
ser paciente, comprensiva y por su entrega completa en este mi último esfuerzo. A
mi hermana Renata por su amor y apoyo incondicional quien ha formado parte de
toda esta gran etapa de mi vida. A toda mi familia porque gracias a sus enseñanzas
sembraron en mi lo que ahora, en este trabajo se refleja. Y a Pedro, mi tutor por su
apoyo, guía y constancia en todo momento, por haber sido aquella persona que supo
guiarme y dar rumbo a este proyecto, teniendo siempre las palabras correctas y
precisas en los momentos más difíciles, sabiendo exigir pero también reconocer un
buen trabajo, esfuerzo y dedicación.
iv
AUTORIZACIÓN DE LA AUTORÍA INTELECTUAL
Yo Lucia Fernanda Maldonado Velasco en calidad de autora del trabajo de
investigación: “GENERACIÓN AUTOMÁTICA DE DISEÑOS A PARTIR DE
PROCEDIMIENTOS MATEMÁTICOS”, autorizo a la Universidad Central del
Ecuador a hacer uso de todos los contenidos que me pertenecen o parte de los que
contiene esta obra, con fines estrictamente académicos o de investigación.
Los derechos que como autor me corresponden, con excepción de la presente
autorización, seguirán vigentes a mi favor, de conformidad con lo establecido en
los artículos 5, 6, 8, 19 y demás pertinentes de la Ley de Propiedad Intelectual y su
Reglamento.
Asimismo, autorizo a la Universidad Central del Ecuador para que realice la
digitalización y publicación de este trabajo de investigación en el repositorio
virtual, de conformidad a lo dispuesto en el Art. 144 de la Ley Orgánica de
Educación Superior.
Quito, 15 de abril de 2016.
Lucia Fernanda Maldonado Velasco
CI.: 050352809-3
Telf.: 0996918984 - 025149838
E-mail: [email protected]
v
CERTIFICACIÓN DEL TUTOR
Yo, Pedro Almagro Blanco en calidad de tutor del trabajo de titulación
“GENERACIÓN AUTOMÁTICA DE DISEÑOS A PARTIR DE
PROCEDIMIENTOS MATEMÁTICOS”, elaborado por la estudiante Lucia
Fernanda Maldonado Velasco de la Carrera de Computación Gráfica, Facultad de
Ingeniería, Ciencias Físicas y Matemática de la Universidad Central del Ecuador,
considero que el mismo reúne los requisitos y méritos necesarios en el campo
metodológico y en el campo epistemológico, para ser sometido a la evaluación por
parte del jurado examinador que se designe, por lo que lo APRUEBO, a fin de que
trabajo investigativo sea habilitado para continuar con el proceso de titulación
determinado por la Universidad Central del Ecuador.
En la ciudad de Quito a los 15 del mes abril del año 2016.
PEDRO ALMAGRO BLANCO
CC.: 175659184-6
vi
CERTIFICADO DE CALIFICACIONES
vii
viii
INFORME DE LA COMISIÓN LECTORA
ix
x
xi
xii
xiii
xiv
xv
xvi
CONTENIDO
pág.
DEDICATORIA ..................................................................................................... ii
AGRADECIMIENTO ........................................................................................... iii
AUTORIZACIÓN DE LA AUTORÍA INTELECTUAL ..................................... iv
CERTIFICACIÓN DEL TUTOR ........................................................................... v
CERTIFICADO DE CALIFICACIONES ............................................................. vi
INFORME DE LA COMISIÓN LECTORA ....................................................... viii
LISTA DE FIGURAS .......................................................................................... xix
LISTA DE TABLAS ........................................................................................... xxi
RESUMEN .......................................................................................................... xxii
ABSTRACT ....................................................................................................... xxiii
INTRODUCCIÓN .................................................................................................. 1
1. DEFINICIÓN DEL PROBLEMA .................................................................. 3
1.1 Antecedentes ................................................................................................ 3
1.2 Formulación del Problema ........................................................................... 3
1.3 Descripción del Problema ............................................................................ 4
1.4 Hipótesis ....................................................................................................... 4
1.5 Justificación.................................................................................................. 4
1.6 Objetivos ...................................................................................................... 5
1.6.1 Objetivo General .................................................................................... 5
1.6.2 Objetivos Específicos ............................................................................ 5
2. MARCO TEÓRICO ........................................................................................ 7
2.1 Antecedentes ................................................................................................ 7
2.2 Marco Conceptual ........................................................................................ 9
2.3 Estado Tecnológico Actual ........................................................................ 10
xvii
2.4 Fundamento teórico .................................................................................... 11
2.4.1 Fractales .............................................................................................. 12
a) Conjunto de Julia ................................................................................. 12
b) Conjunto de Mandelbrot ...................................................................... 14
2.4.2 Curvas de Persecución ........................................................................ 15
2.4.3 Funciones Trigonométricas ................................................................. 15
a) Curva de Lissajous ............................................................................... 16
b) Función Trigonométrica en el campo de los números Reales ℝ. ........ 18
c) Función Trigonométrica en el campo de los números Complejos ℂ .. 18
3. PROCESO DEL DESARROLLO DE LA LIBRERÍA DE SOFTWARE ... 19
3.1 Paquetes Utilizados .................................................................................... 20
3.1.1 NumPy ................................................................................................ 21
3.1.2 OpenCV .............................................................................................. 21
3.2 Creación de Imágenes ................................................................................ 21
3.2.1 Mapa de Colores ................................................................................. 25
3.2.2 Región a Visualizarse .......................................................................... 27
3.2.3 Traslación – Escalado y Rotación ....................................................... 28
3.3 Fractales ..................................................................................................... 32
3.3.1 Criterio de Escape y Algoritmo (GETZ & HELMSTEDT, 2004, pág.
231) ............................................................................................................... 34
3.4 Curvas de Persecución ............................................................................... 37
3.5 Funciones Trigonométricas ........................................................................ 43
3.5.1 Curva de Lissajous .............................................................................. 45
3.5.2 Función Trigonométrica en el campo de los números Reales ℝ ......... 46
3.5.3 Funciones Trigonométricas en el campo de los números Complejos ℂ
....................................................................................................................... 47
4. INTERFAZ CLIENTE .................................................................................. 50
4.1 Arquitectura de la Aplicación y Servidor................................................... 51
xviii
5. METODOLOGÍA ......................................................................................... 56
5.1 Fase de Investigación y Planificación ....................................................... 56
5.2 Fase de Desarrollo de Software.................................................................. 56
5.3 Fase de Pruebas y Mantenimiento.............................................................. 57
6. DISCUSIONES ............................................................................................. 58
7. CONCLUSIONES ........................................................................................ 60
8. RECOMENDACIONES ............................................................................... 61
9. Bibliografía ................................................................................................... 62
ANEXOS .............................................................................................................. 64
ANEXO A ............................................................................................................ I
Funcionalidad para la Creación del grupo de Fractales ................................ III
a) Generación del diseño (Conjunto de Julia) Julia ................................. III
b) Generación del diseño (Conjunto de Mandelbrot) Mandelbrot. ......... VII
Funcionalidad para la Creación del grupo de Curvas ................................... XI
Funcionalidad para la Creación del grupo de Funciones Trigonométricas .. XV
a) Generación del diseño Curva de Lissajous ....................................... XVI
b) Generación del diseño Funciones Trigonométricas sobre el campo de los
Números Reales (F. T. Reales) ................................................................ XX
c) Generación del diseño Funciones Trigonométricas sobre el campo de los
Números Complejos (F. T. Complejos) .............................................. XXIV
xix
LISTA DE FIGURAS
pág.
Figura 2-1. Imagen perteneciente a la galería "Mathscapes" (paisajes matemáticos).
................................................................................................................................. 7
Figura 2-2. Muestra Gráfica del Conjunto Completo de Julia. ............................. 13
Figura 2-3. Distintos de Conjuntos de Julia – Imagen tomada de la referencia
(MEDINA, s.f.). .................................................................................................... 14
Figura 2-4. Imágenes obtenidas de la referencia bibliográfica (MITCHELL, 2015).
............................................................................................................................... 15
Figura 3-1. Plano Real.......................................................................................... 22
Figura 3-2. Ejes dispuestos en las imágenes. ........................................................ 22
Figura 3-3. Imagen de 4x4 (ancho x alto). ............................................................ 23
Figura 3-4. Imagen detallada con el valor de cada pixel y posición. .................... 23
Figura 3-5. Ejemplo de creación de tipo de imágenes. ......................................... 24
Figura 3-6. Listado de mapas de colores (DOXYGEN, 2015). ............................ 26
Figura 3-7. Imágenes obtenidas de la librería (Julia) con diferentes mapas de
colores. .................................................................................................................. 26
Figura 3-8. Fragmento de código de la librería Python – Cálculo de coordenada
final yf . .................................................................................................................. 28
Figura 3-9. Pantalla de un dispositivo móvil (canvas) y la correspondencia con sus
ejes......................................................................................................................... 28
Figura 3-10. Puntos iniciales y finales de la región a visualizarse del diseño. ..... 29
Figura 3-11. Traslación – Rotación. ...................................................................... 30
Figura 3-12. Pasos de la transformación del plano Real al plano del Canvas. ..... 31
Figura 3-13. Fragmento de código de la librería – Transformación de puntos. .... 32
Figura 3-14. Fragmento de código para la obtención del conjunto de Julia (Librería
de software). .......................................................................................................... 33
Figura 3-15. Fragmento de código para la obtención del conjunto de Mandelbrot
(Librería de software). ........................................................................................... 33
xx
Figura 3-16. Fragmento del algoritmo del Conjunto de Julia (Librería de software).
............................................................................................................................... 34
Figura 3-17. Diseño 1 obtenido de la librería – Conjunto de Julia. ...................... 34
Figura 3-18. Diseño 2 obtenida de la librería – Conjunto de Julia. ...................... 35
Figura 3-19. Diseño 1 obtenido de la librería – Conjunto de Mandelbrot. ........... 36
Figura 3-20. Diseño 2 obtenida de la librería – Conjunto de Mandelbrot ............ 36
Figura 3-21. Triángulo rectángulo formado por un agente y su próxima posición.
............................................................................................................................... 38
Figura 3-22. Código que implementa la lógica de agente, presa y perseguir. ...... 40
Figura 3-23. Posiciones de agentes en un cuadrado. ............................................. 40
Figura 3-24. Proceso de generación de diseño – Curvas de Persecución. ............ 41
Figura 3-25. Imagen final obtenida de la librería de Curvas de Persecución. ...... 41
Figura 3-26. Diseño (cuadrado) obtenido de la librería (Curvas de Persecución) –
Campo de visión centrado. .................................................................................... 42
Figura 3-27. Diseño (cuadrado) obtenido de la librería (Curvas de Persecución) –
Campo de visión inferior. ...................................................................................... 42
Figura 3-28. Diseño (cuadrado) obtenido de la librería (Curvas de Persecución) –
Campo de visión lateral izquierda. ........................................................................ 43
Figura 3-29. Función seno con diferente período, amplitud y desfase. ................ 44
Figura 3-30. Proceso iterativo para obtener el diseño de Curva de Lissajous. ..... 45
Figura 3-31. Diseño 1 obtenido de la librería (Lissajous). .................................... 46
Figura 3-32. Diseño 2 obtenido de la librería (Lissajous). .................................... 46
Figura 3-33. Diseño 1 obtenido de la librería (campo de los números Reales). ... 47
Figura 3-34. Diseño 2 obtenido de la librería (campo de los números Reales). ... 47
Figura 3-35. Diseño 1 obtenido de la librería (campo de los números Complejos).
............................................................................................................................... 48
Figura 3-36. Diseño obtenido de la librería (campo de los números Complejos). 48
Figura 4-1. Permisos en el archivo AndroidManifest.xml. ................................... 51
Figura 4-2. Arquitectura Cliente Servidor. ........................................................... 51
Figura 4-3. Imagen obtenida directamente realizada la petición con parámetros
(URL). ................................................................................................................... 53
xxi
LISTA DE TABLAS
pág.
Tabla 2-1. Tabla de la relación (a/b) Curva de Lissajous. Imágenes (curva de
Lissajous) obtenidas de la librería desarrollada bajo distintos parámetros ........... 17
Tabla 3-1. Tabla de Parámetros en la generación del Conjunto de Julia. ............ 35
Tabla 3-2. Tabla de Parámetros en la generación del Conjunto de Mandelbrot. . 37
Tabla 3-3. Tabla de Parámetros en la generación de la Curva de Persecución. .. 43
Tabla 3-4. Tabla de Parámetros en la generación del Grupo de Funciones
Trigonométricas. ................................................................................................... 49
Tabla 4-1. Petición al servidor mediante parámetros enviados en la URL. .......... 54
Tabla 6-1. Tiempos obtenidos al generar los diseños con distintas dimensiones de
la imagen ............................................................................................................... 59
xxii
RESUMEN
GENERACIÓN AUTOMÁTICA DE DISEÑOS A PARTIR DE
PROCEDIMIENTOS MATEMÁTICOS
Autor: Lucia Fernanda Maldonado Velasco
Tutor: Pedro Almagro Blanco
El presente proyecto radica en el desarrollo de una librería de software para la
generación de diseños a partir de procedimientos matemáticos. Esta librería
permite encapsular a los algoritmos que se encargan de generar dichos diseños, los
procedimientos matemáticos que se utilizan son tres: fractales, curvas de
persecución y funciones trigonométricas. Al concentrar toda la lógica en esta
librería, permite que todo el proceso de generación de los patrones de diseño, sea
independiente de la interfaz cliente. La librería desarrollada en este proyecto es
capaz de generar una gran variedad de imágenes (diseños) resultantes del alto grado
de parametrización que caracteriza a los procedimientos matemáticos utilizados.
Para evidenciar el potencial de esta librería, como aplicación se desarrolla una
aplicación móvil que hace uso de la misma, de esta manera se permite la interacción
del usuario con la herramienta.
PALABRAS CLAVES: / LIBRERÍA DE SOFTWARE / GENERACIÓN
AUTOMÁTICA DE IMÁGENES / DISEÑO GRÁFICO / FRACTALES /
CURVAS DE PERSECUCIÓN / TRIGONOMETRÍA /
xxiii
ABSTRACT
AUTOMATIC GENERATION OF DESIGNS FROM MATHEMATICAL
PROCEDURES
Author: Lucia Fernanda Maldonado Velasco
Director: Pedro Almagro Blanco
The present project is based on the development of a software library to generate
designs from mathematical procedures. This library allows encapsulate the
algorithms that are responsible for generating these designs. The mathematical
procedures used are three: fractals, pursuit curves and trigonometric functions.
Concentrating all the logic in this library, makes the generation of designs
procedure independent of the client interface. The software developed during this
project is able to provide a wide variety of images (designs) resulting from the high
degree of parameterization of the underlying mathematical procedures. To
demonstrate the potential of this library, a mobile application that allows the user
to interact with it has been developed.
KEYWORDS: / SOFTWARE LIBRARY / AUTOMATIC IMAGE
GENERATION / GRAPHIC DESIGN / FRACTALS / PURSUIT CURVES /
TRIGONOMETRY
1
INTRODUCCIÓN
Las matemáticas han sido conocidas desde una perspectiva netamente de números,
cálculos, resolución de ecuaciones y problemas, etc y todo esto es indudablemente
su naturaleza, pero ¿Es posible que las matemáticas se encuentren íntimamente
relacionadas con el diseño? La respuesta es sí, muchos lo desconocerán para otros
les resultará familiar, pero existen personas que se han dedicado al estudio
exhaustivo de esta relación y es esta relación entre el diseño y las matemáticas, el
motor que le da vida a este proyecto. Este estudio se ha aplicado en generación de
diseños artísticos basados en fundamentos matemáticos, todo esto ha sido posible
por la existencia del ordenador, tuvo su impulso desde la década de los setenta
gracias a la aparición de la computadora digital.
La creación de un diseño que cumpla con cualidades tales como armónico, artístico
y personalizable, es muy alta. Un diseño con una complejidad mínima en términos
de elaboración supone un determinado tiempo y se requiere de herramientas
adecuadas y conocimiento previo para poder llevarse a cabo. El poseer un diseño
armónico y adecuado no sólo depende de tener acceso a determinados programas
destinados para el diseño gráfico sino también de contar con habilidades, destrezas
y conocimiento exclusivos que permitan una creación adecuada. Cuando no se
cuenta con el tiempo ni el factor económico requeridos para la elaboración de un
diseño, acorde a las necesidades se convierte éste inasequible. En la actualidad el
uso del ordenador es imprescindible y representa pieza fundamental para el
tratamiento y procesamiento de cálculos matemáticos altamente complejos. Existen
infinidad de programas diseñados y desarrollados para poder visualizar gráficas de
funciones por lo que es posible desarrollar sistemas de generación de diseños
basados en procedimientos matemáticos y de esta forma poner al alcance de
cualquier persona la obtención de un diseño armónico y personalizado sin que el
factor tiempo ni el factor económico supongan un obstáculo. Para cumplir lo
anterior planteado se crea una aplicación móvil gratuita que genera de forma
automática, rápida y personalizada patrones de diseños únicos y estéticos, esta
aplicación móvil hace uso de una librería de software también desarrollada que
2
posee la lógica de generación de estos diseños a partir de procedimientos
matemáticos.
3
1. DEFINICIÓN DEL PROBLEMA
1.1 Antecedentes
Debido al crecimiento veloz y masivo en el intercambio de información, es justo
ahora que el rol de un diseñador gráfico se ha vuelto tan demandante, ya que son
los encargados de plasmar digital y gráficamente hechos e ideas que son procesados
y esquematizados en términos de forma y comunicación, elementos sociales,
culturales, económicos, estéticos y tecnológicos.
A continuación se cita una definición de diseño, la cual es apropiada e indispensable
para abordar la situación problemática a la que se enfrenta este proyecto.
“Así entendemos el diseño como un acto de creatividad, de pensar y plasmar algo
nuevo, revolucionario, que como sabemos, aúna lo estético y lo funcional. Pero no
hablamos de crear por crear. Sabemos que se diseña con una intención particular,
que antes de crear tenemos que considerar varios parámetros que esta creación debe
cumplir. Detrás de cada pieza de diseño, de cada intento de innovación hay un
objetivo definido a alcanzar” (ALAM, 2013).
Por lo que es notorio que quien tenga conocimientos en diseño gráfico es el
profesional idóneo para la elaboración de diseños plasmados en imágenes digitales.
Por ende quienes tengan la necesidad de adquirir un diseño personalizado requieren
de las habilidades, destrezas y conocimientos de un profesional en diseño gráfico.
Sin embargo existen personas que aunque hayan estudiado todo lo concerniente al
diseño no logran adquirir las destrezas necesarias para poder crear un buen diseño,
ya que muchas veces se necesita de cualidades innatas y el estudio no representa en
realidad una garantía de que esas cualidades se puedan adquirir.
1.2 Formulación del Problema
Actualmente se considera a los diseños (basados en imágenes) la tendencia actual
que satisface a la mayoría de personas que consideran a la belleza estética como
algo indispensable en todo ámbito. ¿Es posible generar un diseño único, armónico
y personalizado sin que el factor económico y el factor tiempo sean un obstáculo?
En la adquisición de un diseño existen varios factores que no siempre están al
alcance de quien lo necesita. Normalmente estos factores son el tiempo y la
4
inversión económica, los cuales suelen ser imprescindibles a la hora de requerir
uno, convirtiéndose en un limitante para aquellas personas que sin tener recursos,
ni conocimientos en el área, ni cualidades innatas, anhelan conseguir y personalizar
diseños propios.
1.3 Descripción del Problema
La labor que implica el crear un diseño que sea armónico, artístico y personalizable
es muy alta. Un diseño por muy simple que parezca, conlleva tiempo y necesita de
las herramientas adecuadas y de conocimiento previo para poder llevarse a cabo.
No todas las personas tienen acceso a las herramientas antes mencionadas ni poseen
el conocimiento para utilizarlas. El poseer un diseño armónico y adecuado no sólo
depende de tener acceso a los programas destinados para el diseño gráfico sino
también de contar con las habilidades y destrezas especiales que puedan lograr una
creación adecuada.
El trabajo que se realiza en el computador resulta tedioso para el ser humano,
además al pertenecer a una sociedad globalizada nuestra generación vive una
constante lucha contra el tiempo, por último, el factor monetario no siempre está a
favor por lo que se concluye que es inasequible el adquirir un diseño personalizado,
y adecuado, en corto tiempo y de manera gratuita.
1.4 Hipótesis
Es posible desarrollar sistemas de generación automática de diseños basados en
procedimientos matemáticos y de esta forma poner al alcance de cualquier persona
la obtención de un diseño armónico y personalizado sin que el factor tiempo ni el
factor económico supongan un obstáculo.
1.5 Justificación
Hoy en día el uso del diseño gráfico se ha vuelto indispensable en casi todas las
áreas profesionales. En la actualidad, para acceder a un diseño armónico se requiere
de determinados recursos temporales y/o económicos, es aquí donde la herramienta
planteada en este proyecto pretende facilitar la obtención de diseños adecuados sin
los inconvenientes antes descritos. La base de la herramienta planteada son
procedimientos matemáticos que generan diseños visualmente atractivos y
potencialmente utilizables en diferentes áreas. La generación automática de dichos
5
diseños excluye al usuario de cualquier carga de trabajo. Para este proyecto se han
escogido tres procedimientos matemáticos que pueden ser altamente explotados:
curvas de persecución, fractales y funciones trigonométricas. El motivo por el cual
que se han seleccionado estos tres procedimientos es que sus representaciones
gráficas consiguen patrones asombrosos, en algunos casos inimaginables siendo
muy apropiados para la generación de diseños.
Uno de los potenciales al utilizar procedimientos matemáticos para la generación
de diseños, es la posibilidad de crear diseños únicos (controlando los parámetros a
partir de los cuales los diseños son generados). Además la citada parametrización
permite que el resultado final de un diseño dependa de los parámetros que hayan
sido otorgados al procedimiento, de esta manera se brinda la opción de generar
diversos diseños resultantes de un mismo procedimiento, dotándole a la aplicación
de una gran posibilidad de personalización. Todos estos aspectos analizados
determinan la eficacia y eficiencia de este proyecto, por lo que brindaría al usuario,
en determinados casos, la posibilidad de obtener un diseño sin la necesidad de
contactar con un especialista. Dicho proyecto brinda también la opción al usuario
de ser él mismo quien mediante la manipulación de ciertos parámetros pueda
personalizar la imagen deseada. Este proceso será sencillo y no deberá requerir de
un largo tiempo para llevarse a cabo. Al crear una herramienta gratuita que genere
de forma automática, rápida y personalizada patrones de diseños únicos y estéticos,
estos patrones de diseño se vuelven asequibles para cualquier persona, por lo que
tanto el tiempo como el factor económico dejan de ser ya un obstáculo.
1.6 Objetivos
1.6.1 Objetivo General
Diseñar y desarrollar una herramienta que genere automáticamente y de manera
personalizada diseños basados en procedimientos matemáticos.
1.6.2 Objetivos Específicos
Estudiar y analizar diferentes procedimientos matemáticos que puedan ser
utilizados para la generación automática de diseños.
Desarrollar una librería de software que permita la generación automática de
diseños a partir de procedimientos matemáticos.
6
Desarrollar una aplicación móvil que utilice la librería desarrollada en el punto
dos para la generación automática de fondos de pantalla para este tipo de
dispositivos.
7
2. MARCO TEÓRICO
2.1 Antecedentes
Una de las aplicaciones de las matemáticas es el arte y esta aplicación tuvo su origen
hace miles de años atrás. Las matemáticas fueron utilizadas como base para el
diseño de catedrales góticas y mosaicos, los griegos utilizaban porciones
matemáticas para generar diseños emblemáticos de los cuales resultan majestuosas
construcciones. Esta combinación está íntimamente ligada a una búsqueda
exhaustiva de la perfección, reconocimiento de patrones de diseño y belleza.
La naturaleza, está regida por las matemáticas, y éstas últimas poseen un gran
potencial en varias ramas, una de las más controversiales y poco conocidas es la
generación de imágenes armónicas para ser utilizadas en diseño.
A continuación se muestra una imagen generada automáticamente por el aplicativo
Mathscapes.
Figura 2-1. Imagen perteneciente a la galería "Mathscapes" (paisajes matemáticos).
Anne M. Burns (KINDSEIN, 2006) afirma que gracias a los ordenadores pudo "ver"
la belleza de las matemáticas. En la imagen las nubes y plantas fueron creadas
utilizando fractales, las montañas se crearon con sumas trigonométricas con
coeficientes generados al azar. Finalmente, se proyecta todo sobre la pantalla del
ordenador haciendo una transformación tridimensional.
En el año 1910 Gaston Julia junto con Pierre Fatou desarrollaron una teoría, la que
indica cómo a partir de cualquier función compleja se puede fabricar, por medio de
8
una sucesión definida por inducción, un conjunto cuya frontera es imposible de
dibujar a pulso por ser de longitud infinita, entre otras propiedades. Este conjunto
se le denomina Conjunto de Julia, siendo Gaston Julia un precursor de lo que hoy
se conocen como fractales.
La extraordinariamente confusa forma de conjuntos relacionados con estas
iteraciones se reveló en el momento en que los gráficos por ordenador fueron lo
suficientemente avanzados, es así que en la década de los setenta, el matemático
francés de origen polaco Benoit Mandelbrot, cuando trabajaba en el centro de
investigación Thomas J. Watson y gracias a la aparición de la computadora digital
que IBM desarrolló, logró representar en el ordenador la imagen que genera el
conjunto fractal al que se le atribuye su mismo nombre (Conjunto de Mandelbrot).
Este trabajo no estuvo al alcance de Julia ya que solo fue posible gracias al uso del
ordenador. En ésta época, se logró un paso más hacia el realismo en la animación
3D gracias al desarrollo de fractales. El término fue acuñado en 1975 por el
matemático Benoit Mandelbrot.
En 1979–80, la primera película en hacer uso de fractales fue “Vol Libre” de Loren
Carpenter, quien trabajaba en Boeing. En ella se mostraba un vuelo sobre un paisaje
conformado por un fractal, y dicho video fue presentado en la SIGGRAPH de 1980
(CARLSON, 1994). Carpenter eventualmente fue contratado por Pixar para crear
un planeta fractal para la secuencia de “Genesis Effect” en “Star Trek II: la ira de
Khan” en junio de 1982 (VIMEO & CARPENTER, 2009).
Michele Emmer (EMMER, 2005, pág. 6), profesor titular de Matemáticas
(Universidad de Roma «La Sapienza») indica que “En los últimos años se ha
producido un notable incremento del uso del ordenador en matemática...”, lo cual
ha despertado un considerable interés en los amantes del arte por las matemáticas,
imágenes matemáticas y en los matemáticos su interés por la belleza de las
imágenes resultantes de los estudios matemáticos realizados.
En el artículo “The Endless Wave” (BRILL, 2002) de Bob Brill se presentan
imágenes de diseños extraordinarios generados por algoritmos a base de ondas
sinusoidales, variaciones de funciones trigonométricas, e incluso funciones que
abarcan el campo de los números complejos. También se pueden encontrar
hermosas imágenes caracterizadas por sus diseños auténticos resultantes del
concepto “Curvas de persecución”, se pueden apreciar en el artículo “Fun with
Whirls” (MITCHELL, 2015).
9
En la actualidad se han desarrollado aplicaciones que generan diseños grandiosos
haciendo uso de Fractales, uno de las más potenciales es ‘Frax’ (FRAX, s.f.): una
aplicación para sistemas operativos iOS. Otra aplicación que hace uso de Fractales
es ‘Fractoid’ (FRACTOID, 2011) que genera wallpapers a partir de los Conjuntos
de Julia y Mandelbrot para dispositivos móviles Android.
2.2 Marco Conceptual
Este proyecto abarca varias áreas de la carrera de Ingeniería en Computación
Gráfica:
Matemáticas
Las matemáticas forman el papel protagónico en el desarrollo del presente proyecto.
En ocasiones, las matemáticas pueden resultar para muchos algo poco interesante,
incomprensible y hasta complejo y esto puede estar ligado con la experiencia propia
que cada uno haya tenido con las matemáticas. Sin embargo al observar diseños que
han sido generados a través de procedimientos y siendo éstos matemáticos, se
observa a las matemáticas desde otra perspectiva, resultando no difícil causar
sorpresa y admiración que tanta belleza estética se esconda en esta rama.
Curvas de Persecución: Es la curva que describe el movimiento de un objeto que
persigue continuamente a otro objeto que se desplaza.
Fractales (Conjunto de Julia y Mandelbrot): Los fractales son elementos calificados
como semi-geométricos (por su irregularidad no pertenecen a la geometría
tradicional) que disponen de una estructura esencial que se reitera a distintas
escalas.
Tanto el Conjunto Julia, como el Conjunto Mandelbrot son fractales determinados
por una sucesión definida por inducción que se generan a partir de una determinada
función cuadrática y que se aplican a un conjunto de números complejos, dando
como resultado diseños armónicos.
Funciones Trigonométricas: Rama de las matemáticas que tiene como objetivo la
medición de los triángulos. Incluye las funciones seno, coseno, tangente,
cotangente, secante y cosecante. Por su complejidad estas funciones generan
representaciones gráficas potencialmente utilizables en diseños.
Diseño
El diseño como ya se ha mencionado se encuentra en auge en esta época, no
obstante el diseño tiene una gran historia. En el presente proyecto el diseño será
10
generado a partir de procedimientos matemáticos. Trabajos relacionados con el
diseño también se perciben en la elaboración de la interfaz gráfica cliente desde un
punto de vista estético.
Móvil: Interfaz de la aplicación cliente.
Artístico: Parametrización de la generación automática de diseños a partir de
procedimientos matemáticos.
Programación
Las matemáticas son las bases para el desarrollo de este proyecto, vista desde la
Computación Gráfica como carrera, las matemáticas se encuentran íntimamente
ligadas a la informática, ¿Por qué? Para el procesamiento de la mayoría de
procedimientos (funciones) matemáticos se necesita del ordenador. Existen
infinidad de programas diseñados y desarrollados para poder visualizar gráficas de
funciones. Para poder conseguir en este caso, que la generación de diseños a partir
de procedimientos matemáticos se pueda realizar de manera personalizada, es
necesario la implementación de algoritmos en donde se pueda plasmar la lógica, en
donde los parámetros de entrada juegan un papel muy importante ya que dotan a
este proyecto de mucho potencial. Es aquí donde la programación resulta de vital
importancia para llegar al objetivo planteado. El desarrollo del proyecto se basa en
la programación:
Servidor: Desarrollo de una librería de software que permita la generación
automática de diseños a partir de los procedimientos matemáticos expuestos.
Cliente: Programación de una aplicación móvil que sea capaz de conectarse con la
librería de software definida en el punto anterior para la generación automática de
fondos de pantalla para celulares.
2.3 Estado Tecnológico Actual
Se vive una era tecnológica, en la que la interacción con aparatos electrónicos como
son: el computador, smartphones y las tablets (entre otros) se ha vuelto un nuevo
hábito en el comportamiento del ser humano. Otro aspecto considerablemente
importante es la comunicación visual, cuya esencia puede ser definida con una frase
muy popular: “Una imagen vale más que mil palabras”.
El aspecto estético se ha vuelto cada vez más importante y cada persona tiene
definido su propio estilo para vestir y en ocasiones, hasta el color predilecto para el
estuche de su celular. El diseño es una rama que si bien es cierto ha tomado fuerza
11
en los últimos años, ha existido desde la antigüedad. Un diseño puede ser apreciado
al observar una construcción arquitectónica o al apreciar imperceptiblemente la
sutil y afín señalética que define visualmente a una empresa. Sin duda que el ser
humano admire y viva del arte es algo innato en él.
Los diseños (imágenes) se han convertido en la tendencia actual que satisface a la
mayoría de personas que consideran a la estética indispensable en todo ámbito. Una
relación poco conocida, pero que a nivel de resultados es altamente explotable es el
diseño obtenido a partir de las matemáticas. Las matemáticas y el arte se encuentran
íntimamente ligados. En las últimas décadas las matemáticas adquirieron una
nueva perspectiva artística que despertó el interés de muchos artistas en las
matemáticas así como de muchos matemáticos en el arte, resultado de esto se han
obtenido diseños armónicos que causan sensación por la extrema y extravagante
belleza. Existen programas caracterizados por su potencial y están adecuados para
el desarrollo y obtención de imágenes asombrosas en base a funciones matemáticas
como son GeoGebra (GEOGEBRA, 2016) y Mathematica (Wolfram Computation
Meets Knowledge, 2016).
Los aparatos tecnológicos han pasado a formar parte de la vida de cada individuo,
el uso de un sin número de aplicaciones se ha vuelto parte de la rutina diaria de las
personas. Este proyecto aprovecha la situación tecnológica actual y brinda una
herramienta potencial que evidencia el poder matemático en el aspecto artístico.
2.4 Fundamento teórico
Este proyecto se fundamenta en tres grandes grupos (procedimientos) del área de
Matemáticas, los cuales han sido escogidos porque sus resultados generan imágenes
atractivas, armónicas que son potencialmente utilizables en tareas de diseño
artístico. Una de las cualidades más atractivas del grupo de fractales es que el
diseño generado se repite a diferentes escalas. Mientras que en curvas de
persecución se tiene la libertad de escoger la figura y las posiciones de la misma,
generándose un diseño en base al movimiento de cada una de estas posiciones
mientras se persiguen entre sí. Y finalmente el grupo de funciones trigonométricas
al tener las características de periodicidad y amplitud dan a los diseños ese toque
elegante y suave a las formas de sus curvas.
12
Las bases teóricas fundamentales detrás de los procedimientos seleccionados se
detallan a continuación.
2.4.1 Fractales
En 1975, Benoit Mandelbrot construyó el concepto de fractal, el cual indica que un
fractal es un objeto semi geométrico cuya estructura básica, fragmentada o
irregular, se repite a diferentes escalas. Un fractal es una figura, que puede ser
espacial o plana, formada por componentes infinitos. Su principal característica es
que su apariencia y la manera en que se distribuye estadísticamente no varían aun
cuando se modifique la escala empleada en la observación. Si se observa el mismo
fractal a diferentes escalas, resulta difícil apreciar cuál de los enfoques es mayor o
si existe alguna diferencia en la representación. Por lo que los fractales poseen una
estructura semi geométrica recursiva. Un fractal puede ser creado con propósitos
artísticos o científicos, sin embargo cabe destacar que existen estructuras naturales
que pueden ser modeladas como estructuras fractales tales como nubes, copos de
nieve, etc.
Los procedimientos matemáticos para este primer grupo corresponden a fractales,
los que fueron escogidos se aplican sobre el campo de los números complejos ℂ.
a) Conjunto de Julia
Una familia muy notable de conjuntos de Julia se obtienen a partir de funciones
polinomiales simples 𝒇𝒄(𝒛) = 𝒛𝒏 + 𝒄, donde 𝒄 es un número complejo. El
conjunto de Julia se obtiene a partir de esta función, se denota Jc.
Un algoritmo para obtener el conjunto de Julia de 𝒇𝒄(𝒛) = 𝒛𝒏 + 𝒄 es el siguiente:
Fractales 1. Conjunto de Julia
2. Conjunto de Mandelbrot
Procedimientos
Matemáticos
1. Fractales
2. Curvas de Persecución
3. Funciones Trigonométricas
13
𝒛𝟎 = 𝒛
𝒛𝒏+𝟏 = 𝒛𝒏𝒏 + 𝒄,
Con n ∈ ℕ y, sea 𝒄, 𝒛 ∈ ℂ, se verifica para 𝒛𝟎∈ ℂ si la sucesión
diverge o no.
Si esta sucesión queda acotada, entonces se dice que z pertenece al conjunto de Julia
de parámetro c.
Para construir el Conjunto Completo de Julia para un polinomio 𝑷 de grado mayor
o igual que 2, es necesario encontrar el conjunto de puntos en el plano cuyas órbitas
tienden al infinito bajo 𝑷. En términos prácticos, es habitual verificar si la sucesión
ha alcanzado un valor lo suficientemente grande tras un número determinado de
iteraciones, además el “tiempo” (número de iteraciones) que la sucesión requiere
para obtener dicho valor puede ser utilizado para dotar de un color determinado al
punto bajo estudio.
En 1906, Fatou demostró que al aplicar este método iterativo a todos los puntos del
plano complejo se obtiene que la mayoría de ellos generan órbitas que van hacia el
infinito, pero que existe un grupo de puntos para los cuales esto no sucede
(MEDINA, s.f.). De hecho se puede concluir algo más: si para un 𝒛𝟎 se cumple que
un elemento de su órbita tiene módulo mayor que 2, entonces la órbita de
ese 𝒛𝟎 tiende a infinito (GETZ & HELMSTEDT, 2004)(pp. 230)). Los puntos cuya
órbita no va a infinito forman un conjunto denominado conjunto Kp y cuyo borde,
la frontera entre los puntos cuya órbita escapa y los puntos para los cuales esto no
ocurre, se denomina conjunto de Julia Jp asociado a la constante 𝑐 inicial.
Figura 2-2. Muestra Gráfica del Conjunto Completo de Julia.
Conjunto de
Julia Jc
14
Figura 2-3. Distintos de Conjuntos de Julia – Imagen tomada de la referencia (MEDINA, s.f.).
Como se observa en la figura anterior hay conjuntos continuos (conexos), mientras
que otros se encuentran separados en varios y hasta infinitos fragmentos
(disconexos).
Para conocer si un conjunto de Julia es conexo o no, de acuerdo a lo mencionado
anteriormente se necesita pasar cada uno de los números complejos 𝑧0 por el
método iterativo. Pero gracias al hallazgo en el año 1919 de Julia y Fatou quienes
probaron de manera separada que, para conocer si el conjunto de Julia asociado a
un cierto número complejo 𝑐 era conexo o disconexo hacía falta estudiar
únicamente la órbita de 𝑧0 = 0. Es decir si la órbita de 0 tendía a infinito, entonces
el conjunto de Julia asociado a 𝑐 es disconexo, pero si la órbita de 0 no escapa a
infinito, entonces este conjunto de Julia es conexo. Esto permite conocer de qué
tipo de Conjunto de Julia se trata, sin la necesidad de estudiar las órbitas de cada
número complejo, lo que simplifica considerablemente los cálculos para obtener
dicho resultado (MEDINA, s.f.).
b) Conjunto de Mandelbrot
El matemático Mandelbrot utilizó las siguientes deducciones para definir el
Conjunto de Mandelbrot:
La órbita de 0 determina si el conjunto de Julia asociado a un número complejo
𝒄 es conexo o no.
Se conoce cuándo una órbita tiende a infinito.
15
𝒛𝟎 = 𝟎
𝒛𝒏+𝟏 = 𝒛𝒏𝟐 + 𝒄
Con n ∈ ℕ y, sea 𝒛𝟎 = 𝟎 , se verifica para cada c ∈ ℂ, si la
sucesión diverge o no.
Por lo que concluyó que el conjunto de Mandelbrot es el conjunto de números
complejos 𝒄 para los que el conjunto de Julia asociado es conexo. Y queda definido
de la siguiente manera:
2.4.2 Curvas de Persecución
Una curva de persecución es una curva generada por la trayectoria que recorre un
punto A en busca de otro punto B en movimiento, la dirección y el sentido del punto
A siempre “apuntan” al punto B.
De acuerdo a una definición más concreta obtenida de la referencia bibliográfica
(MITCHELL, 2015) “…n agentes comienzan en los vértices de un polígono regular
de n lados. Cada agente se mueve continuamente hacia su vecino más cercano, en
el sentido contrario a las agujas del reloj, a la misma velocidad. Los caminos
trazados por los agentes son espirales logarítmicas, que convergen en el centro del
polígono”. La Figura 2-4 muestra las curvas de este tipo para los casos de un
triángulo equilátero, un cuadrado y un hexágono regular.
Figura 2-4. Imágenes obtenidas de la referencia bibliográfica (MITCHELL, 2015).
2.4.3 Funciones Trigonométricas
En matemáticas, las funciones trigonométricas son funciones que se han definido
con el propósito de estudiar las razones trigonométricas.
Una razón trigonométrica se define como la relación entre los lados del triángulo y
ésta exclusivamente depende exclusivamente de los ángulos que se forman entre
sus lados. Existen tres razones trigonométricas básicas: seno, coseno y tangente.
Conjunto
de
Mandelbrot
16
El presente proyecto para el grupo de funciones trigonométricas está basado en tres
procedimientos matemáticos que se detallan en el estudio de Bob Brill en su artículo
“The Endless Wave” de acuerdo a la referencia (BRILL, 2002). Se escogieron
específicamente tres funciones ya que generan diseños con resultados muy
atractivos e interesantes, el primer caso es la curva de Lissajous que es el resultado
de dos movimientos armónicos simples, en el segundo caso es una función
trigonométrica sobre el campo de los números reales y el tercer caso es una función
trigonométrica aplicada sobre el campo de los números complejos. Cabe destacar
que al ser funciones trigonométricas poseen ciertas características que se analizarán
posteriormente como la periodicidad, amplitud y desfase que las vuelve
parametrizables y que permiten generar una gran variedad de diseños.
a) Curva de Lissajous
Esta familia de curvas fue inicialmente investigada por Nathaniel Bowditch en 1815
y posteriormente con más detalle en el año 1855 por Jules Lissajous. La curva de
Lissajous es la gráfica del sistema de ecuaciones paramétricas correspondiente a la
superposición de dos movimientos armónicos simples en direcciones
perpendiculares.
𝒙 = 𝑨𝑠𝑒𝑛 (𝒂𝑡 + 𝜹𝒂) 𝒚 = 𝑩𝑠𝑒𝑛 (𝒃𝑡 + 𝜹𝒃)
En este caso su posición se determina en función del tiempo (t). De acuerdo a la
referencia (LINKEDIN Corporation, 2012) la curva de Lissajous es un movimiento
periódico de vaivén, en el que un cuerpo oscila a un lado y a otro de su posición de
equilibrio en una dirección determinada y en intervalos iguales de tiempo. Una
partícula sometida a este tipo de movimiento tendrá un punto central, alrededor del
cual oscilará.
Es decir que las figuras de Lissajous se producen al representar de manera
simultánea estas dos ondas senoidales dando lugar a imágenes muy atractivas y
curiosas.
Funciones
Trigonométricas
1. Curva de Lissajous.
2. Función Trigonométrica en el campo de los números
Reales ℝ.
3. Función Trigonométrica en el campo de los números
Complejos ℂ.
17
Las variables A y B determinan la amplitud de la función, las variable a y b
determinan la periodicidad y las variables 𝜹𝒂, 𝜹𝒃 determinan el desfase. Con mayor
detalle se trata este tema en el apartado 3.4.
La forma de la curva depende de la relación 𝒂
𝒃 esta es la relación de las frecuencias
de los movimientos en x e y. También depende de los valores de las variables 𝜹𝒂, 𝜹𝒃
(delta a y delta b) Se analizan varios casos de acuerdo a los valores de las variables
antes mencionadas, así:
Relación Imagen
𝒂
𝒃= 𝟏
𝒂
𝒃= 𝟐, 𝜹𝒂 =
𝝅
𝟐, 𝜹𝒃 = 𝟎
Si 𝒂
𝒃 es un número irracional.
Tabla 2-1. Tabla de la relación (a/b) Curva de Lissajous. Imágenes (curva de Lissajous) obtenidas de la
librería desarrollada bajo distintos parámetros
18
b) Función Trigonométrica en el campo de los números Reales ℝ.
En el artículo (BRILL, 2002) en la sección “Hallazgo de Imágenes en el plano Real”
se expone la elaboración de un diseño a partir de la fórmula 𝒆𝒚 (𝒔𝒆𝒏 (𝟏
𝒙)) +
𝒆𝒙 (𝒄𝒐𝒔 (𝟏
𝒚)). En el año de 1986 comenzó el interés de Bob Brill en algoritmos
artísticos basados en un artículo científico de A. K. Dewdney. Estos algoritmos
fueron su inspiración, los exploró y expandió dando lugar a la construcción de
imágenes, en este caso de acuerdo a la fórmula antes citada el algoritmo indica que
haciendo una correspondencia entre los pixeles de una imagen rectangular y un
número igual de puntos uniformemente espaciados de una región rectangular del
plano real y evaluando a las coordenadas x e y de cada punto de la región en la
ecuación se determina el color del pixel correspondiente. Sin embargo en el
desarrollo de este proyecto se decidió aumentar parámetros a esta fórmula,
aprovechando que se trata de una función trigonométrica. La fórmula queda de la
siguiente manera:
𝒆𝒚 (𝑨 𝒔𝒆𝒏 (𝟏
𝒙+ 𝜹𝒂)) + 𝒆𝒙 (𝑩 𝒄𝒐𝒔 (
𝟏
𝒚+ 𝜹𝒃))
De esta manera se forma un diseño atractivo, el mismo que puede variar
dependiendo de los valores que se le dé a los diferentes parámetros.
c) Función Trigonométrica en el campo de los números Complejos ℂ
Otro apartado del artículo (BRILL, 2002) que se denomina “Hallazgo de Imágenes
en el plano Complejo” muestra cómo a partir de la fórmula (𝒛
𝒕𝒂𝒏 𝒛)
𝟐
(z = x + yi, z
∈ ℂ) se genera imágenes utilizando la misma lógica que se describe en “Hallazgo
de Imágenes en el plano Real”. Las coordenadas x e y se evalúan en la fórmula la
cual desglosando queda de la siguiente manera: 𝑐 = (𝒙+𝒚𝒊
𝒕𝒂𝒏 (𝒙+𝒚𝒊))
𝟐
, con 𝒄 = 𝒂 + 𝒃𝒊
. Para obtener el diseño se tiene en cuenta únicamente la parte real del número
complejo resultante, es decir el color del píxel correspondiente lo determinará el
valor de 𝒂.
19
3. PROCESO DEL DESARROLLO DE LA LIBRERÍA DE
SOFTWARE
Para el desarrollo de la librería de software para la generación automática de diseños
a partir de procedimientos matemáticos se utilizó el lenguaje de programación
Python.
Python es un lenguaje de programación, orientado a objetos e independiente de la
plataforma, preparado para realizar cualquier tipo de programa, desde aplicaciones
Windows, móviles hasta páginas web. Además es un lenguaje interpretado, lo que
significa que no se necesita compilar el código fuente para que sea ejecutado. De
acuerdo a la definición tomada de ( Python Software Foundation, 2016) “Python se
distribuye bajo una licencia de código abierto aprobada por OSI que hace que sea
libre de usar, incluso para productos comerciales”. Esta licencia se denomina
Python Software Foundation License. Python es un lenguaje de alto nivel ya que su
estructura sintáctica y semántica legible, está acorde a las capacidades cognitivas
humanas. Al ser de alto nivel es independiente de la arquitectura del hardware,
motivo por el cual, admite mayor portabilidad a diferencia de los lenguajes de bajo
nivel. Es también un lenguaje de tipado dinámico lo que quiere decir que al declarar
las variables a usarse en la programación no se requiere que sean inicializadas ni
definir su tipo de dato, al contrario este se auto asigna en ejecución según el valor
dado. Además Python un lenguaje de servidor, lo que permite que el desarrollo y
proceso se realice en el servidor. Por todo lo mencionado Python es ideal en la
implementación de la librería, además posee variedad de paquetes, para el caso de
procesamiento de imágenes uno a destacar es el paquete OpenCV (Open Source
Computer Vision Library), para el manejo de vectores y matrices está Numpy, un
paquete muy potencial.
El proyecto se ha planteado con una estructura Cliente-Servidor. La lógica detrás
de la generación automática de diseños se ejecuta en el servidor, de esta manera los
métodos de generación de diseños son independientes del software cliente que se
utilice. El objetivo del proyecto es generar de manera automática diseños atractivos
que puedan ser utilizados en última instancia como fondos de pantalla para
20
dispositivos móviles. La cantidad de cálculos requeridos para generar diseños a
partir de los procedimientos escogidos es alto por lo que se requiere de
características mayores a las de un dispositivo móvil para poder generar los diseños
correctamente y en un tiempo aceptable, además llevando la lógica de generación
al servidor se evita que las funciones del móvil se vean afectadas por la herramienta
en ejecución. Por otra parte, albergar la lógica de generación en el servidor permite
que si a futuro el presente proyecto se desee ampliar no quede restringido
únicamente a un solo software cliente, sino que sea posible obtener los diseños
generados a través de las funciones implementadas a través de otro tipo de software
cliente como puede ser una página web, aplicativos móviles iOs, etc.
En este apartado se describe todo el proceso para la elaboración de la librería, cuyo
resultado final es generar de manera automática diseños a partir de los
procedimientos matemáticos que en el capítulo anterior fueron mencionados,
explotando su característica más importante la alta parametrización que permiten.
El desarrollo de la librería esencialmente se clasifica en tres partes:
El conocimiento previo que fue adquirido al analizar y estudiar los tres
grupos de procedimientos matemáticos. Comprender a profundidad cómo
funciona cada uno de ellos, sus características propias e identificar aquellas
características que comparten en común. Analizar, deducir y entender toda
la lógica para la implementación de los algoritmos basados en los
procedimientos matemáticos presentados.
Comprender, familiarizarse con el lenguaje de programación Python, al
igual que con las paquetes adicionales que se utilizaron. Y de esta manera
estar preparado a nivel técnico para la implementación de los algoritmos.
Implementar la librería.
3.1 Paquetes Utilizados
Para plasmar visualmente los diseños generados, es necesario crear imágenes desde
cero y trabajar sobre ellas, manipulando sus píxeles en cada algoritmo
correspondiente. En el desarrollo de la librería de software que permite la
generación de diseños se hizo uso de los siguientes paquetes de Python:
Numpy
OpenCv,
21
3.1.1 NumPy
NumPy es una de los paquetes más importantes de Python, ya que contiene toda la
funcionalidad para trabajar con vectores y matrices. De acuerdo a la definición
obtenida del sitio oficial (NumPy developers, 2016) “NumPy es el paquete
fundamental para la computación científica con Python.”. El módulo que antecedía
a NumPy era Numeric, tuvo su origen gracias a Jim Hugunin, diseñador de
software. Su propósito fue dotar a Python de la potencialidad de cálculo
equivalentes a las de otros softwares como MATLAB. Jim mejoró a Numeric
añadiéndole nuevas funcionalidades y es así que se originó Numpy.
3.1.2 OpenCV
“OpenCV es un paquete libre de visión artificial originalmente desarrollada por
Intel” (OpenCV, 2016). Desde que apareció en enero de 1999, se ha utilizado en un
sinnúmero de aplicaciones, entre las cuales se encuentran sistemas de seguridad con
detección de movimiento, hasta aplicaciones de control de procesos donde se
realiza reconocimiento de objetos.
OpenCV posee:
Estructuras básicas de datos para operaciones con matrices y procesamiento
de imágenes. Permite visualizar datos de manera sencilla y extraer
información de videos e imágenes.
Funciones de captura, carga y presentación de imágenes.
OpenCV en Python utiliza Numpy, que como ya se indicó anteriormente es un
paquete altamente perfeccionada para operaciones numéricas con una sintaxis de
estilo MATLAB. Todas las estructuras de matriz OpenCV son convertidas a partir
de matrices NumPy.
OpenCV además cuenta con más de 2500 algoritmos optimizados orientados al
tratamiento de imágenes y una gran comunidad de desarrolladores.
3.2 Creación de Imágenes
Una imagen se puede definir como una función bidimensional 𝒇(𝒙, 𝒚) donde 𝒙 𝑒 𝒚
son las coordenadas espaciales, y el valor de 𝒇 en cualquier par de coordenadas
(𝒙, 𝒚) es la intensidad del color de la imagen en dicho punto (pixel). Una imagen
también se puede definir como una matriz dispuesta con m filas por n columnas.
Habitualmente los ejes del plano real están posicionados de la siguiente manera:
22
Figura 3-1. Plano Real.
Sin embargo cuando se trabaja con imágenes en OpenCV a diferencia del plano
real, el eje Y del canvas que es el área en donde se visualiza la imagen, está
dispuesto al revés. De la siguiente manera:
Figura 3-2. Ejes dispuestos en las imágenes.
23
Figura 3-3. Imagen de 4x4 (ancho x alto).
Figura 3-4. Imagen detallada con el valor de cada pixel y posición.
En la figura anterior se observa cada pixel con su correspondiente posición (𝑥, 𝑦).
La imagen analizada está a color, por lo que posee tres canales. Cada canal
corresponde al color B[blue] - G[green] - R[red] corresponden a azul, verde y rojo
24
respectivamente. El valor de cada canal del pixel se encuentra entre 0 y 255. Cuando
una imagen posee un solo canal esto determina que cada pixel tendrá un solo valor
el cual se encuentra también entre 0 y 255, tratándose habitualmente de una imagen
en escala de grises.
La siguiente sentencia del lenguaje Python permite crear una imagen mediante la
creación de una matriz de ceros, por lo que la imagen tendrá color negro.
shape es un vector que contiene la información del ancho, alto y
número de canales de la imagen.
dtype es el tipo de dato que contendrá la matriz. Estos dos tipos de
datos han sido utilizados en la librería:
float32 tipo de dato Float de precisión simple. Cuando la
imagen es de clase float32, los valores son números en punto
flotante (que se almacenan en 32 bits). En este último caso, los
valores suelen tomarse en el rango [-3.4 × 1038,3.4 × 1038].
uint8 El tipo de dato habitual para una imagen es uint8,
un entero sin signo representado en 8 bits. Es decir 28=256
valores que se distribuyen en el rango de [0,255] para cada pixel.
Los tipos de imágenes que han sido creadas de acuerdo a las distintas
funcionalidades de la librería de software son:
Figura 3-5. Ejemplo de creación de tipo de imágenes.
Todos los procedimientos matemáticos utilizados a excepción de las funciones
trigonométricas en el campo de los números reales, curvas de persecución y
Lissajous, han sido creados con el primer tipo de imagen que se muestra en la
Figura 3-5 si bien es cierto que las imágenes resultantes son a color, inicialmente
se trabajó con una imagen en escala de grises que posteriormente es coloreada,
Número de
Canales.
Tipo de dato
que contendrá
la matriz.
shape
Ancho Alto
25
además no se tiene inconveniente con el manejo de los píxeles ya que de acuerdo a
la lógica de los procedimientos, todos los valores que se les da a los píxeles son
enteros.
En la implementación de algoritmos correspondiente a: curvas de persecución y
Lissajous se utiliza el segundo tipo de imagen que se muestra en la Figura 3-5
puesto que estas funciones son resultado de graficarse líneas o curvas, desde el
inicio deben ser las imágenes declaradas a color y determinar así el color del
contorno de las curvas y del fondo.
En el tercer caso, el tipo de imagen que se muestra en la Figura 3-5 está definida a
color, y el tipo de dato es float32. Este tipo de dato se utiliza cuando se realizan
transformaciones matemáticas sobre imágenes, es decir que los valores de cada
pixel son resultado de operaciones matemáticas, cuyos valores necesitan de mayor
precisión. Siendo utilizado únicamente para funciones trigonométricas en el campo
de los números Reales, puesto que al evaluarse en la función los resultados
obtenidos contenían valores de tipo flotante.
3.2.1 Mapa de Colores
En todos los procedimientos disponibles en la librería desarrollada se aplica a las
imágenes un mapa de colores ya que inicialmente las imágenes están en escala de
grises. Para dotarlas de color y que se vuelvan aún más atractivas se aprovecha la
funcionalidad de OpenCV, que a continuación se expone, la cual a partir de una
imagen en escala de grises produce una imagen pseudo coloreada (falso color).
26
Figura 3-6. Listado de mapas de colores (DOXYGEN, 2015).
En la Figura 3-6 se visualizan todos los mapas de colores que ofrece el paquete
OpenCV.
“Paleta de colores” es una pantalla de la herramienta móvil, en la que se visualiza
los mapas de colores que dota el paquete OpenCV.
Figura 3-7. Imágenes obtenidas de la librería (Julia) con diferentes mapas de colores.
1 2
3 4
27
La primera imagen está en escala de grises, al resto son imágenes resultantes de
haber aplicado a la primera imagen la función cv2.applyColorMap con
distintos mapas de colores.
La función cv2.applyColorMap tiene como parámetros la imagen sobre la cual
se aplica el mapa de colores y a la derecha qué mapa de colores se aplica.
El código de la imagen corresponde a cada una de las imágenes (2, 3 y 4) en el
orden correspondiente.
3.2.2 Región a Visualizarse
Al inicio de este capítulo se mencionó que existen ciertas características que tienen
en común las funciones matemáticas utilizadas. Una de estas características es que
para cada una de estas funciones matemáticas, su dominio no se restringe, lo que
significa que éste es infinito. Por lo que se necesita acotar la región a visualizarse
tanto en el eje x como en el eje y. Esto otorga la posibilidad de elegir qué área del
diseño se desea visualizar. Esta área se determina mediante un intervalo en el eje x
[x0, xf] y un intervalo en el eje y [y0, yf], en todas las funciones generadoras de
diseños implementadas estos intervalos se encuentran como parámetros de entrada
a excepción del valor yf.
El valor yf del intervalo del eje y es calculado, esto se debe a que la resolución de
la imagen depende del ancho y alto del dispositivo móvil en el que se haya instalado
la aplicación móvil, por lo que la altura de la región a visualizarse es proporcional
a las dimensiones del dispositivo móvil.
El código que se muestra a continuación es una función de Utility (conjunto de
funciones utilitarias desarrolladas que son utilizadas por los procedimientos de la
librería) que calcula la coordenada yf en base a:
resolucion_w = resolución del ancho del dispositivo móvil
resolucion_h = resolución del alto del dispositivo móvil
ix_o = coordenada inicial del intervalo del eje x
ix_f = coordenada final del intervalo del eje x
iy_o = coordenada inicial del intervalo del eje y
Imagen Mapa de colores
28
Figura 3-8. Fragmento de código de la librería Python – Cálculo de coordenada final yf .
3.2.3 Traslación – Escalado y Rotación
Para poder visualizar puntos, líneas y gráficos tal como se grafican en el plano de
los números reales es necesario realizar traslación, escalado y rotación de los ejes x
e y que se utilizan en el canvas tanto en Android como en Python.
En la siguiente figura se muestran las dimensiones de la pantalla de un dispositivo
móvil y su correspondencia con los ejes x e y.
Figura 3-9. Pantalla de un dispositivo móvil (canvas) y la correspondencia con sus ejes.
El plano real habitualmente está posicionado como en la siguiente imagen, sin
embargo como en el canvas su eje y está posicionado al revés se requiere hacer una
transformación de los ejes del plano real a los ejes del canvas del dispositivo, para
conseguir que el diseño obtenido se visualice en el canvas tomando en cuenta que
sólo se quiere mostrar una región determinada, y que se visualice el diseño en la
imagen de acuerdo a cómo se detallada a continuación:
29
Figura 3-10. Puntos iniciales y finales de la región a visualizarse del diseño.
De acuerdo a la Figura 3-9 y la Figura 3-10 se puede deducir un factor de escala
para que la imagen resultante sea proporcional a la resolución del dispositivo y que
cada punto de la región corresponda a cada pixel de la imagen. La distancia
calculada |𝒙𝒇 − 𝒙𝒐| equivale a 𝑟𝑒𝑠𝑜𝑙𝑢𝑐𝑖𝑜𝑛_𝑥, la distancia calculada |𝑦𝑓 −
𝑦𝑜| equivale a 𝑟𝑒𝑠𝑜𝑙𝑢𝑐𝑖𝑜𝑛_𝑦.
Sean (x, y) coordenadas cualesquiera, cuyos valores son conocidos. Y sea entonces
(xescalado, yescalado) las coordenadas que se desean calcular. Es así que se tiene la
siguiente regla de tres para hallar su correspondencia con la imagen:
(𝑥𝑓 − 𝑥𝑜) 𝑟𝑒𝑠𝑜𝑙𝑢𝑐𝑖𝑜𝑛_𝑥
𝑥 𝑥?
𝑥𝑒𝑠𝑐𝑎𝑙𝑎𝑑𝑜 = 𝑟𝑒𝑠𝑜𝑙𝑢𝑐𝑖𝑜𝑛_𝑥 ∗ 𝑥
(𝑥𝑓 − 𝑥𝑜)𝐸𝑐. (01)
(𝑦𝑓 − 𝑦𝑜) 𝑟𝑒𝑠𝑜𝑙𝑢𝑐𝑖𝑜𝑛_𝑦
𝑦 𝑦?
𝑦𝑒𝑠𝑐𝑎𝑙𝑎𝑑𝑜 = 𝑟𝑒𝑠𝑜𝑙𝑢𝑐𝑖𝑜𝑛_𝑦 ∗ 𝑦
(𝑦𝑓 − 𝑦𝑜)𝐸𝑐. (02)
30
Figura 3-11. Traslación – Rotación.
Se parte de la Figura 3-9, el centro de los ejes se encuentra en la esquina superior
del canvas, por lo que se necesita realizar una traslación.
El primer gráfico de la Figura 3-11 está realizado en el plano real y muestra los
parámetros de entrada de la región a visualizarse, la región dada está definida por
el intervalo [x0, xf] en el eje de las x y por el intervalo [y0, yf] en el eje de las y. Se
trabaja sobre los valores de las coordenadas (x, y) que son los que se desea
transformar para poder ser visualizados en el canvas.
31
En el segundo gráfico de la Figura 3-11 se muestra la traslación, las coordenadas
(xtrasladado, ytrasladado) fueron obtenidas al sustraer de las coordenadas (x, y) los
valores iniciales de los intervalos en ambos ejes que son los valores que se necesitan
trasladar para que la región quede centrada. En el caso de la coordenada y se resta
el valor yf ya que posterior a este paso se necesita hacer una rotación (invertir los
valores que corresponden al eje y) porque el objetivo es graficar los puntos en el
canvas y de acuerdo a lo analizado su eje y se encuentra invertido. Por lo que el
valor yf que inicialmente es mayor a y0 al hacer la rotación (inversión – multiplicar
por -1) se vuelve menor a y0 y viceversa.
Quedando las fórmulas de la siguiente manera:
𝒙𝒕𝒓𝒂𝒔𝒍𝒂𝒅𝒂𝒅𝒐 = 𝒙 − 𝑥𝑜 𝐸𝑐. (03)
𝒚𝒕𝒓𝒂𝒔𝒍𝒂𝒅𝒂𝒅𝒐 = 𝒚 − 𝑦𝑓 𝐸𝑐. (04)
El tercer y cuarto gráfico de la Figura 3-11 corresponde a la rotación, sólo que en
el cuarto se posicionan a los ejes de acuerdo al canvas.
Figura 3-12. Pasos de la transformación del plano Real al plano del Canvas.
Finalmente en la Figura 3-12 se muestra el canvas con las coordenadas (x?, y?) que
son las que se desean calcular (valor en píxeles). Para hallar sus valores se tiene el
factor de escala tanto para la abscisa como para la ordenada de acuerdo a las
fórmulas 𝐸𝑐. (01)𝑦 𝐸𝑐. (02). Únicamente hace falta multiplicar por este factor:
𝑥? = 𝑪𝒐𝒐𝒓𝒅𝒆𝒏𝒂𝒅𝒂_𝒙 . (𝑟𝑒𝑠𝑜𝑙𝑢𝑐𝑖𝑜𝑛_𝑥 ∗ 𝑥
(𝑥𝑓 − 𝑥𝑜))
𝒙? = (𝒙 − 𝑥𝑜) . (𝑟𝑒𝑠𝑜𝑙𝑢𝑐𝑖𝑜𝑛_𝑥 ∗ 𝑥
(𝑥𝑓 − 𝑥𝑜)) 𝐸𝑐. (05)
32
𝑦? = 𝑪𝒐𝒐𝒓𝒅𝒆𝒏𝒂𝒅𝒂_𝒚 . (𝑟𝑒𝑠𝑜𝑙𝑢𝑐𝑖𝑜𝑛_𝑦 ∗ 𝑦
(𝑦𝑓 − 𝑦𝑜))
𝒚? = (𝒚 − 𝑦𝑓) . (𝑟𝑒𝑠𝑜𝑙𝑢𝑐𝑖𝑜𝑛_𝑦 ∗ 𝑦
(𝑦𝑓 − 𝑦𝑜)) 𝐸𝑐. (06)
En el siguiente código está implementado todo el tratamiento descrito en este
apartado.
Figura 3-13. Fragmento de código de la librería – Transformación de puntos.
Se muestran a continuación cada una de las cabeceras de las funciones con los
parámetros comunes que las caracterizan resaltados.
3.3 Fractales
Sean {𝒛𝟏, 𝒛𝟐, 𝒛𝟑, … 𝒛𝒏} variables complejas obtenidas a partir de la región del
plano escogida para la generación de la imagen (diseño) y 𝒄 una constante también
compleja. Para la obtención del Conjunto de Julia se hace uso del método iterativo
el cual se define fijando dicha constante 𝒄, posteriormente se toma el grupo de
números complejos escogidos, cada 𝒛𝒊 se eleva al valor n de la fórmula y se suma
𝑐 al resultado, el número complejo obtenido se eleva nuevamente al cuadrado y al
resultado se suma el número complejo 𝒄, y así sucesivamente (n veces, hasta
cumplir una condición de parada denominada “criterio de escape” 3.3.1). La
sucesión es el conjunto de todos los resultados parciales obtenidos y se le
Conjunto de
Julia Jc
𝒛𝟎 = 𝒛
𝒛𝒏+𝟏 = 𝒛𝒏𝒏 + 𝒄,
Con n ∈ ℕ y, sea 𝒄, 𝒛 ∈ ℂ, se verifica para 𝒛𝟎∈ ℂ si la sucesión
33
denomina órbita de 𝒛𝟎. Este proceso debe repetirse para todos los puntos obtenidos
a partir de la región determinada que se quiera mostrar.
A continuación se muestra el proceso de obtención del diseño del conjunto de Julia.
Figura 3-14. Fragmento de código para la obtención del conjunto de Julia (Librería de software).
Sean {𝒛𝟏, 𝒛𝟐, 𝒛𝟑, … 𝒛𝒏} variables complejas obtenidas a partir de la región del
plano escogida para la generación de la imagen (diseño) y 𝒄 una constante también
compleja. Para la obtención del Conjunto de Mandelbrot se calcula el Conjunto de
Julia para cada valor correspondiente a 𝒄 = 𝒛𝒊 y con 𝒛𝟎 = 0, se toma el grupo de
números complejos escogidos, para cada 𝒛𝒊 se tiene que 𝒄 = 𝒛𝒊, 𝒛𝟎 se eleva al
cuadrado y se suma 𝒄 al resultado, el número complejo obtenido se eleva
nuevamente al cuadrado y al resultado se suma el número complejo 𝒄, y así
sucesivamente (n veces, hasta cumplir una condición de parada denominada
“criterio de escape” 3.3.1). La sucesión es el conjunto de todos los resultados
parciales obtenidos y se le denomina órbita de 𝒛𝒊.
Figura 3-15. Fragmento de código para la obtención del conjunto de Mandelbrot (Librería de software).
Conjunto
de
Mandelbrot
𝒛𝟎 = 𝟎
𝒛𝒏+𝟏 = 𝒛𝒏𝟐 + 𝒄
Con n ∈ ℕ y, sea 𝒛𝟎 = 𝟎 , se verifica para cada c ∈ ℂ, si la
sucesión diverge o no.
34
3.3.1 Criterio de Escape y Algoritmo (GETZ & HELMSTEDT, 2004, pág. 231)
El criterio de escape consiste en comprobar si la sucesión (órbita de 𝒛𝒊) ha alcanzado
un valor suficientemente grande tras un número determinado de iteraciones, el
“tiempo” (número de iteraciones) que la sucesión (órbita de 𝒛𝒊) requiere para
obtener dicho valor es utilizado para dotar de un color determinado al punto en
cuestión.
Figura 3-16. Fragmento del algoritmo del Conjunto de Julia (Librería de software).
Este código muestra el método iterativo donde se utiliza el criterio de escape. Se
utiliza la misma lógica para el Conjunto de Mandelbrot. Los parámetros son:
z = 𝑧𝑛
exp = grado del polinomio
c = constante compleja
iteraciones = cuantas veces el proceso iterativo se repite
A continuación se muestran imágenes obtenidas de la librería correspondiente al
conjunto de Julia donde se muestra la función con el nombre de sus respectivos
parámetros y la función con los parámetros ingresados de la imagen resultante.
El color_map con valor 3 corresponde a cv2.COLORMAP_COOL
Figura 3-17. Diseño 1 obtenido de la librería – Conjunto de Julia.
El color_map con valor 3 corresponde a cv2.COLORMAP_JET
35
Figura 3-18. Diseño 2 obtenida de la librería – Conjunto de Julia.
Los parámetros utilizados en fractales (Julia) se describen a continuación:
Parámetros Significado
resolución_w - ancho Ancho de la imagen
resolución_h - alto Alto de la imagen
[ix_o, ix_f] = [xo ,xf] Intervalo del eje x de la región a visualizarse.
iy_o = yo Valor inicial del intervalo del eje y de la región a
visualizarse.
color_map Corresponde al mapa de colores que será aplicado a la
imagen.
iteraciones Número de iteraciones que debe repetirse el algoritmo
de obtención del conjunto de Julia para la obtención del
valor (color) de cada pixel.
exp Determina la potencia a la que es elevada la fórmula del
Conjunto de Julia.
cx Parte real del número complejo c.
cy Parte imaginaria del número complejo c.
Tabla 3-1. Tabla de Parámetros en la generación del Conjunto de Julia.
36
Figura 3-19. Diseño 1 obtenido de la librería – Conjunto de Mandelbrot.
Figura 3-20. Diseño 2 obtenida de la librería – Conjunto de Mandelbrot
Los parámetros utilizados en fractales (Mandelbrot) se describen brevemente a
continuación:
Parámetros Significado
resolución_w - ancho Ancho de la imagen
resolución_h - alto Alto de la imagen
[ix_o, ix_f] = [xo ,xf] Intervalo del eje x de la región a visualizarse.
iy_o = yo Valor inicial del intervalo del eje y de la región a
visualizarse.
color_map Corresponde al mapa de colores que se ha aplicado a la
imagen.
37
iteraciones Número de iteraciones que debe repetirse el algoritmo
de obtención del conjunto de Julia para la obtención del
valor (color) de cada pixel.
Tabla 3-2. Tabla de Parámetros en la generación del Conjunto de Mandelbrot.
3.4 Curvas de Persecución
Para familiarizarse con los términos que se usan en la definición y la lógica del
algoritmo es necesario que se conozca el papel de cada uno de ellos.
Agente: Se denomina agente al objeto que posee una posición x e y en el plano real
y que persigue a otro agente al cual se le denomina presa.
Presa: Es un agente cuya característica es que a más de perseguir, éste está siendo
perseguido.
Perseguir: Se denomina perseguir a la acción que ejerce el agente al moverse en la
dirección que se encuentra su presa hasta que su posición sea igual a la de su presa.
Figura: Una figura está determinada en el plano por vértices, cada vértice
representa un agente. Asumiendo que la figura contenga sus vértices enumerados,
el segundo vértice se convierte en la presa del primer agente y así sucesivamente.
A excepción del último agente, ya que su presa es el primer agente terminando así
con el ciclo. Al graficar cada una de las posiciones de los agentes mientras
persiguen a su presa, y al graficar una línea entre la posición inicial de cada agente
y la posición de la presa en ese mismo instante, se genera un gráfico inspirado en la
trayectoria de los agentes y que será utilizado como diseño.
Para llevar a cabo el algoritmo se necesita determinar la posición de cada agente
conforme éstos se van moviendo, la posición varía y ésta depende de la posición en
la que esté el agente presa.
Dado el siguiente ejemplo, se encuentran tres agentes. Para obtener la información
que se requiere se toma el caso del primer agente (A1) al querer moverse hacia su
presa (A2).
38
Figura 3-21. Triángulo rectángulo formado por un agente y su próxima posición.
En el gráfico se muestra el punto (𝒙𝟏, 𝒚𝟏) que corresponde a la posición inicial del
agente A1 cuyas coordenadas son conocidas, mientras que el punto (𝒙𝟐, 𝒚𝟐)
corresponde a la posición del agente A1 cuando se haya movido en dirección al
agente A2 (su presa) una cierta distancia (módulo).
Utilizando el teorema de Pitágoras se tiene que:
(𝒙𝟐 − 𝑥1)2 + (𝒚𝟐 − 𝑦1)2 = a2 𝐸𝑐. (07)
Y de acuerdo a las siguientes identidades trigonométricas:
sen 𝜃 =𝑦2 − 𝑦1
a
𝐸𝑐. (08)
cos 𝜃 =𝑥2 − 𝑥1
a
𝐸𝑐. (09)
𝑦2 − 𝑦1 = a(sen 𝜃)
𝑥2 − 𝑥1 = a(cos 𝜃)
Para obtener el valor del ángulo 𝜃 se utiliza las coordenadas iniciales (𝑥1, 𝑦1) del
agente A1 y las coordenadas (𝑥𝐴2 2, 𝑦𝐴2 2
) de la presa A2 que también son conocidas:
tan 𝜃 = 𝑦𝐴2 2
− 𝑦1
𝑥𝐴2 2− 𝑥1
39
tan−1(tan 𝜃) = tan−1 (𝑦𝐴2 2
− 𝑦1
𝑥𝐴2 2− 𝑥1
)
𝜃 = tan−1 (𝑦𝐴2 2
− 𝑦1
𝑥𝐴2 2− 𝑥1
)
Para hallar a la coordenada 𝒙𝟐 basándose en la fórmula 𝐸𝑐. (07):
(𝒙𝟐 − 𝑥1)2 + (𝑦2 − 𝑦1)2 = a2
(𝒙𝟐 − 𝑥1)2 = a2 − (𝑦2 − 𝑦1)2
(𝒙𝟐 − 𝑥1)2 = a2 − (a(sen 𝜃) )2
(𝒙𝟐 − 𝑥1)2 = a2 − a2(sen2 𝜃)
(𝒙𝟐 − 𝑥1)2 = a2 (1 − sen2 𝜃 )
√(𝒙𝟐 − 𝑥1)2 = √a2 (1 − sen2 𝜃 )
|𝒙𝟐 − 𝑥1| = √a2 (1 − sen2 𝜃 )
|𝒙𝟐 − 𝑥1| = a√(1 − sen2 𝜃 )
𝒙𝟐 − 𝑥1 =
+
−a√(1 − sen2 𝜃 )
𝒙𝟐 = 𝑥1 + a√(1 − sen2 𝜃 ) 𝐸𝑐. (10)
𝒙𝟐 = 𝑥1 − a√(1 − sen2 𝜃 ) 𝐸𝑐. (11)
Para hallara la coordenada 𝒚𝟐basándose en la fórmula 𝐸𝑐. (07):
(𝑥2 − 𝑥1)2 + (𝒚𝟐 − 𝑦1)2 = a2
(𝒚𝟐 − 𝑦1)2 = a2 − (𝑥2 − 𝑥1)2
(𝒚𝟐 − 𝑦1)2 = a2 − (a(cos 𝜃) )2
(𝒚𝟐 − 𝑦1)2 = a2 − a2(cos2 𝜃)
(𝒚𝟐 − 𝑦1)2 = a2 (1 − cos2 𝜃 )
√(𝒚𝟐 − 𝑦1)2 = √a2 (1 − cos2 𝜃 )
|𝒚𝟐 − 𝑦1| = √a2 (1 − cos2 𝜃 )
|𝒚𝟐 − 𝑦1| = a√(1 − cos2 𝜃 )
𝒚𝟐 − 𝑦1 =
+
−a√(1 − cos2 𝜃 )
𝒚𝟐 = 𝑦1 + a√(1 − cos2 𝜃 ) 𝐸𝑐. (12)
𝒚𝟐 = 𝑦1 − a√(1 − cos2 𝜃 ) 𝐸𝑐. (13)
Se muestra a continuación la implementación de la lógica antes expuesta en la cual
se basa Curvas de Persecución.
Se reemplaza con la 𝐸𝑐. (08)
Se reemplaza con la 𝐸𝑐. (09)
40
Figura 3-22. Código que implementa la lógica de agente, presa y perseguir.
A continuación se muestra una figura (cuadrado) en donde están cada uno de los
agentes dispuestos en sentido horario con sus respectivas coordenadas.
Figura 3-23. Posiciones de agentes en un cuadrado.
Los parámetros son valores que dependiendo de éstos, el resultado varía. En este
caso las posiciones de los agentes dependen de la figura y de sus posiciones
determinadas, del tamaño de la imagen y de la “velocidad” (con la que se
persiguen).
41
Los parámetros que fueron utilizados para la generación del proceso a continuación
detallado son los siguientes:
Coordenadas iniciales de los agentes = las que se muestran en la Figura
10.
Resolución de la Imagen = 100 píxeles.
Módulo = 0.5
Figura 3-24. Proceso de generación de diseño – Curvas de Persecución.
Nota: Imágenes obtenidas de la librería de software y posteriormente modificadas para que ilustren
el proceso y ayuden a una mejor comprensión.
Figura 3-25. Imagen final obtenida de la librería de Curvas de Persecución.
Este es el arreglo que contiene las coordenadas iniciales de los agentes que
conforman la figura que a continuación se muestra:
42
Figura 3-26. Diseño (cuadrado) obtenido de la librería (Curvas de Persecución) – Campo de visión
centrado.
Figura 3-27. Diseño (cuadrado) obtenido de la librería (Curvas de Persecución) – Campo de visión inferior.
43
Figura 3-28. Diseño (cuadrado) obtenido de la librería (Curvas de Persecución) –Campo de visión lateral
izquierda.
Los parámetros utilizados en curvas de persecución se describen brevemente a
continuación:
Parámetros Significado
resolución_w - ancho Ancho de la imagen
resolución_h - alto Alto de la imagen
[ix_o, ix_f] = [xo ,xf] Intervalo del eje x de la región a visualizarse.
iy_o = yo Valor inicial del intervalo del eje y de la región a
visualizarse.
color_rgb_l Define el color del contorno de la línea en el diseño.
puntos_x_y Arreglo que contiene las coordenadas iniciales de los
agentes.
a “velocidad” (con la que los agentes se persiguen).
Tabla 3-3. Tabla de Parámetros en la generación de la Curva de Persecución.
3.5 Funciones Trigonométricas
Existen algunos conceptos indispensables que se aplican a las funciones
trigonométricas en general.
44
Figura 3-29. Función seno con diferente período, amplitud y desfase.
Se ha tomado una función como ejemplo, la función seno. En el gráfico se puede
observar la misma función seno con distinta amplitud y desfase.
𝑦 = 𝑠𝑒𝑛 𝑥
𝑦′ = 2𝑠𝑒𝑛 𝑥
𝑦′′ = 𝑠𝑒𝑛 (𝑥 −𝜋
2)
En las funciones trigonométricas existen tres propiedades fundamentales que las
caracterizan:
Periodicidad: El término periodicidad de una función matemática se lo utiliza
para el caso de funciones periódicas. Dicho de otra manera una función es
periódica cuando la curva de la función se repite cada cierto intervalo y tiene
el mismo patrón, entonces período es el valor que determina ese cierto intervalo
en el cual se replica el patrón de la función.
Amplitud: La amplitud es el rango (recorrido) de la función, como se observa
en la Figura 3-26 para la función y = sen x en el eje de las y toma valores
únicamente en el rango [-1, 1], para el caso y = 2sen x [-2, 2]. Lo que quiere
decir que la primera función tiene amplitud A = 1 y la segunda amplitud A = 2.
45
Si A > 1 se dice que la función se expande, pero si A < 1 se dice que la función
se contrae.
Desfase: Se denomina desfase al punto donde inicia la gráfica de la porción
que siempre se repite. Sea y =Asen (ax + b), para obtener el desfase se tiene
que d=b/a si d > 0 se dice que se desplaza la función hacia el lado izquierdo,
pero si d < 0 se dice que se desplaza la función hacia el lado derecho, es decir
que el valor de b muestra el nuevo punto inicial de la gráfica de la función.
Se ha tomado una función como ejemplo, la función seno. En la Figura 3-26 se
puede observar la misma función con distintas variaciones. Manipulando las
propiedades de las funciones trigonométricas expuestas se consigue que este grupo
de procedimientos generen diseños parametrizables.
Se muestra a continuación fragmentos de código de los algoritmos implementados
para este conjunto de procedimientos con parámetros variados, con sus
correspondientes diseños:
3.5.1 Curva de Lissajous
Los puntos x e y (que conforman la curva) como se muestra en la ecuación 𝐸𝑐. 14
dependen de la variable T.
𝒙 = 𝑨𝑠𝑒𝑛 (𝒂𝑻 + 𝜹𝒂) 𝒚 = 𝑩𝑠𝑒𝑛 (𝒃𝑻 + 𝜹𝒃) 𝐸𝑐. 14
Figura 3-30. Proceso iterativo para obtener el diseño de Curva de Lissajous.
En este fragmento de código se realiza el proceso iterativo para el cálculo de la
curva de Lissajous.
El color_map con valor 3 corresponde a cv2.COLORMAP_COOL
46
Figura 3-31. Diseño 1 obtenido de la librería (Lissajous).
El color_map con valor 3 corresponde a cv2.COLORMAP_COOL
Figura 3-32. Diseño 2 obtenido de la librería (Lissajous).
3.5.2 Función Trigonométrica en el campo de los números Reales ℝ
𝒆𝒚 (𝑨 𝒔𝒆𝒏 (𝟏
𝒙+ 𝜹𝒂)) + 𝒆𝒙 (𝑩 𝒄𝒐𝒔 (
𝟏
𝒚+ 𝜹𝒃))
47
Figura 3-33. Diseño 1 obtenido de la librería (campo de los números Reales).
Figura 3-34. Diseño 2 obtenido de la librería (campo de los números Reales).
3.5.3 Funciones Trigonométricas en el campo de los números Complejos ℂ
(𝒛
𝑨(𝒕𝒂𝒏 (𝒛+𝜹)))
𝟐
| z = x + yi, z ∈ ℂ
48
Figura 3-35. Diseño 1 obtenido de la librería (campo de los números Complejos).
Figura 3-36. Diseño obtenido de la librería (campo de los números Complejos).
En todos los diseños generados se utilizó color_map con valor 3 que
corresponde a cv2.COLORMAP_COOL
Los parámetros utilizados en el grupo de funciones trigonométricas se describen
brevemente a continuación:
Parámetros Significado
resolución_w - ancho Ancho de la imagen
resolución_h - alto Alto de la imagen
[ix_o, ix_f] = [xo ,xf] Intervalo del eje x de la región a visualizarse.
iy_o = yo Valor inicial del intervalo del eje y de la región a
visualizarse.
49
color_map Corresponde al mapa de colores que se ha aplicado a la
imagen.
A, B Corresponden a la amplitud de las funciones
trigonométricas.
a, b Determinan el período de las funciones
trigonométricas.
𝜹𝒂, 𝜹𝒃 Corresponden al desfase de las funciones
trigonométricas.
t El valor de t multiplicado por el período (𝟐𝝅) es el
valor máximo que alcanzará T en la iteración (Curva
de Lissajous).
Tabla 3-4. Tabla de Parámetros en la generación del Grupo de Funciones Trigonométricas.
50
4. INTERFAZ CLIENTE
Para determinar la interfaz cliente que hará uso de la librería, se analizó qué
escenario era el mejor para mostrar su potencial. Aprovechando el previo
conocimiento y familiarización que posee la autora en el lenguaje Java y al habitual
uso que se le ha dado a los dispositivos móviles hoy en día, no fue difícil establecer
que una aplicación para este tipo de dispositivos destacaría en todo sentido el
alcance que posee el software. Según lo antes mencionado se desarrolló una
aplicación móvil con software libre. Una de las cualidades que posee el uso de una
aplicación móvil, es la sencilla interacción que se da entre el usuario y este tipo de
aplicaciones. Constituyéndose de esta manera la aplicación amigable y
consiguiendo que se pueda interactuar directamente con los parámetros de las
funciones matemáticas, en que fue basada la librería. De tal forma, que se ha
desarrollado una aplicación móvil que permite generar una gran variedad de diseños
(imágenes) de forma automática.
El sistema operativo escogido fue Android, se utilizó el IDE Android Studio para
el desarrollo de la herramienta móvil. La versión de Android a partir de la cual se
podrá hacer uso de la aplicación móvil debe ser mayor o igual a 4.1.2.
En la aplicación Android lo que se hizo fue desarrollar la interfaz gráfica para poder
dar uso de la funcionalidad de la librería.
Un dato curioso que cabe resaltar fue, que para poder definir a los diseños generados
como fondo de pantalla se tuvo que modificar el archivo AndroidManifest.xml, éste
es un archivo de configuración donde se aplican configuraciones básicas de una
aplicación Andorid. Para lo cual se tuvo que dotar a la aplicación de permisos para
acceder a los recursos del dispositivo móvil y para poder establecer la imagen
generada (diseño) como fondo de pantalla en el dispositivo.
51
Figura 4-1. Permisos en el archivo AndroidManifest.xml.
4.1 Arquitectura de la Aplicación y Servidor
La arquitectura que se utilizó para el desarrollo de este proyecto es una arquitectura
Cliente-Servidor. La librería como ya se conoce fue desarrollada en el lenguaje de
programación Python. El servidor fue levantado utilizando el micro-framework
para desarrollo web Flask (RONACHER, s.f.)
Figura 4-2. Arquitectura Cliente Servidor.
52
Para la comunicación de la herramienta Android con el servidor Flask se utilizó la
tecnología JSON y el envío de datos por url para hacer posible el envío de los
distintos parámetros.
La comunicación del cliente al servidor se realiza accediendo desde el aplicativo
móvil a una URL determinada, en esta de URL se encuentra levantado el servidor.
El móvil accede a esta URL para solicitar las imágenes (diseños), para conseguir
esto es necesario enviar los parámetros que dan lugar a cada diseño los cuales
previamente se personalizan en el aplicativo móvil.
Para hacer posible el acceso desde el móvil al servidor es necesario hacer una
petición – solicitud. Se lo realiza mediante un objeto Request, request traducido
significa pedir - solicitar. La acción de escribir una dirección cualquiera en la
dirección de URL del navegador, se traduce en solicitar unos datos determinados.
El protocolo que normalmente se utiliza para comunicarse con un servidor web es
HTTP. Este objeto Request permite el acceso a toda la información que se transfiere
por ejemplo desde el navegador (cliente) al servidor.
Para realizar las distintas peticiones desde el móvil al servidor se utiliza web service
(query param) y objetos JSON. Para poder visualizar el diseño generado desde el
móvil se utiliza una función, esta función recibe como parámetro una URL
determinada, ésta URL devuelve la imagen (diseño). Gracias a ese método se
puede acceder a la URL del servidor, aprovechando esto, se realiza el paso de
parámetros mediante “query param” a través de la URL, la cual se construye
dependiendo de la funcionalidad solicitada desde el móvil. Se ha creado la
estructura cliente – servidor por los motivos explicados anteriormente. Toda la
lógica se encuentra en el servidor y así la librería (generación de diseños) es
independiente de la aplicación cliente, dando la pauta que si se plantea el presente
proyecto con otro software cliente esto sea posible. Además las funciones del
dispositivo móvil no se sobrecargan ya que al estar la lógica en el servidor libera al
móvil de este proceso. El servidor en una URL, se mantiene siempre disponible
“escuchando”, el cual contiene las distintas funciones disponibles que se encargan
de la generación automática de diseños, enviando a través de esta URL las imágenes
resultantes.
A continuación se muestra un ejemplo de interacción directa con el servidor y el
envío de parámetros mediante una URL.
53
Una vez levantado el servidor, se accede en el navegador por medio de la siguiente
URL (http://acer-
v14/?proc=julia&ext=.jpg&w=480&h=800&colormap=3&xo=-
1.00&xf=1.0&yo=-1.5&iter=80&exp=2&cx=0.285&cy=-0.01), una
vez que el servidor responde se despliega en el navegador la imagen generada. La
URL contiene los distintos parámetros que le indican al servidor que procedimiento
y características tendrá la imagen a generar. Para este caso en esta URL acer-
v14 es el nombre del servidor.
Figura 4-3. Imagen obtenida directamente realizada la petición con parámetros (URL).
http://acer-
v14/?proc=julia&ext=.jpg&w=300&h=400&colormap=3&xo=-
1.00&xf=1.0&yo=-1.5&iter=80&exp=2&cx=0.285&cy=-0.01
Desglosando los parámetros enviados en la URL al servidor se obtiene la siguiente
tabla.
Parámetro Nombre del
parámetro en la
URL
Valor del parámetro
en la URL
Procedimiento matemático proc julia
Ancho de la imagen w 300
Alto de la imagen h 400
54
Mapa de colores colormap 3
Valor inicial de [xo, xf] xo -1.00
Valor final de [xo, xf] xf 1.0
Valor inicial de [yo, yf] yo -1.5
Iteraciones iter 80
Exponente exp 2
Parte real del complejo c cx 0.285
Parte imaginaria del complejo
c
cy -0.01
Tabla 4-1. Petición al servidor mediante parámetros enviados en la URL.
El símbolo ‘?’ indica dónde empiezan los parámetros que recibirá el servidor.
Después del símbolo ‘?’ aparecen parejas de datos con su nombre y valor separadas
por el símbolo &. Las parejas dato1=valor1, dato2=valor2,
dato3=valor3… reflejan el nombre y el valor de los campos enviados. Para
separar las parejas de valores entre sí se usa el símbolo ‘&’.
Entonces como se ha visto se accede a las imágenes (diseños) y se realiza el envío
de parámetros mediante una URL, sin embargo para el caso de Curva de
Persecución se necesita enviar un conjunto de puntos y es aquí donde entra el
concepto de JSON. JSON (JavaScript Object Notation) (Introducción a JSON, s.f.)
es un formato para el intercambios de datos, básicamente JSON describe los datos
con una sintaxis especial que se usa para identificar y gestionar datos. JSON nació
como una alternativa a XML. Una de las mayores ventajas que tiene el uso de JSON
es que puede ser leído por cualquier lenguaje de programación. Por tanto, puede ser
usado para el intercambio de información entre distintas tecnologías. Es un formato
de texto que es completamente independiente del lenguaje pero utiliza
convenciones que son ampliamente conocidos por los programadores de lenguajes
C, C++, C#, Java, JavaScript, Perl, Python, y muchos otros (Introducción a JSON,
s.f.).
JSON está constituido por dos estructuras:
Una colección de pares de nombre/valor. Se lo conoce como un objeto.
Una lista ordenada de valores. En la mayoría de los lenguajes, esto se
implementa como arreglos, listas, etc.
La lista ordenada de valores (arreglo) fue lo empleado en este caso para el envío de
puntos debido a que el envío de datos resulta por este medio el más adecuado.
55
En el ANEXO A se muestra el manual de usuario de la aplicación móvil
desarrollada.
56
5. METODOLOGÍA
La metodología escogida para la realización de este proyecto es estándar en el
desarrollo de software y consta de tres fases:
5.1 Fase de Investigación y Planificación
Esta fase es primordial porque se fundamenta el concepto y análisis bibliográfico
del material destinado para la comprensión y sustento del proyecto, para lo cual
previamente se investigó y analizó qué procedimientos eran los más apropiados
para llevar a cabo el objetivo del presente proyecto, concluyendo que se basaría en
tres interesantes grupos: Fractales (conjunto de Julia y Mandelbrot), Curva de
Persecución y Funciones Trigonométricas (Curva de Lissajous y Funciones sobre
el campo de los números Reales y Complejos). Posterior a la elección de los
procedimientos, fue primordial dedicar una fase exclusivamente al estudio y
análisis profundo de la concepción teórica en que se encuentra basada cada
procedimiento matemático. Una vez estudiada y comprendida la parte conceptual
se planifica como llevar a cabo el desarrollo.
Este proyecto está basado en el desarrollo de una librería de software y un aplicativo
que haga uso de la misma, por tal motivo en esta fase de planificación se determinó
también qué software utilizar para el desarrollo de la librería y qué software cliente
haría uso de ésta. De esta manera una vez ya determinada la base matemática y
tecnológica la siguiente etapa estará destinada exclusivamente al desarrollo.
5.2 Fase de Desarrollo de Software
En la fase de planificación se determinó qué software utilizar, qué tipo de
arquitectura seguir y una proyección del diseño de la herramienta.
La fase de desarrollo de software lleva a cabo todo lo concerniente al desarrollo
completo del software, independientemente que el desarrollo se encuentre dividido
Fases
1. Fase de Investigación y Planificación
2. Fase de Desarrollo
3. Fase de Pruebas y Mantenimiento
57
en lo que corresponde al cliente (front-end) o servidor (back-end). La librería debe
estar implementada en base a todo el fundamento matemático de los
procedimientos, dotándole a la librería de la lógica completa que permita la
generación automática de diseños, otorgando además la libertad de poder
personalizar de cierta manera al diseño, manipulando los distintos parámetros que
fueron determinados mediante un previo análisis en cada uno de los procedimientos
matemáticos. Una vez concluido el desarrollo de la librería, se inició el desarrollo
de la aplicación móvil, la cual cumple con explotar y evidenciar en su mayoría el
potencial que posee la librería desarrollada. Algo realmente fundamental en la
interacción entre la aplicación y la librería es el servidor, su desarrollo liga a ambas
tecnologías siendo de vital importancia su buen funcionamiento. Todo lo antes
mencionado es pieza clave para cumplir con la finalidad de esta fase, la de entregar
un software interactivo, novedoso y funcional.
5.3 Fase de Pruebas y Mantenimiento
Una vez concluido el desarrollo del software y realizadas las distintas pruebas que
certifiquen que el software cumple con un estándar de calidad, resulta más fácil
identificar qué es lo que ocasiona los fallos y donde éstos se encuentran. Además
que al ser autor y desarrollador de un software se pretende siempre que éste
comunique en el funcionamiento la calidad del trabajo realizado, es decir que
responda a los objetivos y requerimientos que se plantean en el proyecto.
Conjuntamente el perfeccionamiento continuo va de la mano con el
profesionalismo, responsabilidad y compromiso que aseguran un desarrollo limpio,
ordenado que sólo puede caracterizar y evidenciar un software completo, seguro y
estable.
Todo desarrollo de software requiere una fase de pruebas y mantenimiento, esto
asegura que el software quede estable y se realicen mejoras en los posibles errores
encontrados. El objetivo de esta fase es entregar software de calidad y que exprese
por sí sólo la eficacia del trabajo realizado.
Esta metodología es estándar y habitual para el desarrollo de software, ha sido
basada en las siguientes citas bibliográficas (ORTEGÓN, PACHECO, & PRIETO,
2015).
58
6. DISCUSIONES
El presente proyecto se ha enfrentado en varias ocasiones a la toma de decisiones.
Desde qué procedimientos eran los más adecuados y correctos a utilizar, hasta
determinar qué parámetros formarían parte de los algoritmos de cada procedimiento
matemático.
En el caso de Fractales su grupo es muy amplio, considerándose que el alcance del
proyecto no podía basarse en todos sino escoger los más apropiados, siendo así los
más adecuados por su interesante origen y resultados (diseños) el Conjunto de Julia
y Conjunto de Mandelbrot. Para el caso de Curvas de Persecución resultó
cautivador cómo a partir de una figura que podía ser esta un cuadrado, triángulo,
etc. se forman diseños realmente atractivos. Y finalmente para el caso de Funciones
Trigonométricas resultó interesante que la manipulación de ciertos parámetros que
son característicos de este este tipo de funciones daban a origen a diferentes diseños,
debido a que este grupo es también extenso, su elección era primordial para reducir
su amplitud y pueda aplicarse en el presente proyecto, suponiendo entre los más
atractivos por sus diseños resultantes curva de Lissajous y la aplicación de
funciones trigonométricas en el campo de los números reales y complejos según las
fórmulas (apartado 2.4.3 (b) y c))) que los determinan. En la determinación de
parámetros se evidenció en cada uno de los procedimientos cuáles eran exactamente
los mismos y cuales eran independientes para cada procedimiento, por ejemplo en
todos los procedimientos se puede escoger la región a visualizarse, los parámetros
de entrada que determinan esta región es en x el intervalo [xo, xf] y en y el intervalo
[yo, xo], inicialmente ambos intervalos se podían ingresar libremente. Para las
dimensiones de la imagen a generarse otro parámetro de entrada es el ancho
mientras que el alto se calculaba en función de estos intervalos, sin embargo al
enfrentarse a la generación de diseños desde la aplicación móvil, las dimensiones
de la imagen dependían exclusivamente de las dimensiones móvil, lo que obligó a
que las dimensiones de la imagen tanto alto y ancho sean parámetros de entrada y
que el valor yf que antes podía ser también escogido, sea ahora calculado en base a
las dimensiones y de esta manera no generar un diseño distorsionado.
59
También se puede evidenciar que los resultados obtenidos después del desarrollo
de la librería de software responden a los objetivos planteados inicialmente. A
continuación se detallan los resultados obtenidos en cuanto a tiempos de cálculo
para generar diferentes diseños haciendo uso de los diferentes procedimientos
matemáticos utilizados:
Procedimiento [200, 400] [400, 800] [500, 1000]
Julia 1.17699980736 4.20300006866 6.14100003242
Mandelbrot 1.1130001545 3.78600001335 5.80500006676
Curvas de Persecución 0.429000139236 1.20200014114 1.78299999237
Lissajous 0.460000038147 1.29700016975 1.71600008011
F. T. Números Reales 0.661999940872 1.40599989891 2.25300002098
F. T. Números
Complejos
0.615999937057 1.47199988365 2.22000002861
Tabla 6-1. Tiempos obtenidos al generar los diseños con distintas dimensiones de la imagen
La tabla muestra los resultados del tiempo de generación en segundos.
Si bien es cierto que la generación del diseño depende de la complejidad que posea
la lógica de cada procedimiento matemático, resulta por otro lado evidente que el
tiempo de generación depende también de las dimensiones de la imagen a generar,
tal cual se muestra en la tabla anterior.
60
7. CONCLUSIONES
La librería desarrollada en este proyecto permite a través de una herramienta
móvil la generación y personalización automática de fondos de pantalla que
responden a diseños basados en procedimientos matemáticos.
Los procedimientos matemáticos que se estudiaron y analizaron fueron
completamente aplicables para la generación de una gran variedad de diseños
para fondos de pantalla. Estos procedimientos fueron: fractales (Julia y
Mandelbrot); curvas de persecución y funciones trigonométricas sobre el
campo de los números reales - complejos y curva de Lissajous.
Si bien existen sistemas de generación automática de diseños con fractales
(Julia y Mandelbrot), la librería desarrollada en este proyecto no sólo usa
fractales sino varios procedimientos más, los cuales se listaron en el punto
anterior. Esto permite a los usuarios que usen la aplicación móvil generar y
personalizar diseños desde una gama más amplia de opciones haciendo de la
aplicación un aplicativo más completo.
El tiempo empleado para la generación de los diseños es proporcional a la
resolución de la imagen a generar, de acuerdo a la Tabla 6-1 del capítulo 6.
La generación automática de diseños a través de la librería en comparación con
una elaboración manual de un diseño usando cualquier herramienta de diseño
gráfico se realiza en un tiempo considerablemente reducido. Esto se evidencia
con los resultados obtenidos que se muestran en la Tabla 6-1 del capítulo 6
61
8. RECOMENDACIONES
Se recomienda a quien se enfrente a un proyecto con estas características.
Que la investigación sea uno de sus mejores aliados puesto que para
comprender los distintos aspectos como fundamentos teóricos (matemáticas),
nuevas tecnologías (software) se necesita de constancia y perseverancia en el
ámbito investigativo hasta solventar el desconocimiento.
Poseer conocimiento previo de lenguaje de programación Java ya que el
software cliente (Android) hace uso de este lenguaje.
Estar familiarizado con la estructura que tienen los proyectos para aplicaciones
Android para una mejor manipulación de recursos, ya que al desarrollarse una
aplicación móvil se requiere manejo de imágenes, íconos, botones y demás.
Tener un conocimiento previo del funcionamiento de procedimientos
matemáticos para generación de diseños como son fractales, curvas de
persecución y funciones trigonométricas para que el desarrollo de cualquier
aplicación móvil en base a este tema en cuanto a codificación se refiere pueda
realizarse de manera que no exista uso de mucho tiempo.
62
9. BIBLIOGRAFÍA
1. Python Software Foundation. (2016). Obtenido de
https://www.python.org/about/
2. ALAM, J. E. (31 de ocubre de 2013). SITIOCERO Comunicaciones sobre
y desde la comunicación. Obtenido de SITIOCERO Comunicaciones sobre
y desde la comunicación: http://sitiocero.net/2013/diseno-e-impacto-social-
i/
3. BRILL, B. (2002). Bridges 2002. Obtenido de
http://archive.bridgesmathart.org/2002/bridges2002-55.pdf
4. CARLSON, W. (1994). Obtenido de
http://design.osu.edu/carlson/history/tree/carpenter.html
5. DOXYGEN. (30 de Diciembre de 2015). OpenCV. Obtenido de
http://docs.opencv.org/3.1.0/d3/d50/group__imgproc__colormap.html#gsc
.tab=0
6. EMMER, M. (2005). Artnodes. Obtenido de Artnodes:
http://www.uoc.edu/artnodes/espai/esp/art/emmer0505.pdf
7. FRACTOID. (1 de Junio de 2011). Google Play. Obtenido de Google Play:
https://play.google.com/store/apps/details?id=byrne.fractal&hl=es
8. FRAX. (s.f.). Frax. Obtenido de http://fract.al/
9. GEOGEBRA. (2016). International GeoGebra Institute. Obtenido de
www.geogebra.org
10. GETZ, C., & HELMSTEDT, J. (2004). Graphics with Mathematica.
Amsterdam, Boston, Heidelberg, London, New York, Oxfor, Paris, San
Diego, San Francisco, Singapore, Sydney, Tokyo: ELSEVIER B.V.
11. Introducción a JSON. (s.f.). Obtenido de http://www.json.org/json-es.html
12. KINDSEIN. (28 de Mayo de 2006). Obtenido de
http://www.kindsein.com/es/11/red/299/
13. LINKEDIN Corporation. (2 de Marzo de 2012). SlideShare. Obtenido de
http://es.slideshare.net/BIOALUMNOS/figuras-de-lissajous
14. MEDINA, M. Á. (s.f.). Gaussianos. Obtenido de Gaussianos:
http://gaussianos.com/%C2%BFque-es-el-conjunto-de-mandelbrot-
historia-y-construccion/
63
15. MITCHELL, K. (2015). Obtenido de
http://www.kerrymitchellart.com/articles/Fun-with-Whirls.pdf
16. NumPy developers. (2016). NumPy. Obtenido de http://www.numpy.org/
17. ORTEGÓN, E., PACHECO, J. F., & PRIETO, A. (Julio de 2015). Obtenido
de
http://www.extension.uner.edu.ar/adjuntos/documentos/manual%2042%20
ILPES%20MML.pdf
18. RONACHER, A. (s.f.). Flask web development, one drop at time. Obtenido
de Flask web development, one drop at time: http://flask.pocoo.org/
19. VIMEO, L., & CARPENTER, L. (28 de Julio de 2009). Vimeo. Obtenido
de Vimeo: https://vimeo.com/5810737
20. Wikipedia. (8 de Marzo de 2016). Obtenido de
https://es.wikipedia.org/wiki/OpenCV
21. Wolfram Computation Meets Knowledge. (2016). Wolfram. Obtenido de
https://www.wolfram.com/mathematica/
64
ANEXOS
I
ANEXO A
Manual de Usuario
Instalar la aplicación “Wallpapers” (generador de fondos de patalla):
Instalar el ejecutable (.apk) en el dispositivo móvil con S.O Android, se
requiere que la versión de Android sea mayor a la 4.1.2.
Antes de iniciar con la parte de la navegabilidad es necesario indicar que para poder
navegar entre pantallas, dado el siguiente ejemplo: una vez que se ingresa a una
pantalla, para regresar a la pantalla anterior se lo hace con el botón genérico en todo
dispositivo Android, el botón “Atrás”. Por lo general tiene este ícono:
Botón “Atrás” de Android.
Pulsar sobre el ícono Wallpaper:
Ícono de la aplicación.
Ícono de la
aplicación
II
Se mostrará la siguiente pantalla:
Pantalla inicial-Splash de la aplicación móvil.
Esta es la pantalla inicial conocida también como splash. Es la primera pantalla que
ve el usuario al iniciar la app. Su visualización dura unos pocos segundos. Sirve
como presentación del contenido mientras se realiza la carga inicial.
Una vez cargada la aplicación se muestra la siguiente ventana:
Pantalla Principal de la aplicación móvil.
La pantalla principal es una pantalla que contiene tres pestañas: Fractales, Curvas
y Funciones Trigonométricas. Al navegar sobre ellas se despliegan los siguientes
fragmentos:
III
Pestañas de la aplicación móvil.
Funcionalidad para la Creación del grupo de Fractales
Esta funcionalidad permite la generación de fondos de pantalla correspondiente al
grupo de procedimientos matemáticos Fractales.
Al posicionarse sobre la pestaña Fractales se tiene la pantalla siguiente:
Fragmento de la pantalla principal – FRACTALES
a) Generación del diseño (Conjunto de Julia) Julia
Para la generación del diseño correspondiente se debe realizar lo que a continuación
se detalla.
Hacer clic sobre el botón “Julia”. Se visualiza la siguiente pantalla
“Parámetros de Julia” que es la que contiene todos los parámetros, los cuales
IV
se pueden manipular para obtener los diseños de acuerdo a cómo se
parametrice.
Parámetros de Fractales (Julia).
Escoger el valor para cada uno de los parámetros según se desee.
Selección de Parámetros de Fractales (Julia).
Hacer clic sobre el menú contextual que se encuentra en la parte superior
derecha, a lado del título de la pantalla para acceder a la opción “Paleta de
Colores”.
V
Botón de Paleta de Colores (Mapa de colores) - Julia.
Hacer clic sobre esta opción del menú y aparece la siguiente pantalla.
Paleta de Colores- Julia
Pulsar sobre el ítem deseado (se ha escogido la gama de colores deseada).
VI
Selección de Paleta de Colores - Julia.
Regresar a la pantalla anterior con el botón “Atrás”
Botón para la generación del diseño - Julia.
Finalmente para generar el diseño presionar el botón que se encuentra en la
parte inferior derecha, el cual hará el llamado al servidor para la generación del
diseño con los valores escogidos de los parámetros.
Aparecerá una pantalla en blanco como la que se muestra a la izquierda mientras el
servidor procesa la petición, una vez que responda (toma segundos) se presenta el
diseño resultante como se observa en la imagen de la derecha.
VII
Diseño generado a partir de Julia.
Presionar el botón superior izquierdo para definir el diseño como fondo de
pantalla del dispositivo móvil.
Fondo de pantalla generado a partir de Julia.
b) Generación del diseño (Conjunto de Mandelbrot) Mandelbrot.
Hacer clic sobre el botón “Mandelbrot”. Se visualiza la siguiente pantalla
“Parámetros de Mandelbrot” que es la que contiene todos los parámetros, los
cuales se pueden manipular para obtener los diseños de acuerdo a cómo se
parametrice.
VIII
Parámetros de Fractales (Mandelbrot).
Escoger el valor para cada uno de los parámetros según se desee.
Selección de Parámetros de Fractales (Mandelbrot).
Hacer clic sobre el menú contextual que se encuentra en la parte superior
derecha, a lado del título de la pantalla para acceder a la opción “Paleta de
Colores”.
IX
Botón de Paleta de Colores (Mapa de colores) – Mandelbrot.
Hacer clic sobre esta opción del menú y aparece la siguiente pantalla.
Paleta de Colores – Mandelbrot.
Pulsar sobre el ítem deseado (se ha escogido la gama de colores deseada).
X
Selección de Paleta de Colores - Mandelbrot.
Regresar a la pantalla anterior con el botón “Atrás”
Botón para la generación del diseño - Mandelbrot.
Finalmente para generar el diseño presionar el botón que se encuentra en la
parte inferior derecha, el cual hará el llamado al servidor para la generación del
diseño con los valores escogidos de los parámetros.
Aparecerá una pantalla en blanco como la que se muestra a la izquierda mientras el
servidor procesa la petición, una vez que responda (toma segundos) se presenta el
diseño resultante como se observa en la imagen de la derecha.
XI
Diseño generado a partir de Mandelbrot.
Presionar el botón superior izquierdo para definir el diseño como fondo de
pantalla del dispositivo móvil.
Fondo de pantalla generado a partir de Mandelbrot.
Funcionalidad para la Creación del grupo de Curvas
Esta funcionalidad permite la generación de fondos de pantalla correspondiente al
grupo de procedimientos matemáticos Curvas de Persecución.
Al posicionarse sobre la pestaña Curvas se tiene la pantalla siguiente:
XII
Fragmento de la pantalla principal – CURVAS.
Para la generación del diseño correspondiente se debe realizar lo que a continuación
se detalla.
Hacer clic sobre el botón “Curvas”, se visualiza la siguiente pantalla:
Pantalla para la generación de puntos – Curvas de Persecución.
Este pantalla sirve para graficar los puntos que forman la figura en base a la cual se
generará el diseño y funciona así: Se pulsará en donde se desee, cada uno de los
puntos que se grafiquen corresponden a las coordenadas de la figura a generarse.
Se debe tomar en cuenta que al tocar la pantalla para graficar cada punto se lo debe
realizar en sentido a las agujas del reloj como se muestra a continuación:
XIII
Proceso para generar figura en la herramienta móvil (Curvas de Persecución).
Finalmente para generar el diseño presionar el menú contextual – opción
“Generar” que se encuentra en la parte superior derecha.
XIV
Botón para la generación del diseño - Curvas de Persecución.
Una vez que responda el servidor (toma segundos) se presenta el diseño resultante.
Diseño generado a partir de Curvas de Persecución.
Presionar el botón superior izquierdo para definir el diseño como fondo de
pantalla del dispositivo móvil.
XV
Fondo de pantalla generado a partir de Curvas de Persecución.
Funcionalidad para la Creación del grupo de Funciones Trigonométricas
Esta funcionalidad permite la generación de fondos de pantalla correspondiente al
grupo de procedimientos matemáticos Funciones Trigonométricas.
Al posicionarse sobre la pestaña Funciones Trigonométricas se tiene la pantalla
siguiente:
Fragmento de la pantalla principal – FUNCIONES TRIGONOMÉTRICAS
XVI
a) Generación del diseño Curva de Lissajous
Para la generación del diseño correspondiente se debe realizar lo que a continuación
se detalla.
Hacer clic sobre el botón “Lissajous”. Se visualiza la siguiente pantalla
“Parámetros de Lissajous” que es la que contiene todos los parámetros, los
cuales se pueden manipular para obtener los diseños de acuerdo a cómo se
parametrice. Parámetros de Curva de Lissajous.
Fragmento de la pantalla principal – Curva Lissajous.
Escoger el valor para cada uno de los parámetros según se desee.
Selección de Parámetros de Curva de Lissajous.
XVII
Hacer clic sobre el menú contextual que se encuentra en la parte superior
derecha, a lado del título de la pantalla para acceder a la opción “Paleta de
Colores”.
Botón de Paleta de Colores (Mapa de colores) - Curva de Lissajous.
Hacer clic sobre esta opción del menú y aparece la siguiente pantalla.
Paleta de Colores- Curva de Lissajous
Pulsar sobre el ítem deseado (se ha escogido la gama de colores deseada).
XVIII
Selección de Paleta de Colores - Curva de Lissajous.
Regresar a la pantalla anterior con el botón “Atrás”
Botón para la generación del diseño - Curva de Lissajous.
Finalmente para generar el diseño presionar el botón que se encuentra en la
parte inferior derecha, el cual hará el llamado al servidor para la generación del
diseño con los valores escogidos de los parámetros.
Aparecerá una pantalla en blanco como la que se muestra a la izquierda mientras el
servidor procesa la petición, una vez que responda (toma segundos) se presenta el
diseño resultante como se observa en la imagen de la derecha.
XIX
Diseño generado a partir de Curva de Lissajous.
Presionar el botón superior izquierdo para definir el diseño como fondo de
pantalla del dispositivo móvil.
Fondo de pantalla generado a partir de Curva de Lissajous.
XX
b) Generación del diseño Funciones Trigonométricas sobre el campo de los
Números Reales (F. T. Reales)
Para la generación del diseño correspondiente se debe realizar lo que a continuación
se detalla.
Fragmento de la pantalla principal – F. T. Reales.
Hacer clic sobre el botón “F. T. Reales”. Se visualiza la siguiente pantalla
“Parámetros de F. T. Reales” que es la que contiene todos los parámetros, los
cuales se pueden manipular para obtener los diseños de acuerdo a cómo se
parametrice.
Parámetros de F. T. Reales.
Escoger el valor para cada uno de los parámetros según se desee.
XXI
Selección de Parámetros de F. T. Reales.
Hacer clic sobre el menú contextual que se encuentra en la parte superior
derecha, a lado del título de la pantalla para acceder a la opción “Paleta de
Colores”.
Botón de Paleta de Colores (Mapa de colores) - F. T. Reales.
Hacer clic sobre esta opción del menú y aparece la siguiente pantalla.
XXII
Paleta de Colores - F. T. Reales
Pulsar sobre el ítem deseado (se ha escogido la gama de colores deseada).
Selección de Paleta de Colores - F. T. Reales.
Regresar a la pantalla anterior con el botón “Atrás”
XXIII
Botón para la generación del diseño - F. T. Reales.
Finalmente para generar el diseño presionar el botón que se encuentra en la
parte inferior derecha, el cual hará el llamado al servidor para la generación del
diseño con los valores escogidos de los parámetros.
Aparecerá una pantalla en blanco como la que se muestra a la izquierda mientras el
servidor procesa la petición, una vez que responda (toma segundos) se presenta el
diseño resultante como se observa en la imagen de la derecha.
Diseño generado a partir de F. T. Reales.
Presionar el botón superior izquierdo para definir el diseño como fondo de
pantalla del dispositivo móvil.
XXIV
Fondo de pantalla generado a partir de F. T. Reales.
c) Generación del diseño Funciones Trigonométricas sobre el campo de los
Números Complejos (F. T. Complejos)
Para la generación del diseño correspondiente se debe realizar lo que a continuación
se detalla.
Fragmento de la pantalla principal – F. T. Complejos.
Hacer clic sobre el botón “F. T. Complejos”. Se visualiza la siguiente pantalla
“Parámetros de F. T. Complejos” que es la que contiene todos los
parámetros, los cuales se pueden manipular para obtener los diseños de acuerdo
a cómo se parametrice.
XXV
Parámetros de F. T. Complejos.
Escoger el valor para cada uno de los parámetros según se desee.
Selección de Parámetros de F. T. Complejos.
Hacer clic sobre el menú contextual que se encuentra en la parte superior
derecha, a lado del título de la pantalla para acceder a la opción “Paleta de
Colores”.
XXVI
Botón de Paleta de Colores (Mapa de colores) - F. T. Complejos.
Hacer clic sobre esta opción del menú y aparece la siguiente pantalla.
Paleta de Colores - F. T. Complejos
Pulsar sobre el ítem deseado (se ha escogido la gama de colores deseada).
XXVII
Selección de Paleta de Colores - F. T. Complejos.
Regresar a la pantalla anterior con el botón “Atrás”
Botón para la generación del diseño - F. T. Complejos.
Finalmente para generar el diseño presionar el botón que se encuentra en la
parte inferior derecha, el cual hará el llamado al servidor para la generación del
diseño con los valores escogidos de los parámetros.
Aparecerá una pantalla en blanco como la que se muestra a la izquierda mientras el
servidor procesa la petición, una vez que responda (toma segundos) se presenta el
diseño resultante como se observa en la imagen de la derecha.
XXVIII
Diseño generado a partir de F. T. Complejos.
Presionar el botón superior izquierdo para definir el diseño como fondo de
pantalla del dispositivo móvil.
Fondo de pantalla generado a partir de F. T. Complejos.
