Merge pull request #362 from Simonpso/main

simon
disenoUDP · Jun 24, 2024 · 0ba52b7 · 0ba52b7
2 parents bdef727 + 08af255
commit 0ba52b7
Show file tree

Hide file tree

Showing 7 changed files with 145,041 additions and 0 deletions.
diff --git a/estudiantes/23-Simonpso/clase-15/README.md b/estudiantes/23-Simonpso/clase-15/README.md
@@ -1 +1,119 @@
 # clase-15
+
+---
+
+24.06.2024
+
+---
+
+El siguiente codigo utiliza la biblioteca p5.createloop.js encontrada en https://www.npmjs.com/package/p5.createloop?activeTab=readme el cual genera un bucle animado que produce un gift
+
+En la página indica que es necesario un html para poder usarlo, así que lo copie en el index de p5 editor.
+
+```javascript
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
+<script src="https://unpkg.com/[email protected]/dist/p5.createloop.js"></script>
+```
+
+---
+
+Para empezar definimos las constantes dentro del programa
+
+Semillas dentro del ruido:
+```javascript
+// La siguiente constante define semillas aleatorias para el ruido
+const seedX = Math.random()
+const seedY = Math.random()
+```
+
+Radio de los círculos:
+```javascript
+// Define los radios de los círculos generados por el ruido
+const radX = 1
+const radY = 4
+```
+
+Variable de las amplitudes de la animación:
+```javascript
+// Variable para amplitudes
+let ampX
+let ampY
+```
+
+Configuración del gif:
+```javascript
+// Esta constante define la configuración del gif
+const gif = {
+    startLoop: 4,
+    endLoop: 2,
+    fileName: "noiseLoop4x.gif"
+```
+
+---
+Seguimos estableciendo distintos parámetros dentro del código como:
+
+- El tamaño del lienzo.
+- La configuracion del modo de color.
+- La tasa de frames.
+- El color del fondo.
+- El contorno.
+- Generar un bucle.
+- Calcular las amplitudes de la animación.
+
+```javascript
+function setup() {
+  // Creación del lienzo midiendo este 600 x 600
+    createCanvas(600, 600)
+
+  // La configuración del modo del color 
+    colorMode(HSB, 1, 1, 1)
+
+  // Establecer la tasa de frames a 200
+    frameRate(200)
+
+  // Configurar el color del fondo a negro
+    background(0)
+    fill(100)
+
+  // No hacer un contorno a las figuras
+    noStroke()
+
+  // Crear el bucle animado como e identificarlo como gif
+    createLoop(9, { gif })
+
+  // Calcula las amplitudes de la animación a lo largo del lienzo 
+    ampX = width / 1
+    ampY = height / 2
+}
+```
+
+---
+
+Ahora seguimos con la function draw donde establecemos otros parámetros dentro del codigo como:
+
+- El color de relleno y que este cambia dependiendo al progreso del bucle.
+- Trasladar el punto de origen dentro del lienzo.
+- Crear coordenadas x e y
+- Dibujar y editar las medidas del círculo.
+
+```javascript
+function draw() {
+    // background(0)
+
+  // El color del relleno basado en el progreso del bucle 
+    fill(animLoop.progress, 6, 8)
+    const density = 0.05
+
+  // Traslada el punto de origen al centro del lienzo  
+    translate(width / 3, height / 2)
+
+  // Creación de coordenadas x e y usando ruido
+    const x = animLoop.noise({ radius: radX, seed: seedX }) * ampX
+    const y = animLoop.noise({ radius: radY, seed: seedY }) * ampY
+
+  // Dibujar un círculo acorde a las coordenadas establecidas
+    ellipse(x, y, 50, 30)
+}
+```
+
+Link del codigo: https://editor.p5js.org/Simonpso/sketches/KGohbtrTe
diff --git a/estudiantes/23-Simonpso/clase-15/index.html b/estudiantes/23-Simonpso/clase-15/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta charset="utf-8" />
+<script src="https://unpkg.com/[email protected]/dist/p5.createloop.js"></script>
+  </head>
+  <body>
+    <main>
+    </main>
+    <script src="sketch.js"></script>
+  </body>
+</html>
diff --git a/estudiantes/23-Simonpso/clase-15/p5.createloop.js b/estudiantes/23-Simonpso/clase-15/p5.createloop.js