Por fin

content/docs/Shaders/Texturing.md

@@ -55,9 +55,12 @@ 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/Shaders/fragments/luma.frag

@@ -0,0 +1,24 @@
+precision mediump float;
+
+// uniforms are defined and sent by the sketch
+uniform bool lightness;
+uniform sampler2D texture;
+uniform bool uv; // uv visualization
+
+// texture space normalized interpolated texture coordinates
+// should have same name and type as in vertex shader
+varying vec2 texcoords2; // (defined in [0..1] ∈ R)
+
+// returns luma of given texel
+float luma(vec4 texel) {
+  // alpha channel (texel.a) is just discarded
+  return 0.299 * texel.r + 0.587 * texel.g + 0.114 * texel.b;
+}
+
+void main() {
+  // texture2D(texture, texcoords2) samples texture at texcoords2 
+  // and returns the normalized texel color
+  vec4 texel = texture2D(texture, texcoords2);
+  gl_FragColor = uv ? vec4(texcoords2.st, 0.0, 1.0) :
+                 lightness ? vec4(vec3(luma(texel)), 1.0) : texel;
+}

content/sketches/shaders/Blending/blend.js

@@ -55,6 +55,7 @@ function setup() {
   bmselect.selected('MULTIPLY');
 
   img = loadImage('/showcase/docs/Shaders/resources/coloring.jpg');
+  input = createFileInput(handleFile);
 
   video_on = createCheckbox('Video por defecto', false);
   video_on.changed(() => {
@@ -95,3 +96,16 @@ function draw() {
   texture(tex);
   square(-450, -400, 800);
 }
+
+
+function handleFile(file) {
+  if (file.type === 'image') {
+    img = createImg(file.data, '');
+    img.hide();
+  }
+  else if (file.type === 'video') {
+    img = createVideo([file.data]);
+    img.hide();
+    img.loop();
+  }
+}

content/sketches/shaders/ImageProcessing/imgprocessing.js

@@ -504,7 +504,13 @@ function draw() {
     maskShader.setUniform('mask5', mask5);
   }
 
-  quad(-width / 2, -height / 2, width / 2, -height / 2, width / 2, height / 2, -width / 2, height / 2);
+  // quad(-width / 2, -height / 2, width / 2, -height / 2, width / 2, height / 2, -width / 2, height / 2);
+  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();
 }
 
 function handleFile(file) {

content/sketches/shaders/texturing/b1.js

@@ -0,0 +1,66 @@
+let lumaShader;
+let src;
+let img_src;
+let video_src;
+let video_on;
+let lightness;
+let uv;
+
+function preload() {
+  lumaShader = readShader('/showcase/docs/Shaders/fragments/luma.frag',
+    { varyings: Tree.texcoords2 });
+  // video source: https://t.ly/LWUs2
+  video_src = createVideo(['/showcase/docs/Shaders/resources/video0.mp4']);
+  video_src.hide(); // by default video shows up in separate dom
+  // image source: https://t.ly/Dz8W
+  img_src = loadImage('/showcase/docs/Shaders/resources/photomosaic.jpg');
+  src = img_src;
+}
+
+function setup() {
+  createCanvas(700, 500, WEBGL);
+  noStroke();
+  textureMode(NORMAL);
+  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);
+  lightness = createCheckbox('luma', false);
+  lightness.position(10, 30);
+  lightness.style('color', 'white');
+  lightness.input(() => lumaShader.setUniform('lightness', lightness.checked()));
+  uv = createCheckbox('uv visualization', false);
+  uv.style('color', 'white');
+  uv.changed(() => lumaShader.setUniform('uv', uv.checked()));
+  uv.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);
+  beginShape();
+  // format is: vertex(x, y, z, u, v)
+  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/texturing/brightness.js

@@ -45,7 +45,7 @@ function setup() {
   lmselect.option('tinting', 5);
   lmselect.selected('original');
 
-  img = loadImage('/showcase/docs/Shaders/resources/fire_breathing.png');
+  img = loadImage('/showcase/docs/Shaders/resources/lineas.png');
   input = createFileInput(handleFile);
 
   colorA = "red";
@@ -117,29 +117,11 @@ function setup() {
 
 }
 
+
 function draw() {
   background(0);
 
-
-
-
-  let aspectRatio = img.width / img.height; // Relación de aspecto original de la imagen o video
-
-  let canvasWidth = width;
-  let canvasHeight = width / aspectRatio;
-
-  if (canvasHeight > height) {
-    canvasHeight = height;
-    canvasWidth = height * aspectRatio;
-  }
-
-  let x = (width - canvasWidth) / 2;
-  let y = (height - canvasHeight) / 2;
-
-  image(img, x, y, canvasWidth, canvasHeight);
-  // img.resize(width, height);
-
-  // image(img, 0, 0, 700, 500); 
+  image(img, -350, -250, 700, 500); 
 
   mode = lmselect.value()
 
@@ -196,7 +178,12 @@ function draw() {
     brightnessShader.setUniform('mode', mode);
   }
 
-  quad(-width / 2, -height / 2, width / 2, -height / 2, width / 2, height / 2, -width / 2, height / 2);
+  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();
 
 }