ultimos cambios a

content/docs/shortcodes/Taller 1/Histograma.md

@@ -4,16 +4,18 @@
 
 Un histograma de imagen es una representación gráfica de la distribución tonal en una imagen digital. Para esto traza el número de píxeles para cada valor tonal de manera que al mirar el histograma de una imagen específica, un espectador podrá juzgar la distribución tonal completa de un vistazo.
 
-Tiene muchos usos entre ellos sirve dar al fotógrafo una mejor comprensión de los valores de brillo en una imagen
+Tiene muchos usos entre ellos sirve dar al fotógrafo una mejor comprensión de los valores de brillo en una imagen.
 
 
 
 ## Background
-Se debe tener precaución en como se reorganizan y clasifican los pixeles
+Un histograma es una representación de la distribución de datos numericos, este fue creado por Karl Pearson. Este tiene 2 ejes x y y, el primero contiene eventos cuya frecuencia debe contar y el otro contiene la frecuencia.
 
 ## Code
 
-{{< p5-iframe sketch="/visual_computing/sketches/histogram.js" width="600" height="600" >}}
+{{< p5-iframe sketch="/visual_computing/sketches/histogram.js" width="720" height="420" >}}
+{{< p5-iframe sketch="/visual_computing/sketches/histogram2.js" width="700" height="440" >}}
+{{< p5-iframe sketch="/visual_computing/sketches/histogram3.js" width="400" height="400" >}}
 
 {{< details "**CODIGO:** Histograma" close >}}
 **C**odigo generado usando el editor web de **P5.js**.
