Texturing & Image Procesing

content/sketches/app.js

@@ -0,0 +1,222 @@
+let maskShader;
+let img;
+let video_src;
+let video_on;
+let cam_src;
+let cam_on;
+let ColorT;
+
+let mask_mode;
+let coloring;
+let lenses;
+//let maskmode;
+
+function preload() {
+  video_src = createVideo(['/visual_computing/vid/drift.mp4']);
+  video_src.hide();
+
+  cam_src = createCapture(VIDEO);
+  cam_src.size(width, height);
+  cam_src.hide();
+
+  maskShader = readShader('/visual_computing/sketches/shaders/mask.frag', { varyings: Tree.texcoords2 });
+  img = loadImage('/visual_computing/imgs/car.jpg');
+}
+
+function setup() {
+  createCanvas(700, 700, WEBGL);
+  noStroke();
+  textureMode(NORMAL);
+
+  //Camera selector
+  cam_on = createCheckbox('Live', false);
+  cam_on.style('color','red');
+  cam_on.position(10,50);
+
+  //Camera Controls
+  cam_on.changed(() => {
+    if(cam_on.checked()){
+      maskShader.setUniform('texture',cam_src);
+    }else{
+       maskShader.setUniform('texture', img); 
+    }
+  });
+
+
+  //Video Controls
+  video_on = createCheckbox('Video', false);
+  video_on.style('color', 'red');
+  video_on.position(10, 30);
+
+  //Video & image Switcher
+  video_on.changed(() => {
+    if (video_on.checked()) {
+      maskShader.setUniform('texture', video_src);
+      video_src.loop();
+    } else {
+      maskShader.setUniform('texture', img);
+      video_src.pause();
+    }
+  });
+
+  //Mask controls
+  mask_mode = createCheckbox('Masks', false);
+  mask_mode.position(10, 10);
+  mask_mode.style('color', 'red');
+
+  //Coloring checkbox
+  coloring = createCheckbox('Coloring',false);
+  coloring.position(165, 10);
+  coloring.style('color','red');
+
+  //Lenses checkbox
+  lenses = createCheckbox('Lense',false);
+  lenses.position(360, 10);
+  lenses.style('color','red');
+
+  //Shader apply
+  shader(maskShader);
+  maskShader.setUniform('texture', img);
+  emitTexOffset(maskShader, img, 'texOffset');
+
+  //Kernel selector
+  sel = createSelect();
+  sel.position(80, 10);
+  sel.option('None');
+  sel.option('Edges');
+  sel.option('Sharpen');
+  sel.option('Box Blur');
+  sel.option('Emboss');
+
+
+  sel.selected('None');
+
+  //Coloring selector
+  selC = createSelect();
+  selC.position(245, 10);
+  selC.option('None');
+  selC.option('Luma');
+  selC.option('Average');
+  selC.option('HSV Value V');
+  selC.option('HSL Value L');
+  selC.option('Tint');
+
+  selC.selected('None');
+
+  //Color Picker
+  colorT = createColorPicker(color(255,255,255));
+  colorT.position(175, 30);
+
+  //lenses parameters
+  Rslider = createSlider(50.0, 150.0, 50.0);
+  Rslider.position(360, 30);
+  Rslider.style('width', '80px');
+  let div1 = createDiv('Lens Radio');
+  div1.style('font-size', '18px');
+  div1.style('color', 'blue');
+  div1.position(450, 30);
+
+  Sslider = createSlider(0.0, 1.0, 0.0, 0.01);
+  Sslider.position(360, 50);
+  Sslider.style('width', '80px');
+  let div2 = createDiv('Lens Amplitude');
+  div2.style('font-size', '18px');
+  div2.style('color', 'yellow');
+  div2.position(450, 50);
+
+}
+
+function draw() {
+  background(0);
+
+  //Mask Mode
+  if (mask_mode.checked()){
+
+    //Enable Masks Mode
+    maskShader.setUniform('maskmode',true);
+    maskShader.setUniform('coloringmode',false);
+
+    //kernels
+    if (sel.value()=='Edges') {
+      maskShader.setUniform('mask', [-1, -1, -1, -1, 8, -1, -1, -1, -1]);
+    }else if(sel.value()=='Sharpen'){
+      maskShader.setUniform('mask', [0, -1, 0, -1, 5, -1, 0, -1, 0]);
+    }else if(sel.value()=='Box Blur'){
+      maskShader.setUniform('mask', [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9]);
+    }else if(sel.value()=='Emboss'){
+      maskShader.setUniform('mask', [-2, -1, 0, -1, 1, 1, 0, 1, 2]);
+    }else{
+      maskShader.setUniform('mask', [0, 0, 0, 0, 1, 0, 0, 0, 0]);
+    }
+
+  }else if(coloring.checked()){
+
+
+    //Enable Coloring Mode
+    maskShader.setUniform('maskmode',false);
+    maskShader.setUniform('coloringmode',true);
+
+    if(selC.value()=="None"){
+    maskShader.setUniform('HSVV',false);
+    maskShader.setUniform('HSLL',false);
+    maskShader.setUniform('grey_scale',false);
+    maskShader.setUniform('average',false);
+    maskShader.setUniform('Tint',false);
+
+  }else if(selC.value()=="Luma"){
+    maskShader.setUniform('grey_scale',true);
+    maskShader.setUniform('average',false);
+    maskShader.setUniform('HSVV',false);
+    maskShader.setUniform('HSLL',false);
+    maskShader.setUniform('Tint',false);
+
+  }else if(selC.value()=="Average"){
+    maskShader.setUniform('average',true);
+    maskShader.setUniform('grey_scale',false);
+    maskShader.setUniform('HSVV',false);
+    maskShader.setUniform('HSLL',false);
+    maskShader.setUniform('Tint',false);
+
+  }else if(selC.value() =="HSV Value V"){
+    maskShader.setUniform('HSVV',true);
+    maskShader.setUniform('HSLL',false);
+    maskShader.setUniform('average',false);
+    maskShader.setUniform('grey_scale',false);
+    maskShader.setUniform('Tint',false);
+
+  }else if(selC.value() =="HSL Value L"){
+    maskShader.setUniform('HSLL',true);
+    maskShader.setUniform('HSVV',false);
+    maskShader.setUniform('average',false);
+    maskShader.setUniform('grey_scale',false);
+    maskShader.setUniform('Tint',false);
+
+  }else if(selC.value() =="Tint"){
+    maskShader.setUniform('Tint',true);
+    maskShader.setUniform('HSLL',false);
+    maskShader.setUniform('HSVV',false);
+    maskShader.setUniform('average',false);
+    maskShader.setUniform('grey_scale',false);
+
+    let RC = colorT.color();
+    maskShader.setUniform('colorT',[red(RC),green(RC),blue(RC),1.0]);
+    }
+
+  }else if(lenses.checked()){
+    maskShader.setUniform('lensemode',true);
+    maskShader.setUniform('maskmode',false);
+    maskShader.setUniform('coloringmode',false);
+
+    maskShader.setUniform('mouseData',[mouseX,mouseY]);
+    maskShader.setUniform('resolution',[width,height]);
+    maskShader.setUniform('radio', Rslider.value());
+    maskShader.setUniform('scale', Sslider.value());
+  }else{
+    maskShader.setUniform('lensemode',false);
+    maskShader.setUniform('maskmode',false);
+    maskShader.setUniform('coloringmode',false);
+  }
+
+
+  quad(-width / 2, -height / 2, width / 2, -height / 2, width / 2, height / 2, -width / 2, height / 2);
+}

