├── .gitignore ├── BrightContrast ├── BrightContrast.pde ├── Control.pde └── data │ └── process.glsl ├── ColorShaderTemplate ├── ColorShaderTemplate.pde ├── data │ ├── sh.frag │ └── sh.vert └── sketch.properties ├── Gradient ├── Gradient.pde ├── data │ ├── sh.frag │ └── sh.vert └── sketch.properties ├── README.md ├── blurXY ├── Control.pde ├── blurXY.pde ├── data │ ├── blurH.glsl │ └── blurV.glsl └── sketch.properties ├── deform ├── data │ ├── patitos.jpg │ └── sampler.glsl ├── deform.pde └── sketch.properties ├── depthForFX ├── Control.pde ├── Part.pde ├── data │ ├── depth.glsl │ └── effect.glsl ├── depthForFX.pde └── sketch.properties ├── displacementMap ├── data │ ├── displace.glsl │ └── patitos.jpg ├── displacementMap.pde └── sketch.properties ├── distanceFn ├── data │ ├── sh.frag │ └── sh.vert ├── distanceFn.pde └── sketch.properties ├── ditherTest ├── data │ ├── dither.glsl │ └── patitos.jpg ├── ditherTest.pde └── sketch.properties ├── drawingTest1 ├── data │ ├── sh.frag │ └── sh.vert ├── drawingTest1.pde └── sketch.properties ├── drawingTest2 ├── data │ ├── sh.frag │ └── sh.vert ├── drawingTest2.pde └── sketch.properties ├── drawingTest3 ├── data │ ├── sh.frag │ └── sh.vert ├── drawingTest3.pde └── sketch.properties ├── firstShader ├── data │ ├── sh.frag │ └── sh.vert ├── firstShader.pde └── sketch.properties ├── frameDifference ├── data │ └── diff.glsl ├── frameDifference.pde └── sketch.properties ├── noiseForFx ├── Control.pde ├── data │ ├── sh.frag │ └── sh.vert └── noiseForFx.pde ├── normalMaskDisplace ├── data │ ├── displace.glsl │ ├── fragcolor.glsl │ └── vertcolor.glsl ├── normalMaskDisplace.pde └── sketch.properties ├── normalsToRGB ├── data │ ├── fragcolor.glsl │ └── vertcolor.glsl ├── normalsToRGB.pde └── sketch.properties ├── pixelate ├── data │ ├── patitos.jpg │ └── sampler.glsl ├── pixelate.pde └── sketch.properties └── stepFn ├── data ├── sh.frag └── sh.vert ├── sketch.properties └── stepFn.pde /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /BrightContrast/BrightContrast.pde: -------------------------------------------------------------------------------- 1 | import processing.video.*; 2 | Capture video; 3 | PGraphics canvas; 4 | PShader process; 5 | 6 | 7 | 8 | void setup(){ 9 | size(840, 480, P2D); 10 | video = new Capture(this, 640, 480); 11 | video.start(); 12 | 13 | controlSet(); 14 | canvas =createGraphics(640,480,P2D); 15 | process=loadShader("process.glsl"); 16 | } 17 | 18 | 19 | void draw(){ 20 | background(0); 21 | if (video.available()) { 22 | 23 | video.read(); 24 | } 25 | 26 | process.set("bright", bright); 27 | process.set("contrast", contrast); 28 | 29 | canvas.beginDraw(); 30 | canvas.image(video, 0, 0); 31 | canvas.shader(process); 32 | canvas.endDraw(); 33 | 34 | image(canvas, 0,0); 35 | 36 | 37 | 38 | } -------------------------------------------------------------------------------- /BrightContrast/Control.pde: -------------------------------------------------------------------------------- 1 | import controlP5.*; 2 | 3 | ControlP5 cp5; 4 | 5 | float bright, contrast; 6 | 7 | void controlSet() { 8 | 9 | cp5 = new ControlP5(this); 10 | 11 | cp5.addSlider("bright") 12 | .setPosition(width-150, 50) 13 | .setRange(0.1, 4.0) 14 | .setValue(1.0) 15 | .setWidth(80) 16 | ; 17 | cp5.addSlider("contrast") 18 | .setPosition(width-150, 90) 19 | .setRange(0.1, 4.0) 20 | .setValue(1.0) 21 | .setWidth(80) 22 | ; 23 | } -------------------------------------------------------------------------------- /BrightContrast/data/process.glsl: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform sampler2D texture; 9 | varying vec4 vertTexCoord; 10 | 11 | uniform float bright; 12 | uniform float contrast; 13 | 14 | void main(void){ 15 | 16 | vec4 preColor = texture2D(texture, vertTexCoord.st); 17 | 18 | 19 | vec4 posColor = vec4(preColor.rgb * bright, 1.0); 20 | 21 | posColor.rgb = (posColor.rgb-0.5)*contrast+0.5; 22 | 23 | float v = (posColor.r + posColor.g +posColor.b)/3.0; 24 | posColor.rgb = vec3(v,v,v); 25 | 26 | gl_FragColor = posColor; 27 | 28 | 29 | } 30 | 31 | 32 | -------------------------------------------------------------------------------- /ColorShaderTemplate/ColorShaderTemplate.pde: -------------------------------------------------------------------------------- 1 | PShader sh; 2 | 3 | void setup(){ 4 | size(800,450,P2D); 5 | sh = loadShader("sh.frag", "sh.vert"); 6 | 7 | } 8 | 9 | void draw(){ 10 | shader(sh); 11 | 12 | rect(0,0,width,height); 13 | 14 | } -------------------------------------------------------------------------------- /ColorShaderTemplate/data/sh.frag: -------------------------------------------------------------------------------- 1 | uniform vec2 resolution; 2 | uniform float time; 3 | void main() { 4 | 5 | vec3 rgb = vec3(0.3, 0.7, 0.5); 6 | 7 | gl_FragColor = vec4( rgb, 1.0); 8 | } 9 | 10 | -------------------------------------------------------------------------------- /ColorShaderTemplate/data/sh.vert: -------------------------------------------------------------------------------- 1 | #define PROCESSING_COLOR_SHADER 2 | 3 | uniform mat4 transform; 4 | 5 | attribute vec4 vertex; 6 | attribute vec4 color; 7 | 8 | varying vec4 vertColor; 9 | 10 | 11 | void main() { 12 | gl_Position = transform * vertex; 13 | 14 | vertColor = color; 15 | } -------------------------------------------------------------------------------- /ColorShaderTemplate/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.java.JavaMode 2 | mode=Java 3 | -------------------------------------------------------------------------------- /Gradient/Gradient.pde: -------------------------------------------------------------------------------- 1 | PShader sh; 2 | 3 | void setup(){ 4 | size(800,450,P2D); 5 | sh = loadShader("sh.frag", "sh.vert"); 6 | sh.set("resolution", (float)width,(float)height); 7 | 8 | } 9 | 10 | void draw(){ 11 | 12 | sh.set("time", (float)millis()); 13 | shader(sh); 14 | rect(0,0,width,height); 15 | 16 | } -------------------------------------------------------------------------------- /Gradient/data/sh.frag: -------------------------------------------------------------------------------- 1 | uniform float time; 2 | uniform vec2 resolution; 3 | void main() { 4 | 5 | vec2 uv = gl_FragCoord.xy/resolution; 6 | 7 | 8 | //gradient 1d 9 | gl_FragColor = vec4( uv.x, 0.25, 0.5, 1.0); 10 | 11 | 12 | 13 | //gradient 2d 14 | gl_FragColor = vec4( uv.x, uv.y, 0.25, 1.0); 15 | //gl_FragColor = vec4( (uv.x+ (1.-uv.y) )*.5,1.- (uv.x+ (1.-uv.y) )*.5 , 0.5, 1.0); 16 | 17 | //animated 18 | float r=sin(time*0.001)*0.5+0.5; 19 | gl_FragColor = vec4(r, gl_FragCoord.x/resolution.x, .5, 1.0); 20 | 21 | //mod function 22 | //gl_FragColor = vec4(mod(gl_FragCoord.x/resolution.x+gl_FragCoord.y/resolution.y, .3), .3 , .2, 1.0); 23 | 24 | float div = .25; 25 | //gl_FragColor = vec4( mod(uv.x, div) * 1/div, .0, .0, 1.0); 26 | 27 | gl_FragColor = vec4( mod(uv.x, div) * 1/div, .0, .0, 1.0); 28 | 29 | //mod function II 30 | 31 | /* 32 | gl_FragColor = vec4(mod(gl_FragCoord.x/resolution.x+gl_FragCoord.y/resolution.y, .3), 33 | mod((1.-gl_FragCoord.x)/resolution.x+(1.-gl_FragCoord.y)/resolution.y, 34 | .4), .2, 1.0); 35 | */ 36 | 37 | } 38 | 39 | -------------------------------------------------------------------------------- /Gradient/data/sh.vert: -------------------------------------------------------------------------------- 1 | #define PROCESSING_COLOR_SHADER 2 | 3 | uniform mat4 transform; 4 | 5 | attribute vec4 vertex; 6 | attribute vec4 color; 7 | 8 | varying vec4 vertColor; 9 | 10 | 11 | void main() { 12 | gl_Position = transform * vertex; 13 | vertColor = color; 14 | } -------------------------------------------------------------------------------- /Gradient/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.java.JavaMode 2 | mode=Java 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # shaderWorkshop v1. 2 | taller de shaders, introducción a GLSL y PShader. 3 | 4 | tested on Processing 3.3.6. 5 | 6 | #### blurXy. 7 | x,y Blur with ping-pong. 8 | Dependencies. ControlP5. 9 | 10 | #### BrightContrast 11 | Dependencies. Video library, ControlP5. 12 | 13 | #### ColorShaderTemplate. 14 | 15 | #### deform. 16 | 17 | #### depthForFx. 18 | depth based effects, like fog... 19 | Dependencies. ControlP5. 20 | 21 | #### DisplacementMap 22 | 23 | #### DistanceFn. 24 | distance() function examples, combined with, step() and mod() functions. 25 | ref: https://www.opengl.org/sdk/docs/man/html/distance.xhtml 26 | 27 | #### DitherTest. 28 | Ordered dithering aka Bayer matrix dithering. 29 | ported to PShader from http://devlog-martinsh.blogspot.com.ar/2011/03/glsl-dithering.html 30 | 31 | #### DrawingTest1, 2, 3. 32 | 33 | #### firstShader. 34 | 35 | #### frameDifference. 36 | Dependencies. Video library. 37 | 38 | #### Gradient. 39 | some gradient examples... 40 | 41 | #### NoiseForFx. 42 | Noise based effects. 43 | Dependencies. ControlP5. 44 | 45 | #### normalMaskDisplace. 46 | Dependencies. Video library. 47 | 48 | #### NormalsToRgb. 49 | 50 | #### Pixelate. 51 | 52 | #### StepFn. 53 | Step(), smoothstep() and mix() functions examples. 54 | ref: https://www.opengl.org/sdk/docs/man/html/step.xhtml 55 | https://www.opengl.org/sdk/docs/man/html/smoothstep.xhtml 56 | https://www.opengl.org/sdk/docs/man/html/mix.xhtml 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /blurXY/Control.pde: -------------------------------------------------------------------------------- 1 | import controlP5.*; 2 | 3 | ControlP5 cp5; 4 | boolean doble,invert; 5 | float mult,noise; 6 | 7 | Range range; 8 | void controlSet() { 9 | 10 | cp5 = new ControlP5(this); 11 | 12 | cp5.addSlider("mult") 13 | .setPosition(width-150, 50) 14 | .setRange(00,200) 15 | .setValue(0) 16 | .setWidth(80) 17 | ; 18 | cp5.addSlider("passes") 19 | .setPosition(width-150, 70) 20 | .setRange(0, 100) 21 | .setValue(1) 22 | .setWidth(80) 23 | ; 24 | 25 | cp5.addSlider("noise") 26 | .setPosition(width-150, 90) 27 | .setRange(0, 1) 28 | .setValue(0) 29 | .setWidth(80) 30 | ; 31 | 32 | 33 | 34 | 35 | } -------------------------------------------------------------------------------- /blurXY/blurXY.pde: -------------------------------------------------------------------------------- 1 | PShader blurH; 2 | PShader blurV; 3 | float xOff=2.0; 4 | PGraphics pg; 5 | PGraphics ping; 6 | PGraphics pong; 7 | int passes=1; 8 | float ang=0.0; 9 | 10 | int WW; 11 | int HH; 12 | void setup() { 13 | 14 | size(800, 600, P3D); 15 | HH = height; 16 | WW = HH; 17 | 18 | blurH=loadShader("blurH.glsl"); 19 | blurV=loadShader("blurV.glsl"); 20 | 21 | 22 | pg=createGraphics(WW, HH, P3D); 23 | ping=createGraphics(WW, HH, P3D); 24 | pong=createGraphics(WW, HH, P3D); 25 | pg.beginDraw(); 26 | pg.background(0); 27 | pg.noStroke(); 28 | 29 | pg.endDraw(); 30 | 31 | controlSet(); 32 | 33 | } 34 | 35 | 36 | void draw() { 37 | ang+=PI/300; 38 | 39 | pg.beginDraw(); 40 | pg.lights(); 41 | pg.background(0); 42 | pg.noStroke(); 43 | //pg.stroke(0); 44 | pg.translate(pg.width/2, pg.height/2); 45 | pg.rotateY(ang); 46 | pg.rotateX(ang); 47 | pg.box(200, 50, 100); 48 | pg.endDraw(); 49 | 50 | blurH.set("xOff", mult+random(-1,1)*noise); 51 | blurV.set("xOff", mult+random(-1,1)*noise); 52 | 53 | 54 | pong.beginDraw(); 55 | pong.image(pg, 0, 0); 56 | pong.endDraw(); 57 | 58 | for (int i=0; i1) { 65 | //noLoop(); 66 | } 67 | ang+=PI/300; 68 | 69 | 70 | 71 | drawGeom(pg); 72 | drawGeom(depth); 73 | 74 | 75 | 76 | depthMap.set("near", nearV); 77 | depthMap.set("far", farV); 78 | depth.beginDraw(); 79 | depth.shader(depthMap); 80 | depth.endDraw(); 81 | 82 | 83 | 84 | effect.set("xOff", xOff); 85 | effect.set("mode", (float)mode); 86 | effect.set("time", (float)millis()); 87 | effect.set("depthSampler", depth); 88 | 89 | 90 | 91 | canvas.beginDraw(); 92 | canvas.shader(effect); 93 | canvas.image(pg, 0, 0); 94 | canvas.endDraw(); 95 | 96 | 97 | 98 | if (viewMode==0) { 99 | image(pg, 0, 0, width/2, height/2); 100 | image(depth, 0, height/2, width/2, height/2); 101 | image(canvas, width/2, 0, width/2, height/2); 102 | fill(200); 103 | rect(width/2, height/2, width/2, height/2); 104 | } else if (viewMode==1) { 105 | image(depth, 0, 0, width, height); 106 | } else if (viewMode==2) { 107 | image(canvas, 0, 0, width, height); 108 | } else if (viewMode==3) { 109 | image(pg, 0, 0, width, height); 110 | } 111 | 112 | fill(255); 113 | text("q,w,e,r: change viewport.", 10,10); 114 | text("<- and -> keys change fx", 10,25); 115 | text(fxName[int(mode-1)], 10,50); 116 | 117 | 118 | } 119 | 120 | void drawGeom(PGraphics temp) { 121 | 122 | float z=-250; 123 | temp.beginDraw(); 124 | 125 | temp.stroke(0); 126 | temp.fill(255); 127 | temp.lights(); 128 | 129 | temp.background(0); 130 | temp.noStroke(); 131 | temp.translate(width/2, height/2, z); 132 | 133 | 134 | 135 | temp.rotateY(ang); 136 | temp.rotateX(PI/2); 137 | for (int i=0; i1){ 173 | mode--; 174 | } 175 | else{ 176 | mode=maxModes; 177 | } 178 | } 179 | 180 | } 181 | 182 | } -------------------------------------------------------------------------------- /depthForFX/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.experimental.ExperimentalMode 2 | mode=PDE X 3 | -------------------------------------------------------------------------------- /displacementMap/data/displace.glsl: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform sampler2D texture; 9 | uniform sampler2D mask; 10 | uniform vec2 texOffset; 11 | 12 | varying vec4 vertColor; 13 | varying vec4 vertTexCoord; 14 | uniform float xOff; 15 | 16 | void main(void) { 17 | 18 | //corregir coordenadas (inversión en y!!!) 19 | 20 | 21 | vec2 tc0 = vertTexCoord.st + vec2(0.0, 0.0); 22 | 23 | 24 | float d = (1.0 - texture2D(mask, tc0).r) * 0.1 ; 25 | 26 | 27 | vec4 col0 = texture2D(texture, tc0+vec2(0.0, texOffset.t+d)); 28 | 29 | gl_FragColor = col0; 30 | } 31 | -------------------------------------------------------------------------------- /displacementMap/data/patitos.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gcorallo/shaderWorkshop/aa9b58c8cf401fa3370b0cca1d5311cf5598daed/displacementMap/data/patitos.jpg -------------------------------------------------------------------------------- /displacementMap/displacementMap.pde: -------------------------------------------------------------------------------- 1 | PGraphics mask; 2 | PGraphics canvas; 3 | PImage target; 4 | PShader displace; 5 | void setup() { 6 | 7 | size(800, 600, P2D); 8 | background(0, 0, 50); 9 | target = loadImage("patitos.jpg"); 10 | 11 | 12 | mask = createGraphics(target.width, target.height, P2D); 13 | canvas = createGraphics(target.width, target.height, P2D); 14 | 15 | regen(); 16 | 17 | displace = loadShader("displace.glsl"); 18 | } 19 | 20 | 21 | 22 | void draw() { 23 | background(0, 0, 50); 24 | 25 | image(target, 0, 0); 26 | image(mask, 0, 300); 27 | 28 | canvas.beginDraw(); 29 | canvas.image(target, 0, 0); 30 | displace.set("mask", mask); 31 | canvas.shader(displace); 32 | canvas.endDraw(); 33 | 34 | image(canvas, 400, 0); 35 | } 36 | 37 | void regen() { 38 | mask.beginDraw(); 39 | mask.background(255); 40 | mask.noStroke(); 41 | for (int i=0; i<100; i++) { 42 | mask.fill(random(0, 100)); 43 | mask.rect(random(0, mask.width), random(0, mask.height), 44 | random(1, 10), random(100, 250)); 45 | } 46 | mask.endDraw(); 47 | } 48 | 49 | void keyPressed(){ 50 | if(key == 'r'){ 51 | regen(); 52 | } 53 | } 54 | 55 | -------------------------------------------------------------------------------- /displacementMap/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.java.JavaMode 2 | mode=Java 3 | -------------------------------------------------------------------------------- /distanceFn/data/sh.frag: -------------------------------------------------------------------------------- 1 | uniform vec2 resolution; 2 | uniform float vX; 3 | 4 | void main() { 5 | vec2 uv = gl_FragCoord.xy/resolution; 6 | float v = 0.; 7 | vec3 rgb = vec3(0.); 8 | 9 | //distance. 10 | 11 | vec2 center = vec2(.5, .5); 12 | v = distance(uv, center); 13 | rgb = vec3(v); 14 | 15 | 16 | //distance+step; 17 | /* 18 | vec2 center = vec2(.5, .5); 19 | v = step(.3, distance(uv, center)); 20 | rgb = vec3(v); 21 | */ 22 | 23 | //distance+step + aspect correction 24 | /* 25 | float f = resolution.x/resolution.y; 26 | uv.x = uv.x * f; //aspect correction. 27 | vec2 center = vec2(.5, .5); 28 | v = step(.3, distance(uv, center)); 29 | rgb = vec3(v); 30 | */ 31 | 32 | //distance+step + aspect correction + center correction. 33 | /* 34 | float f = resolution.x/resolution.y; 35 | uv.x = uv.x * f; 36 | vec2 center = vec2(.5*f, .5); //center correction. 37 | v = step(.3, distance(uv, center)); 38 | rgb = vec3(v); 39 | */ 40 | 41 | //distance + step + mod. 42 | /* 43 | float f = resolution.x/resolution.y; 44 | uv.x = uv.x * f; 45 | float s = .1; 46 | float d = distance( mod(uv,s), vec2(s*.5,s*.5)); 47 | v = step(vX*.05, d); 48 | rgb = vec3(v); 49 | */ 50 | gl_FragColor = vec4( rgb, 1.0); 51 | } 52 | 53 | -------------------------------------------------------------------------------- /distanceFn/data/sh.vert: -------------------------------------------------------------------------------- 1 | #define PROCESSING_COLOR_SHADER 2 | 3 | uniform mat4 transform; 4 | 5 | attribute vec4 vertex; 6 | attribute vec4 color; 7 | 8 | varying vec4 vertColor; 9 | 10 | 11 | void main() { 12 | gl_Position = transform * vertex; 13 | 14 | vertColor = color; 15 | } -------------------------------------------------------------------------------- /distanceFn/distanceFn.pde: -------------------------------------------------------------------------------- 1 | PShader sh; 2 | 3 | void setup() { 4 | size(800, 450, P2D); 5 | sh = loadShader("sh.frag", "sh.vert"); 6 | 7 | sh.set("resolution", (float)width, (float)height); 8 | } 9 | 10 | void draw() { 11 | shader(sh); 12 | sh.set("vX", map(mouseX, 0, width, 0.0, 1.0)); 13 | rect(0, 0, width, height); 14 | } -------------------------------------------------------------------------------- /distanceFn/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.java.JavaMode 2 | mode=Java 3 | -------------------------------------------------------------------------------- /ditherTest/data/dither.glsl: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform sampler2D texture; 9 | uniform vec2 texOffset; 10 | 11 | varying vec4 vertTexCoord; 12 | 13 | // Ordered dithering aka Bayer matrix dithering http://devlog-martinsh.blogspot.com.ar/2011/03/glsl-dithering.html 14 | 15 | float scale = 1.0; 16 | 17 | float find_closest(int x, int y, float c0) 18 | { 19 | vec4 dither[4]; 20 | 21 | dither[0] = vec4( 1.0, 33.0, 9.0, 41.0); 22 | dither[1] = vec4(49.0, 17.0, 57.0, 25.0); 23 | dither[2] = vec4(13.0, 45.0, 5.0, 37.0); 24 | dither[3] = vec4(61.0, 29.0, 53.0, 21.0); 25 | 26 | float limit = 0.0; 27 | if(x < 4) 28 | { 29 | limit = (dither[x][y]+1.0)/64.0; 30 | } 31 | 32 | if(c0 < limit) 33 | { 34 | return 0.0; 35 | 36 | }else{ 37 | 38 | return 1.0; 39 | } 40 | 41 | } 42 | 43 | 44 | void main(void) 45 | { 46 | vec4 lum = vec4(0.299, 0.587, 0.114, 0.0); 47 | float grayscale = dot( texture2D(texture, vertTexCoord.xy), lum); 48 | vec3 rgb = texture2D(texture, vertTexCoord.xy).rgb; 49 | 50 | vec2 xy = gl_FragCoord.xy * scale; 51 | int x = int(mod(xy.x, 4.0)); 52 | int y = int(mod(xy.y, 4.0)); 53 | 54 | vec3 finalRGB; 55 | 56 | finalRGB.r = find_closest(x, y, rgb.r); 57 | finalRGB.g = find_closest(x, y, rgb.g); 58 | finalRGB.b = find_closest(x, y, rgb.b); 59 | 60 | float final = find_closest(x, y, grayscale); 61 | 62 | gl_FragColor = vec4(finalRGB, 1.0); 63 | } 64 | -------------------------------------------------------------------------------- /ditherTest/data/patitos.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gcorallo/shaderWorkshop/aa9b58c8cf401fa3370b0cca1d5311cf5598daed/ditherTest/data/patitos.jpg -------------------------------------------------------------------------------- /ditherTest/ditherTest.pde: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Ordered dithering aka Bayer matrix dithering 4 | from http://devlog-martinsh.blogspot.com.ar/2011/03/glsl-dithering.html 5 | */ 6 | PGraphics canvas; 7 | PImage img; 8 | PShader dither; 9 | 10 | boolean doShader=true; 11 | void setup() { 12 | size(400, 300, P2D); 13 | img = loadImage("patitos.jpg"); 14 | dither = loadShader("dither.glsl"); 15 | canvas = createGraphics(width, height, P2D); 16 | 17 | 18 | } 19 | 20 | 21 | void draw() { 22 | background(0); 23 | canvas.beginDraw(); 24 | canvas.background(0); 25 | 26 | canvas.image(img,0,0); 27 | 28 | canvas.endDraw(); 29 | if (doShader) { 30 | shader(dither); 31 | } 32 | image(canvas, 0, 0); 33 | } 34 | 35 | void keyPressed() { 36 | if (key== 'd') { 37 | doShader=!doShader; 38 | if (!doShader) { 39 | resetShader(); 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /ditherTest/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.java.JavaMode 2 | mode=Java 3 | -------------------------------------------------------------------------------- /drawingTest1/data/sh.frag: -------------------------------------------------------------------------------- 1 | uniform vec2 resolution; 2 | uniform float time; 3 | void main() { 4 | 5 | vec3 rgb = vec3(0.,0.,0.); 6 | float s= .4; 7 | float t=time*.00015; 8 | vec2 uv = gl_FragCoord.xy/resolution; 9 | float f=resolution.x/resolution.y; 10 | vec2 pos = mod(vec2(uv.x*f,uv.y)+ vec2(.0,s*.5)+ vec2(t*1.5,0.), vec2(s)) - vec2(s*.5); 11 | vec2 pos2 = mod(vec2(uv.x*f,uv.y)+ vec2(s*.0) + vec2(0.,t*1.5), vec2(s)) - vec2(s*.5); 12 | 13 | 14 | float d1= dot(pos, pos)*100.; 15 | float d2= dot(pos2, pos2)*100.; 16 | rgb.r+=(1.-step(sin(uv.x*f*50.)*.15+.25, d1 *1.0))*.8; 17 | rgb.r-=(1.-step(sin(uv.x*f*50.)*.15+.25, d1 *1.5))*.2; 18 | rgb.b+=.2*rgb.r; 19 | 20 | rgb.b+=(1.-step(sin(uv.y*50.)*.15+.25, d2 *1.0))*.7; 21 | rgb.b-=(1.-step(sin(uv.y*50.)*.15+.25, d2 *1.5))*.2; 22 | rgb.r+=.2*rgb.b; 23 | 24 | rgb.g+=(rgb.r*.3+rgb.b*.7)*.5; 25 | 26 | rgb+= vec3(.3, (1.-uv.y)*.3, (uv.y)*.3); 27 | 28 | float d3= distance(uv, vec2(.5,0.2))*.2; 29 | 30 | rgb-=vec3(d3); 31 | 32 | 33 | gl_FragColor = vec4(rgb,1.) ; 34 | } 35 | -------------------------------------------------------------------------------- /drawingTest1/data/sh.vert: -------------------------------------------------------------------------------- 1 | #define PROCESSING_COLOR_SHADER 2 | 3 | uniform mat4 transform; 4 | 5 | attribute vec4 vertex; 6 | attribute vec4 color; 7 | 8 | varying vec4 vertColor; 9 | varying vec4 pos; 10 | 11 | void main() { 12 | gl_Position = transform * vertex; 13 | pos = gl_Position; 14 | vertColor = color; 15 | } -------------------------------------------------------------------------------- /drawingTest1/drawingTest1.pde: -------------------------------------------------------------------------------- 1 | PShader sh; 2 | 3 | void setup() { 4 | size(800, 450, P2D); 5 | sh = loadShader("sh.frag", "sh.vert"); 6 | sh.set("resolution", (float)width, (float)height); 7 | } 8 | 9 | void draw() { 10 | 11 | shader(sh); 12 | sh.set("time", (float)millis()); 13 | rect(0, 0, width, height); 14 | } -------------------------------------------------------------------------------- /drawingTest1/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.java.JavaMode 2 | mode=Java 3 | -------------------------------------------------------------------------------- /drawingTest2/data/sh.frag: -------------------------------------------------------------------------------- 1 | uniform vec2 resolution; 2 | uniform float time; 3 | void main() { 4 | 5 | 6 | vec3 rgb = vec3(0.,0.,0.); 7 | 8 | vec2 uv = gl_FragCoord.xy/vec2(resolution.x,resolution.y) ; 9 | float f = resolution.x/resolution.y; 10 | 11 | 12 | float s = .3; 13 | 14 | vec2 pos = mod( vec2(uv.x*f,uv.y)+vec2(time*0.0001,0.) , vec2(s,s))- vec2(s*.5,s*.5); 15 | vec2 pos2 = mod( vec2(uv.x*f,uv.y)+vec2(-time*0.0001,s*.5), vec2(s,s))- vec2(s*.5,s*.5); 16 | float d1 =dot(pos,pos)*uv.x*1000.; 17 | float d2 =dot(pos2,pos2)*(1000.-uv.x*1000.); 18 | 19 | rgb.r+=(1.-step(0.0015*resolution.x, d1 ))*(1.-uv.x); 20 | rgb.g+=(1.-step(0.0015*resolution.x, d2 ))*uv.x; 21 | 22 | rgb.b = (rgb.r+rgb.g)* (uv.y*.7+.3); 23 | 24 | gl_FragColor = vec4(rgb,1.) ; 25 | } 26 | 27 | -------------------------------------------------------------------------------- /drawingTest2/data/sh.vert: -------------------------------------------------------------------------------- 1 | #define PROCESSING_COLOR_SHADER 2 | 3 | uniform mat4 transform; 4 | 5 | attribute vec4 vertex; 6 | attribute vec4 color; 7 | 8 | varying vec4 vertColor; 9 | varying vec4 pos; 10 | 11 | void main() { 12 | gl_Position = transform * vertex; 13 | pos = gl_Position; 14 | vertColor = color; 15 | } -------------------------------------------------------------------------------- /drawingTest2/drawingTest2.pde: -------------------------------------------------------------------------------- 1 | PShader sh; 2 | 3 | void setup(){ 4 | 5 | size(800,450,P2D); 6 | sh = loadShader("sh.frag", "sh.vert"); 7 | 8 | sh.set("resolution", (float)width, (float)height); 9 | 10 | } 11 | 12 | void draw(){ 13 | 14 | shader(sh); 15 | sh.set("time", (float)millis()); 16 | rect(0,0,width,height); 17 | 18 | } -------------------------------------------------------------------------------- /drawingTest2/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.java.JavaMode 2 | mode=Java 3 | -------------------------------------------------------------------------------- /drawingTest3/data/sh.frag: -------------------------------------------------------------------------------- 1 | uniform vec2 resolution; 2 | uniform float time; 3 | void main() { 4 | 5 | vec3 rgb = vec3(0.,0.,0.); 6 | float t= time*.001; 7 | vec2 uv = gl_FragCoord.xy/resolution; 8 | float f = resolution.x/resolution.y; 9 | float s =.25; 10 | vec2 pos = mod(vec2(uv.x*f, uv.y)+vec2(t*0.05,t*0.1 ), vec2(s*.5)) - vec2(s*.25); 11 | vec2 pos2 = mod(vec2(uv.x*f, uv.y)+vec2(t*0.05,t*0.1), vec2(s)) - vec2(s*.5-s*.25); 12 | float d1 = dot(pos, pos); 13 | float d2 = dot(pos2, pos2); 14 | 15 | rgb.r+=(1.-step(resolution.x*.0001,d1*100.))*uv.x*.6 *(uv.y*0.6+.4); 16 | rgb.g+=(1.-step(resolution.x*.0003,d2*100.))*uv.y*.4; 17 | rgb.b=(rgb.r+rgb.g)*.5; 18 | 19 | rgb+= vec3((uv.x+uv.y)*.2, 0.05,0.1); 20 | 21 | 22 | 23 | float v1=step(uv.y*100.-10.,sin(uv.x*10.+time*0.001)*10.+18.0)*.25; 24 | float v2=step(uv.y*100.-8., sin(uv.x*10.+time*0.002)*6.+15.0)*.25; 25 | float v3=step(uv.y*100.-6., sin(uv.x*10.+time*0.003)*4.+13.0)*.25; 26 | 27 | 28 | rgb+=vec3(0., vec2(v1+v2+v3)); 29 | 30 | 31 | 32 | gl_FragColor = vec4(rgb,1.) ; 33 | } 34 | 35 | -------------------------------------------------------------------------------- /drawingTest3/data/sh.vert: -------------------------------------------------------------------------------- 1 | #define PROCESSING_COLOR_SHADER 2 | 3 | uniform mat4 transform; 4 | 5 | attribute vec4 vertex; 6 | attribute vec4 color; 7 | 8 | varying vec4 vertColor; 9 | varying vec4 pos; 10 | 11 | void main() { 12 | gl_Position = transform * vertex; 13 | pos = gl_Position; 14 | vertColor = color; 15 | } -------------------------------------------------------------------------------- /drawingTest3/drawingTest3.pde: -------------------------------------------------------------------------------- 1 | PShader sh; 2 | 3 | void setup(){ 4 | size(800,450,P2D); 5 | sh = loadShader("sh.frag", "sh.vert"); 6 | 7 | sh.set("resolution", float(width),float(height)); 8 | } 9 | 10 | void draw(){ 11 | shader(sh); 12 | sh.set("time", (float)millis()); 13 | 14 | rect(0,0,width,height); 15 | 16 | } -------------------------------------------------------------------------------- /drawingTest3/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.java.JavaMode 2 | mode=Java 3 | -------------------------------------------------------------------------------- /firstShader/data/sh.frag: -------------------------------------------------------------------------------- 1 | uniform vec2 resolution; 2 | uniform float time; 3 | void main() { 4 | 5 | 6 | //pleno 7 | //gl_FragColor = vec4( 1.0, 0.25, 0.5, 1.0); 8 | 9 | //gradiente 1d 10 | gl_FragColor = vec4( gl_FragCoord.x/resolution.x, 0.25, 0.5, 1.0); 11 | 12 | //gradiente 2d 13 | //gl_FragColor = vec4( gl_FragCoord.x/resolution.x, gl_FragCoord.y/resolution.y, 0.25, 1.0); 14 | 15 | //animado 16 | /* 17 | float r=sin(time*0.005)*0.5+0.5; 18 | gl_FragColor = vec4(r, g, b, 1.0); 19 | */ 20 | 21 | } 22 | 23 | -------------------------------------------------------------------------------- /firstShader/data/sh.vert: -------------------------------------------------------------------------------- 1 | #define PROCESSING_COLOR_SHADER 2 | 3 | uniform mat4 transform; 4 | 5 | attribute vec4 vertex; 6 | attribute vec4 color; 7 | 8 | varying vec4 vertColor; 9 | varying vec4 pos; 10 | 11 | void main() { 12 | gl_Position = transform * vertex; 13 | pos = gl_Position; 14 | vertColor = color; 15 | } -------------------------------------------------------------------------------- /firstShader/firstShader.pde: -------------------------------------------------------------------------------- 1 | PShader sh; 2 | 3 | void setup() { 4 | size(800, 450, P2D); 5 | sh = loadShader("sh.frag", "sh.vert"); 6 | sh.set("resolution", float(width), float(height)); 7 | } 8 | 9 | void draw() { 10 | shader(sh); 11 | sh.set("time", (float)millis()); 12 | rect(0, 0, width, height); 13 | } -------------------------------------------------------------------------------- /firstShader/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.java.JavaMode 2 | mode=Java 3 | -------------------------------------------------------------------------------- /frameDifference/data/diff.glsl: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform sampler2D texture; 9 | varying vec4 vertTexCoord; 10 | uniform sampler2D previo; 11 | 12 | void main(void){ 13 | 14 | vec4 prevColor = texture2D(previo, vec2(vertTexCoord.s, 1.0 - vertTexCoord.t)); 15 | vec4 actualColor = texture2D(texture, vertTexCoord.st);; 16 | 17 | vec4 diferencia = abs (actualColor - prevColor); 18 | 19 | 20 | gl_FragColor = vec4(diferencia.rgb, 1.0); 21 | 22 | 23 | } 24 | 25 | 26 | -------------------------------------------------------------------------------- /frameDifference/frameDifference.pde: -------------------------------------------------------------------------------- 1 | import processing.video.*; 2 | Capture video; 3 | 4 | PGraphics canvas; 5 | PGraphics previo; 6 | PShader diff; 7 | int ww=320; 8 | int hh=240; 9 | void setup() { 10 | size(640, 480, P2D);//ww*2, hh*2 11 | //frameRate(1); //con esto se chequea facil q el previo sea el previo. 12 | video = new Capture(this, ww, hh); 13 | video.start(); 14 | canvas = createGraphics(ww, hh, P2D); 15 | previo = createGraphics(ww, hh, P2D); 16 | 17 | diff = loadShader("diff.glsl"); 18 | 19 | background(0); 20 | } 21 | 22 | 23 | void draw() { 24 | background(0); 25 | if (video.available()) { 26 | video.read(); 27 | 28 | canvas.beginDraw(); 29 | canvas.image(video, 0, 0); 30 | diff.set("previo", previo); 31 | canvas.shader(diff); 32 | canvas.endDraw(); 33 | } 34 | 35 | image(video, 0, 0); 36 | image(previo, ww, 00); 37 | image(canvas, 00, hh); 38 | 39 | previo.beginDraw(); 40 | previo.image(video, 0, 0); 41 | previo.endDraw(); 42 | } -------------------------------------------------------------------------------- /frameDifference/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.java.JavaMode 2 | mode=Java 3 | -------------------------------------------------------------------------------- /noiseForFx/Control.pde: -------------------------------------------------------------------------------- 1 | import controlP5.*; 2 | 3 | ControlP5 cp5; 4 | 5 | float val1,val2,val3,subD; 6 | 7 | void controlSet() { 8 | 9 | cp5 = new ControlP5(this); 10 | 11 | cp5.addSlider("val1") 12 | .setPosition(820, 100) 13 | .setRange(0., 1.0) 14 | .setValue(.5) 15 | .setWidth(80); 16 | 17 | cp5.addSlider("val2") 18 | .setPosition(820, 140) 19 | .setRange(0, 1) 20 | .setValue(.5) 21 | .setWidth(80); 22 | 23 | cp5.addSlider("val3") 24 | .setPosition(820, 180) 25 | .setRange(0, 1) 26 | .setValue(.5) 27 | .setWidth(80); 28 | 29 | cp5.addSlider("subD") 30 | .setPosition(820, 220) 31 | .setRange(0,1) 32 | .setValue(10) 33 | .setWidth(80); 34 | 35 | 36 | } -------------------------------------------------------------------------------- /noiseForFx/data/sh.frag: -------------------------------------------------------------------------------- 1 | uniform vec2 resolution; 2 | uniform float time; 3 | uniform float val1; 4 | uniform float val2; 5 | uniform float val3; 6 | uniform float subD; 7 | uniform float mouseX; 8 | uniform float mode; 9 | 10 | 11 | vec2 random(vec2 st){ 12 | st = vec2( dot(st,vec2(127.1,311.7)), 13 | dot(st,vec2(269.5,183.3)) ); 14 | return -1.0 + 2.0*fract(sin(st)*43758.5453123); 15 | } 16 | 17 | // Value Noise by Inigo Quilez - iq/2013 18 | // https://www.shadertoy.com/view/lsf3WH 19 | float noise(vec2 st) { 20 | vec2 i = floor(st); 21 | vec2 f = fract(st); 22 | 23 | vec2 u = f*f*(3.0-2.0*f); 24 | 25 | return mix( mix( dot( random(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ), 26 | dot( random(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x), 27 | mix( dot( random(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ), 28 | dot( random(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y); 29 | } 30 | 31 | 32 | //https://gist.github.com/eieio/4109795 33 | vec4 hsv_to_rgb(float h, float s, float v, float a) 34 | { 35 | float c = v * s; 36 | h = mod((h * 6.0), 6.0); 37 | float x = c * (1.0 - abs(mod(h, 2.0) - 1.0)); 38 | vec4 color; 39 | 40 | if (0.0 <= h && h < 1.0) { 41 | color = vec4(c, x, 0.0, a); 42 | } 43 | else if (1.0 <= h && h < 2.0) { 44 | color = vec4(x, c, 0.0, a); 45 | } 46 | else if (2.0 <= h && h < 3.0) { 47 | color = vec4(0.0, c, x, a); 48 | } 49 | else if (3.0 <= h && h < 4.0) { 50 | color = vec4(0.0, x, c, a); 51 | } 52 | else if (4.0 <= h && h < 5.0) { 53 | color = vec4(x, 0.0, c, a); 54 | } 55 | else if (5.0 <= h && h < 6.0) { 56 | color = vec4(c, 0.0, x, a); 57 | } 58 | else { 59 | color = vec4(0.0, 0.0, 0.0, a); 60 | } 61 | 62 | color.rgb += v - c; 63 | 64 | return color; 65 | } 66 | 67 | void main() { 68 | 69 | vec2 st = gl_FragCoord.xy/resolution.xy; 70 | //scale time for animations... 71 | float tt = -time*0.0005; 72 | 73 | if(mode==1.0){ 74 | //fake terrain + heatmap. 75 | 76 | //scale uniforms. 77 | float val1s = val1*13.5; //hsv offset. 78 | float val2s = val2*100.;//black lines freq. 79 | float subDs = subD*10.; 80 | 81 | //st scale. 82 | st*=subDs; 83 | 84 | 85 | //noise 86 | float nV = (noise(vec2(st.s, st.t+tt))); 87 | float nV2=min(nV,.25); 88 | 89 | 90 | //visualization. 91 | vec4 col = hsv_to_rgb ( 1.-( mod(nV2+val1s,1.+val1s) ), 1., 1., 1.0); 92 | 93 | vec4 black = vec4(vec3(0.),1.); 94 | float mixV = smoothstep(0.,1., sin(nV*val2s)*1.5-1.); 95 | col = mix(col, black, mixV); 96 | 97 | gl_FragColor = col; 98 | } 99 | 100 | else if(mode==2.0){ 101 | //sinusoidal. 102 | 103 | //scale uniforms. 104 | float val1s = val1*.5; //frequencie. 105 | float val2s = val2*10.;//amplitude 106 | float val3s = val3*5.;//contrast 107 | 108 | float subDs = subD*10.; 109 | 110 | //st scale. 111 | st*=subDs; 112 | 113 | float nV = (noise(vec2( st.s + sin(st.s*val1s*5.)*(val2s) , st.t + sin(st.t*val1s*5.)*(val2s) +tt))); 114 | 115 | 116 | nV += .5; 117 | nV = ((nV-.5)*val3s )+.5; 118 | 119 | vec4 col = vec4(vec3(nV),1. ); 120 | 121 | gl_FragColor = col; 122 | } 123 | else if(mode==3.0){ 124 | //RGB sin 125 | 126 | //scale uniforms. 127 | float val1s = val1*10; //frequencie. 128 | float val2s = val2*10.;//amplitude 129 | float val3s = val3*10.;//contrast 130 | 131 | float subDs = subD*10.; 132 | 133 | //st scale. 134 | st*=subDs; 135 | 136 | float nVr = (noise(vec2( st.s*val1s, st.t*val1s +tt ))); 137 | float nVg = (noise(vec2( st.s*val2s, st.t*val2s +tt ))); 138 | float nVb = (noise(vec2( st.s*val3s, st.t*val3s +tt ))); 139 | 140 | float adds = nVr+nVg+nVb; 141 | 142 | vec4 col = vec4(vec3(sin(adds*val1s)*0.5+.5, sin(adds*val2s)*0.5+.5, sin(adds*val3s)*0.5+.5),1. ); 143 | 144 | 145 | 146 | gl_FragColor = col; 147 | } 148 | else if(mode==4.0){ 149 | //divided. 150 | 151 | //scale uniforms. 152 | float val1s = val1*.5; //frequencie. 153 | float val2s = val2*.75;//amplitude 154 | float val3s = val3*1.;//contrast 155 | 156 | float subDs = subD*10.; 157 | 158 | //st scale. 159 | st*=subDs; 160 | 161 | float nVr = (noise(vec2( st.s*val1s, st.t*val1s +tt))); 162 | float nVg = (noise(vec2( st.s*val2s, st.t*val2s +tt))); 163 | float nVb = (noise(vec2( st.s*val3s, st.t*val3s +tt))); 164 | 165 | //float nV2=min(nV,.25); 166 | 167 | float adds = 1.-(nVr+nVg+nVb); 168 | vec4 col = vec4(vec3(sin(nVr/nVg)*0.5+.5, sin(nVg/nVb)*0.5+.5, sin(nVb/nVr)*0.5+.5),1. ); 169 | 170 | 171 | 172 | gl_FragColor = col; 173 | } 174 | else if(mode==5.0){ 175 | //divided II. 176 | 177 | //scale uniforms. 178 | 179 | float subDs = subD*5.; 180 | 181 | //st scale. 182 | st*=subDs; 183 | 184 | float nVr = (noise(vec2( st.s, st.t +tt*0.9))); 185 | float nVg = (noise(vec2( st.s, st.t +tt*1.1))); 186 | float nVb = (noise(vec2( st.s, st.t +tt*1.3))); 187 | 188 | 189 | float adds = (nVr+nVg+nVb); 190 | float adds2 = (nVr/nVb+nVg/nVr+nVb/nVg); 191 | float adds3 = (nVr/adds2+nVg/adds2+nVb/adds2); 192 | vec4 col = vec4(.5*nVr/adds3-abs(adds),.5*nVg/adds3-abs(adds),.5*nVb/adds3-abs(adds),1.); 193 | 194 | 195 | gl_FragColor = col; 196 | } 197 | else if(mode==6.0){ 198 | //radial 199 | 200 | //scale uniforms. 201 | float val1s = val1*5.; //frequencie. 202 | float val2s = val2*.75;//offset 203 | float val3s = val3*2.;//contrast 204 | float subDs = subD*5.; 205 | 206 | //st scale. 207 | st*=subDs; 208 | vec2 center= vec2(.5); 209 | float d = distance(st, center*subDs); 210 | float nV = noise( vec2(sin(d*val1s)*st.s, cos(d*val1s)*st.t +tt))*val3s+val2s; 211 | vec4 col = vec4(vec3(nV),1.); 212 | 213 | 214 | 215 | gl_FragColor = col; 216 | } 217 | else if(mode==7.0){ 218 | //water 219 | 220 | //scale uniforms. 221 | 222 | float val2s = val2*.75;//offset 223 | float val3s = val3*2.;//contrast 224 | float subDs = subD*5.; 225 | 226 | //st scale. 227 | st*=subDs; 228 | vec2 center= vec2(.5); 229 | float d = distance(st, center*subDs); 230 | 231 | 232 | float nV = noise( vec2( st.s, st.t*5. +tt))*val3s+val2s; 233 | nV-= noise( vec2( st.s, st.t*10.*(1.-st.t)*.25 ))*val3s; 234 | 235 | 236 | 237 | 238 | vec4 col = vec4( vec3(nV*.2, nV*.3,nV*.5),1.); 239 | //vec4 col = vec4(nVr,nVg,nVb,1.); 240 | 241 | 242 | 243 | gl_FragColor = col; 244 | } 245 | } 246 | 247 | -------------------------------------------------------------------------------- /noiseForFx/data/sh.vert: -------------------------------------------------------------------------------- 1 | #define PROCESSING_COLOR_SHADER 2 | 3 | uniform mat4 transform; 4 | 5 | attribute vec4 vertex; 6 | attribute vec4 color; 7 | 8 | varying vec4 vertColor; 9 | varying vec4 pos; 10 | 11 | void main() { 12 | gl_Position = transform * vertex; 13 | pos = gl_Position; 14 | vertColor = color; 15 | } -------------------------------------------------------------------------------- /noiseForFx/noiseForFx.pde: -------------------------------------------------------------------------------- 1 | PShader sh; 2 | int W = 800; 3 | int H = 800; 4 | float maxModes = 7; 5 | float mode = 1.0; 6 | PGraphics pg; 7 | String[] fxName ={"terrain", "sinusoidal", "rgb sin", "divided", "divided II", "radial", "water"}; 8 | String[] val1Name ={"hsv offset", "frequencie", "Redfreq", "Red comp", "-", "freq", "-"}; 9 | String[] val2Name ={"black lines frequencie", "amplitude", "Greenfreq", "Green comp", "-", "b offset", "b offset"}; 10 | String[] val3Name ={"-", "contrast", "Bluefreq", "Blue comp", "-", "contrast", "contrast"}; 11 | 12 | void setup() { 13 | 14 | size(1000, 800, P2D); 15 | sh = loadShader("sh.frag", "sh.vert"); 16 | 17 | pg = createGraphics(1000, 800, P2D); 18 | controlSet(); 19 | noStroke(); 20 | sh.set("resolution", (float)W, (float)H); 21 | } 22 | 23 | 24 | void draw() { 25 | 26 | sh.set("time", (float)millis()); 27 | sh.set("val1", val1); 28 | sh.set("val2", val2); 29 | sh.set("val3", val3); 30 | sh.set("subD", subD); 31 | sh.set("mode", mode); 32 | 33 | pg.beginDraw(); 34 | pg.shader(sh); 35 | pg.rect(0, 0, W, H); 36 | pg.endDraw(); 37 | 38 | image(pg, 0, 0); 39 | fill(0, 150); 40 | rect(5, 5, 200, 150); 41 | fill(255); 42 | text("<- and -> keys change fx", 10, 25); 43 | text("fx: "+fxName[int(mode-1)], 10, 50); 44 | text("val1: "+val1Name[int(mode-1)], 10, 75); 45 | text("val2: "+val2Name[int(mode-1)], 10, 100); 46 | text("val3: "+val3Name[int(mode-1)], 10, 125); 47 | } 48 | 49 | void keyPressed() { 50 | if (key==CODED) { 51 | if (keyCode==RIGHT) { 52 | 53 | if (mode1) { 60 | mode--; 61 | } else { 62 | mode=maxModes; 63 | } 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /normalMaskDisplace/data/displace.glsl: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform sampler2D texture; 9 | uniform sampler2D mask; 10 | uniform vec2 texOffset; 11 | 12 | varying vec4 vertColor; 13 | varying vec4 vertTexCoord; 14 | 15 | void main(void) { 16 | 17 | 18 | 19 | vec2 tc0 = vertTexCoord.st + vec2(0.0, 0.0); 20 | 21 | float dx = (texture2D(mask, tc0).r) * 0.05 ; 22 | float dy = (texture2D(mask, tc0).g) * 0.05 ; 23 | 24 | vec4 col0 = texture2D(texture, tc0+vec2(texOffset.t+dx, texOffset.t+dy)); 25 | 26 | gl_FragColor = col0; 27 | } 28 | -------------------------------------------------------------------------------- /normalMaskDisplace/data/fragcolor.glsl: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | 7 | varying vec3 norm; 8 | 9 | 10 | void main() { 11 | 12 | 13 | 14 | vec3 color = norm / 2.0 + 0.5; 15 | 16 | 17 | gl_FragColor = vec4(color,1.0); 18 | 19 | 20 | 21 | 22 | } 23 | -------------------------------------------------------------------------------- /normalMaskDisplace/data/vertcolor.glsl: -------------------------------------------------------------------------------- 1 | #define PROCESSING_COLOR_SHADER 2 | 3 | uniform mat4 transform; 4 | 5 | attribute vec4 vertex; 6 | attribute vec4 color; 7 | 8 | attribute vec3 normal; 9 | varying vec3 norm; //!!!! 10 | varying vec4 vertColor; 11 | 12 | void main() { 13 | 14 | norm = normal; 15 | 16 | gl_Position = transform * vertex; 17 | vertColor = color; 18 | 19 | } 20 | -------------------------------------------------------------------------------- /normalMaskDisplace/normalMaskDisplace.pde: -------------------------------------------------------------------------------- 1 | //WIP //several bugs!!! 2 | 3 | 4 | import processing.video.*; 5 | Capture video; 6 | 7 | PShader colorSh; 8 | PShader displaceSh; 9 | PGraphics map; 10 | boolean doShader=true; 11 | boolean showMask = false; 12 | 13 | float ang=0.0; 14 | void setup() { 15 | size(640, 480, P3D); 16 | noStroke(); 17 | map = createGraphics(width, height, P3D); 18 | colorSh=loadShader("fragcolor.glsl", "vertcolor.glsl"); 19 | displaceSh = loadShader("displace.glsl"); 20 | 21 | video = new Capture(this, 640, 480); 22 | video.start(); 23 | } 24 | 25 | void draw() { 26 | if (video.available()) { 27 | 28 | video.read(); 29 | } 30 | map.beginDraw(); 31 | map.noStroke(); 32 | if (doShader) { 33 | map.shader(colorSh); 34 | } 35 | background(0); 36 | //lights(); 37 | ang+=PI/400; 38 | 39 | 40 | for (int i=-1; i<2; i++) { 41 | for (int j=-1; j<2; j++) { 42 | map.pushMatrix(); 43 | map.translate(width/2+i*160, height/2+j*160, 0); 44 | map.rotateX(ang*(i+2)); 45 | map.rotateY(ang*(j+2)); 46 | map.fill((i+3)*50, (j+3)*25, 100); 47 | 48 | map.box(100); 49 | 50 | 51 | map.popMatrix(); 52 | } 53 | } 54 | map.endDraw(); 55 | 56 | 57 | displaceSh.set("mask", map); 58 | if (showMask) { 59 | image(map, 0, 0); 60 | } else { 61 | shader(displaceSh); 62 | image(video, 0, 0); 63 | } 64 | } 65 | 66 | 67 | void keyPressed() { 68 | if (key=='d') { 69 | doShader=!doShader; 70 | if (!doShader) { 71 | map.resetShader(); 72 | 73 | } 74 | } else if (key == 'm') { 75 | showMask = !showMask; 76 | if (showMask) { 77 | resetShader(); 78 | } 79 | } 80 | } -------------------------------------------------------------------------------- /normalMaskDisplace/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.experimental.ExperimentalMode 2 | mode=PDE X 3 | -------------------------------------------------------------------------------- /normalsToRGB/data/fragcolor.glsl: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | varying vec4 vertColor; 7 | vec2 resolution; 8 | varying vec3 norm; 9 | 10 | 11 | void main() { 12 | resolution = vec2(800.0,600.0); 13 | 14 | vec2 pos= gl_FragCoord.xy/resolution.xy; 15 | vec3 color = norm / 2.0 + 0.5; 16 | 17 | 18 | //gl_FragColor = vec4(color,1.0);//*vertColor; 19 | 20 | 21 | //gl_FragColor = vec4(color,1.0) * vertColor; 22 | 23 | 24 | //gl_FragColor = vec4(color,1.0)*0.15+vertColor*0.85; 25 | 26 | gl_FragColor = vec4(color.r,color.g,sin(color.b*10.0),1.0); 27 | 28 | //gl_FragColor = vec4(pos.x,.2,.8,1.0)*vertColor; 29 | 30 | 31 | } 32 | -------------------------------------------------------------------------------- /normalsToRGB/data/vertcolor.glsl: -------------------------------------------------------------------------------- 1 | #define PROCESSING_COLOR_SHADER 2 | 3 | uniform mat4 transform; 4 | 5 | attribute vec4 vertex; 6 | attribute vec4 color; 7 | 8 | attribute vec3 normal; 9 | varying vec3 norm; //!!!! 10 | varying vec4 vertColor; 11 | 12 | void main() { 13 | 14 | norm = normal; 15 | 16 | gl_Position = transform * vertex; 17 | vertColor = color; 18 | 19 | } 20 | -------------------------------------------------------------------------------- /normalsToRGB/normalsToRGB.pde: -------------------------------------------------------------------------------- 1 | PShader boxColor; 2 | boolean doShader=true; 3 | float ang=0.0; 4 | void setup(){ 5 | size(800,600,P3D); 6 | noStroke(); 7 | boxColor=loadShader("fragcolor.glsl","vertcolor.glsl"); 8 | } 9 | 10 | void draw(){ 11 | if(doShader){ 12 | shader(boxColor); 13 | } 14 | background(0); 15 | //lights(); 16 | ang+=PI/400; 17 | 18 | 19 | for(int i=-1;i<2;i++){ 20 | for(int j=-1;j<2;j++){ 21 | pushMatrix(); 22 | translate(width/2+i*160,height/2+j*160,0); 23 | rotateX(ang*(i+2)); 24 | rotateY(ang*(j+2)); 25 | fill((i+3)*50, (j+3)*25,100); 26 | if((i+j)%2==0){ 27 | //box(100,50,50); 28 | box(100); 29 | } 30 | else{ 31 | sphere(50); 32 | } 33 | popMatrix(); 34 | } 35 | } 36 | 37 | } 38 | 39 | 40 | void keyPressed(){ 41 | if(key=='d'){ 42 | doShader=!doShader; 43 | if(!doShader){ 44 | resetShader(); 45 | } 46 | } 47 | 48 | 49 | 50 | } -------------------------------------------------------------------------------- /normalsToRGB/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.experimental.ExperimentalMode 2 | mode=PDE X 3 | -------------------------------------------------------------------------------- /pixelate/data/patitos.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gcorallo/shaderWorkshop/aa9b58c8cf401fa3370b0cca1d5311cf5598daed/pixelate/data/patitos.jpg -------------------------------------------------------------------------------- /pixelate/data/sampler.glsl: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform sampler2D texture; 9 | uniform vec2 texOffset; 10 | uniform vec2 resolution; 11 | 12 | varying vec4 vertTexCoord; 13 | uniform float vY; 14 | 15 | 16 | 17 | void main(void){ 18 | vec3 rgb = vec3(0.,0.,0.); 19 | 20 | vec2 uv = gl_FragCoord.xy/vec2(resolution.x,resolution.y) ; 21 | float f = resolution.x/resolution.y; 22 | 23 | uv.x = uv.x*f; 24 | 25 | float h = .2; 26 | float offX = 0.; 27 | 28 | float s = vY; 29 | //vec2 tc0 = vec2( vertTexCoord.s - mod(vertTexCoord.s, s), vertTexCoord.t - mod(vertTexCoord.t, s*f)); 30 | 31 | 32 | vec2 tc0 = vec2( vertTexCoord.s - mod(vertTexCoord.s-vertTexCoord.t, s), vertTexCoord.t - mod(vertTexCoord.s-vertTexCoord.t, s*f)); 33 | 34 | vec4 col = texture2D(texture, tc0); 35 | 36 | rgb = col.rgb; 37 | 38 | 39 | 40 | 41 | gl_FragColor = vec4(rgb, 1.0); 42 | 43 | } 44 | -------------------------------------------------------------------------------- /pixelate/pixelate.pde: -------------------------------------------------------------------------------- 1 | PGraphics canvas; 2 | 3 | PImage img; 4 | //PImage img2; 5 | PShader sampler; 6 | 7 | boolean doShader=true; 8 | void setup() { 9 | size(400, 300, P2D); 10 | img = loadImage("patitos.jpg"); 11 | sampler = loadShader("sampler.glsl"); 12 | canvas = createGraphics(width, height, P2D); 13 | 14 | sampler.set("resolution", (float)width,(float)height); 15 | } 16 | 17 | 18 | void draw() { 19 | background(0); 20 | 21 | sampler.set("vY", map(mouseY, 0, height, 0, 1)); 22 | 23 | canvas.beginDraw(); 24 | canvas.background(0); 25 | 26 | canvas.image(img,0,0); 27 | 28 | canvas.endDraw(); 29 | 30 | if (doShader) { 31 | shader(sampler); 32 | } 33 | 34 | image(canvas, 0, 0); 35 | } 36 | 37 | void keyPressed() { 38 | if (key== 'd') { 39 | doShader=!doShader; 40 | if (!doShader) { 41 | resetShader(); 42 | } 43 | } 44 | } -------------------------------------------------------------------------------- /pixelate/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.java.JavaMode 2 | mode=Java 3 | -------------------------------------------------------------------------------- /stepFn/data/sh.frag: -------------------------------------------------------------------------------- 1 | uniform vec2 resolution; 2 | uniform float time; 3 | uniform float vX; 4 | void main() { 5 | vec2 uv = gl_FragCoord.xy/resolution; 6 | float v = 0.; 7 | vec3 rgb = vec3(0.); 8 | 9 | //step. 10 | 11 | v = uv.x; 12 | v = step(vX, v); 13 | rgb = vec3(v); 14 | 15 | 16 | //step. 17 | /* 18 | v = sin(uv.x*50.)*.5+.5; 19 | v = step(.5, v); 20 | rgb = vec3(v); 21 | */ 22 | 23 | //smoothstep. 24 | /* 25 | v = uv.x; 26 | v = smoothstep(.25,.75,v); 27 | rgb = vec3(v); 28 | */ 29 | 30 | //mix 31 | /* 32 | vec3 color1 = vec3(1.,1.,0.); 33 | vec3 color2 = vec3(0.,1.,1.); 34 | rgb = mix(color1, color2, vX); 35 | */ 36 | 37 | //mix + smoothstep 38 | /* 39 | v = uv.x; 40 | vec3 color1 = vec3(1.,1.,0.); 41 | vec3 color2 = vec3(0.,1.,1.); 42 | rgb = mix(color1, color2, smoothstep(vX-.2, vX+.2, v) ); 43 | */ 44 | 45 | 46 | //mix + time 47 | /* 48 | v = uv.x; 49 | vec3 color1 = vec3(1.,1.,0.); 50 | vec3 color2 = vec3(0.,1.,1.); 51 | 52 | v = sin(v*20.+time*.005)*.5+.5; 53 | float v2 = sin(v*10.+time*.005)*.5+.5; 54 | rgb = mix(color1, color2, v)+mix(color1, color2, v2); 55 | */ 56 | 57 | gl_FragColor = vec4( rgb, 1.0); 58 | } 59 | 60 | -------------------------------------------------------------------------------- /stepFn/data/sh.vert: -------------------------------------------------------------------------------- 1 | #define PROCESSING_COLOR_SHADER 2 | 3 | uniform mat4 transform; 4 | 5 | attribute vec4 vertex; 6 | attribute vec4 color; 7 | 8 | varying vec4 vertColor; 9 | 10 | 11 | void main() { 12 | gl_Position = transform * vertex; 13 | 14 | vertColor = color; 15 | } -------------------------------------------------------------------------------- /stepFn/sketch.properties: -------------------------------------------------------------------------------- 1 | mode.id=processing.mode.java.JavaMode 2 | mode=Java 3 | -------------------------------------------------------------------------------- /stepFn/stepFn.pde: -------------------------------------------------------------------------------- 1 | PShader sh; 2 | 3 | void setup() { 4 | size(800, 450, P2D); 5 | sh = loadShader("sh.frag", "sh.vert"); 6 | sh.set("resolution", (float)width, (float)height); 7 | } 8 | 9 | void draw() { 10 | shader(sh); 11 | sh.set("time", (float)millis()); 12 | sh.set("vX", map(mouseX, 0, width, 0.0, 1.0)); 13 | rect(0, 0, width, height); 14 | } --------------------------------------------------------------------------------