@@ -22,55 +24,61 @@ var img;
 var maxRange = 256;
 var histogram = new Array(maxRange);
 function preload() {
-    img = loadImage("/visual_computing/sketches/storm2.png"); 
+  img = loadImage("/visual_computing/sketches/einstein.jpg"); // Load the image
+}
+
+function setup() {
+  createCanvas(img.width, img.height+10);
+  background(255);
+  img.resize(0,400);
+  colorMode(HSL, maxRange);
+  image(img, 0, 0);
+
+  for (i = 0; i <= maxRange; i++) {
+    histogram[i] = 0
   }
+
+  transform_rgb();
+
+  construir_histograma();
 
-  function setup() {
-    createCanvas(600, 600);
-    background(255);
-    img.resize(0,400);
-    var maxRange = 256
-    colorMode(HSL, maxRange);
-    image(img, 0, 0);
-    for (i = 0; i <= maxRange; i++) {
-      histogram[i] = 0
-    }
-
-    loadPixels();
-
-    construir_grises();
-    construir_histograma();
-  }
+}
+
+function construir_histograma(){
+  image(img, 0, 0);
+  stroke(300,100,80)
+  push()
+  translate(10,0)
+  for (x = 0; x <= maxRange; x++) {
+    index = histogram[x];
+
+    y1=int(map(index, 0, max(histogram), img.height, img.height-200));
+		y2 = img.height
+    xPos = map(x,0,maxRange,0, img.width-20)
+    stroke('red');
+    line(xPos, y1, xPos, y2);
 
-  function construir_grises(){
-    for (var x = 0; x < img.width; x+=5) {
-        for (var y = 0; y < img.height; y+=5) {
-          var loc = (x + y * img.width) * 4;
-          var h = pixels[loc];
-          var s = pixels[loc + 1];
-          var l = pixels[loc + 2];
-          var a = pixels[loc + 3];
-          b = int(l);
-          histogram[b]++
-        }
-      }
   }
+  pop()
+}
 
-  function construir_histograma(){
-    image(img, 0, 0);
-    stroke(300,100,80)
-    push()
-    translate(10,0)
-    for (x = 0; x <= maxRange; x++) {
-      index = histogram[x];
+function transform_rgb(){
+  loadPixels();
 
-      y1=int(map(index, 0, max(histogram), height, height-200));
-          y2 = height
-      xPos = map(x,0,maxRange,0, width-20)
-      line(xPos, y1, xPos, y2);
+  for (var x = 0; x < img.width; x+=5) {
+    for (var y = 0; y < img.height; y+=5) {
+      var loc = (x + y * img.width) * 4;
+      var h = pixels[loc];
+      var s = pixels[loc + 1];
+      var l = pixels[loc + 2];
+      var a = pixels[loc + 3];
+      b = int(l);
+      histogram[b]++
     }
-    pop()
   }
+}
+
+  //Bibliografia: https://editor.p5js.org/ebenjmuse/sketches/HyPfeGkCZ
 ```
 {{< /details >}}
 

content/docs/shortcodes/Taller 1/Ilusiones/SteppingFeet.md

@@ -14,7 +14,7 @@ Para cambiar la velocidad de las figuras se usa el primer slider, para cambiar l
 
 {{< p5-iframe sketch="/visual_computing/sketches/stepping_feet.js" width="625" height="625" >}}
 
-{{< details "**CODIGO:** Movimiento Enlazado" close >}}
+{{< details "**CODIGO:** Paso a paso" close >}}
 **C**odigo generado usando el editor web de **P5.js**.
 ```javascript
 var canvasWidth = 600;

content/sketches/histogram.js

@@ -2,54 +2,58 @@ var img;
 var maxRange = 256;
 var histogram = new Array(maxRange);
 function preload() {
-    img = loadImage("/visual_computing/sketches/storm2.png"); 
+  img = loadImage("/visual_computing/sketches/einstein.jpg"); // Load the image
+}
+
+function setup() {
+  createCanvas(img.width, img.height+10);
+  background(255);
+  img.resize(0,400);
+  colorMode(HSL, maxRange);
+  image(img, 0, 0);
+
+  for (i = 0; i <= maxRange; i++) {
+    histogram[i] = 0
   }
+
+  transform_rgb();
+
+  construir_histograma();
 
-  function setup() {
-    createCanvas(600, 600);
-    background(255);
-    img.resize(0,400);
-    var maxRange = 256
-    colorMode(HSL, maxRange);
-    image(img, 0, 0);
-    for (i = 0; i <= maxRange; i++) {
-      histogram[i] = 0
-    }
-
-    loadPixels();
-
-    construir_grises();
-    construir_histograma();
-  }
+}
+
+function construir_histograma(){
+  image(img, 0, 0);
+  stroke(300,100,80)
+  push()
+  translate(10,0)
+  for (x = 0; x <= maxRange; x++) {
+    index = histogram[x];
+
+    y1=int(map(index, 0, max(histogram), img.height, img.height-200));
+		y2 = img.height
+    xPos = map(x,0,maxRange,0, img.width-20)
+    stroke('red');
+    line(xPos, y1, xPos, y2);
 
-  function construir_grises(){
-    for (var x = 0; x < img.width; x+=5) {
-        for (var y = 0; y < img.height; y+=5) {
-          var loc = (x + y * img.width) * 4;
-          var h = pixels[loc];
-          var s = pixels[loc + 1];
-          var l = pixels[loc + 2];
-          var a = pixels[loc + 3];
-          b = int(l);
-          histogram[b]++
-        }
-      }
   }
+  pop()
+}
 
-  function construir_histograma(){
-    image(img, 0, 0);
-    stroke(300,100,80)
-    push()
-    translate(10,0)
-    for (x = 0; x <= maxRange; x++) {
-      index = histogram[x];
+function transform_rgb(){
+  loadPixels();
 
-      y1=int(map(index, 0, max(histogram), height, height-200));
-          y2 = height
-      xPos = map(x,0,maxRange,0, width-20)
-      line(xPos, y1, xPos, y2);
+  for (var x = 0; x < img.width; x+=5) {
+    for (var y = 0; y < img.height; y+=5) {
+      var loc = (x + y * img.width) * 4;
+      var h = pixels[loc];
+      var s = pixels[loc + 1];
+      var l = pixels[loc + 2];
+      var a = pixels[loc + 3];
+      b = int(l);
+      histogram[b]++
     }
-    pop()
   }
+}
 
   //Bibliografia: https://editor.p5js.org/ebenjmuse/sketches/HyPfeGkCZ

content/sketches/histogram2.js

@@ -0,0 +1,59 @@
+var img;
+var maxRange = 256;
+var histogram = new Array(maxRange);
+function preload() {
+  img = loadImage("/visual_computing/sketches/colores.jpg"); // Load the image
+}
+
+function setup() {
+    createCanvas(img.width, img.height+10);
+    background(255);
+    img.resize(0,400);
+    colorMode(HSL, maxRange);
+    image(img, 0, 0);
+
+    for (i = 0; i <= maxRange; i++) {
+      histogram[i] = 0
+    }
+
+    transform_rgb();
+
+    construir_histograma();
+
+  }
+
+  function construir_histograma(){
+    image(img, 0, 0);
+    stroke(300,100,80)
+    push()
+    translate(10,0)
+    for (x = 0; x <= maxRange; x++) {
+      index = histogram[x];
+
+      y1=int(map(index, 0, max(histogram), img.height, img.height-200));
+          y2 = img.height
+      xPos = map(x,0,maxRange,0, img.width-20)
+      stroke('red');
+      line(xPos, y1, xPos, y2);
+
+    }
+    pop()
+  }
+
+  function transform_rgb(){
+    loadPixels();
+
+    for (var x = 0; x < img.width; x+=5) {
+      for (var y = 0; y < img.height; y+=5) {
+        var loc = (x + y * img.width) * 4;
+        var h = pixels[loc];
+        var s = pixels[loc + 1];
+        var l = pixels[loc + 2];
+        var a = pixels[loc + 3];
+        b = int(l);
+        histogram[b]++
+      }
+    }
+  }
+
+    //Bibliografia: https://editor.p5js.org/ebenjmuse/sketches/HyPfeGkCZ

content/sketches/histogram3.js

@@ -0,0 +1,59 @@
+var img;
+var maxRange = 256;
+var histogram = new Array(maxRange);
+function preload() {
+  img = loadImage("/visual_computing/sketches/storm2.png"); // Load the image
+}
+
+function setup() {
+    createCanvas(img.width, img.height+10);
+    background(255);
+    img.resize(0,400);
+    colorMode(HSL, maxRange);
+    image(img, 0, 0);
+
+    for (i = 0; i <= maxRange; i++) {
+      histogram[i] = 0
+    }
+
+    transform_rgb();
+
+    construir_histograma();
+
+  }
+
+  function construir_histograma(){
+    image(img, 0, 0);
+    stroke(300,100,80)
+    push()
+    translate(10,0)
+    for (x = 0; x <= maxRange; x++) {
+      index = histogram[x];
+
+      y1=int(map(index, 0, max(histogram), img.height, img.height-200));
+          y2 = img.height
+      xPos = map(x,0,maxRange,0, img.width-20)
+      stroke('red');
+      line(xPos, y1, xPos, y2);
+
+    }
+    pop()
+  }
+
+  function transform_rgb(){
+    loadPixels();
+
+    for (var x = 0; x < img.width; x+=5) {
+      for (var y = 0; y < img.height; y+=5) {
+        var loc = (x + y * img.width) * 4;
+        var h = pixels[loc];
+        var s = pixels[loc + 1];
+        var l = pixels[loc + 2];
+        var a = pixels[loc + 3];
+        b = int(l);
+        histogram[b]++
+      }
+    }
+  }
+
+    //Bibliografia: https://editor.p5js.org/ebenjmuse/sketches/HyPfeGkCZ

content/sketches/stepping_feet.js

@@ -13,6 +13,7 @@ var colorBar1 = 'yellow';
 var colorBar2 = 'blue';
 var moveBarRight = true;
 var isMove = true;
+var contrast = true;
 
 var sliderSpeed;
 
@@ -23,7 +24,11 @@ function setup() {
 }
 
 function draw() {
-  drawBoard();
+  if(contrast){
+    drawBoard();
+  }else{
+    background(220);
+  }
   updateSpeed();
   drawBar1();
   drawBar2();
@@ -153,5 +158,19 @@ function drawLayout() {
                 break;
         }
     });
+
+    // Bye Contrast button
+    button = createButton('Bye contrast');   
+    button.position(150, 440);
+    button.mousePressed(() => {
+      contrast = false;
+    });
+
+    // Hi Contrast button
+    button = createButton('Hi contrast');   
+    button.position(150, 470);
+    button.mousePressed(() => {
+      contrast = true;
+    });
 
 }