content/sketches/screen.js

@@ -0,0 +1,92 @@
+let easycam;
+let uvShader;
+let opacity;
+
+let c1, c2;
+
+let rtb = false, gtb = false;
+
+function preload() {
+  uvShader = readShader('/visual_computing/sketches/shaders/screen.frag',{ matrices: Tree.pmvMatrix, varyings: Tree.texcoords2 });
+}
+
+function setup() {
+  createCanvas(450, 450, WEBGL);
+
+  // easycam stuff
+  let state = {
+    distance: 250,           
+    center: [0, 0, 0],       
+    rotation: [0, 0, 0, 1],  
+  };
+  easycam = createEasyCam();
+  easycam.state_reset = state;   
+  easycam.setState(state, 2000); 
+  textureMode(NORMAL);
+  opacity = createSlider(0, 1, 0.5, 0.01);
+  opacity.position(10, 25);
+  opacity.style('width', '280px');
+
+  c1 = createCheckbox('R To B', false);
+  c2 = createCheckbox('G To B', false);
+  c1.position(100, 10);
+  c2.position(200, 10);
+
+  sel = createSelect();
+  sel.position(10, 10);
+  sel.option('Quad');
+  sel.option('Triangle');
+  sel.option('Circle');
+  sel.selected('Quad');
+
+}
+
+function draw() {
+  background(200);
+
+  resetShader();
+
+  axes();
+  grid();
+  translate(0, -70);
+  rotateY(0.5);
+  fill(color(255, 0, 255, 125));
+  box(30, 50);
+  translate(70, 70);
+  fill(color(0, 255, 255, 125));
+  sphere(30, 50);
+
+  shader(uvShader);
+
+  uvShader.setUniform('opacity', opacity.value());
+
+  beginHUD();
+
+    noStroke();
+
+    if(sel.value() == "Quad"){
+      quad(0, 0, width, 0, width, height, 0, height);
+    }else if(sel.value() == "Triangle"){
+      triangle(0,0,width,0,width/2,height)
+    }else if (sel.value() == "Circle"){
+      circle(width/2,height/2,width)
+    }
+
+    if(c1.checked()){
+      uvShader.setUniform('rtb',true)
+       uvShader.setUniform('gtb',false)
+    }else if(c2.checked()){
+      uvShader.setUniform('rtb',false)
+      uvShader.setUniform('gtb',true)
+    }else{
+      uvShader.setUniform('rtb',false)
+      uvShader.setUniform('gtb',false)
+    }
+
+  endHUD();
+}
+
+function mouseWheel(event) {
+  //comment to enable page scrolling
+  return false;
+}

