-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
258 lines (228 loc) · 14.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="es">
<head>
<title>Fractales</title>
<!-- jQuery -->
<script type="text/javascript" src="static/js/jquery-3.6.0.min.js"></script>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<!-- Botones para RRSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- MathJax para las expresiones matemáticas -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<!-- CSS propio -->
<link rel="stylesheet" href="static/css/hover-style.css">
<!-- Meta -->
<meta charset="UTF-8">
<meta name="application-name" content="Visualización de fractales">
<meta name="author" content="Juan Antonio Villegas Recio">
<meta name="description" content="Página inicial del proyecto">
<link rel="icon" href="static/img/logo.png">
</head>
<body>
<!--
-- ─── CABECERA ────────────────────────────────────────────────────
-->
<header class="row d-flex flex-wrap justify-content-around py-3 mb-4 border-bottom w-100 p-3">
<a href="index.html" class="d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none col-xl-6">
<img src="static/img/logo.png" id="logo">
<span class="fs-4"><h1>Visualización de Fractales</h1></span>
</a>
<ul class="nav nav-pills col-xl-6 justify-content-center">
<li class="nav-item"><a href="./index.html"><button class="btn-change">Home</button></a></li>
<li class="nav-item"><a href="./2D-fractals.html"><button class="btn-change">Fractales 2D</button></a></li>
<li class="nav-item"><a href="./3D-fractals.html"><button class="btn-change">Fractales 3D</button></a></li>
</ul>
</header>
<!--
-- ─── CONTENIDO ───────────────────────────────────────────────────
-->
<!-- Opciones: Fractales 2D o 3D -->
<main class="container-xl">
<section class="row justify-content-around">
<section class="col-lg-6">
<section class="contenedor">
<a href="./2D-fractals.html">
<img src="static/img/portada-2D.png">
<div class="title">Fractales 2D</div>
</a>
</section>
<br>
</section>
<section class="col-lg-6">
<section class="contenedor">
<a href="./3D-fractals.html">
<img src="static/img/portada-3D.png">
<div class="title">Fractales 3D</div>
</a>
</section>
</section>
</section>
<br>
<p>Esta web ha sido desarrollada como parte del 'Trabajo de Fin de Grado' de Juan Antonio Villegas Recio, alumno de Ingeniería Informática y Matemáticas en la universidad de Granada, durante el curso 2021/2022. Si lo desea, puede consultar la memoria, la documentación o el código fuente del proyecto en GitHub.</p>
<section class="d-flex justify-content-center">
<a href="https://github.com/JAntonioVR/Geometria-Fractal" class="btn-change">
<img src="static/img/github.png" width="20" /> <b>Ver proyecto en GitHub</b>
</a>
</section>
<!-- Carrousel -->
<section class="w-75 p-3 mx-auto">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="static/img/carousel/1.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Julia 3D">
</div>
<div class="carousel-item">
<img src="static/img/carousel/2.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Mandelbub">
</div>
<div class="carousel-item">
<img src="static/img/carousel/3.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Mandelbrot 3D">
</div>
<div class="carousel-item">
<img src="static/img/carousel/4.png" class="d-block w-100" data-bs-interval="4000" alt="Detalle del conjunto de Mandelbrot 2D">
</div>
<div class="carousel-item">
<img src="static/img/carousel/5.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Mandelbub">
</div>
<div class="carousel-item">
<img src="static/img/carousel/6.png" class="d-block w-100" data-bs-interval="4000" alt="Detalle del conjunto de Mandelbrot 2D">
</div>
<div class="carousel-item">
<img src="static/img/carousel/7.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Julia 3D">
</div>
<div class="carousel-item">
<img src="static/img/carousel/8.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Julia 2D de orden 6">
</div>
<div class="carousel-item">
<img src="static/img/carousel/9.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Mandelbub">
</div>
<div class="carousel-item">
<img src="static/img/carousel/10.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Julia 2D">
</div>
<div class="carousel-item">
<img src="static/img/carousel/11.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Julia 3D">
</div>
<div class="carousel-item">
<img src="static/img/carousel/12.png" class="d-block w-100" data-bs-interval="4000" alt="Detalle del conjunto de Mandelbrot de orden 3">
</div>
<div class="carousel-item">
<img src="static/img/carousel/13.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Mandelbub">
</div>
<div class="carousel-item">
<img src="static/img/carousel/14.png" class="d-block w-100" data-bs-interval="4000" alt="Detalle del conjunto de Mandelbrot 2D">
</div>
<div class="carousel-item">
<img src="static/img/carousel/15.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Mandelbub">
</div>
<div class="carousel-item">
<img src="static/img/carousel/16.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Julia 2D">
</div>
<div class="carousel-item">
<img src="static/img/carousel/17.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Julia 3D">
</div>
<div class="carousel-item">
<img src="static/img/carousel/18.png" class="d-block w-100" data-bs-interval="4000" alt="Detalle del conjunto de Mandelbrot 2D">
</div>
<div class="carousel-item">
<img src="static/img/carousel/19.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Mandelbrot 3D">
</div>
<div class="carousel-item">
<img src="static/img/carousel/20.png" class="d-block w-100" data-bs-interval="4000" alt="Conjunto de Julia 2D">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!--
-- ─── INTRODUCCION ────────────────────────────────────────────────
-->
<section class="container">
<h2>¿Qué es un fractal?</h2>
Hay distintas definiciones de fractal, basadas en el concepto de <b>autosimilaridad</b> y en el de <b>dimensión</b>. La dimensión es más compleja de entender, pero la autosimilaridad se puede entender con algunos ejemplos:
<ul>
<li>
El <b>Triángulo de Sierpinski</b><br>
<img class="w-25 p-3 mx-auto d-block" src="static/img/Sierpinski.png">
</li>
<li>
El <b>Conjunto de Cantor</b><br>
<img class="w-50 p-3 mx-auto d-block" src="static/img/Cantor.png" >
</li>
<li>
O el <b>Copo de nieve de Koch</b><br>
<img class="w-25 p-3 mx-auto d-block" src="static/img/Koch.png">
</li>
</ul>
<p>Fíjate en que cada figura está compuesta de partes que, a escala, son copias de la figura original. Por ejemplo, "el triángulo de Sierpinski está compuesto de 3 triángulos de Sierpinski", cada uno la mitad de grande que el original (a escala \( \frac 1 2 \)). O "el conjunto de Cantor está formado por dos conjuntos de Cantor", cada uno a escala \(\frac 1 3\) del original.</p>
<p>Cada uno de estos extraños objetos encierra la particularidad de tener una dimensión no entera, es decir, que el triángulo de Sierpinski no es un objeto de 2 dimensiones como un triángulo normal y corriente, pero tampoco de 1 como una línea recta, su dimensión es un número fraccionario entre 1 y 2, por muy antintuitivo que parezca. Precisamente es este el rasgo diferenciador de lo que llamamos objetos <b>fractales</b>.</p>
<p>Existen otros tipos de fractales más complejos pero también visualmente más atractivos. Es el caso del <b>conjunto de Mandelbrot</b>, el cual para muchos es 'el objeto más complejo de la matemática':</p>
<img class="w-50 p-3 mx-auto d-block" src="static/img/Mandelbrot.png">
<p>Otra opción en esta misma línea son los <b>conjuntos de Julia</b>:</p>
<section class="row">
<section class="col-6">
<img class="img-fluid" src="static/img/Julia-1.png">
</section>
<section class="col-6">
<img class="img-fluid" src="static/img/Julia-2.png">
</section>
</section>
<p>Tanto los conjuntos de Julia como el conjunto de Mandelbrot son figuras fractales que se obtienen coloreando el plano, aunque para obtener cada imagen hay que aplicar un algoritmo levemente diferente.</p>
<p>También existen fractales tridimensionales, por ejemplo <b>generalizaciones de los conjuntos de Julia</b> o una bella generalización 3D del conjunto de Mandelbrot: el <b>conjunto de Mandelbub</b>.</p>
<section class="row">
<section class="col-6">
<img class="img-fluid" src="static/img/Julia-3D.png">
</section>
<section class="col-6">
<img class="img-fluid" src="static/img/Mandelbub.png">
</section>
</section>
Serán los conjuntos de Julia y Mandelbrot 2D y sus generalizaciones a 3D con las que podamos interactuar en esta web. En la parte baja de cada página pueden encontrarse instrucciones de uso de los distintos parámetros para aquellos usuarios que tengan su primer contacto con los fractales. Mucho ánimo con los fractales, espero que se divierta.
<div class="row justify-content-around">
<div class="col-6">
<a href="./2D-fractals.html"><button class="w-100 p-3 btn-change">Visualizar fractales <b>2D</b></button></a>
</div>
<div class="col-6">
<a href="./3D-fractals.html"><button class="w-100 p-3 btn-change">Visualizar fractales <b>3D</b></button></a>
</div>
</div>
</section>
<section class="container">
<h4>Referencias</h4>
<p>Algunas imágenes utilizadas en el diseño de esta web no son propias, por lo que se incluye a continuación la debida referencia:</p>
<ul>
<li><a href="https://www.flaticon.com/free-icons/warning" title="warning icons">Warning icons created by Good Ware - Flaticon</a></li>
<li><a href="https://www.flaticon.es/iconos-gratis/github" title="github iconos">Github, iconos creados por Pixel perfect - Flaticon</a></li>
</ul>
</section>
</main>
<!--
-- ─── PIE DE PAGINA ───────────────────────────────────────────────
-->
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="index.html" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<img src="static/img/logo.png" id="logo">
</a>
</div>
<div class="col-md-4 d-flex align-items-center justify-content-center">
<span class="mb-3 mb-md-0 text-muted">© 2022, Juan Antonio Villegas Recio</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a href="https://github.com/JAntonioVR" class="fa fa-github"></a></li>
<li class="ms-3"><a href="https://www.linkedin.com/in/juan-antonio-villegas-recio/" class="fa fa-linkedin"></a></li>
<li class="ms-3"><a href="https://www.instagram.com/juanantonio_79/" class="fa fa-instagram"></a></li>
<li class="ms-3"><a href="https://www.facebook.com/profile.php?id=100010525867626" class="fa fa-facebook"></a></li>
<li class="ms-3"><a href="mailto:juanantoniovr98@gmail.com" class="fa fa-google"></a></li>
</ul>
</footer>
</body>
</html>