-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
130 lines (105 loc) · 3.91 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
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fractalízate 2024</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="style.css">
<style>
/* Para que el cabezal escale con el tamaño de la ventana */
img.cabezal {
width: 95%;
height: auto;
display: block;
}
</style>
</head>
<body>
<!--
Pagina responsiva
-->
<img class="cabezal" src="cabezal.png" alt="Cabezal">
<div class="container-fluid">
<div class="row">
</div>
<div class="row">
<div class="col">
<h1>Fractalízate #DIM2024</h1>
<p>Te invitamos a <strong>Jugar con las matemáticas</strong>
creando y personalizando un fractal.
<br>
<strong>¡Feliz día internacional de las matemáticas!</strong> </p>
</div>
</div>
<div class="row">
<div class="col">
<div id="fractal"></div>
</div>
</div>
<div class="row">
<div class="col">
<div id="slider"></div>
</div>
<div class="col">
<br>
<input type="file" id="imageUpload" accept="image/*">
<button onclick="uploadImage()">Subir imagen</button>
</div>
</div>
<div class="row">
<div class="col">
<div id="texto"></div>
<br>
<br>
<p>
Las matemáticas tienen múltiples posibilidades de inspiración y belleza más allá de números y símbolos.
¿Te has fijado en la forma de los helechos o del brócoli? ¿Has observado la estructura de un relámpago o de un
copo de nieve?
Todos ellos son algunos ejemplos en la naturaleza que se parecen a los objetos matemáticos llamados fractales.
<br>
<br>
El término fractal proviene del latín y significa quebrado o irregular. Entre sus propiedades,
los fractales tienen una forma en la que cualquiera de sus partes y sin importar su tamaño o escala,
está compuesta por repeticiones de sí misma; por ello, son también infinitos.
<br>
<br>
Los fractales fueron popularizados por sus formas coloridas y atractivas a finales de los años setentas y
principios de los ochentas por el matemático Benoît Mandelbrot que se dedicó a estudiarlos. De hecho,
el fractal más famoso y estudiado es el conjunto de Mandelbrot, aunque hay otros muy conocidos como el
conjunto de Cantor,
el conjunto de Julia, la curva de Koch y el triángulo de Sierpinski, que se construyen a partir de operaciones
muy sencillas.
</p>
</div>
<div id = "Descargar">
<button onclick="descargarImagen()">
Descargar
</button>
</div>
</div>
<footer>
<br>
<br>
<div class="textwidget">
<p> <small> © Esta aplicación fue desarrollada por los estudiantes del Servicio Social del Laboratorio de
Visualización y Sonorización
para el Instituto de Matemáticas de la UNAM.
<nobr />
</small> </p>
</div>
</footer>
<!-- <div class="row">
<div class="col">
<img src="imgs/logos1.png"> </img>
</div>
</div> -->
</div>
<script src="sketch4.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</html>