content/sketches/shaders/colors.frag

@@ -0,0 +1,57 @@
+precision mediump float;
+
+uniform bool grey_scale;
+uniform bool average;
+uniform bool HSVV;
+uniform bool HSLL;
+uniform bool Tint;
+
+uniform vec4 colorT;
+
+uniform sampler2D texture;
+
+varying vec2 texcoords2;
+
+float luma(vec3 texel) {
+  return 0.299 * texel.r + 0.587 * texel.g + 0.114 * texel.b;
+}
+
+float favg(vec3 texel){
+  return (texel.r + texel.g + texel.b ) / 3.0;
+}
+
+float HSV (vec3 texel){
+  return max(max(texel.r,texel.g),texel.b); ;
+}
+
+float HSL (vec3 texel){
+  float CMax = max(max(texel.r,texel.g),texel.b);
+  float CMin = min(min(texel.r,texel.g),texel.b);
+  return (CMax + CMin) / 2.0 ;
+}
+
+float Ftint(float channel, float color){
+  float N = channel * (color / 255.0);
+  return N;
+}
+
+
+void main() {
+
+  vec4 texel = texture2D(texture, texcoords2);
+
+  if(grey_scale == true){
+    gl_FragColor = vec4((vec3(luma(texel.rgb))), 1.0); 
+  }else if(average == true){
+    gl_FragColor = vec4((vec3(favg(texel.rgb))), 1.0); 
+  }else if(HSVV== true){
+    gl_FragColor = vec4((vec3(HSV(texel.rgb))), 1.0);
+  }else if(HSLL== true){
+    gl_FragColor = vec4((vec3(HSL(texel.rgb))), 1.0);
+  }else if(Tint == true){
+    gl_FragColor = vec4(Ftint(texel.r,colorT.x),Ftint(texel.g,colorT.y),Ftint(texel.b,colorT.z),1.0);
+  }else{
+    gl_FragColor = texel;  
+  }
+
+}