-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
55 lines (50 loc) · 2.81 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
<!DOCTYPE html>
<html>
<head>
<title>Un Cuarto Propio</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" type="image/png" href="sakura.webp">
</head>
<body>
<script src="js/html2canvas.min.js"></script>
<div id="flowers">
<div id="heading">
<div id="titulo">
<h1>Delirios de Sofi G. </h1>
<img src="sakura.webp" width=100>
</div>
</div>
<div class="paper">
<h2> Sketches con <a href="https://p5js.org/">p5.js</a></h2>
Con p5.js hice varios sketches que me ayudaron a entender conceptos matemáticos interactuando con ellos.
<a href="sketches/fourier/index.html">
<div class="sketch">
<h3 class="sketch-title">SVG a Fourier</h3>
<p> En el siglo XIX, Fourier estaba trabajando con un problema sobre la dispersión del calor y se dio cuenta de que la solución era simple para funciones iniciales como las trigonométricas. Después de eso, tuvo una idea muy loca: armar cualquier función a partir de estas oscilaciones simples. En este Sketch, tomamos una curva con forma compleja y la vamos a recorrer sumando movimientos simples sobre círculos. </p>
</div>
</a>
<a href="sketches/bezier/index.html">
<div class="sketch">
<h3 class="sketch-title">Curvas de Bezier</h3>
<p> Las curvas de Bezier son una manera paramétrica de generar curvas. Son muy usadas en la computación porque su calculo es fácil y se puden combinar pequeños arcos en una spline más compleja. En este sketch podemos ver y modificar una Bezier cúbica. Este sketch lo hice cuando estaba estudiando la curvatura, así que se muestran las tangentes y el círculo osculador en cada punto. </p>
</div>
</a>
<a href="sketches/estudio/index.html">
<div class="sketch">
<h3 class="sketch-title">Aventuras en el Estudio</h3>
<p> Este es solo por diversión y en homenaje al <i>Estudio</i> del <em>Centro Cultural de la Ciencia (C3) <3 .</em></p>
</div>
</a>
<a href="sketches/vectorial/index.html">
<div class="sketch">
<h3 class="sketch-title">Flujos Vectoriales</h3>
<p>En este sketch se puede definir un campo vectorial arbitrario en 2 dimensiones. Este campo se interpreta como la velocidad de párticulas que van siguiendo las trayectorias de flujo.</p>
</div>
</a>
<h2> Shaders con WebGL</h2>
También me gustan las shaders! Con funciones matemáticas se pueden armar patrones geométricos lindos, colores y efectos visuales.
</div>
</div>
</body>
</html>