Merge pull request #8 from LabVS-IM-UNAM/Giovani

Giovani

Fractal.js

@@ -10,7 +10,6 @@ let HEIGHTSHAPE;
 
 function setup() {
   createCanvas(windowWidth, windowHeight);
-  //IMAGEN.resize(50,0);
 
   shape = createGraphics(width, height);
   WIDTHSHAPE = shape.width / 2;
@@ -33,6 +32,8 @@ function setup() {
   let colorPickerContorno = document.getElementById("colorContornoFractal");
   let boton = document.getElementById("boton")
 
+  let inputImagen = select("#imagen");
+
   sliderProporcion.addEventListener("input", function () {
     PROPORCION = parseFloat(sliderProporcion.value);
     Dibujar();
@@ -62,8 +63,8 @@ function setup() {
     COLOR_CONTORNO_FRACTAL = this.value;
     Dibujar();
   })
-
   boton.addEventListener("click", function () { saveCanvas("Fractal") })
+  inputImagen.elt.addEventListener("change", SubirArchivo);
 }
 
 /*  Dibujar:
@@ -78,6 +79,7 @@ function Dibujar() {
   DibujarFractal(0, 0, createVector(0, 0), ZOOM, NUMERO_VERTICES, ITERACIONES);
   pop();
 }
+
 /*  DibujarFractal:
     Dibuja un fractal de poligonos con parametros:
     -->   centro: (centroX, centroY), la posicion donde se empieza a dibujar el fractal
@@ -90,9 +92,16 @@ function DibujarFractal(centroX, centroY, vertice, radio, numVertices, iteracion
   let radioReducido = radio * PROPORCION
   //  Para iteraciones positivas distintas de cero.
   if (iteraciones > 0) {
-    // DibujarImagen(centroX, centroY, radio);
-    // DibujarMask(centroX, centroY, radio, numVertices, iteraciones - 1);
-    DibujarPoligono(centroX, centroY, radio, numVertices, iteraciones - 1);
+    if (IMAGEN) {
+      console.log("Hay imagen");
+      DibujarMask(centroX, centroY, radio, numVertices, iteraciones - 1);
+      // DibujarImagen(centroX, centroY, radio);
+    }
+    else {
+      console.log("No hay imagen");
+      DibujarPoligono(centroX, centroY, radio, numVertices, iteraciones - 1);
+
+    }
 
     let listaVertices = InformacionPoligono(centroX, centroY, vertice, radio, numVertices, iteraciones);
 
@@ -184,25 +193,25 @@ function DibujarMask(centroX, centroY, radio, numVertices, iteraciones) {
   }
   shape.endShape(CLOSE);
 
-  imageMode(CENTER);
-  image(shape, centroX, centroY)
+  let imageMasked = DibujarImagen(centroX, centroY, radio, radio);
+  imageMode(CENTER)
 
-  // let imageMasked = createImage(WIDTHMASK, HEIGHTMASK);
-  // imageMasked.copy(IMAGEN, 0, 0, IMAGEN.width, IMAGEN.height, 0, 0, WIDTHIMAGE, HEIGHTIMAGE);
+  // image(shape, centroX, centroY)
+  // image(imageMasked, centroX, centroY)
 
-  // imageMode(CENTER);
-  // imageMasked.mask(shape);
-  // image(imageMasked, centroX, centroY);
+  imageMasked.mask(shape);
+  image(imageMasked, centroX, centroY)
 }
 
-function DibujarImagen(centroX, centroY, radio) {
-  const WIDTH = 2 * radio;
-  const HEIGHT = 2 * radio;
+function DibujarImagen(centroX, centroY, widthX, heightY) {
+  const WIDTH = 2 * widthX;
+  const HEIGHT = 2 * heightY;
   let imageScaled = createImage(WIDTH, HEIGHT);
   imageScaled.copy(IMAGEN, 0, 0, IMAGEN.width, IMAGEN.height, 0, 0, WIDTH, HEIGHT);
 
-  imageMode(CENTER);
-  image(imageScaled, centroX, centroY);
+  return imageScaled;
+  // imageMode(CENTER);
+  // image(imageScaled, centroX, centroY);
 }
 
 function CreateVertex(centroX, centroY, radio, numVertices, iteraciones) {
@@ -220,15 +229,28 @@ function CreateVertex(centroX, centroY, radio, numVertices, iteraciones) {
 function setAnglePair(numVertices, iteraciones) {
   return numVertices % 2 == 1 && iteraciones % 2 == 0 ? PI : 0;
 }
+
 function setAngleOdd(_numVertices, _iteraciones) {
   return _numVertices % 2 == 1 && _iteraciones % 2 == 1 ? PI : 0;
 }
 
-
 function getX(centroX, a, radio) {
   return centroX + cos(a) * radio;
 }
 
 function getY(centroY, a, radio) {
   return centroY + sin(a) * radio;
 }
+
+function SubirArchivo(event) {
+  let file = event.target.files[0];
+  if (file && file.type.startsWith("image/")) {
+    loadImage(URL.createObjectURL(file), (img) => {
+      IMAGEN = img;
+      console.log("Imagen cargada correctamente");
+      Dibujar();
+    })
+  } else {
+    console.log("El archivo no es una imagen");
+  }
+}

Version-optimizada/CrearPoligono.js

@@ -0,0 +1,12 @@
+const VectorX = (centro, angulo, radio) => centro + cos(angulo) * radio;
+const VectorY = (centro, angulo, radio) => centro + sin(angulo) * radio;
+
+function CrearPoligono(numeroVertices = 3, radio = 50, centro = { x: width / 2, y: height / 2 }) {
+  let anguloCentral = TWO_PI / numeroVertices;
+  let vertices = [];
+  for (let i = 0; i < numeroVertices; i++) {
+    let angulo = anguloCentral * i;
+    vertices.push({ x: VectorX(centro.x, angulo, radio), y: VectorY(centro.y, angulo, radio) });
+  }
+  return vertices;
+}

Version-optimizada/DibujarPoligono.js

@@ -0,0 +1,45 @@
+let IMAGEN;
+let COLOR_FONDO;
+let COLOR_FRACTAL;
+let COLOR_BORDE;
+
+function InicializarColores() {
+  COLOR_FONDO = color("#ffffff");
+  COLOR_FRACTAL = color("#000000");
+  COLOR_BORDE = color("#000000");
+
+  AsignarColores();
+}
+
+function AsignarColores() {
+  background(COLOR_FONDO)
+  fill(COLOR_FRACTAL);
+  stroke(COLOR_BORDE);
+}
+
+function DibujarPoligono(vertices) {
+  beginShape();
+  for (let vertice of vertices) {
+    vertex(vertice.x, vertice.y);
+  }
+  endShape(CLOSE);
+}
+function DibujarImagen(vertices, radio = 50, centro = { x: width / 2, y: height / 2 }) {
+  const WIDTH = 2 * radio;
+  const HEIGHT = 2 * radio;
+
+  shape = createGraphics(WIDTH, HEIGHT);
+
+  shape.beginShape();
+  for (let vertice of vertices) {
+    shape.vertex(vertice.x - centro.x + radio, vertice.y - centro.y + radio);
+  }
+  shape.endShape(CLOSE);
+
+  let imageScaled = createImage(WIDTH, HEIGHT);
+  imageScaled.copy(IMAGEN, 0, 0, IMAGEN.width, IMAGEN.height, 0, 0, WIDTH, HEIGHT);
+  imageScaled.mask(shape);
+
+  imageMode(CENTER);
+  image(imageScaled, centro.x, centro.y);
+}

Version-optimizada/Fractal(Optimizacion).js

@@ -0,0 +1,23 @@
+let NUMERO_VERTICES;
+let PROPORCION;
+let ZOOM;
+let ITERACIONES;
+
+function preload() {
+  CreateMetronome(1);
+}
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+
+  Input();
+  InicializarColores();
+  Dibujar();
+
+}
+
+function Dibujar() {
+  let poligono = CrearPoligono(NUMERO_VERTICES, ZOOM);
+
+  if (IMAGEN) DibujarImagen(poligono, ZOOM);
+  else DibujarPoligono(poligono);
+}

Version-optimizada/Input.js

@@ -0,0 +1,65 @@
+function Input() {
+  let sliderNumeroVertices = document.getElementById("numeroVertices");
+  let sliderProporcion = document.getElementById("proporcion");
+  let sliderZoom = document.getElementById("zoom");
+  let sliderIteraciones = document.getElementById("iteraciones");
+
+  let colorPickerFondo = document.getElementById("colorFondo");
+  let colorPickerFractal = document.getElementById("colorFractal");
+  let colorPickerBorde = document.getElementById("colorBorde");
+
+  let boton = document.getElementById("boton")
+  let inputImagen = select("#imagen");
+
+
+  sliderProporcion.addEventListener("input", function () {
+    PROPORCION = parseFloat(sliderProporcion.value);
+    clear();
+
+    Dibujar();
+  });
+  sliderZoom.addEventListener("input", function () {
+    ZOOM = parseFloat(sliderZoom.value);
+    clear();
+
+    Dibujar();
+  })
+  sliderIteraciones.addEventListener("input", function () {
+    ITERACIONES = parseInt(sliderIteraciones.value);
+    clear();
+
+    Dibujar();
+    CreateMetronome(ITERACIONES);
+  })
+  sliderNumeroVertices.addEventListener("input", function () {
+    NUMERO_VERTICES = parseInt(sliderNumeroVertices.value);
+    clear();
+
+    Dibujar();
+  })
+
+  colorPickerFondo.addEventListener("input", function () {
+    COLOR_FONDO = this.value;
+    clear();
+
+    AsignarColores();
+    Dibujar();
+  })
+  colorPickerFractal.addEventListener("input", function () {
+    COLOR_FRACTAL = this.value;
+    clear();
+
+    AsignarColores();
+    Dibujar();
+  })
+  colorPickerBorde.addEventListener("input", function () {
+    COLOR_BORDE = this.value;
+    clear();
+
+    AsignarColores();
+    Dibujar();
+  })
+
+  inputImagen.elt.addEventListener("change", SubirArchivo);
+  boton.addEventListener("click", function () { saveCanvas("Fractal") })
+}

Sound.js → Version-optimizada/Sound.js

@@ -24,12 +24,12 @@
 //     }, floor(1000 / (i + 1))); //El i-ésimo oscilador sonará cada 1/(i+1) segundos.
 //   }
 // }
-function CreateMetronome(iteraciones) {
+function CreateMetronome(iteraciones = 1) {
   CreateOscillators(iteraciones);
   CreateIntervals(iteraciones);
 }
 let oscillators = [];
-function CreateOscillators(iteraciones) {
+function CreateOscillators(iteraciones = 1) {
   ClearOscillators();
 
   for (let index = 0; index < iteraciones; index++) {
@@ -39,7 +39,7 @@ function CreateOscillators(iteraciones) {
     osc.amp(0.5 * 1 / (index + 1));
     oscillators.push([osc, false]);
   }
-  // console.log(oscillators);
+  // console.log("Osciladores creados");
 }
 function ClearOscillators() {
   if (oscillators.length > 0) {
@@ -48,14 +48,16 @@ function ClearOscillators() {
     }
     oscillators = [];
   }
+  // console.log("Lista de osciladores limpia");
 }
 let intervals = [];
-function CreateIntervals(iteraciones) {
+function CreateIntervals(iteraciones = 1) {
   ClearIntervals();
   for (let index = 0; index < iteraciones; index++) {
     let interval = setInterval(() => PlayInterval(index), floor(1000 / (index + 1)));
     intervals.push(interval);
   }
+  // console.log("Intervalos creados");
 }
 function PlayInterval(index) {
   if (oscillators[index][1]) {
@@ -74,4 +76,5 @@ function ClearIntervals() {
     }
     intervals = [];
   }
+  // console.log("Lista de intervalos limpia");
 }

Version-optimizada/SubirArchivo.js

@@ -0,0 +1,12 @@
+function SubirArchivo(event) {
+  let file = event.target.files[0];
+  if (file && file.type.startsWith("image/")) {
+    loadImage(URL.createObjectURL(file), (img) => {
+      IMAGEN = img;
+      console.log("Imagen cargada correctamente");
+      Dibujar();
+    });
+  } else {
+    console.log("El archivo no es una imagen");
+  }
+}