Texturing #

Para los ejercicios de texturing, recreamos los ejercicios iniciales reemplazando el canal de color rojo en la interpolación, por el canal de color Azul.

Adicionalmente, se implementó el filtro de screen space con una figura diferente, usando en esta ocasión un circulo

Texture Sampling #

Para el muestreo de textura, implementamos otras herramientas de brillo de color, como el valor V de HSV, la luminosidad L de HSL, aparte de Luma.

Instrucciones para ver los efectos sobre la imagen:

Al oprimir el número “1” se aplica la herramienta de color luma
Al oprimir el número “2” se aplica la herramienta de color HSV
Al oprimir el número “3” se aplica la herramienta de color HSL
Al oprimir cualquier otra tecla, la imagen vuelve a su coloración original

Shaders_Texturing_Sampling.js

let lumaShader;
let img;

function preload() {
  lumaShader = readShader('/Template/sketches/shaders/luma.frag', {matrices: Tree.NONE, varyings: Tree.texcoords2 });
  // image source: https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:Fire_breathing_2_Luc_Viatour.jpg
  img = loadImage('/Template/sketches/shaders/fire_breathing.jpg');
}

function setup() {
  createCanvas(700, 500, WEBGL);
  noStroke();
  textureMode(NORMAL);
  shader(lumaShader);
  lumaShader.setUniform('texture', img);
}
  
function draw() {
  background(0);
  quad(1, 1, -1, 1, -1, -1, 1, -1);
}

function keyPressed(){
  if(key == '1'){
    lumaShader.setUniform('filter_selected', 1.0);
  }else if(key == '2'){
    lumaShader.setUniform('filter_selected', 2.0);
  }else if(key == '3'){
    lumaShader.setUniform('filter_selected', 3.0);
  }else{
    lumaShader.setUniform('filter_selected', 4.0);
  }
  background(0);
  quad(1, 1, -1, 1, -1, -1, 1, -1); 
}

luma.frag

precision mediump float;

// uniforms are defined and sent by the sketch
uniform float filter_selected;
uniform sampler2D texture;

// interpolated texcoord (same name and type as in vertex shader)
varying vec2 texcoords2;

// returns luma of given texel
float luma(vec3 texel) {
  return 0.299 * texel.r + 0.587 * texel.g + 0.114 * texel.b;
}

// returns V of HSV of given texel
float HSV(vec3 texel) {
  float r = texel.r;
  float g = texel.g;
  float b = texel.b;
  
  float Cmax = max(r,max(g,b)); 

  float V = Cmax;
  return V; 
}

// returns L of HSL of given texel
float HSL(vec3 texel) {
  float r = texel.r;
  float g = texel.g;
  float b = texel.b;
  
  float Cmax = max(r,max(g,b)); 
  float Cmin = min(r,min(g,b));

  float L = (Cmax + Cmin) / 2.0;
  return L; 
}

void main() {
  // texture2D(texture, texcoords2) samples texture at texcoords2 
  // and returns the normalized texel color
  vec4 texel = texture2D(texture, texcoords2);

  if (filter_selected == 1.0){
    gl_FragColor = vec4((vec3(luma(texel.rgb))), 1.0);
  }else if(filter_selected == 2.0){
    gl_FragColor = vec4(vec3(HSV(texel.rgb)), 1.0);
  }else if(filter_selected == 3.0){
    gl_FragColor = vec4(vec3(HSL(texel.rgb)), 1.0);
  }else{
    gl_FragColor = texel;
  }
}