├── Controls.pde ├── FilterLayer.pde ├── README.md ├── ShadersForProcessing3.pde └── data ├── ascii.glsl ├── binaryGlitch.glsl ├── bloomHDR.glsl ├── sobel.glsl ├── vhs.glsl ├── vhs_glitch.glsl ├── vhs_wobble.glsl └── wetCity.mp4 /Controls.pde: -------------------------------------------------------------------------------- 1 | void keyPressed() { 2 | if ((key == 'a') || (key == 'A')) { 3 | skip = true; 4 | } 5 | } -------------------------------------------------------------------------------- /FilterLayer.pde: -------------------------------------------------------------------------------- 1 | void filterLayer() { 2 | switch(filterState) { 3 | case 0: 4 | filter(vhs); 5 | currentFilter = "vhs"; 6 | break; 7 | case 1: 8 | filter(vhs_glitch); 9 | currentFilter = "vhs_glitch"; 10 | break; 11 | case 2: 12 | filter(vhs_wobble); 13 | currentFilter = "vhs_wobble"; 14 | break; 15 | case 3: 16 | filter(binaryGlitch); 17 | currentFilter = "binaryGlitch"; 18 | break; 19 | case 4: 20 | filter(sobel); 21 | currentFilter = "sobel"; 22 | break; 23 | case 5: 24 | filter(ascii); 25 | currentFilter = "ascii"; 26 | break; 27 | case 6: 28 | filter(bloom); 29 | currentFilter = "bloom"; 30 | break; 31 | case 7: 32 | currentFilter = "none"; 33 | break; 34 | } 35 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ShadersForProcessing3 2 | A collection of vhs, glitch, and more shaders from ShaderToy converted to work with Processing 3. More will be added here as I convert them! 3 | 4 | # How to use? 5 | Download the repo. Run the sketch - Press A to skip through the different shaders, the name of the shader will be shown in the title bar 6 | 7 | # What is there? 8 | - VHS 9 | - VHS colour wobble 10 | - VHS glitch 11 | - Binary glitch - breaks up the image/video 12 | - Sobel - neon edge detection 13 | - Ascii - converts different colours in to different ascii characters. Can give a cool big pixel effect too 14 | - Bloom - HDR edge bloom thing 15 | 16 | -------------------------------------------------------------------------------- /ShadersForProcessing3.pde: -------------------------------------------------------------------------------- 1 | //ALL SHADERS ARE FROM SHADERTOY AND CONVERTED FOR PROCESSING 2 | //VIDEO IS FROM PEXELS VIDEO 3 | //THANKS TO EVERYONE FOR SHARING 4 | 5 | //YOU NEED THE PROCESSING VIDEO LIBRARY TO PLAY THE VIDEO 6 | import processing.video.*; 7 | 8 | Movie videoComp; 9 | PShader vhs, vhs_glitch, vhs_wobble, binaryGlitch, sobel, ascii, bloom; 10 | 11 | int filterState = 0; 12 | int numberOfFilters = 7; 13 | String currentFilter; 14 | 15 | //STUFF 16 | boolean skip = false; 17 | 18 | //********************************************************************** 19 | 20 | void setup() { 21 | size(1280, 720, P3D); 22 | smooth(16); 23 | //blendMode(EXCLUSION); 24 | colorMode(HSB, 360, 100, 100, 100); 25 | 26 | //LOAD IN VIDEO 27 | videoComp = new Movie(this, "wetCity.mp4"); 28 | videoComp.loop(); 29 | 30 | //LOAD IN SHADERS 31 | vhs = loadShader("vhs.glsl"); 32 | vhs.set("iResolution", float(width), float(height)); 33 | vhs_glitch = loadShader("vhs_glitch.glsl"); 34 | vhs_glitch.set("iResolution", float(width), float(height)); 35 | vhs_wobble = loadShader("vhs_wobble.glsl"); 36 | vhs_wobble.set("iResolution", float(width), float(height)); 37 | binaryGlitch = loadShader("binaryGlitch.glsl"); 38 | binaryGlitch.set("iResolution", float(width), float(height)); 39 | sobel = loadShader("sobel.glsl"); 40 | sobel.set("iResolution", float(width), float(height)); 41 | ascii = loadShader("ascii.glsl"); 42 | ascii.set("iResolution", float(width), float(height)); 43 | bloom = loadShader("bloomHDR.glsl"); 44 | bloom.set("iResolution", float(width), float(height)); 45 | } 46 | 47 | //********************************************************************** 48 | 49 | void draw() { 50 | 51 | //NEXT FILTER EVERY TIME YOU PRESS A 52 | if (skip == true) { 53 | filterState++; 54 | if (filterState > numberOfFilters) { 55 | filterState = 0; 56 | } 57 | skip = false; 58 | } 59 | 60 | //SHADER SETTINGS 61 | vhs.set("iGlobalTime", millis() / 1000.0); 62 | vhs_glitch.set("iGlobalTime", millis() / 1000.0); 63 | vhs_wobble.set("iGlobalTime", millis() / 1000.0); 64 | bloom.set("iGlobalTime", millis() / 1000.0); 65 | 66 | //DRAW THE LAYERS 67 | image(videoComp, 0, 0, width, height); 68 | filterLayer(); 69 | 70 | //READOUT 71 | surface.setTitle("FPS " + nf(int(frameRate), 2) + " || filterState " + currentFilter); 72 | } 73 | 74 | void movieEvent(Movie m) { 75 | m.read(); 76 | } -------------------------------------------------------------------------------- /data/ascii.glsl: -------------------------------------------------------------------------------- 1 | // Bitmap to ASCII (not really) fragment shader by movAX13h, September 2013 2 | // This is the original shader that is now used in PixiJs ans various other products. 3 | 4 | // Here's a little tool for new characters: thrill-project.com/archiv/coding/bitmap/ 5 | 6 | // from ShaderToy https://www.shadertoy.com/view/lssGDj 7 | 8 | uniform vec2 iResolution; 9 | uniform sampler2D texture; 10 | 11 | #define iChannel0 texture 12 | 13 | void mainImage( out vec4 fragColor, in vec2 fragCoord ); 14 | 15 | void main() { 16 | mainImage(gl_FragColor,gl_FragCoord.xy); 17 | } 18 | 19 | float character(float n, vec2 p) 20 | { 21 | p = floor(p*vec2(4.0, -4.0) + 2.5); 22 | if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y) 23 | { 24 | if (int(mod(n/exp2(p.x + 5.0*p.y), 2.0)) == 1) return 1.0; 25 | } 26 | return 0.0; 27 | } 28 | 29 | void mainImage( out vec4 fragColor, in vec2 fragCoord ) 30 | { 31 | vec2 uv = fragCoord.xy; 32 | vec3 col = texture(iChannel0, floor(uv/8.0)*8.0/iResolution.xy).rgb; 33 | 34 | float gray = 0.3 * col.r + 0.59 * col.g + 0.11 * col.b; 35 | 36 | float n = 4096.0; // . 37 | if (gray > 0.2) n = 65600.0; // : 38 | if (gray > 0.3) n = 332772.0; // * 39 | if (gray > 0.4) n = 15255086.0; // o 40 | if (gray > 0.5) n = 23385164.0; // & 41 | if (gray > 0.6) n = 15252014.0; // 8 42 | if (gray > 0.7) n = 13199452.0; // @ 43 | if (gray > 0.8) n = 11512810.0; // # 44 | 45 | vec2 p = mod(uv/4.0, 2.0) - vec2(1.0); 46 | // if (iMouse.z > 0.5) col = gray*vec3(character(n, p)); 47 | col = col*character(n, p); 48 | 49 | fragColor = vec4(col, 1.0); 50 | } -------------------------------------------------------------------------------- /data/binaryGlitch.glsl: -------------------------------------------------------------------------------- 1 | // from ShaderToy: https://www.shadertoy.com/view/MlBSzR 2 | 3 | uniform vec2 iResolution; 4 | uniform sampler2D texture; 5 | 6 | #define iChannel0 texture 7 | 8 | void mainImage( out vec4 fragColor, in vec2 fragCoord ); 9 | 10 | void main() { 11 | mainImage(gl_FragColor,gl_FragCoord.xy); 12 | } 13 | 14 | void mainImage( out vec4 fragColor, in vec2 fragCoord ) 15 | { 16 | vec2 uv = fragCoord.xy / iResolution.xy; 17 | // uv.t = 1.0 - uv.t; 18 | 19 | float x = uv.s; 20 | float y = uv.t; 21 | 22 | // 23 | float glitchStrength = 800/iResolution.y * 5.0; 24 | 25 | // get snapped position 26 | float psize = 0.04 * glitchStrength; 27 | float psq = 1.0 / psize; 28 | 29 | float px = floor( x * psq + 0.5) * psize; 30 | float py = floor( y * psq + 0.5) * psize; 31 | 32 | vec4 colSnap = texture( iChannel0, vec2( px,py) ); 33 | 34 | float lum = pow( 1.0 - (colSnap.r + colSnap.g + colSnap.b) / 3.0, glitchStrength ); // remove the minus one if you want to invert luma 35 | 36 | // do move with lum as multiplying factor 37 | float qsize = psize * lum; 38 | 39 | float qsq = 1.0 / qsize; 40 | 41 | float qx = floor( x * qsq + 0.5) * qsize; 42 | float qy = floor( y * qsq + 0.5) * qsize; 43 | 44 | float rx = (px - qx) * lum + x; 45 | float ry = (py - qy) * lum + y; 46 | 47 | vec4 colMove = texture( iChannel0, vec2( rx,ry) ); 48 | 49 | 50 | // final color 51 | fragColor = colMove; 52 | } 53 | -------------------------------------------------------------------------------- /data/bloomHDR.glsl: -------------------------------------------------------------------------------- 1 | // from shaderToy https://www.shadertoy.com/view/XtsSzr 2 | 3 | // Created by fatumR 4 | // License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. 5 | 6 | uniform vec2 iResolution; 7 | uniform sampler2D texture; 8 | uniform float iGlobalTime; 9 | 10 | #define iChannel0 texture 11 | 12 | void mainImage( out vec4 fragColor, in vec2 fragCoord ); 13 | 14 | void main() { 15 | mainImage(gl_FragColor,gl_FragCoord.xy); 16 | } 17 | 18 | // Color conversion related functions 19 | vec3 rgb2hsv(vec3 color) { 20 | vec3 HSV = vec3(0.); // x -> H, y -> S, z -> V 21 | float Max = max(color.r, max(color.g, color.b)); 22 | float Min = min(color.r, min(color.g, color.b)); 23 | float chroma = Max - Min; 24 | 25 | HSV.z = Max; 26 | 27 | if (chroma > 0.) { 28 | vec3 components = vec3(0.); 29 | if (Max == color.r) { 30 | components.xy = color.gb; 31 | } else if (Max == color.g) { 32 | components.xy = color.br; 33 | components.z = 2.; 34 | } else { 35 | components.xy = color.rg; 36 | components.z = 4.; 37 | } 38 | 39 | HSV.x = fract(((components.x - components.y)/chroma + components.z) / 6.); 40 | 41 | // Saturation 42 | if (Max > 0.) { 43 | HSV.y = chroma / Max; 44 | } else { 45 | HSV.y = 0.; 46 | } 47 | } 48 | 49 | return HSV; 50 | } 51 | 52 | vec3 hsv2rgb( in vec3 c ) 53 | { 54 | vec3 rgb = clamp( abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 55 | 56 | return c.z * mix( vec3(1.0), rgb, c.y); 57 | } 58 | 59 | // Blur generation related functions 60 | vec4 boxBlur(vec2 uv, float scale) { 61 | // Simple box blurring 62 | const int numSteps = 15; 63 | 64 | uv = ((uv * 2. - 1.) *scale) * .5 + .5; 65 | 66 | vec4 acc = texture(iChannel0, uv); 67 | vec2 stepI = 1./iResolution.xy; 68 | stepI *= scale; 69 | vec2 offsetU = vec2(0.0); 70 | vec2 offsetD = vec2(0.0); 71 | 72 | for (int j = 0; j < numSteps; j++) { 73 | offsetU.y += stepI.y; 74 | offsetU.x = 0.; 75 | for (int i = 0; i < numSteps; i++) { 76 | acc += pow(texture(iChannel0, uv + offsetU), vec4(2.2)); 77 | acc += pow(texture(iChannel0, uv - offsetU), vec4(2.2)); 78 | offsetU.x += stepI.x; 79 | } 80 | 81 | offsetD.y -= stepI.y; 82 | offsetD.x = 0.; 83 | for (int i = 0; i < numSteps; i++) { 84 | acc += pow(texture(iChannel0, uv + offsetD), vec4(2.2)); 85 | acc += pow(texture(iChannel0, uv - offsetD), vec4(2.2)); 86 | offsetD.x += stepI.x; 87 | } 88 | } 89 | 90 | // Gamma correction is added, as it's done by iq here: https://www.shadertoy.com/view/XtsSzH 91 | return pow(acc / (float(numSteps * numSteps * 4) + 1.), vec4(1. / 2.2)); 92 | 93 | } 94 | 95 | // Kind of Guass blur approximation 96 | vec4 gaussBlurApprox(vec2 uv, float scale) { 97 | const int numSteps = 15; 98 | // Strange but const declaration gets an error, 99 | // but there is an official way to declare const arrays. 100 | float gaussCoeff[15]; // 1D gauss kernel, normalized 101 | gaussCoeff[0] = 0.053917; 102 | gaussCoeff[1] = 0.053551; 103 | gaussCoeff[2] = 0.052469; 104 | gaussCoeff[3] = 0.050713; 105 | gaussCoeff[4] = 0.048354; 106 | gaussCoeff[5] = 0.045481; 107 | gaussCoeff[6] = 0.042201; 108 | gaussCoeff[7] = 0.038628; 109 | gaussCoeff[8] = 0.034879; 110 | gaussCoeff[9] = 0.031068; 111 | gaussCoeff[10] = 0.027300; 112 | gaussCoeff[11] = 0.023664; 113 | gaussCoeff[12] = 0.020235; 114 | gaussCoeff[13] = 0.017070; 115 | gaussCoeff[14] = 0.014204; 116 | 117 | uv = ((uv * 2. - 1.) *scale) * .5 + .5; // central scaling 118 | 119 | vec4 acc = texture(iChannel0, uv) * gaussCoeff[0]; 120 | vec2 stepI = 1./iResolution.xy; 121 | stepI *= scale; 122 | vec2 offsetU = vec2(0.0); 123 | vec2 offsetD = vec2(0.0); 124 | 125 | for (int j = 0; j < numSteps; j++) { 126 | offsetU.y += stepI.y; 127 | offsetU.x = 0.; 128 | for (int i = 0; i < numSteps; i++) { 129 | acc += pow(texture(iChannel0, uv + offsetU), vec4(2.2)) * gaussCoeff[1 + i] * gaussCoeff[1 + j]; 130 | acc += pow(texture(iChannel0, uv - offsetU), vec4(2.2)) * gaussCoeff[1 + i] * gaussCoeff[1 + j]; 131 | offsetU.x += stepI.x; 132 | } 133 | 134 | offsetD.y -= stepI.y; 135 | offsetD.x = 0.; 136 | for (int i = 0; i < numSteps; i++) { 137 | acc += pow(texture(iChannel0, uv + offsetD), vec4(2.2)) * gaussCoeff[1 + i] * gaussCoeff[1 + j]; 138 | acc += pow(texture(iChannel0, uv - offsetD), vec4(2.2)) * gaussCoeff[1 + i] * gaussCoeff[1 + j]; 139 | offsetD.x += stepI.x; 140 | } 141 | } 142 | // Gamma correction is added, as it's done by iq here: https://www.shadertoy.com/view/XtsSzH 143 | return pow(acc, 1. / vec4(2.2)); 144 | 145 | } 146 | 147 | // Edge detection related functions 148 | vec4 detectEdgesSimple(vec2 uv) { 149 | // Simple central diff detector 150 | vec4 offset = vec4(1./iResolution.xy, -1./iResolution.xy); 151 | vec4 hill = texture(iChannel0, uv); 152 | 153 | vec4 acc = (hill - texture(iChannel0, uv + offset.x)) / offset.x; 154 | acc += (hill - texture(iChannel0, uv - offset.x)) / offset.x; 155 | acc += (hill - texture(iChannel0, uv + offset.y)) / offset.y; 156 | acc += (hill - texture(iChannel0, uv - offset.y)) / offset.y; 157 | acc += (hill - texture(iChannel0, uv + offset.xy)) / (.5 * (offset.x + offset.y)); 158 | acc += (hill - texture(iChannel0, uv - offset.xy)) / (.5 * (offset.x + offset.y)); 159 | acc += (hill - texture(iChannel0, uv + offset.zy)) / (.5 * (offset.x + offset.y)); 160 | acc += (hill - texture(iChannel0, uv - offset.xw)) / (.5 * (offset.x + offset.y)); 161 | 162 | return abs(acc * .003); // Changing the multiplier we can control the number o edges 163 | } 164 | 165 | float detectEdgesSobel(vec2 uv) { 166 | // Edge detection based on Sobel kernel 167 | vec4 offset = vec4(1./iResolution.xy, -1./iResolution.xy); 168 | 169 | float gx = 0.0; 170 | float gy = 0.0; 171 | 172 | vec4 clr = texture(iChannel0, uv - offset.xy); 173 | gx += -1. * dot(clr, clr); 174 | gy += -1. * dot(clr, clr); 175 | 176 | clr = texture(iChannel0, uv - offset.x); 177 | gx += -2. * dot(clr, clr); 178 | 179 | clr = texture(iChannel0, uv + offset.zy); 180 | gx += -1. * dot(clr, clr); 181 | gy += 1. * dot(clr, clr); 182 | 183 | clr = texture(iChannel0, uv + offset.xw); 184 | gx += 1. * dot(clr, clr); 185 | gy += -1. * dot(clr, clr); 186 | 187 | clr = texture(iChannel0, uv + offset.x); 188 | gx += 2. * dot(clr, clr); 189 | 190 | clr = texture(iChannel0, uv + offset.xy); 191 | gx += 1. * dot(clr, clr); 192 | gy += 1. * dot(clr, clr); 193 | 194 | clr = texture(iChannel0, uv - offset.y); 195 | gy += -2. * dot(clr, clr); 196 | 197 | clr = texture(iChannel0, uv + offset.y); 198 | gy += 2. * dot(clr, clr); 199 | 200 | return gx*gx + gy*gy; 201 | } 202 | 203 | void mainImage( out vec4 fragColor, in vec2 fragCoord ) 204 | { 205 | vec2 uv = fragCoord.xy / iResolution.xy; 206 | int effectType = int(mod(floor(iGlobalTime / 34.), 4.)); 207 | 208 | vec3 blurredClr; 209 | float edge; 210 | if (effectType == 0 || effectType == 2) { 211 | blurredClr = clamp(gaussBlurApprox(uv, 1.), 0., 1.).rgb; 212 | edge = detectEdgesSobel(uv); 213 | } else if (effectType == 1 || effectType == 3) { 214 | blurredClr = clamp(boxBlur(uv, 1.), 0., 1.).rgb; 215 | edge = length(detectEdgesSimple(uv)); 216 | } 217 | vec3 origClr = texture(iChannel0, uv, 0.).rgb; 218 | vec3 hsv = rgb2hsv(origClr.rgb); 219 | hsv.y = min(hsv.y * 2., 1.); 220 | hsv.z = min(hsv.z * 1.75, 1.); 221 | 222 | vec3 rgb; 223 | if (effectType == 2 || effectType == 3) { 224 | rgb = hsv2rgb(hsv) * 0.5; 225 | } else { 226 | rgb = hsv2rgb(hsv); 227 | } 228 | origClr = mix(blurredClr, rgb, clamp(edge, 0., 1.)); 229 | 230 | fragColor = vec4(origClr,1.0); 231 | } -------------------------------------------------------------------------------- /data/sobel.glsl: -------------------------------------------------------------------------------- 1 | // from shadertoy https://www.shadertoy.com/view/ldsSWr 2 | 3 | // Basic edge detection via convolution 4 | // Ken Slade - ken.slade@gmail.com 5 | // at https://www.shadertoy.com/view/ldsSWr 6 | 7 | // Based on original Sobel shader by: 8 | // Jeroen Baert - jeroen.baert@cs.kuleuven.be (www.forceflow.be) 9 | // at https://www.shadertoy.com/view/Xdf3Rf 10 | 11 | uniform vec2 iResolution; 12 | uniform sampler2D texture; 13 | 14 | #define iChannel0 texture 15 | 16 | void mainImage( out vec4 fragColor, in vec2 fragCoord ); 17 | 18 | void main() { 19 | mainImage(gl_FragColor,gl_FragCoord.xy); 20 | } 21 | 22 | //options are edge, colorEdge, or trueColorEdge 23 | #define EDGE_FUNC trueColorEdge 24 | 25 | //options are KAYYALI_NESW, KAYYALI_SENW, PREWITT, ROBERTSCROSS, SCHARR, or SOBEL 26 | #define SOBEL 27 | 28 | // Use these parameters to fiddle with settings 29 | #ifdef SCHARR 30 | #define STEP 0.15 31 | #else 32 | #define STEP 1.0 33 | #endif 34 | 35 | 36 | #ifdef KAYYALI_NESW 37 | const mat3 kayyali_NESW = mat3(-6.0, 0.0, 6.0, 38 | 0.0, 0.0, 0.0, 39 | 6.0, 0.0, -6.0); 40 | #endif 41 | #ifdef KAYYALI_SENW 42 | const mat3 kayyali_SENW = mat3(6.0, 0.0, -6.0, 43 | 0.0, 0.0, 0.0, 44 | -6.0, 0.0, 6.0); 45 | #endif 46 | #ifdef PREWITT 47 | // Prewitt masks (see http://en.wikipedia.org/wiki/Prewitt_operator) 48 | const mat3 prewittKernelX = mat3(-1.0, 0.0, 1.0, 49 | -1.0, 0.0, 1.0, 50 | -1.0, 0.0, 1.0); 51 | 52 | const mat3 prewittKernelY = mat3(1.0, 1.0, 1.0, 53 | 0.0, 0.0, 0.0, 54 | -1.0, -1.0, -1.0); 55 | #endif 56 | #ifdef ROBERTSCROSS 57 | // Roberts Cross masks (see http://en.wikipedia.org/wiki/Roberts_cross) 58 | const mat3 robertsCrossKernelX = mat3(1.0, 0.0, 0.0, 59 | 0.0, -1.0, 0.0, 60 | 0.0, 0.0, 0.0); 61 | const mat3 robertsCrossKernelY = mat3(0.0, 1.0, 0.0, 62 | -1.0, 0.0, 0.0, 63 | 0.0, 0.0, 0.0); 64 | #endif 65 | #ifdef SCHARR 66 | // Scharr masks (see http://en.wikipedia.org/wiki/Sobel_operator#Alternative_operators) 67 | const mat3 scharrKernelX = mat3(3.0, 10.0, 3.0, 68 | 0.0, 0.0, 0.0, 69 | -3.0, -10.0, -3.0); 70 | 71 | const mat3 scharrKernelY = mat3(3.0, 0.0, -3.0, 72 | 10.0, 0.0, -10.0, 73 | 3.0, 0.0, -3.0); 74 | #endif 75 | #ifdef SOBEL 76 | // Sobel masks (see http://en.wikipedia.org/wiki/Sobel_operator) 77 | const mat3 sobelKernelX = mat3(1.0, 0.0, -1.0, 78 | 2.0, 0.0, -2.0, 79 | 1.0, 0.0, -1.0); 80 | 81 | const mat3 sobelKernelY = mat3(-1.0, -2.0, -1.0, 82 | 0.0, 0.0, 0.0, 83 | 1.0, 2.0, 1.0); 84 | #endif 85 | 86 | //performs a convolution on an image with the given kernel 87 | float convolve(mat3 kernel, mat3 image) { 88 | float result = 0.0; 89 | for (int i = 0; i < 3; i++) { 90 | for (int j = 0; j < 3; j++) { 91 | result += kernel[i][j]*image[i][j]; 92 | } 93 | } 94 | return result; 95 | } 96 | 97 | //helper function for colorEdge() 98 | float convolveComponent(mat3 kernelX, mat3 kernelY, mat3 image) { 99 | vec2 result; 100 | result.x = convolve(kernelX, image); 101 | result.y = convolve(kernelY, image); 102 | return clamp(length(result), 0.0, 255.0); 103 | } 104 | 105 | //returns color edges using the separated color components for the measure of intensity 106 | //for each color component instead of using the same intensity for all three. This results 107 | //in false color edges when transitioning from one color to another, but true colors when 108 | //the transition is from black to color (or color to black). 109 | vec4 colorEdge(float stepx, float stepy, vec2 center, mat3 kernelX, mat3 kernelY) { 110 | //get samples around pixel 111 | vec4 colors[9]; 112 | colors[0] = texture(iChannel0,center + vec2(-stepx,stepy)); 113 | colors[1] = texture(iChannel0,center + vec2(0,stepy)); 114 | colors[2] = texture(iChannel0,center + vec2(stepx,stepy)); 115 | colors[3] = texture(iChannel0,center + vec2(-stepx,0)); 116 | colors[4] = texture(iChannel0,center); 117 | colors[5] = texture(iChannel0,center + vec2(stepx,0)); 118 | colors[6] = texture(iChannel0,center + vec2(-stepx,-stepy)); 119 | colors[7] = texture(iChannel0,center + vec2(0,-stepy)); 120 | colors[8] = texture(iChannel0,center + vec2(stepx,-stepy)); 121 | 122 | mat3 imageR, imageG, imageB, imageA; 123 | for (int i = 0; i < 3; i++) { 124 | for (int j = 0; j < 3; j++) { 125 | imageR[i][j] = colors[i*3+j].r; 126 | imageG[i][j] = colors[i*3+j].g; 127 | imageB[i][j] = colors[i*3+j].b; 128 | imageA[i][j] = colors[i*3+j].a; 129 | } 130 | } 131 | 132 | vec4 color; 133 | color.r = convolveComponent(kernelX, kernelY, imageR); 134 | color.g = convolveComponent(kernelX, kernelY, imageG); 135 | color.b = convolveComponent(kernelX, kernelY, imageB); 136 | color.a = convolveComponent(kernelX, kernelY, imageA); 137 | 138 | return color; 139 | } 140 | 141 | //finds edges where fragment intensity changes from a higher value to a lower one (or 142 | //vice versa). 143 | vec4 edge(float stepx, float stepy, vec2 center, mat3 kernelX, mat3 kernelY){ 144 | // get samples around pixel 145 | mat3 image = mat3(length(texture(iChannel0,center + vec2(-stepx,stepy)).rgb), 146 | length(texture(iChannel0,center + vec2(0,stepy)).rgb), 147 | length(texture(iChannel0,center + vec2(stepx,stepy)).rgb), 148 | length(texture(iChannel0,center + vec2(-stepx,0)).rgb), 149 | length(texture(iChannel0,center).rgb), 150 | length(texture(iChannel0,center + vec2(stepx,0)).rgb), 151 | length(texture(iChannel0,center + vec2(-stepx,-stepy)).rgb), 152 | length(texture(iChannel0,center + vec2(0,-stepy)).rgb), 153 | length(texture(iChannel0,center + vec2(stepx,-stepy)).rgb)); 154 | vec2 result; 155 | result.x = convolve(kernelX, image); 156 | result.y = convolve(kernelY, image); 157 | 158 | float color = clamp(length(result), 0.0, 255.0); 159 | return vec4(color); 160 | } 161 | 162 | //Colors edges using the actual color for the fragment at this location 163 | vec4 trueColorEdge(float stepx, float stepy, vec2 center, mat3 kernelX, mat3 kernelY) { 164 | vec4 edgeVal = edge(stepx, stepy, center, kernelX, kernelY); 165 | return edgeVal * texture(iChannel0,center); 166 | } 167 | 168 | void mainImage( out vec4 fragColor, in vec2 fragCoord ){ 169 | vec2 uv = fragCoord.xy / iResolution.xy; 170 | vec4 color = texture(iChannel0, uv.xy); 171 | #ifdef KAYYALI_NESW 172 | fragColor = EDGE_FUNC(STEP/iResolution[0], STEP/iResolution[1], 173 | uv, 174 | kayyali_NESW, kayyali_NESW); 175 | #endif 176 | #ifdef KAYYALI_SENW 177 | fragColor = EDGE_FUNC(STEP/iResolution[0], STEP/iResolution[1], 178 | uv, 179 | kayyali_SENW, kayyali_SENW); 180 | #endif 181 | #ifdef PREWITT 182 | fragColor = EDGE_FUNC(STEP/iResolution[0], STEP/iResolution[1], 183 | uv, 184 | prewittKernelX, prewittKernelY); 185 | #endif 186 | #ifdef ROBERTSCROSS 187 | fragColor = EDGE_FUNC(STEP/iResolution[0], STEP/iResolution[1], 188 | uv, 189 | robertsCrossKernelX, robertsCrossKernelY); 190 | #endif 191 | #ifdef SOBEL 192 | fragColor = EDGE_FUNC(STEP/iResolution[0], STEP/iResolution[1], 193 | uv, 194 | sobelKernelX, sobelKernelY); 195 | #endif 196 | #ifdef SCHARR 197 | fragColor = EDGE_FUNC(STEP/iResolution[0], STEP/iResolution[1], 198 | uv, 199 | scharrKernelX, scharrKernelY); 200 | #endif 201 | } -------------------------------------------------------------------------------- /data/vhs.glsl: -------------------------------------------------------------------------------- 1 | // from shadertoy https://www.shadertoy.com/view/4dBGzK 2 | 3 | uniform vec2 iResolution; 4 | uniform sampler2D texture; 5 | uniform float iGlobalTime; 6 | 7 | #define iChannel0 texture 8 | 9 | highp float rand(vec2 co) 10 | { 11 | highp float a = 12.9898; 12 | highp float b = 78.233; 13 | highp float c = 43758.5453; 14 | highp float dt= dot(co.xy ,vec2(a,b)); 15 | highp float sn= mod(dt,3.14); 16 | return fract(sin(sn) * c); 17 | } 18 | 19 | void mainImage( out vec4 fragColor, in vec2 fragCoord ); 20 | 21 | void main() { 22 | mainImage(gl_FragColor,gl_FragCoord.xy); 23 | } 24 | 25 | void mainImage( out vec4 fragColor, in vec2 fragCoord ) 26 | { 27 | vec2 uv = fragCoord.xy / iResolution.xy; 28 | // Flip Y Axis 29 | // uv.y = -uv.y; 30 | 31 | highp float magnitude = 0.005; 32 | 33 | 34 | // Set up offset 35 | vec2 offsetRedUV = uv; 36 | offsetRedUV.x = uv.x + rand(vec2(iGlobalTime*0.03,uv.y*0.42)) * 0.001; 37 | offsetRedUV.x += sin(rand(vec2(iGlobalTime*0.2, uv.y)))*magnitude; 38 | 39 | vec2 offsetGreenUV = uv; 40 | offsetGreenUV.x = uv.x + rand(vec2(iGlobalTime*0.004,uv.y*0.002)) * 0.004; 41 | offsetGreenUV.x += sin(iGlobalTime*9.0)*magnitude; 42 | 43 | vec2 offsetBlueUV = uv; 44 | offsetBlueUV.x = uv.y; 45 | offsetBlueUV.x += rand(vec2(cos(iGlobalTime*0.01),sin(uv.y))); 46 | 47 | // Load Texture 48 | float r = texture(iChannel0, offsetRedUV).r; 49 | float g = texture(iChannel0, offsetGreenUV).g; 50 | float b = texture(iChannel0, uv).b; 51 | 52 | fragColor = vec4(r,g,b,0); 53 | 54 | } -------------------------------------------------------------------------------- /data/vhs_glitch.glsl: -------------------------------------------------------------------------------- 1 | // from shadertoy https://www.shadertoy.com/view/ldjGzV 2 | 3 | uniform vec2 iResolution; 4 | uniform sampler2D texture; 5 | uniform float iGlobalTime; 6 | 7 | #define iChannel0 texture 8 | #define iChannel1 texture 9 | 10 | void mainImage( out vec4 fragColor, in vec2 fragCoord ); 11 | 12 | void main() { 13 | mainImage(gl_FragColor,gl_FragCoord.xy); 14 | } 15 | 16 | float noise(vec2 p) 17 | { 18 | float s = texture(iChannel1,vec2(1.,2.*cos(iGlobalTime))*iGlobalTime*8. + p*1.).x; 19 | s *= s; 20 | return s; 21 | } 22 | 23 | float onOff(float a, float b, float c) 24 | { 25 | return step(c, sin(iGlobalTime + a*cos(iGlobalTime*b))); 26 | } 27 | 28 | float ramp(float y, float start, float end) 29 | { 30 | float inside = step(start,y) - step(end,y); 31 | float fact = (y-start)/(end-start)*inside; 32 | return (1.-fact) * inside; 33 | 34 | } 35 | 36 | float stripes(vec2 uv) 37 | { 38 | 39 | float noi = noise(uv*vec2(0.5,1.) + vec2(1.,3.)); 40 | return ramp(mod(uv.y*4. + iGlobalTime/2.+sin(iGlobalTime + sin(iGlobalTime*0.63)),1.),0.5,0.6)*noi; 41 | } 42 | 43 | vec3 getVideo(vec2 uv) 44 | { 45 | vec2 look = uv; 46 | float window = 1./(1.+20.*(look.y-mod(iGlobalTime/4.,1.))*(look.y-mod(iGlobalTime/4.,1.))); 47 | look.x = look.x + sin(look.y*10. + iGlobalTime)/50.*onOff(4.,4.,.3)*(1.+cos(iGlobalTime*80.))*window; 48 | float vShift = 0.4*onOff(2.,3.,.9)*(sin(iGlobalTime)*sin(iGlobalTime*20.) + 49 | (0.5 + 0.1*sin(iGlobalTime*200.)*cos(iGlobalTime))); 50 | look.y = mod(look.y + vShift, 1.); 51 | vec3 video = vec3(texture(iChannel0,look)); 52 | return video; 53 | } 54 | 55 | vec2 screenDistort(vec2 uv) 56 | { 57 | uv -= vec2(.5,.5); 58 | uv = uv*1.2*(1./1.2+2.*uv.x*uv.x*uv.y*uv.y); 59 | uv += vec2(.5,.5); 60 | return uv; 61 | } 62 | 63 | void mainImage( out vec4 fragColor, in vec2 fragCoord ) 64 | { 65 | vec2 uv = fragCoord.xy / iResolution.xy; 66 | uv = screenDistort(uv); 67 | vec3 video = getVideo(uv); 68 | float vigAmt = 3.+.3*sin(iGlobalTime + 5.*cos(iGlobalTime*5.)); 69 | float vignette = (1.-vigAmt*(uv.y-.5)*(uv.y-.5))*(1.-vigAmt*(uv.x-.5)*(uv.x-.5)); 70 | 71 | video += stripes(uv); 72 | video += noise(uv*2.)/2.; 73 | video *= vignette; 74 | video *= (12.+mod(uv.y*30.+iGlobalTime,1.))/13.; 75 | 76 | fragColor = vec4(video,1.0); 77 | } -------------------------------------------------------------------------------- /data/vhs_wobble.glsl: -------------------------------------------------------------------------------- 1 | // from shaderToy: https://www.shadertoy.com/view/Ms3XWH 2 | 3 | uniform vec2 iResolution; 4 | uniform sampler2D texture; 5 | uniform float iGlobalTime; 6 | 7 | #define iChannel0 texture 8 | 9 | void mainImage( out vec4 fragColor, in vec2 fragCoord ); 10 | 11 | void main() { 12 | mainImage(gl_FragColor,gl_FragCoord.xy); 13 | } 14 | 15 | const float range = 0.05; 16 | const float noiseQuality = 250.0; 17 | const float noiseIntensity = 0.0044; 18 | const float offsetIntensity = 0.01; 19 | const float colorOffsetIntensity = 0.5; 20 | 21 | float rand(vec2 co) { 22 | return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); 23 | } 24 | 25 | float verticalBar(float pos, float uvY, float offset) { 26 | float edge0 = (pos - range); 27 | float edge1 = (pos + range); 28 | 29 | float x = smoothstep(edge0, pos, uvY) * offset; 30 | x -= smoothstep(pos, edge1, uvY) * offset; 31 | return x; 32 | } 33 | 34 | void mainImage( out vec4 fragColor, in vec2 fragCoord ) { 35 | vec2 uv = fragCoord.xy / iResolution.xy; 36 | 37 | for (float i = 0.0; i < 0.71; i += 0.1313) { 38 | float d = mod(iGlobalTime * i, 1.7); 39 | float o = sin(1.0 - tan(iGlobalTime * 0.24 * i)); 40 | o *= offsetIntensity; 41 | uv.x += verticalBar(d, uv.y, o); 42 | } 43 | 44 | float uvY = uv.y; 45 | uvY *= noiseQuality; 46 | uvY = float(int(uvY)) * (1.0 / noiseQuality); 47 | float noise = rand(vec2(iGlobalTime * 0.00001, uvY)); 48 | uv.x += noise * noiseIntensity; 49 | 50 | vec2 offsetR = vec2(0.006 * sin(iGlobalTime), 0.0) * colorOffsetIntensity; 51 | vec2 offsetG = vec2(0.0073 * (cos(iGlobalTime * 0.97)), 0.0) * colorOffsetIntensity; 52 | 53 | float r = texture(iChannel0, uv + offsetR).r; 54 | float g = texture(iChannel0, uv + offsetG).g; 55 | float b = texture(iChannel0, uv).b; 56 | 57 | vec4 tex = vec4(r, g, b, 1.0); 58 | fragColor = tex; 59 | } -------------------------------------------------------------------------------- /data/wetCity.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/georgehenryrowe/ShadersForProcessing3/46b8338459c891f6baac2232abaf6b0979ccaf0b/data/wetCity.mp4 --------------------------------------------------------------------------------