.

content/docs/Shaders/Texturing.md

@@ -55,12 +55,8 @@ Los blending modes aplicados son los mismos vistos en **Coloring**.
 * **Slider**: controla el brillo (visible cuando se selecciona tinting)
 * **Color Pickers**: para seleccionar los colores que se aplicarán en el tinting
 
-{{< p5-iframe sketch="/showcase/sketches/shaders/texturing/b1.js" width="800" height="650" lib1="https://cdn.jsdelivr.net/gh/VisualComputing/p5.treegl/p5.treegl.js">}}
-
 {{< p5-iframe sketch="/showcase/sketches/shaders/texturing/brightness.js" width="800" height="650" lib1="https://cdn.jsdelivr.net/gh/VisualComputing/p5.treegl/p5.treegl.js">}}
 
-
-
 {{<details "Sketch Code">}}
 
 ``` js

content/docs/Transformations/Texture and Lighting.md

@@ -1,7 +1,6 @@
 ---
 weight: 6
 ---
-Color blindness
 
 ## Texture and Lighting
 
@@ -15,6 +14,26 @@ Además de su papel en la manipulación de objetos virtuales, las transformacion
 
 Las transformaciones en el espacio son un componente fundamental en la creación de efectos especiales en películas y producciones audiovisuales. A través de ellas, los artistas pueden hacer que los objetos se muevan, se transformen y se integren de manera realista en escenas complejas, llevando al espectador a mundos imaginarios y sorprendentes.
 
+## 2. Conceptos clave
+
+Una de las transformaciones más básicas es la traducción (translation), que nos permite desplazar un objeto en el espacio sin cambiar su forma ni orientación original. En 2D, esto se logra mediante el desplazamiento de las coordenadas (x, y) del objeto en una dirección específica. En 3D, se aplica el mismo principio desplazando las coordenadas (x, y, z) del objeto en una dirección determinada.
+
+La escala (scaling) es otra transformación comúnmente utilizada, que nos permite cambiar el tamaño de un objeto en el espacio. Esta transformación puede ser aplicada de forma uniforme en todas las dimensiones del objeto, ya sea para agrandarlo o reducirlo. En 2D, la escala se realiza multiplicando las coordenadas (x, y) del objeto por factores de escala. En 3D, se aplica el mismo principio multiplicando las coordenadas (x, y, z) del objeto por los factores de escala correspondientes.
+
+Las rotaciones (rotations) nos permiten girar un objeto alrededor de un punto de referencia, cambiando su posición y orientación relativa en el espacio. Estas transformaciones son esenciales para crear efectos visuales dinámicos y modificar la perspectiva de los objetos. En 2D, las rotaciones se realizan aplicando una matriz de rotación a las coordenadas (x, y) del objeto. En 3D, las rotaciones se pueden realizar alrededor de un eje específico, como el eje x, y o z, utilizando matrices de rotación de 3x3 o cuaterniones.
+
+La iluminación (lighting) desempeña un papel crucial en la percepción visual de objetos en un entorno 3D. Al manipular propiedades de la luz como dirección, intensidad y color, podemos simular diferentes condiciones de iluminación y agregar realismo a nuestras creaciones. En p5.js, un framework de JavaScript para la creación de gráficos y animaciones interactivas, se pueden utilizar varios tipos de iluminación, como la luz ambiente (ambient light), luz direccional (directional light), luz puntual (point light) y luz focal (spotlight), para mejorar la apariencia visual de escenas 3D.
+
+Los árboles de transformación (transformation trees) son estructuras jerárquicas utilizadas para gestionar múltiples transformaciones de manera eficiente. Permiten la combinación y aplicación de transformaciones en un orden específico, lo que resulta en efectos visuales más complejos. En p5.js, se pueden implementar árboles de transformación utilizando una técnica conocida como pila de matrices push-pop (push-pop matrix stack). Esta aproximación basada en pilas te permite definir una serie de transformaciones y gestionarlas de manera jerárquica.
+
+Al organizar las transformaciones en una estructura jerárquica, los árboles de transformación te permiten crear animaciones y efectos visuales complejos. Por ejemplo, puedes animar la posición, escala y rotación de un objeto a lo largo del tiempo combinando transformaciones de traslación, escala y rotación dentro de un árbol de transformación. Además, puedes aplicar árboles de transformación para crear escenas intrincadas con múltiples objetos. Al anidar árboles de transformación, puedes establecer relaciones padre-hijo entre objetos, lo que permite realizar transformaciones relativas a los sistemas de coordenadas de sus padres.
+
+## 3. Motivación
+
+Este trabajo tiene como objetivo analizar cómo la geometría de las figuras geométricas afecta la interacción con la iluminación desde diferentes ángulos. Exploraremos cómo la forma y la estructura de estas figuras influyen en la distribución de la luz, generando efectos visuales únicos. Este análisis nos permitirá comprender cómo la geometría afecta la apariencia visual de las figuras y cómo utilizar este conocimiento para crear representaciones más realistas y estéticamente atractivas.
+
+## 4. Sketch
+
 {{< p5-iframe sketch="/showcase/sketches/shaders/transformations/1.js" width="950" height="900" lib1="https://cdn.jsdelivr.net/gh/VisualComputing/p5.treegl/p5.treegl.js">}}
 
 

content/sketches/shaders/posteffects/1.js

@@ -0,0 +1,103 @@
+let maskShader, pg_1;
+let lumaShader, pg_2;
+let src;
+let img_src;
+let video_src;
+let video_on;
+let lightness;
+let uv;
+let mask3;
+
+function preload() {
+  lumaShader = readShader('/showcase/docs/Shaders/fragments/luma.frag', { varyings: Tree.texcoords2 });
+  maskShader = readShader('/showcase/docs/Shaders/fragments/mask.frag', { varyings: Tree.texcoords2 });
+  video_src = createVideo(['/showcase/docs/Shaders/resources/video0.mp4']);
+  video_src.hide(); 
+
+  img_src = loadImage('/showcase/docs/Shaders/resources/photomosaic.jpg');
+  src = img_src;
+}
+
+function setup() {
+mask3 = [0, 0, 0, 0, 1, 0, 0, 0, 0]; //identidad
+  createCanvas(700, 500, WEBGL);
+  noStroke();
+  textureMode(NORMAL);
+//   pg_1 = createGraphics(width, height, WEBGL);
+//   pg_1.colorMode(RGB, 1);
+//   pg_1.textureMode(NORMAL);
+//   pg_1.shader(lumaShader);
+
+//   pg_2 = createGraphics(width, height, WEBGL);
+//   pg_2.colorMode(RGB, 1);
+//   pg_2.textureMode(NORMAL);
+//   pg_2.shader(maskShader);
+  shader(maskShader);
+  shader(lumaShader);
+  video_on = createCheckbox('video', false);
+  video_on.style('color', 'white');
+  video_on.changed(() => {
+    src = video_on.checked() ? video_src : img_src;
+    video_on.checked() ? video_src.loop() : video_src.pause();
+  });
+  video_on.position(10, 10);
+  maskShader.setUniform('texture', src);
+
+  lightness = createCheckbox('luma', false);
+  lightness.position(10, 30);
+  lightness.style('color', 'white');
+  lightness.input(() => lumaShader.setUniform('lightness', lightness.checked()));
+
+  ridges = createCheckbox('Ridges visualization', false);
+  ridges.style('color', 'white');
+  let checked = false;
+  ridges.changed(() => {
+    checked = !checked;
+    if (checked) {
+        mask3 = [-1, -1, -1, -1, 8, -1, -1, -1, -1];
+    }else{
+        mask3 = [0, 0, 0, 0, 1, 0, 0, 0, 0]; //identidad
+    }
+  });
+  ridges.position(10, 50);
+
+}
+
+function draw() {
+  /*
+  NDC quad shape, i.e., x, y and z vertex coordinates ∈ [-1..1]
+  textureMode is NORMAL, i.e., u, v texture coordinates ∈ [0..1]
+  see: https://p5js.org/reference/#/p5/beginShape
+       https://p5js.org/reference/#/p5/vertex
+          y                  v
+          |                  |
+  (-1,1,0)|   (1,1,0)        (0,1)     (1,1)
+    *_____|_____*            *__________*   
+    |     |     |            |          |        
+    |____NDC____|__x         | texture  |        
+    |     |     |            |  space   |
+    *_____|_____*            *__________*___ u
+  (-1,-1,0)   (1,-1,0)       (0,0)    (1,0) 
+  */
+  lumaShader.setUniform('texture', src);
+
+  roiradius = 100;
+  mode = 0;
+  maskShader.setUniform('texture', src);
+  maskShader.setUniform('texOffset', [1 / src.width, 1 / src.height]);
+  maskShader.setUniform('ksize', 3);
+  maskShader.setUniform('roiradius', roiradius);
+  maskShader.setUniform('mode', mode);
+  emitMousePosition(maskShader, [uniform = 'mouse']);
+  emitResolution(maskShader, [uniform = 'resolution']);
+
+
+  maskShader.setUniform('mask3', mask3);
+
+  beginShape();
+  vertex(-1, -1, 0, 0, 1);
+  vertex(1, -1, 0, 1, 1);
+  vertex(1, 1, 0, 1, 0);
+  vertex(-1, 1, 0, 0, 0);
+  endShape();
+} 

content/sketches/shaders/posteffects/2.js

@@ -0,0 +1,87 @@
+let maskShader, pg_1;
+let lumaShader, pg_2;
+let src;
+let img_src;
+let video_src;
+let video_on;
+let lightness;
+let uv;
+let mask3;
+
+function preload() {
+    lumaShader = readShader('/showcase/docs/Shaders/fragments/luma.frag', { varyings: Tree.texcoords2 });
+    maskShader = readShader('/showcase/docs/Shaders/fragments/mask.frag', { varyings: Tree.texcoords2 });
+    video_src = createVideo(['/showcase/docs/Shaders/resources/video0.mp4']);
+    video_src.hide(); 
+
+    img_src = loadImage('/showcase/docs/Shaders/resources/photomosaic.jpg');
+    src = img_src;
+  }
+
+function setup() {
+  mask3 = [0, 0, 0, 0, 1, 0, 0, 0, 0]; //identidad
+  createCanvas(700, 500, WEBGL);
+  noStroke();
+  textureMode(NORMAL);
+
+  pg_1 = createGraphics(width, height, WEBGL);
+  pg_1.colorMode(RGB, 1);
+  pg_1.textureMode(NORMAL);
+  pg_1.shader(lumaShader);
+
+  pg_2 = createGraphics(width, height, WEBGL);
+  pg_2.colorMode(RGB, 1);
+  pg_2.textureMode(NORMAL);
+  pg_2.shader(maskShader);
+
+  video_on = createCheckbox('video', false);
+  video_on.style('color', 'white');
+  video_on.changed(() => {
+    src = video_on.checked() ? video_src : img_src;
+    video_on.checked() ? video_src.loop() : video_src.pause();
+  });
+  video_on.position(10, 10);
+  maskShader.setUniform('texture', src);
+
+  lightness = createCheckbox('luma', false);
+  lightness.position(10, 30);
+  lightness.style('color', 'white');
+  lightness.input(() => lumaShader.setUniform('lightness', lightness.checked()));
+
+  ridges = createCheckbox('Top sobel', false);
+  ridges.style('color', 'white');
+  let checked = false;
+  ridges.changed(() => {
+    checked = !checked;
+    if (checked) {
+        //mask3 = [-1, -1, -1, -1, 8, -1, -1, -1, -1];//ridges
+        mask3 = [1, 2, 1, 0, 0, 0, -1, -2, -1];
+    } else {
+        mask3 = [0, 0, 0, 0, 1, 0, 0, 0, 0]; //identidad
+    }
+  });
+  ridges.position(10, 50);
+}
+
+function draw() {
+  pg_1.background(125);
+  lumaShader.setUniform('texture', src);
+  let pg = pg_1;
+  pg.quad(-1, 1, 1, 1, 1, -1, -1, -1);
+
+  roiradius = 100;
+  mode = 0;
+  maskShader.setUniform('texture', pg);
+  maskShader.setUniform('texOffset', [1 / src.width, 1 / src.height]);
+  maskShader.setUniform('ksize', 3);
+  maskShader.setUniform('roiradius', roiradius);
+  maskShader.setUniform('mode', mode);
+  emitMousePosition(maskShader, [uniform = 'mouse']);
+  emitResolution(maskShader, [uniform = 'resolution']);
+
+  maskShader.setUniform('mask3', mask3);
+  pg = pg_2;
+  pg.quad(-1, 1, 1, 1, 1, -1, -1, -1);
+  image(pg, -350, -250, 700, 500);
+
+}