├── .DS_Store ├── .gitignore ├── AF-shader-vertex-displacement ├── StyleGAN2_portrait.jpeg ├── StyleGAN_landscape.jpeg ├── bplane7.obj ├── index.html ├── noise.png ├── shader.frag ├── shader.vert └── sketch.js ├── Basics_bos ├── README.md ├── bos-shader-color-easing │ ├── index.html │ ├── shader.frag │ ├── shader.vert │ └── sketch.js ├── bos-shader-gradiant-00 │ ├── index.html │ ├── shader.frag │ ├── shader.vert │ └── sketch.js ├── bos-shader-gradiant-power │ ├── index.html │ ├── shader.frag │ ├── shader.vert │ └── sketch.js ├── bos-shader-gradiant-show │ ├── index.html │ ├── shader.frag │ ├── shader.vert │ └── sketch.js ├── bos-shader-gradiant-sin00 │ ├── index.html │ ├── shader.frag │ ├── shader.vert │ └── sketch.js ├── bos-shader-gradiant-sin01 │ ├── index.html │ ├── shader.frag │ ├── shader.vert │ └── sketch.js ├── bos-shader-gradiant-smoothstep │ ├── index.html │ ├── shader.frag │ ├── shader.vert │ └── sketch.js └── bos-shader-gradiant-step │ ├── index.html │ ├── shader.frag │ ├── shader.vert │ └── sketch.js ├── IQ-radial-FBM ├── index.html ├── shader.frag ├── shader.vert └── sketch.js ├── IQ-wobbly-sphere ├── index.html ├── shader.frag ├── shader.vert └── sketch.js ├── LICENSE ├── README.md ├── bos-shader-demo-danguafer ├── index.html ├── shader.frag ├── shader.vert └── sketch.js ├── bos-shader-gallery-brownian-motion ├── index.html ├── shader.frag ├── shader.vert └── sketch.js ├── bos-shader-gallery-circlewave-noise ├── index.html ├── shader.frag ├── shader.vert └── sketch.js ├── bos-shader-gallery-metaballs-00 ├── index.html ├── shader.frag ├── shader.vert └── sketch.js ├── bos-shader-gallery-metaballs-01 ├── index.html ├── shader.frag ├── shader.vert └── sketch.js ├── bos-shader-gallery-reflected-turbulence ├── index.html ├── shader.frag ├── shader.vert └── sketch.js ├── bos-shader-gallery-terrain ├── index.html ├── shader.frag ├── shader.vert └── sketch.js ├── fromTwitter_sphere_wavy_reflection ├── index.html ├── shader.frag ├── shader.vert └── sketch.js ├── fromTwitter_sphere_wobbly ├── index.html ├── shader.frag ├── shader.vert └── sketch.js ├── fromTwitter_wavy_landscape ├── index.html ├── shader.frag ├── shader.vert └── sketch.js ├── gifs ├── blends.gif ├── bloom.gif ├── brownian.gif ├── circlewave.gif ├── color_easing.gif ├── danguafer.gif ├── displacement.gif ├── landscape.gif ├── lowfi_interferences.gif ├── mask.gif ├── metaballs00.gif ├── metaballs01.gif ├── radial_FBM.gif ├── reflected-turbulence.gif ├── terrain.gif ├── wavy.gif └── wobbly.gif ├── images ├── bos-brownian-motion.png ├── bos-gradiant-pow.png ├── bos-gradiant-sin00.png ├── bos-gradiant-sin01.png ├── bos-gradiant-smoothstep.png ├── bos-gradiant-step.png ├── bos-shader-example-00.png └── p5js-shader-example.png ├── libs ├── .DS_Store ├── p5.js ├── p5.min.js ├── p5.sound.js ├── p5.sound.min.js └── quicksettings.js ├── p5js-shader-example-00 ├── index.html ├── shader.frag ├── shader.vert └── sketch.js ├── shader-blends ├── blends.frag ├── blends.vert ├── index.html └── sketch.js ├── shader-bloom ├── .DS_Store ├── base.vert ├── bloom.frag ├── blur.frag ├── index.html └── sketch.js ├── shader-lowfi_interferences ├── blends.frag ├── blends.vert ├── index.html └── sketch.js ├── shader-lowfi_interferences1 ├── blends.frag ├── blends.vert ├── index.html └── sketch.js ├── shader-mask-several-sources ├── index.html ├── mask.frag ├── mask.vert └── sketch.js ├── shader-mask ├── index.html ├── mask.frag ├── mask.vert └── sketch.js └── todo.txt /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | */.DS_Store 3 | */*/.DS_Store 4 | .DS_Store 5 | 6 | .DS_Store 7 | -------------------------------------------------------------------------------- /AF-shader-vertex-displacement/StyleGAN2_portrait.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/AF-shader-vertex-displacement/StyleGAN2_portrait.jpeg -------------------------------------------------------------------------------- /AF-shader-vertex-displacement/StyleGAN_landscape.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/AF-shader-vertex-displacement/StyleGAN_landscape.jpeg -------------------------------------------------------------------------------- /AF-shader-vertex-displacement/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /AF-shader-vertex-displacement/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/AF-shader-vertex-displacement/noise.png -------------------------------------------------------------------------------- /AF-shader-vertex-displacement/shader.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | varying vec2 vTexCoord; 4 | 5 | // Get the normal from the vertex shader 6 | varying vec3 vNoise; 7 | 8 | void main() { 9 | 10 | vec3 color = vNoise; 11 | 12 | // Lets just draw the texcoords to the screen 13 | gl_FragColor = vec4(color ,1.0); 14 | } -------------------------------------------------------------------------------- /AF-shader-vertex-displacement/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | // Get the position attribute of the geometry 3 | attribute vec3 aPosition; 4 | 5 | // Get the texture coordinate attribute from the geometry 6 | attribute vec2 aTexCoord; 7 | 8 | // Get the vertex normal attribute from the geometry 9 | attribute vec3 aNormal; 10 | 11 | // When we use 3d geometry, we need to also use some builtin variables that p5 provides 12 | // Most 3d engines will provide these variables for you. They are 4x4 matrices that define 13 | // the camera position / rotation, and the geometry position / rotation / scale 14 | // There are actually 3 matrices, but two of them have already been combined into a single one 15 | // This pre combination is an optimization trick so that the vertex shader doesn't have to do as much work 16 | 17 | // uProjectionMatrix is used to convert the 3d world coordinates into screen coordinates 18 | uniform mat4 uProjectionMatrix; 19 | 20 | // uModelViewMatrix is a combination of the model matrix and the view matrix 21 | // The model matrix defines the object position / rotation / scale 22 | // Multiplying uModelMatrix * vec4(aPosition, 1.0) would move the object into it's world position 23 | 24 | // The view matrix defines attributes about the camera, such as focal length and camera position 25 | // Multiplying uModelViewMatrix * vec4(aPosition, 1.0) would move the object into its world position in front of the camera 26 | uniform mat4 uModelViewMatrix; 27 | 28 | // Get the framecount uniform 29 | uniform float uFrameCount; 30 | uniform float amp; 31 | 32 | // Get the noise texture 33 | uniform sampler2D uNoiseTexture; 34 | 35 | varying vec2 vTexCoord; 36 | varying vec3 vNoise; 37 | 38 | 39 | void main() { 40 | 41 | // Sample the noise texture 42 | vec4 noise = texture2D(uNoiseTexture, fract(aTexCoord)); 43 | 44 | // Send the noise color to the fragment shader 45 | vNoise = noise.rgb; 46 | 47 | // copy the position data into a vec4, using 1.0 as the w component 48 | vec4 positionVec4 = vec4(aPosition, 1.0); 49 | 50 | // Amplitude will determine the amount of the displacement 51 | float amplitude = (uFrameCount) * amp; 52 | 53 | // add the noise to the position, and multiply by the normal to move along it. 54 | //positionVec4.xyz += (noise.rgb - 0.5 ) * aNormal * amplitude; 55 | positionVec4.y += ((noise.r +noise.g +noise.b)*0.33- 0.5 ) * amplitude; 56 | 57 | // Move our vertex positions into screen space 58 | // The order of multiplication is always projection * view * model * position 59 | // In this case model and view have been combined so we just do projection * modelView * position 60 | gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4; 61 | 62 | // Send the texture coordinates to the fragment shader 63 | vTexCoord = aTexCoord; 64 | } -------------------------------------------------------------------------------- /AF-shader-vertex-displacement/sketch.js: -------------------------------------------------------------------------------- 1 | // based on https://github.com/aferriss/p5jsShaderExamples/tree/gh-pages/6_3d/6-3_vertexDisplacementFromTexture 2 | let myShader; 3 | let plan; // 3D object 4 | 5 | // source inputs 6 | let cam; 7 | let img; 8 | // deform input 9 | let mic; 10 | 11 | // gui 12 | let menu 13 | 14 | let params = { 15 | "amp": 50, 16 | "movement_type": 0, 17 | "source": 0 18 | } 19 | 20 | function preload() { 21 | // a shader is composed of two parts, a vertex shader, and a fragment shader 22 | // the vertex shader prepares the vertices and geometry to be drawn 23 | // the fragment shader renders the actual pixel colors 24 | // loadShader() is asynchronous so it needs to be in preload 25 | // loadShader() first takes the filename of a vertex shader, and then a frag shader 26 | // these file types are usually .vert and .frag, but you can actually use anything. .glsl is another common one 27 | myShader = loadShader("shader.vert", "shader.frag"); 28 | img = loadImage("StyleGAN_landscape.jpeg"); 29 | plan = loadModel('bplane7.obj', function () { 30 | console.log("obj loaded") 31 | }, function () {}); 32 | 33 | } 34 | 35 | function setup() { 36 | // shaders require WEBGL mode to work 37 | let c = createCanvas(windowWidth, windowHeight, WEBGL); 38 | noStroke(); 39 | 40 | 41 | menu = QuickSettings.create(0, 0, 'Options') 42 | menu.addHTML("Info ", "

You can drag and drop an image of your choice on the canvas.

"); 43 | menu.addRange("amplitude", 0, 300, params.amp, 1, function (v) { 44 | params.amp = v 45 | }) 46 | menu.addDropDown("movement type", ["noise", "sinus", "audio"], function (v) { 47 | params.movement_type = v.index ; 48 | if (v.index == 2){ 49 | mic = new p5.AudioIn(); 50 | mic.start(); 51 | } 52 | }) 53 | menu.addDropDown("source input", ["image", "webcam"], function (v) { 54 | params.source = v.index; 55 | }) 56 | 57 | c.drop(gotFile); 58 | 59 | cam = createCapture(VIDEO); 60 | cam.size(640, 480); 61 | cam.hide(); 62 | 63 | 64 | } 65 | 66 | function draw() { 67 | 68 | 69 | 70 | background(0); 71 | orbitControl() 72 | scale(3) 73 | shader(myShader); 74 | 75 | myShader.setUniform("amp", params.amp); 76 | // Send the frameCount to the shader 77 | if (params.movement_type == 0) { 78 | myShader.setUniform("uFrameCount", noise(frameCount / 100.)); 79 | } else if (params.movement_type == 1) { 80 | myShader.setUniform("uFrameCount", sin(frameCount / 100.)); 81 | } else if (params.movement_type == 2) { 82 | // Get the overall volume (between 0 and 1.0) 83 | let vol = mic.getLevel(); 84 | console.log(vol) 85 | myShader.setUniform("uFrameCount", vol * 100.); 86 | } 87 | 88 | if (params.source == 0) { 89 | myShader.setUniform("uNoiseTexture", img); 90 | } else if (params.source == 1) { 91 | myShader.setUniform("uNoiseTexture", cam); 92 | } 93 | 94 | 95 | 96 | strokeWeight(1) 97 | // Draw some geometry to the screen 98 | 99 | rotateZ(PI) 100 | rotateX(-PI * 0.75) 101 | model(plan); 102 | 103 | 104 | } 105 | 106 | function gotFile(file){ 107 | img = createImg(file.data, '').hide(); 108 | } 109 | 110 | 111 | function windowResized() { 112 | resizeCanvas(windowWidth, windowHeight); 113 | } -------------------------------------------------------------------------------- /Basics_bos/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Basic exercices 3 | 4 | 5 | 6 | [Linear gradient](https://b2renger.github.io/p5js-shaders/Basics_bos/bos-shader-gradiant-00/) 7 | 8 | 9 | 10 | [Sinus gradient 1](https://b2renger.github.io/p5js-shaders/Basics_bos/bos-shader-gradiant-sin00/) 11 | 12 | 13 | 14 | [Sinus gradient 2](https://b2renger.github.io/p5js-shaders/Basics_bos/bos-shader-gradiant-sin01/) 15 | 16 | 17 | 18 | [Power gradient ](https://b2renger.github.io/p5js-shaders/Basics_bos/bos-shader-gradiant-power/) 19 | 20 | 21 | 22 | [Step gradient ](https://b2renger.github.io/p5js-shaders/Basics_bos/bos-shader-gradiant-step/) 23 | 24 | 25 | 26 | [smooth step gradient ](https://b2renger.github.io/p5js-shaders/Basics_bos/bos-shader-gradiant-smoothstep/) 27 | 28 | 29 | 30 | [color easing ](https://b2renger.github.io/p5js-shaders/Basics_bos/bos-shader-color-easing/) -------------------------------------------------------------------------------- /Basics_bos/bos-shader-color-easing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-color-easing/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | #define PI 3.141592653589793 6 | #define HALF_PI 1.5707963267948966 7 | 8 | uniform vec2 u_resolution; 9 | uniform vec2 u_mouse; 10 | uniform float u_time; 11 | 12 | // Robert Penner's easing functions in GLSL 13 | // https://github.com/stackgl/glsl-easings 14 | float linear(float t) { 15 | return t; 16 | } 17 | 18 | float exponentialIn(float t) { 19 | return t == 0.0 ? t : pow(2.0, 10.0 * (t - 1.0)); 20 | } 21 | 22 | float exponentialOut(float t) { 23 | return t == 1.0 ? t : 1.0 - pow(2.0, -10.0 * t); 24 | } 25 | 26 | float exponentialInOut(float t) { 27 | return t == 0.0 || t == 1.0 28 | ? t 29 | : t < 0.5 30 | ? +0.5 * pow(2.0, (20.0 * t) - 10.0) 31 | : -0.5 * pow(2.0, 10.0 - (t * 20.0)) + 1.0; 32 | } 33 | 34 | float sineIn(float t) { 35 | return sin((t - 1.0) * HALF_PI) + 1.0; 36 | } 37 | 38 | float sineOut(float t) { 39 | return sin(t * HALF_PI); 40 | } 41 | 42 | float sineInOut(float t) { 43 | return -0.5 * (cos(PI * t) - 1.0); 44 | } 45 | 46 | float qinticIn(float t) { 47 | return pow(t, 5.0); 48 | } 49 | 50 | float qinticOut(float t) { 51 | return 1.0 - (pow(t - 1.0, 5.0)); 52 | } 53 | 54 | float qinticInOut(float t) { 55 | return t < 0.5 56 | ? +16.0 * pow(t, 5.0) 57 | : -0.5 * pow(2.0 * t - 2.0, 5.0) + 1.0; 58 | } 59 | 60 | float quarticIn(float t) { 61 | return pow(t, 4.0); 62 | } 63 | 64 | float quarticOut(float t) { 65 | return pow(t - 1.0, 3.0) * (1.0 - t) + 1.0; 66 | } 67 | 68 | float quarticInOut(float t) { 69 | return t < 0.5 70 | ? +8.0 * pow(t, 4.0) 71 | : -8.0 * pow(t - 1.0, 4.0) + 1.0; 72 | } 73 | 74 | float quadraticInOut(float t) { 75 | float p = 2.0 * t * t; 76 | return t < 0.5 ? p : -p + (4.0 * t) - 1.0; 77 | } 78 | 79 | float quadraticIn(float t) { 80 | return t * t; 81 | } 82 | 83 | float quadraticOut(float t) { 84 | return -t * (t - 2.0); 85 | } 86 | 87 | float cubicIn(float t) { 88 | return t * t * t; 89 | } 90 | 91 | float cubicOut(float t) { 92 | float f = t - 1.0; 93 | return f * f * f + 1.0; 94 | } 95 | 96 | float cubicInOut(float t) { 97 | return t < 0.5 98 | ? 4.0 * t * t * t 99 | : 0.5 * pow(2.0 * t - 2.0, 3.0) + 1.0; 100 | } 101 | 102 | float elasticIn(float t) { 103 | return sin(13.0 * t * HALF_PI) * pow(2.0, 10.0 * (t - 1.0)); 104 | } 105 | 106 | float elasticOut(float t) { 107 | return sin(-13.0 * (t + 1.0) * HALF_PI) * pow(2.0, -10.0 * t) + 1.0; 108 | } 109 | 110 | float elasticInOut(float t) { 111 | return t < 0.5 112 | ? 0.5 * sin(+13.0 * HALF_PI * 2.0 * t) * pow(2.0, 10.0 * (2.0 * t - 1.0)) 113 | : 0.5 * sin(-13.0 * HALF_PI * ((2.0 * t - 1.0) + 1.0)) * pow(2.0, -10.0 * (2.0 * t - 1.0)) + 1.0; 114 | } 115 | 116 | float circularIn(float t) { 117 | return 1.0 - sqrt(1.0 - t * t); 118 | } 119 | 120 | float circularOut(float t) { 121 | return sqrt((2.0 - t) * t); 122 | } 123 | 124 | float circularInOut(float t) { 125 | return t < 0.5 126 | ? 0.5 * (1.0 - sqrt(1.0 - 4.0 * t * t)) 127 | : 0.5 * (sqrt((3.0 - 2.0 * t) * (2.0 * t - 1.0)) + 1.0); 128 | } 129 | 130 | float bounceOut(float t) { 131 | const float a = 4.0 / 11.0; 132 | const float b = 8.0 / 11.0; 133 | const float c = 9.0 / 10.0; 134 | 135 | const float ca = 4356.0 / 361.0; 136 | const float cb = 35442.0 / 1805.0; 137 | const float cc = 16061.0 / 1805.0; 138 | 139 | float t2 = t * t; 140 | 141 | return t < a 142 | ? 7.5625 * t2 143 | : t < b 144 | ? 9.075 * t2 - 9.9 * t + 3.4 145 | : t < c 146 | ? ca * t2 - cb * t + cc 147 | : 10.8 * t * t - 20.52 * t + 10.72; 148 | } 149 | 150 | float bounceIn(float t) { 151 | return 1.0 - bounceOut(1.0 - t); 152 | } 153 | 154 | float bounceInOut(float t) { 155 | return t < 0.5 156 | ? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0)) 157 | : 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5; 158 | } 159 | 160 | float backIn(float t) { 161 | return pow(t, 3.0) - t * sin(t * PI); 162 | } 163 | 164 | float backOut(float t) { 165 | float f = 1.0 - t; 166 | return 1.0 - (pow(f, 3.0) - f * sin(f * PI)); 167 | } 168 | 169 | float backInOut(float t) { 170 | float f = t < 0.5 171 | ? 2.0 * t 172 | : 1.0 - (2.0 * t - 1.0); 173 | 174 | float g = pow(f, 3.0) - f * sin(f * PI); 175 | 176 | return t < 0.5 177 | ? 0.5 * g 178 | : 0.5 * (1.0 - g) + 0.5; 179 | } 180 | 181 | float plot (vec2 st, float pct){ 182 | return smoothstep( pct-0.01, pct, st.y) - 183 | smoothstep( pct, pct+0.01, st.y); 184 | } 185 | 186 | void main() { 187 | vec3 colorA = vec3(0.36,0.82,0.84); 188 | vec3 colorB = vec3(1.000,0.31,0.18); 189 | vec2 st = gl_FragCoord.xy/u_resolution.xy; 190 | float t = u_time*0.25; 191 | float pct = .0; 192 | 193 | if (int(mod(u_time , 11.))== 0){ 194 | pct = linear( abs(fract(t)*2.0-1.) ); 195 | } 196 | else if (int(mod(u_time, 11.0)) == 1){ 197 | pct = exponentialInOut( abs(fract(t)*2.0-1.) ); 198 | } 199 | else if (int(mod(u_time, 11.0)) == 2){ 200 | pct = sineInOut( abs(fract(t)*2.0-1.) ); 201 | } 202 | else if (int(mod(u_time, 11.0)) == 3){ 203 | pct = qinticInOut( abs(fract(t)*2.0-1.) ); 204 | } 205 | else if (int(mod(u_time, 11.0)) == 4){ 206 | pct = quarticInOut( abs(fract(t)*2.0-1.) ); 207 | } 208 | else if (int(mod(u_time, 11.0)) == 5){ 209 | pct = quadraticInOut( abs(fract(t)*2.0-1.) ); 210 | } 211 | else if (int(mod(u_time, 11.0)) == 6){ 212 | pct = cubicInOut( abs(fract(t)*2.0-1.) ); 213 | } 214 | else if (int(mod(u_time, 11.0)) == 7){ 215 | pct = elasticInOut( abs(fract(t)*2.0-1.) ); 216 | } 217 | else if (int(mod(u_time, 11.0)) == 8){ 218 | pct = circularInOut( abs(fract(t)*2.0-1.) ); 219 | } 220 | else if (int(mod(u_time, 11.0)) == 9){ 221 | pct = bounceInOut( abs(fract(t)*2.0-1.) ); 222 | } 223 | else if (int(mod(u_time, 11.0)) == 10){ 224 | pct = backInOut( abs(fract(t)*2.0-1.) ); 225 | } 226 | 227 | st.y = st.y - .5; 228 | vec3 color = vec3(mix(colorA, colorB, pct)); 229 | color = mix(color, vec3(.0,.0,.0), plot(st,pct)); 230 | 231 | gl_FragColor = vec4(color,1.0); 232 | } 233 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-color-easing/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | varying vec2 vPos; 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vPos = (gl_Position = vec4(aPosition,1.0)).xy; 7 | } 8 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-color-easing/sketch.js: -------------------------------------------------------------------------------- 1 | let colors; 2 | function preload() { 3 | // load the shader definitions from files 4 | colors = loadShader('shader.vert', 'shader.frag'); 5 | } 6 | function setup() { 7 | createCanvas(windowWidth, windowHeight, WEBGL); 8 | // use the shader 9 | shader(colors); 10 | noStroke(); 11 | colors.setUniform('u_resolution', [windowWidth, windowHeight]) 12 | 13 | } 14 | 15 | function draw() { 16 | colors.setUniform('u_mouse',[mouseX,mouseY]); 17 | colors.setUniform('u_time',millis()/1000); 18 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 19 | } 20 | 21 | function windowResized(){ 22 | resizeCanvas(windowWidth,windowHeight) 23 | } 24 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-00/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-00/shader.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | varying vec2 vPos; 3 | uniform float w; 4 | uniform float h; 5 | 6 | float plot(vec2 st, float pct){ 7 | return smoothstep( pct-0.02, pct, st.y) - 8 | smoothstep( pct, pct+0.02, st.y); 9 | } 10 | 11 | 12 | void main() { 13 | vec2 res = vec2(w ,h); 14 | vec2 st = gl_FragCoord.xy/res; 15 | 16 | float y = st.x; 17 | 18 | vec3 color = vec3(y); 19 | 20 | // Plot a line 21 | float pct = plot(st,y); 22 | color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0); 23 | 24 | gl_FragColor = vec4(color,1.0); 25 | } 26 | 27 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-00/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | varying vec2 vPos; 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vPos = (gl_Position = vec4(aPosition,1.0)).xy; 7 | } 8 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-00/sketch.js: -------------------------------------------------------------------------------- 1 | // https://thebookofshaders.com/05 2 | 3 | let lingradiant; 4 | 5 | function preload() { 6 | // load the shader definitions from files 7 | lingradiant = loadShader('shader.vert', 'shader.frag'); 8 | } 9 | 10 | function setup() { 11 | createCanvas(windowWidth, windowHeight, WEBGL); 12 | // use the shader 13 | shader(lingradiant); 14 | noStroke(); 15 | 16 | lingradiant.setUniform('w', windowWidth) 17 | lingradiant.setUniform('h', windowHeight) 18 | 19 | } 20 | 21 | function draw() { 22 | background(0) 23 | //mandel.setUniform('gamma', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000)))); 24 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 25 | } 26 | 27 | function windowResized() { 28 | resizeCanvas(windowWidth, windowHeight) 29 | lingradiant.setUniform('w', windowWidth) 30 | lingradiant.setUniform('h', windowHeight) 31 | 32 | } 33 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-power/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-power/shader.frag: -------------------------------------------------------------------------------- 1 | // Author: Inigo Quiles 2 | // Title: Expo 3 | 4 | 5 | precision mediump float; 6 | varying vec2 vPos; 7 | 8 | #define PI 3.14159265359 9 | 10 | uniform float w; 11 | uniform float h; 12 | uniform float mouseX; 13 | uniform float mouseY; 14 | uniform float u_time; 15 | 16 | float plot(vec2 st, float pct){ 17 | return smoothstep( pct-0.02, pct, st.y) - 18 | smoothstep( pct, pct+0.02, st.y); 19 | } 20 | 21 | void main() { 22 | vec2 u_resolution = vec2(w,h); 23 | vec2 st = gl_FragCoord.xy/u_resolution; 24 | 25 | float y = pow(st.x, mouseX *5.); 26 | 27 | 28 | vec3 color = vec3(y); 29 | 30 | float pct = plot(st,y); 31 | color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0); 32 | 33 | gl_FragColor = vec4(color,1.0); 34 | } 35 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-power/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vec4 positionVec4 = vec4(aPosition, 1.0); 7 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 8 | gl_Position = positionVec4; 9 | } 10 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-power/sketch.js: -------------------------------------------------------------------------------- 1 | // https://thebookofshaders.com/05 2 | 3 | let gradiant; 4 | 5 | function preload() { 6 | // load the shader definitions from files 7 | gradiant = loadShader('shader.vert', 'shader.frag'); 8 | } 9 | 10 | function setup() { 11 | createCanvas(windowWidth, windowHeight, WEBGL); 12 | // use the shader 13 | shader(gradiant); 14 | noStroke(); 15 | //gradiant.setUniform('w', windowWidth) 16 | gradiant.setUniform('w', windowWidth) 17 | gradiant.setUniform('h', windowHeight) 18 | 19 | 20 | } 21 | 22 | function draw() { 23 | background(0) 24 | gradiant.setUniform('mouseX', mouseX / windowWidth) 25 | rect(0, 0, windowWidth, windowHeight) 26 | } 27 | 28 | function windowResized() { 29 | resizeCanvas(windowWidth, windowHeight) 30 | gradiant.setUniform('w', windowWidth) 31 | gradiant.setUniform('h', windowHeight) 32 | } 33 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-show/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-show/shader.frag: -------------------------------------------------------------------------------- 1 | // Author: Inigo Quiles 2 | // Title: Expo 3 | 4 | 5 | precision mediump float; 6 | varying vec2 vPos; 7 | 8 | #define PI 3.14159265359 9 | 10 | uniform float w; 11 | uniform float h; 12 | uniform float mouseX; 13 | uniform float mouseY; 14 | uniform float u_time; 15 | 16 | float plot(vec2 st, float pct){ 17 | float w =.1; 18 | return smoothstep( pct- w, pct, st.y) - 19 | smoothstep( pct, pct+w, st.y); 20 | } 21 | 22 | void main() { 23 | vec2 u_resolution = vec2(w,h); 24 | vec2 st = gl_FragCoord.xy/u_resolution; 25 | 26 | float y = 0.0; 27 | 28 | if (int(mod(u_time , 10.))== 0){ 29 | y = mod(st.x,0.5); // return x modulo of 0.5 30 | } 31 | else if (int(mod(u_time , 10.))== 1){ 32 | y = fract(st.x); // return only the fraction part of a number 33 | } 34 | else if (int(mod(u_time , 10.))== 2){ 35 | y = ceil(st.x); // nearest integer that is greater than or equal to x 36 | } 37 | else if (int(mod(u_time , 10.))== 3){ 38 | y = floor(st.x); // nearest integer less than or equal to x 39 | } 40 | else if (int(mod(u_time , 10.))== 4){ 41 | y = sign(st.x); // extract the sign of x 42 | } 43 | else if (int(mod(u_time , 10.))== 5){ 44 | y = abs(st.x); // return the absolute value of x 45 | } 46 | else if (int(mod(u_time , 10.))== 6){ 47 | y = clamp(st.x,0.0,1.0); // constrain x to lie between 0.0 and 1.0 48 | } 49 | else if (int(mod(u_time , 10.))== 7){ 50 | y = min(0.0,st.x); // return the lesser of x and 0.0 51 | } 52 | else if (int(mod(u_time , 10.))== 8){ 53 | y = max(0.0,st.x); // return the greater of x and 0.0 54 | } 55 | 56 | vec3 color = vec3(y*.8, y*.1, y*1.); 57 | 58 | float pct = plot(st,y); 59 | color = (1.0-pct)*color+pct*vec3(0.7,.7,0.9); 60 | 61 | gl_FragColor = vec4(color,1.0); 62 | } 63 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-show/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vec4 positionVec4 = vec4(aPosition, 1.0); 7 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 8 | gl_Position = positionVec4; 9 | } 10 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-show/sketch.js: -------------------------------------------------------------------------------- 1 | // https://thebookofshaders.com/05 2 | 3 | let gradiant; 4 | 5 | function preload() { 6 | // load the shader definitions from files 7 | gradiant = loadShader('shader.vert', 'shader.frag'); 8 | } 9 | 10 | function setup() { 11 | createCanvas(windowWidth, windowHeight, WEBGL); 12 | pixelDensity(1) 13 | // use the shader 14 | shader(gradiant); 15 | noStroke(); 16 | //gradiant.setUniform('w', windowWidth) 17 | gradiant.setUniform('w', windowWidth) 18 | gradiant.setUniform('h', windowHeight) 19 | 20 | 21 | } 22 | 23 | function draw() { 24 | background(0) 25 | gradiant.setUniform('u_time', millis()/1000) 26 | gradiant.setUniform('mouseX', mouseX / windowWidth) 27 | gradiant.setUniform('mouseY', mouseY / windowHeight) 28 | rect(0, 0, windowWidth, windowHeight) 29 | } 30 | 31 | function windowResized() { 32 | resizeCanvas(windowWidth, windowHeight) 33 | gradiant.setUniform('w', windowWidth) 34 | gradiant.setUniform('h', windowHeight) 35 | } 36 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-sin00/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-sin00/shader.frag: -------------------------------------------------------------------------------- 1 | // Author: Inigo Quiles 2 | // Title: Expo 3 | 4 | 5 | precision mediump float; 6 | varying vec2 vPos; 7 | 8 | #define PI 3.14159265359 9 | 10 | uniform float w; 11 | uniform float h; 12 | uniform float mouseX; 13 | uniform float mouseY; 14 | uniform float u_time; 15 | 16 | float plot(vec2 st, float pct){ 17 | float w = mouseY*5.+.01; 18 | return smoothstep( pct- w, pct, st.y) - 19 | smoothstep( pct, pct+w, st.y); 20 | } 21 | 22 | void main() { 23 | vec2 u_resolution = vec2(w,h); 24 | vec2 st = gl_FragCoord.xy/u_resolution; 25 | 26 | 27 | float y = (cos(st.x * mouseX *100. ) +1. ) *.5 /st.x; 28 | 29 | vec3 color = vec3(y*.8, y*.1, y*1.); 30 | 31 | float pct = plot(st,y); 32 | color = (1.0-pct)*color+pct*vec3(0.7,.7,0.9); 33 | 34 | gl_FragColor = vec4(color,1.0); 35 | } 36 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-sin00/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vec4 positionVec4 = vec4(aPosition, 1.0); 7 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 8 | gl_Position = positionVec4; 9 | } 10 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-sin00/sketch.js: -------------------------------------------------------------------------------- 1 | // https://thebookofshaders.com/05 2 | 3 | let gradiant; 4 | 5 | function preload() { 6 | // load the shader definitions from files 7 | gradiant = loadShader('shader.vert', 'shader.frag'); 8 | } 9 | 10 | function setup() { 11 | createCanvas(windowWidth, windowHeight, WEBGL); 12 | // use the shader 13 | shader(gradiant); 14 | noStroke(); 15 | //gradiant.setUniform('w', windowWidth) 16 | gradiant.setUniform('w', windowWidth) 17 | gradiant.setUniform('h', windowHeight) 18 | 19 | 20 | } 21 | 22 | function draw() { 23 | background(0) 24 | gradiant.setUniform('mouseX', mouseX / windowWidth) 25 | gradiant.setUniform('mouseY', mouseY / windowHeight) 26 | rect(0, 0, windowWidth, windowHeight) 27 | } 28 | 29 | function windowResized() { 30 | resizeCanvas(windowWidth, windowHeight) 31 | gradiant.setUniform('w', windowWidth) 32 | gradiant.setUniform('h', windowHeight) 33 | } 34 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-sin01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-sin01/shader.frag: -------------------------------------------------------------------------------- 1 | // Author: Inigo Quiles 2 | // Title: Expo 3 | 4 | 5 | precision mediump float; 6 | varying vec2 vPos; 7 | 8 | #define PI 3.14159265359 9 | 10 | uniform float w; 11 | uniform float h; 12 | uniform float mouseX; 13 | uniform float mouseY; 14 | uniform float u_time; 15 | 16 | float plot(vec2 st, float pct){ 17 | float w = sin(u_time*PI)*.3+.6; 18 | return smoothstep( pct- w, pct, st.y) - 19 | smoothstep( pct, pct+w, st.y); 20 | } 21 | 22 | void main() { 23 | vec2 u_resolution = vec2(w,h); 24 | vec2 st = gl_FragCoord.xy/u_resolution; 25 | 26 | 27 | float y = fract((sin(st.x*8.*PI + mouseX*st.x*150.)*.5)) ; 28 | 29 | 30 | vec3 color = vec3(y*.8, y*.1, y*1.); 31 | 32 | float pct = plot(st,y); 33 | color = (1.0-pct)*color+pct*vec3(0.7,.7,0.9); 34 | 35 | gl_FragColor = vec4(color,1.0); 36 | } 37 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-sin01/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vec4 positionVec4 = vec4(aPosition, 1.0); 7 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 8 | gl_Position = positionVec4; 9 | } 10 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-sin01/sketch.js: -------------------------------------------------------------------------------- 1 | // https://thebookofshaders.com/05 2 | 3 | let gradiant; 4 | 5 | function preload() { 6 | // load the shader definitions from files 7 | gradiant = loadShader('shader.vert', 'shader.frag'); 8 | } 9 | 10 | function setup() { 11 | createCanvas(windowWidth, windowHeight, WEBGL); 12 | pixelDensity(1) 13 | // use the shader 14 | shader(gradiant); 15 | noStroke(); 16 | //gradiant.setUniform('w', windowWidth) 17 | gradiant.setUniform('w', windowWidth) 18 | gradiant.setUniform('h', windowHeight) 19 | 20 | 21 | } 22 | 23 | function draw() { 24 | background(0) 25 | gradiant.setUniform('u_time', millis()/1000) 26 | gradiant.setUniform('mouseX', mouseX / windowWidth) 27 | gradiant.setUniform('mouseY', mouseY / windowHeight) 28 | rect(0, 0, windowWidth, windowHeight) 29 | } 30 | 31 | function windowResized() { 32 | resizeCanvas(windowWidth, windowHeight) 33 | gradiant.setUniform('w', windowWidth) 34 | gradiant.setUniform('h', windowHeight) 35 | } 36 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-smoothstep/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-smoothstep/shader.frag: -------------------------------------------------------------------------------- 1 | // Author: Inigo Quiles 2 | // Title: Expo 3 | 4 | 5 | precision mediump float; 6 | varying vec2 vPos; 7 | 8 | #define PI 3.14159265359 9 | 10 | uniform float w; 11 | uniform float h; 12 | uniform float mouseX; 13 | uniform float mouseY; 14 | uniform float u_time; 15 | 16 | float plot(vec2 st, float pct){ 17 | // float w = u_time; 18 | float w = .01; 19 | return smoothstep( pct-w, pct, st.y) - 20 | smoothstep( pct, pct+w, st.y); 21 | } 22 | 23 | void main() { 24 | 25 | vec2 u_resolution = vec2(w,h); 26 | vec2 st = gl_FragCoord.xy/u_resolution; 27 | 28 | // float y = smoothstep(mouseX, mouseY, st.x); 29 | float y =smoothstep(mouseX*.5,0.5,st.x) - smoothstep(0.5,mouseY*.5+.5,st.x); 30 | 31 | vec3 color = vec3(y); 32 | 33 | float pct = plot(st,y); 34 | color = (1.0-pct)*color+pct*vec3(0.8,.5,1.0); 35 | 36 | gl_FragColor = vec4(color,1.0); 37 | } 38 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-smoothstep/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vec4 positionVec4 = vec4(aPosition, 1.0); 7 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 8 | gl_Position = positionVec4; 9 | } 10 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-smoothstep/sketch.js: -------------------------------------------------------------------------------- 1 | // https://thebookofshaders.com/05 2 | 3 | let gradiant; 4 | 5 | function preload() { 6 | // load the shader definitions from files 7 | gradiant = loadShader('shader.vert', 'shader.frag'); 8 | } 9 | 10 | function setup() { 11 | createCanvas(windowWidth, windowHeight, WEBGL); 12 | pixelDensity(1) 13 | // use the shader 14 | shader(gradiant); 15 | noStroke(); 16 | //gradiant.setUniform('w', windowWidth) 17 | gradiant.setUniform('w', windowWidth) 18 | gradiant.setUniform('h', windowHeight) 19 | 20 | 21 | } 22 | 23 | function draw() { 24 | background(0) 25 | gradiant.setUniform('u_time', sin(millis()/2000)*.09) 26 | gradiant.setUniform('mouseX', mouseX / windowWidth) 27 | gradiant.setUniform('mouseY', mouseY / windowHeight) 28 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 29 | } 30 | 31 | function windowResized() { 32 | resizeCanvas(windowWidth, windowHeight) 33 | gradiant.setUniform('w', windowWidth) 34 | gradiant.setUniform('h', windowHeight) 35 | } 36 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-step/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-step/shader.frag: -------------------------------------------------------------------------------- 1 | // Author: Inigo Quiles 2 | // Title: Expo 3 | 4 | 5 | precision mediump float; 6 | varying vec2 vPos; 7 | 8 | #define PI 3.14159265359 9 | 10 | uniform float w; 11 | uniform float h; 12 | uniform float mouseX; 13 | uniform float mouseY; 14 | uniform float u_time; 15 | 16 | float plot(vec2 st, float pct){ 17 | float w = mouseY; 18 | return smoothstep( pct-w, pct, st.y) - 19 | smoothstep( pct, pct+w, st.y); 20 | } 21 | 22 | void main() { 23 | 24 | vec2 u_resolution = vec2(w,h); 25 | vec2 st = gl_FragCoord.xy/u_resolution; 26 | 27 | float y = step(mouseX, st.x); 28 | 29 | 30 | vec3 color = vec3(y); 31 | 32 | float pct = plot(st,y); 33 | color = (1.0-pct)*color+pct*vec3(0.8,.5,1.0); 34 | 35 | gl_FragColor = vec4(color,1.0); 36 | } 37 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-step/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vec4 positionVec4 = vec4(aPosition, 1.0); 7 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 8 | gl_Position = positionVec4; 9 | } 10 | -------------------------------------------------------------------------------- /Basics_bos/bos-shader-gradiant-step/sketch.js: -------------------------------------------------------------------------------- 1 | // https://thebookofshaders.com/05 2 | 3 | let gradiant; 4 | 5 | function preload() { 6 | // load the shader definitions from files 7 | gradiant = loadShader('shader.vert', 'shader.frag'); 8 | } 9 | 10 | function setup() { 11 | createCanvas(windowWidth, windowHeight, WEBGL); 12 | pixelDensity(1) 13 | // use the shader 14 | shader(gradiant); 15 | noStroke(); 16 | //gradiant.setUniform('w', windowWidth) 17 | gradiant.setUniform('w', windowWidth) 18 | gradiant.setUniform('h', windowHeight) 19 | 20 | 21 | } 22 | 23 | function draw() { 24 | background(0) 25 | gradiant.setUniform('mouseX', mouseX / windowWidth) 26 | gradiant.setUniform('mouseY', mouseY / windowHeight) 27 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 28 | } 29 | 30 | function windowResized() { 31 | resizeCanvas(windowWidth, windowHeight) 32 | gradiant.setUniform('w', windowWidth) 33 | gradiant.setUniform('h', windowHeight) 34 | } 35 | -------------------------------------------------------------------------------- /IQ-radial-FBM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /IQ-radial-FBM/shader.frag: -------------------------------------------------------------------------------- 1 | //https://www.shadertoy.com/view/lsfGRr 2 | 3 | precision highp float; 4 | varying vec2 vPos; 5 | uniform float w; 6 | uniform float h; 7 | uniform float u_time; 8 | uniform vec2 u_mouse; 9 | 10 | 11 | const mat2 m = mat2( 0.80, 0.60, -0.60, 0.80 ); 12 | 13 | float hash( float n ) 14 | { 15 | return fract(sin(n)*43758.5453); 16 | } 17 | 18 | float noise( in vec2 x ) 19 | { 20 | vec2 p = floor(x); 21 | vec2 f = fract(x); 22 | 23 | f = f*f*(3.0-2.0*f); 24 | 25 | float n = p.x + p.y*57.0; 26 | 27 | return mix(mix( hash(n+ 0.0), hash(n+ 1.0),f.x), 28 | mix( hash(n+ 57.0), hash(n+ 58.0),f.x),f.y); 29 | } 30 | 31 | float fbm( vec2 p ) 32 | { 33 | float f = 0.0; 34 | 35 | f += 0.50000*noise( p ); p = m*p*2.02; 36 | f += 0.25000*noise( p ); p = m*p*2.03; 37 | f += 0.12500*noise( p ); p = m*p*2.01; 38 | f += 0.06250*noise( p ); p = m*p*2.04; 39 | f += 0.03125*noise( p ); 40 | 41 | return f/0.984375; 42 | } 43 | 44 | float length2( vec2 p ) 45 | { 46 | vec2 q = p*p*p*p; 47 | return pow( q.x + q.y, 1.0/4.0 ); 48 | } 49 | 50 | 51 | void main() { 52 | vec2 u_resolution = vec2(w,h); 53 | 54 | 55 | vec2 q = gl_FragCoord.xy/u_resolution.xy*.5; 56 | vec2 p = -1.0 + 2.0 * q; 57 | p.x *= u_resolution.x/u_resolution.y; 58 | 59 | 60 | 61 | 62 | float r = length( p * 0.75); 63 | float a = atan( p.y, p.x ); 64 | 65 | 66 | 67 | vec3 col = vec3(0.64,0.25,0 ); 68 | 69 | float f = fbm( 7.0*p ); 70 | col = mix( col, vec3(0.83,0.53,0.21), f ); 71 | 72 | float n = noise(vec2(cos(a)+ u_time*0.04, sin(a) + u_time*0.025 ))*( length(u_mouse.x))*30.; 73 | a += n *fbm( p ); 74 | 75 | 76 | // white artefacts 77 | f = smoothstep( 0.3, 1.0, fbm( vec2(cos(a)*7.12345,6.28318*r) ) ); 78 | col = mix( col, vec3(1.0,.9,.17), f ); 79 | 80 | // black artefacts 81 | f = smoothstep( 0.4, 0.9, fbm( vec2(cos(a)*3.123, r) ) ); 82 | col *= 1.0-0.5*f; 83 | 84 | col *= 1.0-0.25*smoothstep( 0.6,0.8,r ); 85 | 86 | // reflection (size1 / size2) 87 | f = 1.0-smoothstep( 0.1, 0.8, length2( mat2(0.6,0.8,-0.8,0.6)*(p-vec2(0.0,0.05) )*vec2(1.50,1.0)) ); 88 | col += vec3(1.0,0.9,0.9)*f*0.815; 89 | 90 | //col *= vec3(0.8+0.2*cos(r*a)); 91 | 92 | f = 1.0-smoothstep( 0.2, 0.25, r ); 93 | //col = mix( col, vec3(0.0), f ); 94 | 95 | f = smoothstep( 0.79, 0.82, r ); 96 | col = mix( col, vec3(1.0), f ); 97 | 98 | col *= 0.5 + 0.5*pow(16.0*q.x*q.y*(1.0-q.x)*(1.0-q.y),0.1); 99 | 100 | gl_FragColor = vec4( col, 1.0 ); 101 | } 102 | -------------------------------------------------------------------------------- /IQ-radial-FBM/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | varying vec2 vPos; 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vPos = (gl_Position = vec4(aPosition,1.0)).xy; 7 | } 8 | -------------------------------------------------------------------------------- /IQ-radial-FBM/sketch.js: -------------------------------------------------------------------------------- 1 | //https://www.shadertoy.com/view/lsfGRr 2 | let brownian; 3 | 4 | function preload() { 5 | // load the shader definitions from files 6 | brownian = loadShader('shader.vert', 'shader.frag'); 7 | } 8 | 9 | function setup() { 10 | createCanvas(windowWidth, windowHeight, WEBGL); 11 | // use the shader 12 | shader(brownian); 13 | noStroke(); 14 | 15 | brownian.setUniform('w', windowWidth) 16 | brownian.setUniform('h', windowHeight) 17 | 18 | } 19 | 20 | function draw() { 21 | background(0) 22 | 23 | brownian.setUniform("u_mouse", [ 24 | map(mouseX, 0, width, 0, 1.), 25 | map(mouseY, 0, height, 0, 1.)]) 26 | brownian.setUniform('u_time', millis()/ 1000) 27 | //mandel.setUniform('gamma', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000)))); 28 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 29 | } 30 | 31 | function windowResized() { 32 | resizeCanvas(windowWidth, windowHeight) 33 | brownian.setUniform('w', windowWidth) 34 | brownian.setUniform('h', windowHeight) 35 | 36 | } 37 | -------------------------------------------------------------------------------- /IQ-wobbly-sphere/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /IQ-wobbly-sphere/shader.frag: -------------------------------------------------------------------------------- 1 | // https://www.shadertoy.com/view/Xds3zN 2 | // https://www.shadertoy.com/view/lsKcDD 3 | 4 | precision highp float; 5 | varying vec2 vPos; 6 | uniform float w; 7 | uniform float h; 8 | uniform float u_time; 9 | uniform vec2 u_mouse; 10 | // 11 | // Testing Sebastian Aaltonen's soft shadow improvement 12 | // 13 | // The technique is based on estimating a better closest point in ray 14 | // at each step by triangulating from the previous march step. 15 | // 16 | // More info about the technique at slide 39 of this presentation: 17 | // https://www.dropbox.com/s/s9tzmyj0wqkymmz/Claybook_Simulation_Raytracing_GDC18.pptx?dl=0 18 | // 19 | // Traditional technique: http://iquilezles.org/www/articles/rmshadows/rmshadows.htm 20 | // 21 | // Go to lines 54 to compare both. 22 | 23 | 24 | // make this 1 is your machine is too slow 25 | #define AA 1 26 | // BASIC SHAPES 27 | //------------------------------------------------------------------ 28 | 29 | float sdPlane( vec3 p ) 30 | { 31 | return p.y; 32 | } 33 | 34 | float sdBox( vec3 p, vec3 b ) 35 | { 36 | vec3 d = abs(p) - b; 37 | return min(max(d.x,max(d.y,d.z)),0.0) + length(max(d,0.0)); 38 | } 39 | 40 | float sdSphere( vec3 p, float s ) 41 | { 42 | return length(p)-s; 43 | } 44 | 45 | float sdSphereWobbly1( vec3 p, float s ) 46 | { 47 | vec3 q =p; 48 | float rad = s + (sin(q.x*5. + u_time*3.5)*cos(q.y*2.4 + u_time*1.2)*sin(q.z*3.12 + u_time*0.43)*0.025 ); 49 | 50 | //vec3 51 | return length(p)-rad; 52 | } 53 | 54 | float sdSphereWobbly2( vec3 p, float s ) 55 | { 56 | vec3 q =p; 57 | float rad = s + (sin(q.x*25. + u_time)*sin(q.y*10. + u_time)*sin(q.z*2. + u_time)*0.035 ); 58 | 59 | //vec3 60 | return length(p)-rad; 61 | } 62 | 63 | float sdSphereWobbly3( vec3 p, float s ) 64 | { 65 | vec3 q =p; 66 | float rad = s + (sin(q.x*50. + u_time *0.5 )*sin(q.y*1. + u_time*1.7)*sin(q.z*1. + u_time*1.3)*0.035 ); 67 | 68 | //vec3 69 | return length(p)-rad; 70 | } 71 | 72 | // DEFINE THE SCENE 73 | //------------------------------------------------------------------ 74 | 75 | float map( in vec3 pos ) 76 | { 77 | 78 | float s1 = min( sdPlane( pos.xyz-vec3( 0.0,0.0, 0.0)), 79 | sdSphereWobbly1( pos.xyz-vec3( 0.0,0.35, 0.0), 0.25 ) ); 80 | 81 | float s2 = min( sdPlane( pos.xyz-vec3( 0.0,0.0, 0.0)), 82 | sdSphereWobbly2( pos.xyz-vec3( 1.5,0.35, 0.0), 0.25 ) ); 83 | 84 | 85 | float s3 = min( sdPlane( pos.xyz-vec3( 0.0,0.0, 0.0)), 86 | sdSphereWobbly3( pos.xyz-vec3( -1.5,0.35, 0.0), 0.25 ) ); 87 | 88 | float m1 = min (s1, s3); 89 | float m2 = min (s2, s3); 90 | 91 | return min( m1, m2 ); 92 | } 93 | 94 | //------------------------------------------------------------------ 95 | 96 | float calcSoftshadow( in vec3 ro, in vec3 rd, in float mint, in float tmax, int technique ) 97 | { 98 | float res = 1.0; 99 | float t = mint; 100 | float ph = 1e10; // big, such that y = 0 on the first iteration 101 | 102 | for( int i=0; i<16; i++ ) 103 | { 104 | float h = map( ro + rd*t ); 105 | 106 | // traditional technique 107 | if( technique==0 ) 108 | { 109 | res = min( res, 10.0*h/t ); 110 | } 111 | // improved technique 112 | else 113 | { 114 | // use this if you are getting artifact on the first iteration, or unroll the 115 | // first iteration out of the loop 116 | //float y = (i==0) ? 0.0 : h*h/(2.0*ph); 117 | 118 | float y = h*h/(2.0*ph); 119 | float d = sqrt(h*h-y*y); 120 | res = min( res, 10.0*d/max(0.0,t-y) ); 121 | ph = h; 122 | } 123 | 124 | t += h; 125 | 126 | if( res<0.0001 || t>tmax ) break; 127 | 128 | } 129 | return clamp( res, 0.0, 1.0 ); 130 | } 131 | 132 | vec3 calcNormal( in vec3 pos ) 133 | { 134 | vec2 e = vec2(1.0,-1.0)*0.5773*0.0005; 135 | return normalize( e.xyy*map( pos + e.xyy ) + 136 | e.yyx*map( pos + e.yyx ) + 137 | e.yxy*map( pos + e.yxy ) + 138 | e.xxx*map( pos + e.xxx ) ); 139 | } 140 | 141 | float castRay( in vec3 ro, in vec3 rd ) 142 | { 143 | float tmin = 1.0; 144 | float tmax = 20.0; 145 | 146 | #if 1 147 | // bounding volume 148 | float tp1 = (0.0-ro.y)/rd.y; if( tp1>0.0 ) tmax = min( tmax, tp1 ); 149 | float tp2 = (1.0-ro.y)/rd.y; if( tp2>0.0 ) { if( ro.y>1.0 ) tmin = max( tmin, tp2 ); 150 | else tmax = min( tmax, tp2 ); } 151 | #endif 152 | 153 | float t = tmin; 154 | for( int i=0; i<64; i++ ) 155 | { 156 | float precis = 0.0005*t; 157 | float res = map( ro+rd*t ); 158 | if( restmax ) break; 159 | t += res; 160 | } 161 | 162 | if( t>tmax ) t=-1.0; 163 | return t; 164 | } 165 | 166 | float calcAO( in vec3 pos, in vec3 nor ) 167 | { 168 | float occ = 0.0; 169 | float sca = 1.0; 170 | for( int i=0; i<5; i++ ) 171 | { 172 | float h = 0.001 + 0.15*float(i)/4.0; 173 | float d = map( pos + h*nor ); 174 | occ += (h-d)*sca; 175 | sca *= 0.95; 176 | } 177 | return clamp( 1.0 - 1.5*occ, 0.0, 1.0 ); 178 | } 179 | 180 | vec3 render( in vec3 ro, in vec3 rd, in int technique) 181 | { 182 | vec3 col = vec3(0.0); 183 | float t = castRay(ro,rd); 184 | 185 | if( t>-0.5 ) 186 | { 187 | vec3 pos = ro + t*rd; 188 | vec3 nor = calcNormal( pos ); 189 | 190 | // material 191 | vec3 mate = vec3(0.3); 192 | 193 | // key light 194 | vec3 lig = normalize( vec3(-0.1, 0.3, 0.6) ); 195 | vec3 hal = normalize( lig-rd ); 196 | float dif = clamp( dot( nor, lig ), 0.0, 1.0 ) * 197 | calcSoftshadow( pos, lig, 0.01, 3.0, technique ); 198 | 199 | float spe = pow( clamp( dot( nor, hal ), 0.0, 1.0 ),16.0)* 200 | dif * 201 | (0.04 + 0.96*pow( clamp(1.0+dot(hal,rd),0.0,1.0), 5.0 )); 202 | 203 | col = mate * 4.0*dif*vec3(1.00,0.80,0.85); 204 | col += 12.0*spe*vec3(1.00,0.85,0.8); 205 | 206 | // ambient light 207 | float occ = calcAO( pos, nor ); 208 | float amb = clamp( 0.5+0.5*nor.y, 0.0, 1.0 ); 209 | col += mate*amb*occ*vec3(0.0,0.08,0.1); 210 | 211 | // fog 212 | col *= exp( -0.0005*t*t*t ); 213 | } 214 | return col; 215 | } 216 | 217 | mat3 setCamera( in vec3 ro, in vec3 ta, float cr ) 218 | { 219 | vec3 cw = normalize(ta-ro); 220 | vec3 cp = vec3(sin(cr), cos(cr),0.0); 221 | vec3 cu = normalize( cross(cw,cp) ); 222 | vec3 cv = normalize( cross(cu,cw) ); 223 | return mat3( cu, cv, cw ); 224 | } 225 | 226 | void main( ) 227 | { 228 | vec2 u_resolution = vec2(w,h); 229 | vec2 q = gl_FragCoord.xy/u_resolution.xy*.5; 230 | vec2 p = -1.0 + 2.0 * q; 231 | // fix aspect ratio 232 | p.x *= u_resolution.x/u_resolution.y; 233 | 234 | // camera 235 | // float an = 12.0 - sin(0.25*u_time); 236 | float an = u_time* 0.025; 237 | vec3 ro = vec3( 3.0*cos(3.18*an), 1.0, -3.0*sin(2.18*an) ); 238 | vec3 ta = vec3( 0.0, -0.3, 0.0 ); 239 | // camera-to-world transformation 240 | mat3 ca = setCamera( ro, ta, 0.0 ); 241 | 242 | 243 | 244 | vec3 tot = vec3(0.0); 245 | 246 | 247 | // ray direction 248 | vec3 rd = ca * normalize( vec3(p.xy,2.0) ); 249 | 250 | // render 251 | vec3 col = render( ro, rd, 1); 252 | 253 | // gamma 254 | col = pow( col, vec3(0.9545) ); 255 | 256 | tot += col; 257 | 258 | 259 | 260 | gl_FragColor = vec4( tot, 1.0 ); 261 | } -------------------------------------------------------------------------------- /IQ-wobbly-sphere/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | varying vec2 vPos; 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vPos = (gl_Position = vec4(aPosition,1.0)).xy; 7 | } 8 | -------------------------------------------------------------------------------- /IQ-wobbly-sphere/sketch.js: -------------------------------------------------------------------------------- 1 | //https://thebookofshaders.com/13/?lan=fr 2 | 3 | let brownian; 4 | 5 | function preload() { 6 | // load the shader definitions from files 7 | brownian = loadShader('shader.vert', 'shader.frag'); 8 | } 9 | 10 | function setup() { 11 | createCanvas(windowWidth, windowHeight, WEBGL); 12 | // use the shader 13 | shader(brownian); 14 | noStroke(); 15 | 16 | brownian.setUniform('w', windowWidth) 17 | brownian.setUniform('h', windowHeight) 18 | 19 | } 20 | 21 | function draw() { 22 | background(0) 23 | 24 | brownian.setUniform("u_mouse", [ 25 | map(mouseX, 0, width, 0, 1.), 26 | map(mouseY, 0, height, 0, 1.)]) 27 | brownian.setUniform('u_time', millis()/ 1000) 28 | //mandel.setUniform('gamma', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000)))); 29 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 30 | } 31 | 32 | function windowResized() { 33 | resizeCanvas(windowWidth, windowHeight) 34 | brownian.setUniform('w', windowWidth) 35 | brownian.setUniform('h', windowHeight) 36 | 37 | } 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # p5js-shaders 2 | 3 | Experiments with [p5js](https://p5js.org/) on [shaders](https://en.wikipedia.org/wiki/Shader). 4 | 5 | Three great ressources from which examples here are inspired : 6 | - [The book of Shaders](https://thebookofshaders.com/) by [Patricio Gonzales Vivo](http://patriciogonzalezvivo.com/) 7 | - [p5js Shaders Examples](https://github.com/aferriss/p5jsShaderExamples) by [Adam Ferris](https://amf.fyi/) 8 | - [p5js shaders](https://itp-xstory.github.io/p5js-shaders/#/) 9 | 10 |

11 |

12 | 13 | ## p5js examples 14 | 15 | 16 | 17 | [Bloom on simple geometry](https://b2renger.github.io/p5js-shaders/shader-bloom/) 18 | 19 | 20 | 21 | [Mandelbort](https://b2renger.github.io/p5js-shaders/p5js-shader-example-00/) 22 | 23 | 24 | 25 | [All the blends in one shader](https://b2renger.github.io/p5js-shaders/shader-blends/) 26 | 27 | 28 | 29 | [Mask an offscreen](https://b2renger.github.io/p5js-shaders/shader-mask/index.html) 30 | 31 | 32 | 33 | [Mask an offscreen](https://b2renger.github.io/p5js-shaders/shader-lowfi_interferences/index.html) 34 | 35 | 36 | 37 | ## from Adam Ferris examples 38 | 39 | 40 | 41 | [vertex displacement from texture](https://b2renger.github.io/p5js-shaders/AF-shader-vertex-displacement/) 42 | 43 | 44 | ## from Inigo Quilez examples 45 | 46 | 47 | 48 | [radial FBM](https://b2renger.github.io/p5js-shaders/IQ-radial-FBM/) 49 | 50 | 51 | ## from the Twitter 52 | 53 | 54 | 55 | [landscape from @kasari39](https://b2renger.github.io/p5js-shaders/fromTwitter_wavy_landscape/index.html) 56 | 57 | 58 | 59 | [wobbly sphere from @nusan_fx](https://b2renger.github.io/p5js-shaders/fromTwitter_sphere_wobbly/index.html) 60 | 61 | 62 | 63 | [wavy reflection from @nusan_fx](https://b2renger.github.io/p5js-shaders/fromTwitter_sphere_wavy_reflection/index.html) 64 | 65 | 66 | 67 | ## from the Pixel Spirit Deck 68 | 69 | [pixel spirit deck recode](https://github.com/b2renger/p5js_pixel-spirit-deck_shaders) 70 | 71 | 72 | ## from the Book of shaders 73 | 74 | ### Recode from bos pages 75 | 76 | [book of shaders examplesrecode](Basics_bos/README.md) 77 | 78 | ### Examples loosely modified from the gallery 79 | 80 | 81 | 82 | [Brownian motion](https://b2renger.github.io/p5js-shaders/bos-shader-gallery-brownian-motion/) 83 | 84 | 85 | 86 | [Circlewave noise](https://b2renger.github.io/p5js-shaders/bos-shader-gallery-circlewave-noise/) 87 | 88 | 89 | 90 | [Metaballs 00](https://b2renger.github.io/p5js-shaders/bos-shader-gallery-metaballs-00/) 91 | 92 | 93 | 94 | [Metaballs 01](https://b2renger.github.io/p5js-shaders/bos-shader-gallery-metaballs-01/) 95 | 96 | 97 | 98 | [Turbulence with symetry](https://b2renger.github.io/p5js-shaders/bos-shader-gallery-reflected-turbulence/) 99 | 100 | 101 | 102 | [Terrain](https://b2renger.github.io/p5js-shaders/bos-shader-gallery-terrain/) 103 | 104 | 105 | ### Derived works from references presented in the book 106 | 107 | 108 | 109 | [Mod of Danguafer's work](https://b2renger.github.io/p5js-shaders/bos-shader-demo-danguafer/) -------------------------------------------------------------------------------- /bos-shader-demo-danguafer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /bos-shader-demo-danguafer/shader.frag: -------------------------------------------------------------------------------- 1 | // http://www.pouet.net/prod.php?which=57245 2 | // If you intend to reuse this shader, please add credits to 'Danilo Guanabara' 3 | precision mediump float; 4 | varying vec2 vPos; 5 | 6 | uniform float u_time; 7 | uniform float w; 8 | uniform float h; 9 | 10 | 11 | #define PI 3.14159265359 12 | 13 | 14 | void main(){ 15 | float t = u_time; 16 | vec2 u_resolution = vec2(w,h); 17 | vec2 r = u_resolution; 18 | vec3 c; 19 | float l,z=t; 20 | for(int i=0;i<3;i++) { 21 | vec2 uv,p=gl_FragCoord.xy/r; 22 | uv=p; 23 | p-=.5; 24 | p.x*=r.x/r.y; 25 | z+=.07; 26 | p.x = (2.*sin(p.x*PI*2.)); 27 | p.y = (2.*cos(p.y*PI*2.)); 28 | l=length(p); 29 | uv+=p/l*(sin(z*.5)+1.)*ceil(sin(l*11.-z*5.)); 30 | c[i]=.025/length((mod(uv,1.)-.5)); 31 | } 32 | gl_FragColor=vec4(c/l,t); 33 | } 34 | -------------------------------------------------------------------------------- /bos-shader-demo-danguafer/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vec4 positionVec4 = vec4(aPosition, 1.0); 7 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 8 | gl_Position = positionVec4; 9 | } 10 | -------------------------------------------------------------------------------- /bos-shader-demo-danguafer/sketch.js: -------------------------------------------------------------------------------- 1 | // https://thebookofshaders.com/05 2 | 3 | let gradiant; 4 | 5 | function preload() { 6 | // load the shader definitions from files 7 | gradiant = loadShader('shader.vert', 'shader.frag'); 8 | } 9 | 10 | function setup() { 11 | createCanvas(windowWidth, windowHeight, WEBGL); 12 | pixelDensity(1) 13 | // use the shader 14 | shader(gradiant); 15 | noStroke(); 16 | //gradiant.setUniform('w', windowWidth) 17 | gradiant.setUniform('w', windowWidth) 18 | gradiant.setUniform('h', windowHeight) 19 | 20 | 21 | } 22 | 23 | function draw() { 24 | background(0) 25 | gradiant.setUniform('u_time', millis()/1000) 26 | gradiant.setUniform('mouseX', mouseX / windowWidth) 27 | gradiant.setUniform('mouseY', mouseY / windowHeight) 28 | rect(0, 0, windowWidth, windowHeight) 29 | } 30 | 31 | function windowResized() { 32 | resizeCanvas(windowWidth, windowHeight) 33 | gradiant.setUniform('w', windowWidth) 34 | gradiant.setUniform('h', windowHeight) 35 | } 36 | -------------------------------------------------------------------------------- /bos-shader-gallery-brownian-motion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /bos-shader-gallery-brownian-motion/shader.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | varying vec2 vPos; 3 | uniform float w; 4 | uniform float h; 5 | uniform float u_time; 6 | 7 | float random (in vec2 _st) { 8 | return fract(sin(dot(_st.xy, 9 | vec2(12.9898,78.233)))* 10 | 43758.5453123); 11 | } 12 | 13 | // Based on Morgan McGuire @morgan3d 14 | // https://www.shadertoy.com/view/4dS3Wd 15 | float noise (in vec2 _st) { 16 | vec2 i = floor(_st); 17 | vec2 f = fract(_st); 18 | 19 | // Four corners in 2D of a tile 20 | float a = random(i); 21 | float b = random(i + vec2(1.0, 0.0)); 22 | float c = random(i + vec2(0.0, 1.0)); 23 | float d = random(i + vec2(1.0, 1.0)); 24 | 25 | vec2 u = f * f * (3.0 - 2.0 * f); 26 | 27 | return mix(a, b, u.x) + 28 | (c - a)* u.y * (1.0 - u.x) + 29 | (d - b) * u.x * u.y; 30 | } 31 | 32 | #define NUM_OCTAVES 5 33 | 34 | float fbm ( in vec2 _st) { 35 | float v = 0.0; 36 | float a = 0.5; 37 | vec2 shift = vec2(100.0); 38 | // Rotate to reduce axial bias 39 | mat2 rot = mat2(cos(0.5), sin(0.5), 40 | -sin(0.5), cos(0.50)); 41 | for (int i = 0; i < NUM_OCTAVES; ++i) { 42 | v += a * noise(_st); 43 | _st = rot * _st * 2.0 + shift; 44 | a *= 0.5; 45 | } 46 | return v; 47 | } 48 | 49 | void main() { 50 | vec2 u_resolution = vec2(w,h); 51 | vec2 st = gl_FragCoord.xy/u_resolution.xy*3.; 52 | // st += st * abs(sin(u_time*0.1)*3.0); 53 | vec3 color = vec3(0.0); 54 | 55 | vec2 q = vec2(0.); 56 | q.x = fbm( st + 0.00*u_time); 57 | q.y = fbm( st + vec2(1.0)); 58 | 59 | vec2 r = vec2(0.); 60 | r.x = fbm( st + 1.0*q + vec2(1.7,9.2)+ 0.15*u_time ); 61 | r.y = fbm( st + 1.0*q + vec2(8.3,2.8)+ 0.126*u_time); 62 | 63 | float f = fbm(st+r); 64 | 65 | color = mix(vec3(0.101961,0.619608,0.666667), 66 | vec3(0.666667,0.666667,0.498039), 67 | clamp((f*f)*4.0,0.0,1.0)); 68 | 69 | color = mix(color, 70 | vec3(0,0,0.164706), 71 | clamp(length(q),0.0,1.0)); 72 | 73 | color = mix(color, 74 | vec3(0.666667,1,1), 75 | clamp(length(r.x),0.0,1.0)); 76 | 77 | gl_FragColor = vec4((f*f*f+.6*f*f+.5*f)*color,1.); 78 | } 79 | -------------------------------------------------------------------------------- /bos-shader-gallery-brownian-motion/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | varying vec2 vPos; 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vPos = (gl_Position = vec4(aPosition,1.0)).xy; 7 | } 8 | -------------------------------------------------------------------------------- /bos-shader-gallery-brownian-motion/sketch.js: -------------------------------------------------------------------------------- 1 | //https://thebookofshaders.com/13/?lan=fr 2 | 3 | let brownian; 4 | 5 | function preload() { 6 | // load the shader definitions from files 7 | brownian = loadShader('shader.vert', 'shader.frag'); 8 | } 9 | 10 | function setup() { 11 | createCanvas(windowWidth, windowHeight, WEBGL); 12 | // use the shader 13 | shader(brownian); 14 | noStroke(); 15 | 16 | brownian.setUniform('w', windowWidth) 17 | brownian.setUniform('h', windowHeight) 18 | 19 | } 20 | 21 | function draw() { 22 | background(0) 23 | brownian.setUniform('u_time', millis()/ 1000) 24 | //mandel.setUniform('gamma', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000)))); 25 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 26 | } 27 | 28 | function windowResized() { 29 | resizeCanvas(windowWidth, windowHeight) 30 | brownian.setUniform('w', windowWidth) 31 | brownian.setUniform('h', windowHeight) 32 | 33 | } 34 | -------------------------------------------------------------------------------- /bos-shader-gallery-circlewave-noise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /bos-shader-gallery-circlewave-noise/shader.frag: -------------------------------------------------------------------------------- 1 | // Author @patriciogv - 2015 2 | // http://patriciogonzalezvivo.com 3 | 4 | // My own port of this processing code by @beesandbombs 5 | // https://dribbble.com/shots/1696376-Circle-wave 6 | 7 | #ifdef GL_ES 8 | precision mediump float; 9 | #endif 10 | 11 | uniform float w; 12 | uniform float h; 13 | uniform float mouseX; 14 | uniform float mouseY; 15 | uniform float u_time; 16 | 17 | vec2 random2(vec2 st){ 18 | st = vec2( dot(st,vec2(127.1,311.7)), 19 | dot(st,vec2(269.5,183.3)) ); 20 | return -1.0 + 2.0*fract(sin(st)*43758.5453123); 21 | } 22 | 23 | // Value Noise by Inigo Quilez - iq/2013 24 | // https://www.shadertoy.com/view/lsf3WH 25 | float noise(vec2 st) { 26 | vec2 i = floor(st); 27 | vec2 f = fract(st); 28 | 29 | vec2 u = f*f*(3.0-2.0*f); 30 | 31 | return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ), 32 | dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x), 33 | mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ), 34 | dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y); 35 | } 36 | 37 | mat2 rotate2d(float _angle){ 38 | return mat2(cos(_angle),-sin(_angle), 39 | sin(_angle),cos(_angle)); 40 | } 41 | 42 | float shape(vec2 st, float radius, float noiseF) { 43 | st = vec2(1.,1.00)-st; 44 | float r = length(st)*2.0; 45 | float a = atan(st.y,st.x); 46 | float m = abs(mod(a+u_time*2.,3.14*2.)-3.14)/3.6; 47 | float f = radius; 48 | m = noise(st+u_time )*noiseF; 49 | // a *= 1.+abs(atan(u_time*0.2))*.1; 50 | // a *= 1.+noise(st+u_time*0.1)*0.1; 51 | f += sin(a*50.)*noise(st+u_time*.2)*1.764; 52 | f += (sin(a*20.)*.1*pow(m,2.)); 53 | return 1.-smoothstep(f,f+0.071,r); 54 | } 55 | 56 | float shapeBorder(vec2 st, float radius, float width, float noiseF) { 57 | return shape(st,radius, noiseF)-shape(st,radius-width, noiseF); 58 | } 59 | 60 | void main() { 61 | vec2 u_resolution = vec2(w,h); 62 | vec2 st = gl_FragCoord.xy/u_resolution.xy; 63 | vec3 color = vec3(1.0) * shapeBorder(st,0.5,mouseX, sin(exp(cos(u_time*0.9))*15.)); 64 | vec3 color1 = vec3(1.) * shapeBorder(st,0.948,mouseY, sin(pow(8.0, sin(u_time*0.2)))*10.); 65 | 66 | gl_FragColor = vec4( 1.-(color+color1), 1.0 ); 67 | } 68 | -------------------------------------------------------------------------------- /bos-shader-gallery-circlewave-noise/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | varying vec2 vPos; 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vPos = (gl_Position = vec4(aPosition,1.0)).xy; 7 | } 8 | -------------------------------------------------------------------------------- /bos-shader-gallery-circlewave-noise/sketch.js: -------------------------------------------------------------------------------- 1 | // adapted from https://thebookofshaders.com/edit.php#11/circleWave-noise.frag 2 | 3 | let circleWave; 4 | 5 | function preload() { 6 | // load the shader definitions from files 7 | circleWave = loadShader('shader.vert', 'shader.frag'); 8 | } 9 | 10 | function setup() { 11 | createCanvas(windowWidth, windowHeight, WEBGL); 12 | // use the shader 13 | shader(circleWave); 14 | noStroke(); 15 | 16 | circleWave.setUniform('w', windowWidth) 17 | circleWave.setUniform('h', windowHeight) 18 | 19 | } 20 | 21 | function draw() { 22 | background(0) 23 | circleWave.setUniform('u_time', (millis() / 1000)*1) 24 | circleWave.setUniform('mouseX', map(mouseX, 0, windowWidth, 0, 1)) 25 | circleWave.setUniform('mouseY', map(mouseY, 0, windowHeight, 0, 1)) 26 | 27 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 28 | } 29 | 30 | function windowResized() { 31 | resizeCanvas(windowWidth, windowHeight) 32 | circleWave.setUniform('w', windowWidth) 33 | circleWave.setUniform('h', windowHeight) 34 | 35 | } 36 | -------------------------------------------------------------------------------- /bos-shader-gallery-metaballs-00/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /bos-shader-gallery-metaballs-00/shader.frag: -------------------------------------------------------------------------------- 1 | // based on : https://thebookofshaders.com/edit.php?log=160414040804 2 | // Author @kynd - 2016 3 | // Title: Distance field metaball 4 | // http://www.kynd.info 5 | 6 | #ifdef GL_ES 7 | precision mediump float; 8 | #endif 9 | 10 | uniform float w; 11 | uniform float h; 12 | uniform float mouseX; 13 | uniform float mouseY; 14 | 15 | uniform float u_time; 16 | 17 | float smoothen(float d1, float d2) { 18 | float k = mouseX; 19 | return -log(exp(-k * d1) + exp(-k * d2)) / k; 20 | } 21 | 22 | void main() { 23 | vec2 u_resolution = vec2(w,h); 24 | vec2 st = gl_FragCoord.xy/u_resolution.xy; 25 | vec2 p0 = vec2(sin(u_time) + 1., cos(3.0*u_time) + 1. + 0.); 26 | vec2 p1 = vec2(-cos(u_time)*sin(2.*u_time) + 1., 1.); 27 | vec2 p2 = vec2(1. , -cos(u_time) * 1. + 1.); 28 | vec2 p3 = vec2(cos(sin(2.*u_time)) + 0. , cos(u_time)*sin(3.*u_time) * 1. + 1.); 29 | float d = smoothen(distance(st, p0) * 15., distance(st, p1) * 15.); 30 | float d2 = smoothen(distance(st, p0) * 15.0, distance(st, p2) * 15.); 31 | float d3 = smoothen(distance(st, p1) * 15.0, distance(st, p2) * 15.); 32 | float d4 = smoothen(distance(st, p3) * 15.0, distance(st, p2) * 15.); 33 | float d5 = smoothen(distance(st, p0) * 15.0, distance(st, p3) * 15.); 34 | float d6 = smoothen(distance(st, p1) * 15.0, distance(st, p3) * 15.); 35 | float ae = 1. / u_resolution.y; 36 | vec3 color = vec3(smoothstep(mouseY, 0.520+ae, d)); 37 | vec3 color2 = vec3(smoothstep(mouseY, 0.520+ae, d2)); 38 | vec3 color3 = vec3(smoothstep(mouseY, 0.520+ae, d3)); 39 | vec3 color4 = vec3(smoothstep(mouseY, 0.520+ae, d4)); 40 | vec3 color5 = vec3(smoothstep(mouseY, 0.520+ae, d5)); 41 | vec3 color6 = vec3(smoothstep(mouseY, 0.520+ae, d6)); 42 | gl_FragColor = vec4(color+color2+ color3 + color4 + color5 + color6, 1.0); 43 | } 44 | -------------------------------------------------------------------------------- /bos-shader-gallery-metaballs-00/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | varying vec2 vPos; 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vPos = (gl_Position = vec4(aPosition,1.0)).xy; 7 | } 8 | -------------------------------------------------------------------------------- /bos-shader-gallery-metaballs-00/sketch.js: -------------------------------------------------------------------------------- 1 | // adapted from https://thebookofshaders.com/edit.php?log=160414040804 2 | let meta; 3 | 4 | function preload() { 5 | // load the shader definitions from files 6 | meta = loadShader('shader.vert', 'shader.frag'); 7 | } 8 | 9 | function setup() { 10 | createCanvas(windowWidth, windowHeight, WEBGL); 11 | // use the shader 12 | shader(meta); 13 | noStroke(); 14 | 15 | meta.setUniform('w', windowWidth) 16 | meta.setUniform('h', windowHeight) 17 | 18 | } 19 | 20 | function draw() { 21 | background(0) 22 | meta.setUniform('u_time', (millis() / 1000)*1) 23 | meta.setUniform('mouseX', map(mouseX, 0, windowWidth, 0.1, 0.5)) 24 | meta.setUniform('mouseY', map(mouseY, 0, windowHeight, 10., 0.81)) 25 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 26 | } 27 | 28 | function windowResized() { 29 | resizeCanvas(windowWidth, windowHeight) 30 | meta.setUniform('w', windowWidth) 31 | meta.setUniform('h', windowHeight) 32 | 33 | } 34 | -------------------------------------------------------------------------------- /bos-shader-gallery-metaballs-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /bos-shader-gallery-metaballs-01/shader.frag: -------------------------------------------------------------------------------- 1 | // Author: @patriciogv - 2015 2 | // Title: Metaballs 3 | 4 | #ifdef GL_ES 5 | precision mediump float; 6 | #endif 7 | 8 | uniform float w; 9 | uniform float h; 10 | uniform float mouseX; 11 | uniform float mouseY; 12 | uniform float u_time; 13 | 14 | vec2 random2( vec2 p ) { 15 | return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453); 16 | } 17 | 18 | void main() { 19 | vec2 u_resolution = vec2(w,h); 20 | vec2 st = gl_FragCoord.xy/u_resolution.xy; 21 | st.x *= u_resolution.x/u_resolution.y; 22 | vec3 color = vec3(.0); 23 | 24 | // Scale 25 | st *= mouseX; 26 | 27 | // Tile the space 28 | vec2 i_st = floor(st); 29 | vec2 f_st = fract(st); 30 | 31 | float m_dist = mouseY; // minimun distance 32 | for (int j= -1; j <= 1; j++ ) { 33 | for (int i= -1; i <= 1; i++ ) { 34 | // Neighbor place in the grid 35 | vec2 neighbor = vec2(float(i),float(j)); 36 | 37 | // Random position from current + neighbor place in the grid 38 | vec2 offset = random2(i_st + neighbor); 39 | 40 | // Animate the offset 41 | offset = 0.5 + 0.5*sin(u_time + 6.2831*offset); 42 | 43 | // Position of the cell 44 | vec2 pos = neighbor + offset - f_st; 45 | 46 | // Cell distance 47 | float dist = length(pos); 48 | 49 | // Metaball it! 50 | m_dist = min(m_dist, m_dist*dist); 51 | } 52 | } 53 | 54 | // Draw cells 55 | color += step(0.076, m_dist); 56 | 57 | gl_FragColor = vec4(color,1.0); 58 | } 59 | -------------------------------------------------------------------------------- /bos-shader-gallery-metaballs-01/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | varying vec2 vPos; 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vPos = (gl_Position = vec4(aPosition,1.0)).xy; 7 | } 8 | -------------------------------------------------------------------------------- /bos-shader-gallery-metaballs-01/sketch.js: -------------------------------------------------------------------------------- 1 | // adapted from https://thebookofshaders.com/edit.php#12/metaballs.frag 2 | 3 | let meta; 4 | 5 | function preload() { 6 | // load the shader definitions from files 7 | meta = loadShader('shader.vert', 'shader.frag'); 8 | } 9 | 10 | function setup() { 11 | createCanvas(windowWidth, windowHeight, WEBGL); 12 | // use the shader 13 | shader(meta); 14 | noStroke(); 15 | 16 | meta.setUniform('w', windowWidth) 17 | meta.setUniform('h', windowHeight) 18 | 19 | } 20 | 21 | function draw() { 22 | background(0) 23 | meta.setUniform('u_time', (millis() / 2000)*1) 24 | meta.setUniform('mouseX', map(mouseX, 0, windowWidth, 0.1, 50)) 25 | meta.setUniform('mouseY', map(mouseY, 0, windowHeight, 1, 0.1)) 26 | //mandel.setUniform('gamma', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000)))); 27 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 28 | } 29 | 30 | function windowResized() { 31 | resizeCanvas(windowWidth, windowHeight) 32 | meta.setUniform('w', windowWidth) 33 | meta.setUniform('h', windowHeight) 34 | 35 | } 36 | -------------------------------------------------------------------------------- /bos-shader-gallery-reflected-turbulence/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /bos-shader-gallery-reflected-turbulence/shader.frag: -------------------------------------------------------------------------------- 1 | // Author @kyndinfo - 2016 2 | // http://www.kynd.info 3 | // Title: Reflected turbulence 4 | 5 | #ifdef GL_ES 6 | precision mediump float; 7 | #endif 8 | 9 | uniform float w; 10 | uniform float h; 11 | 12 | uniform float mouseX; 13 | uniform float mouseY; 14 | 15 | uniform float u_time; 16 | 17 | vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } 18 | vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } 19 | vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); } 20 | 21 | float snoise(vec2 v) { 22 | const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0 23 | 0.366025403784439, // 0.5*(sqrt(3.0)-1.0) 24 | -0.577350269189626, // -1.0 + 2.0 * C.x 25 | 0.024390243902439); // 1.0 / 41.0 26 | vec2 i = floor(v + dot(v, C.yy) ); 27 | vec2 x0 = v - i + dot(i, C.xx); 28 | vec2 i1; 29 | i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); 30 | vec4 x12 = x0.xyxy + C.xxzz; 31 | x12.xy -= i1; 32 | i = mod289(i); // Avoid truncation effects in permutation 33 | vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) 34 | + i.x + vec3(0.0, i1.x, 1.0 )); 35 | 36 | vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0); 37 | m = m*m ; 38 | m = m*m ; 39 | vec3 x = 2.0 * fract(p * C.www) - 1.0; 40 | vec3 h = abs(x) - 0.5; 41 | vec3 ox = floor(x + 0.5); 42 | vec3 a0 = x - ox; 43 | m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ); 44 | vec3 g; 45 | g.x = a0.x * x0.x + h.x * x0.y; 46 | g.yz = a0.yz * x12.xz + h.yz * x12.yw; 47 | return 130.0 * dot(m, g); 48 | } 49 | 50 | #define OCTAVES 6 51 | float turbulence(in vec2 st) { 52 | float value = 0.0; 53 | float amplitude = 0.70; 54 | for (int i = 0; i < OCTAVES; i++) { 55 | value += amplitude * abs(snoise(st)); 56 | st *= 2.; 57 | amplitude *= .5; 58 | } 59 | return value; 60 | } 61 | 62 | void main() { 63 | vec2 u_resolution = vec2(w,h); 64 | vec2 st = gl_FragCoord.xy/u_resolution.xy; 65 | //st.x *= u_resolution.x/u_resolution.y; 66 | st.x = (st.x > 1.0) ? st.x : 1.0 - st.x; // reflect if x > 0.5 67 | st.y = (st.y > 1.0) ? st.y : 1.0 - st.y; // reflect if y > 0.5 68 | st.x *= u_resolution.x/u_resolution.y; 69 | st.x += turbulence(st) * mouseX; // displace x with turbulence noise 70 | st.y += turbulence(st + vec2(1.0)) * mouseY; // displace x with turbulence noise 71 | float v = turbulence(st* u_time); 72 | gl_FragColor = vec4(vec3(v),1.0); 73 | } 74 | -------------------------------------------------------------------------------- /bos-shader-gallery-reflected-turbulence/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | varying vec2 vPos; 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vPos = (gl_Position = vec4(aPosition,1.0)).xy; 7 | } 8 | -------------------------------------------------------------------------------- /bos-shader-gallery-reflected-turbulence/sketch.js: -------------------------------------------------------------------------------- 1 | //https://thebookofshaders.com/edit.php?log=161127201905 2 | 3 | let turbulence; 4 | 5 | function preload() { 6 | // load the shader definitions from files 7 | turbulence = loadShader('shader.vert', 'shader.frag'); 8 | } 9 | 10 | function setup() { 11 | createCanvas(windowWidth, windowHeight, WEBGL); 12 | // use the shader 13 | shader(turbulence); 14 | noStroke(); 15 | turbulence.setUniform('u_time', random(10)) 16 | turbulence.setUniform('w', windowWidth) 17 | turbulence.setUniform('h', windowHeight) 18 | 19 | } 20 | 21 | function draw() { 22 | background(0) 23 | 24 | turbulence.setUniform('mouseX', 0.1+ mouseX/windowWidth) 25 | turbulence.setUniform('mouseY', 0.1+ mouseY/windowHeight) 26 | 27 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 28 | } 29 | 30 | function mouseReleased(){ 31 | turbulence.setUniform('u_time',random(10)) 32 | } 33 | 34 | function windowResized() { 35 | resizeCanvas(windowWidth, windowHeight) 36 | turbulence.setUniform('w', windowWidth) 37 | turbulence.setUniform('h', windowHeight) 38 | 39 | } 40 | -------------------------------------------------------------------------------- /bos-shader-gallery-terrain/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /bos-shader-gallery-terrain/shader.frag: -------------------------------------------------------------------------------- 1 | // Author @kyndinfo - 2016 2 | // http://www.kynd.info 3 | // Title: Terrain 4 | 5 | #ifdef GL_ES 6 | precision mediump float; 7 | #endif 8 | 9 | uniform float w; 10 | uniform float h; 11 | uniform float mouseX; 12 | uniform float mouseY; 13 | 14 | uniform float u_time; 15 | 16 | vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } 17 | vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } 18 | vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); } 19 | 20 | float random (in vec2 st) { 21 | return fract(sin(dot(st.xy, 22 | vec2(12.9898,78.233))) 23 | * 43758.5453123); 24 | } 25 | 26 | float snoise(vec2 v) { 27 | const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0 28 | 0.366025403784439, // 0.5*(sqrt(3.0)-1.0) 29 | -0.577350269189626, // -1.0 + 2.0 * C.x 30 | 0.024390243902439); // 1.0 / 41.0 31 | vec2 i = floor(v + dot(v, C.yy) ); 32 | vec2 x0 = v - i + dot(i, C.xx); 33 | vec2 i1; 34 | i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); 35 | vec4 x12 = x0.xyxy + C.xxzz; 36 | x12.xy -= i1; 37 | i = mod289(i); // Avoid truncation effects in permutation 38 | vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) 39 | + i.x + vec3(0.0, i1.x, 1.0 )); 40 | 41 | vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0); 42 | m = m*m ; 43 | m = m*m ; 44 | vec3 x = 2.0 * fract(p * C.www) - 1.0; 45 | vec3 h = abs(x) - 0.5; 46 | vec3 ox = floor(x + 0.5); 47 | vec3 a0 = x - ox; 48 | m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ); 49 | vec3 g; 50 | g.x = a0.x * x0.x + h.x * x0.y; 51 | g.yz = a0.yz * x12.xz + h.yz * x12.yw; 52 | return 130.0 * dot(m, g); 53 | } 54 | 55 | float level(vec2 st) { 56 | float n = 0.0; 57 | for (float i = 1.0; i < 8.0; i ++) { 58 | float m = pow(2.0, i); 59 | n += snoise(st * m) * (1.0 / m); 60 | } 61 | return n * 0.5 + 0.5; 62 | } 63 | 64 | vec3 normal(vec2 st) { 65 | float d = 0.0001; 66 | float l0 = level(st); 67 | float l1 = level(st + vec2(d, 0.0)); // slightly offset the x-coord 68 | float l2 = level(st + vec2(0.0, d)); // slightly offset the y-coord 69 | // return normalized vector perpendicular to the surface using the noise values as the elevation of these points 70 | return normalize(vec3(-(l1 - l0), -(l2 - l0), d)); 71 | } 72 | 73 | //https://en.wikipedia.org/wiki/Phong_reflection_model 74 | vec3 phong(vec2 st, vec3 normal, vec3 lightPos) { 75 | vec3 lightDir = normalize(vec3(lightPos - vec3(st, 0.0))); 76 | float diffuse = max(0.0, dot(normal, lightDir)); 77 | vec3 vReflection = normalize(reflect(-lightDir, normal)); 78 | float specular = pow(max(0.0, dot(normal, vReflection)), 8.0); 79 | vec3 ambientColor = vec3(0.200,0.131,0.112); 80 | vec3 diffuseColor = vec3(0.500,0.456,0.000); 81 | return min(vec3(1.0), ambientColor + diffuseColor * diffuse + specular); 82 | } 83 | 84 | void main() { 85 | vec2 u_resolution = vec2(w,h); 86 | vec2 st = gl_FragCoord.xy / u_resolution.xy; 87 | st.x *= u_resolution.x / u_resolution.y; 88 | float t = u_time; 89 | vec3 col = phong(st, normal(st), vec3(mouseX, mouseY, u_time)); 90 | // water if the elevation is less than a threshold 91 | float n = level(st); 92 | if (n < 0.080) {col = vec3(0.0, 0.0, 0.2);} 93 | gl_FragColor = vec4(col, 1.0); 94 | } 95 | -------------------------------------------------------------------------------- /bos-shader-gallery-terrain/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | varying vec2 vPos; 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vPos = (gl_Position = vec4(aPosition,1.0)).xy; 7 | } 8 | -------------------------------------------------------------------------------- /bos-shader-gallery-terrain/sketch.js: -------------------------------------------------------------------------------- 1 | // adapted from https://thebookofshaders.com/edit.php?log=161127202429 2 | 3 | let terrain; 4 | 5 | function preload() { 6 | // load the shader definitions from files 7 | terrain = loadShader('shader.vert', 'shader.frag'); 8 | } 9 | 10 | function setup() { 11 | createCanvas(windowWidth, windowHeight, WEBGL); 12 | // use the shader 13 | shader(terrain); 14 | noStroke(); 15 | 16 | terrain.setUniform('w', windowWidth) 17 | terrain.setUniform('h', windowHeight) 18 | 19 | } 20 | 21 | function draw() { 22 | background(0) 23 | terrain.setUniform('u_time', sin(millis() / 2000)*1) 24 | terrain.setUniform('mouseX', map(mouseX, 0, windowWidth, 0, 4)) 25 | terrain.setUniform('mouseY', map(mouseY, 0, windowHeight, 2, 0)) 26 | //mandel.setUniform('gamma', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000)))); 27 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 28 | } 29 | 30 | function windowResized() { 31 | resizeCanvas(windowWidth, windowHeight) 32 | terrain.setUniform('w', windowWidth) 33 | terrain.setUniform('h', windowHeight) 34 | 35 | } 36 | -------------------------------------------------------------------------------- /fromTwitter_sphere_wavy_reflection/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /fromTwitter_sphere_wavy_reflection/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | //https://twitter.com/NuSan_fx/status/1250801601419382784 3 | precision mediump float; 4 | 5 | 6 | 7 | uniform vec2 u_resolution; 8 | uniform vec2 u_mouse; 9 | uniform float u_time; 10 | 11 | #define PI 3.1415926538 12 | 13 | void main(){ 14 | vec2 p=(gl_FragCoord.xy*2.-u_resolution.xy)/u_resolution.y*1.75; 15 | vec2 w=p; 16 | 17 | for(float i=4.;i<15.;++i){ 18 | w.xy+=sin(sin(w.yx*vec2(72./i,2)+u_time*3./i+i)*2.5+u_time*1.5/i)*vec2(.04,.03); 19 | } 20 | float g=abs(w.y + 0.45 )*.15-.0011; // white wave 21 | 22 | // wavy reflection 23 | 24 | if(p.y< -.25) { 25 | p=w; 26 | p.y-=sign(p.y)*.49; 27 | } 28 | 29 | gl_FragColor= 1. - vec4(.9,.9,.92,1)*(1.-max(sin(u_time) * 0.03 + 0.06,length(p)-.55)); 30 | // gl_FragColor=vec4(.013,.1,.12,1)*g/max(.01,length(p)-.35); 31 | 32 | } 33 | -------------------------------------------------------------------------------- /fromTwitter_sphere_wavy_reflection/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | // our vertex data 3 | attribute vec3 aPosition; 4 | 5 | // our texcoordinates 6 | attribute vec2 aTexCoord; 7 | 8 | // this is a variable that will be shared with the fragment shader 9 | // we will assign the attribute texcoords to the varying texcoords to move them from the vert shader to the frag shader 10 | // it can be called whatever you want but often people prefiv it with 'v' to indicate that it is a varying 11 | varying vec2 vTexCoord; 12 | 13 | void main() { 14 | 15 | // copy the texture coordinates 16 | vTexCoord = aTexCoord; 17 | 18 | // copy the position data into a vec4, using 1.0 as the w component 19 | vec4 positionVec4 = vec4(aPosition, 1.0); 20 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 21 | 22 | // send the vertex information on to the fragment shader 23 | gl_Position = positionVec4; 24 | } -------------------------------------------------------------------------------- /fromTwitter_sphere_wavy_reflection/sketch.js: -------------------------------------------------------------------------------- 1 | //https://patriciogonzalezvivo.github.io/PixelSpiritDeck/ 2 | let shad; 3 | 4 | function preload() { 5 | // load the shader definitions from files 6 | shad = loadShader('shader.vert', 'shader.frag'); 7 | } 8 | 9 | function setup() { 10 | createCanvas(windowWidth, windowHeight, WEBGL); 11 | pixelDensity(1) 12 | // use the shader 13 | shader(shad); 14 | noStroke(); 15 | 16 | shad.setUniform("u_resolution", [width, height]) 17 | 18 | 19 | } 20 | 21 | function draw() { 22 | background(0) 23 | 24 | shad.setUniform("u_mouse", [ 25 | map(mouseX, 0, width, 0, 1), 26 | map(mouseY, 0, height, 2, 0)]) 27 | shad.setUniform('u_time', millis()/ 1000) 28 | 29 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 30 | } 31 | 32 | function windowResized() { 33 | resizeCanvas(windowWidth, windowHeight) 34 | shad.setUniform("u_resolution", [width, height]) 35 | 36 | } 37 | -------------------------------------------------------------------------------- /fromTwitter_sphere_wobbly/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /fromTwitter_sphere_wobbly/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | //https://www.twitch.tv/videos/579385836 3 | precision mediump float; 4 | 5 | 6 | 7 | uniform vec2 u_resolution; 8 | uniform vec2 u_mouse; 9 | uniform float u_time; 10 | 11 | #define PI 3.1415926538 12 | 13 | float map(vec3 p) { 14 | vec3 q = p; 15 | float rad = 5. + (sin(q.x*4.*(u_mouse.x*2. -1.) + u_time*1.5) * 16 | cos(q.y*(u_mouse.y*2. -1.)*4. + u_time*1.2) * sin(q.z*1. + u_time*.53) )*0.35 ; 17 | 18 | float d = length(p)-rad; 19 | d = min(d, -p.y + 5.95); 20 | return d; 21 | } 22 | 23 | float sss(vec3 p, vec3 l, float d) { 24 | return smoothstep(0.,1.,map(p+l*d)/d); 25 | } 26 | 27 | 28 | void main(){ 29 | vec2 uv = vec2(gl_FragCoord.x / u_resolution.x, gl_FragCoord.y / u_resolution.y); 30 | uv -= 0.5; 31 | uv /= vec2(u_resolution.y / u_resolution.x, 1); 32 | 33 | vec3 s = vec3(0., -10., -20); 34 | vec3 t = vec3(0); 35 | vec3 cz = normalize(t-s); 36 | vec3 cx = normalize(cross(cz, vec3(.0,1.,0.))); 37 | vec3 cy = normalize(cross(cz, cx)); 38 | float fov = 1.0; 39 | vec3 r=normalize(cx*uv.x + cy*uv.y + fov*cz); 40 | 41 | vec3 p=s; 42 | 43 | for(int i=0; i<100; ++i) { 44 | float d=map(p); 45 | if(d<0.001) break; 46 | 47 | p+=r*d; 48 | } 49 | 50 | 51 | vec3 l=normalize(-vec3(1,1.3,2)); 52 | 53 | float sub = sss(p,l, 0.5); 54 | float fog = 1. - clamp(length(p-s) / 200., 0.0, 1.)*2.5; 55 | 56 | vec3 col = vec3(0.); 57 | col += sub * vec3(1., 0.28, 0.3); 58 | col += fog; 59 | gl_FragColor = vec4(col, 1.); 60 | 61 | } -------------------------------------------------------------------------------- /fromTwitter_sphere_wobbly/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | // our vertex data 3 | attribute vec3 aPosition; 4 | 5 | // our texcoordinates 6 | attribute vec2 aTexCoord; 7 | 8 | // this is a variable that will be shared with the fragment shader 9 | // we will assign the attribute texcoords to the varying texcoords to move them from the vert shader to the frag shader 10 | // it can be called whatever you want but often people prefiv it with 'v' to indicate that it is a varying 11 | varying vec2 vTexCoord; 12 | 13 | void main() { 14 | 15 | // copy the texture coordinates 16 | vTexCoord = aTexCoord; 17 | 18 | // copy the position data into a vec4, using 1.0 as the w component 19 | vec4 positionVec4 = vec4(aPosition, 1.0); 20 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 21 | 22 | // send the vertex information on to the fragment shader 23 | gl_Position = positionVec4; 24 | } -------------------------------------------------------------------------------- /fromTwitter_sphere_wobbly/sketch.js: -------------------------------------------------------------------------------- 1 | //https://patriciogonzalezvivo.github.io/PixelSpiritDeck/ 2 | let shad; 3 | 4 | function preload() { 5 | // load the shader definitions from files 6 | shad = loadShader('shader.vert', 'shader.frag'); 7 | } 8 | 9 | function setup() { 10 | createCanvas(windowWidth, windowHeight, WEBGL); 11 | pixelDensity(1) 12 | // use the shader 13 | shader(shad); 14 | noStroke(); 15 | 16 | shad.setUniform("u_resolution", [width, height]) 17 | 18 | 19 | } 20 | 21 | function draw() { 22 | background(0) 23 | 24 | shad.setUniform("u_mouse", [ 25 | map(mouseX, 0, width, 0, 1), 26 | map(mouseY, 0, height, 1, 0)]) 27 | shad.setUniform('u_time', millis()/ 1000) 28 | 29 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 30 | } 31 | 32 | function windowResized() { 33 | resizeCanvas(windowWidth, windowHeight) 34 | shad.setUniform("u_resolution", [width, height]) 35 | 36 | } 37 | -------------------------------------------------------------------------------- /fromTwitter_wavy_landscape/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /fromTwitter_wavy_landscape/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | //https://twitter.com/kasari39/status/1250327370084397062 3 | precision mediump float; 4 | 5 | 6 | 7 | uniform vec2 u_resolution; 8 | uniform vec2 u_mouse; 9 | uniform float u_time; 10 | 11 | #define PI 3.1415926538 12 | 13 | vec4 r,c,p,s; 14 | float z,d,u,v; 15 | 16 | void main(){ 17 | r=gl_FragCoord/8e2-.75; 18 | c.z-=u_time*2.; 19 | for(int i=0;i<11;i++){ 20 | p=c+r*z; 21 | u=u_mouse.x *.75 + 0.25; 22 | v=u_mouse.y *.5 ; 23 | 24 | d=p.y+5.; 25 | d+= sin(p.z*(u/=1.56)+cos(p.x*u+sin(p.z*v*PI*.25))); 26 | d+= sin(p.z*(u/=1.56)+cos(p.x*u+sin(p.z*v*PI*0.33))); 27 | d+= sin(p.z*(u/=1.56)+cos(p.x*u+sin(p.z*v))); 28 | s+=d*10.2; 29 | z+=d*1.95; 30 | } 31 | gl_FragColor=s/10e2*vec4(z*0.3,z*0.2, .15,1e2); 32 | } -------------------------------------------------------------------------------- /fromTwitter_wavy_landscape/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | // our vertex data 3 | attribute vec3 aPosition; 4 | 5 | // our texcoordinates 6 | attribute vec2 aTexCoord; 7 | 8 | // this is a variable that will be shared with the fragment shader 9 | // we will assign the attribute texcoords to the varying texcoords to move them from the vert shader to the frag shader 10 | // it can be called whatever you want but often people prefiv it with 'v' to indicate that it is a varying 11 | varying vec2 vTexCoord; 12 | 13 | void main() { 14 | 15 | // copy the texture coordinates 16 | vTexCoord = aTexCoord; 17 | 18 | // copy the position data into a vec4, using 1.0 as the w component 19 | vec4 positionVec4 = vec4(aPosition, 1.0); 20 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 21 | 22 | // send the vertex information on to the fragment shader 23 | gl_Position = positionVec4; 24 | } -------------------------------------------------------------------------------- /fromTwitter_wavy_landscape/sketch.js: -------------------------------------------------------------------------------- 1 | //https://patriciogonzalezvivo.github.io/PixelSpiritDeck/ 2 | let shad; 3 | 4 | function preload() { 5 | // load the shader definitions from files 6 | shad = loadShader('shader.vert', 'shader.frag'); 7 | } 8 | 9 | function setup() { 10 | createCanvas(windowWidth, windowHeight, WEBGL); 11 | pixelDensity(1) 12 | // use the shader 13 | shader(shad); 14 | noStroke(); 15 | 16 | shad.setUniform("u_resolution", [width, height]) 17 | 18 | 19 | } 20 | 21 | function draw() { 22 | background(0) 23 | 24 | shad.setUniform("u_mouse", [ 25 | map(mouseX, 0, width, 0, 1), 26 | map(mouseY, 0, height, 2, 0)]) 27 | shad.setUniform('u_time', millis()/ 1000) 28 | 29 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 30 | } 31 | 32 | function windowResized() { 33 | resizeCanvas(windowWidth, windowHeight) 34 | shad.setUniform("u_resolution", [width, height]) 35 | 36 | } 37 | -------------------------------------------------------------------------------- /gifs/blends.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/blends.gif -------------------------------------------------------------------------------- /gifs/bloom.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/bloom.gif -------------------------------------------------------------------------------- /gifs/brownian.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/brownian.gif -------------------------------------------------------------------------------- /gifs/circlewave.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/circlewave.gif -------------------------------------------------------------------------------- /gifs/color_easing.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/color_easing.gif -------------------------------------------------------------------------------- /gifs/danguafer.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/danguafer.gif -------------------------------------------------------------------------------- /gifs/displacement.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/displacement.gif -------------------------------------------------------------------------------- /gifs/landscape.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/landscape.gif -------------------------------------------------------------------------------- /gifs/lowfi_interferences.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/lowfi_interferences.gif -------------------------------------------------------------------------------- /gifs/mask.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/mask.gif -------------------------------------------------------------------------------- /gifs/metaballs00.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/metaballs00.gif -------------------------------------------------------------------------------- /gifs/metaballs01.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/metaballs01.gif -------------------------------------------------------------------------------- /gifs/radial_FBM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/radial_FBM.gif -------------------------------------------------------------------------------- /gifs/reflected-turbulence.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/reflected-turbulence.gif -------------------------------------------------------------------------------- /gifs/terrain.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/terrain.gif -------------------------------------------------------------------------------- /gifs/wavy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/wavy.gif -------------------------------------------------------------------------------- /gifs/wobbly.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/gifs/wobbly.gif -------------------------------------------------------------------------------- /images/bos-brownian-motion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/images/bos-brownian-motion.png -------------------------------------------------------------------------------- /images/bos-gradiant-pow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/images/bos-gradiant-pow.png -------------------------------------------------------------------------------- /images/bos-gradiant-sin00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/images/bos-gradiant-sin00.png -------------------------------------------------------------------------------- /images/bos-gradiant-sin01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/images/bos-gradiant-sin01.png -------------------------------------------------------------------------------- /images/bos-gradiant-smoothstep.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/images/bos-gradiant-smoothstep.png -------------------------------------------------------------------------------- /images/bos-gradiant-step.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/images/bos-gradiant-step.png -------------------------------------------------------------------------------- /images/bos-shader-example-00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/images/bos-shader-example-00.png -------------------------------------------------------------------------------- /images/p5js-shader-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/images/p5js-shader-example.png -------------------------------------------------------------------------------- /libs/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/libs/.DS_Store -------------------------------------------------------------------------------- /p5js-shader-example-00/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /p5js-shader-example-00/shader.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | varying vec2 vPos; 3 | uniform vec2 p; 4 | uniform float r; 5 | const int I = 500; 6 | 7 | void main() { 8 | vec2 c = p + vPos * r, z = c; 9 | float n = 0.0; 10 | for (int i = I; i > 0; i --) { 11 | if(z.x*z.x+z.y*z.y > 4.0) { 12 | n = float(i)/float(I); 13 | break; 14 | } 15 | z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c; 16 | } 17 | gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0); 18 | } 19 | -------------------------------------------------------------------------------- /p5js-shader-example-00/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | varying vec2 vPos; 3 | attribute vec3 aPosition; 4 | 5 | void main() { 6 | vPos = (gl_Position = vec4(aPosition,1.0)).xy; 7 | } 8 | -------------------------------------------------------------------------------- /p5js-shader-example-00/sketch.js: -------------------------------------------------------------------------------- 1 | let mandel; 2 | function preload() { 3 | // load the shader definitions from files 4 | mandel = loadShader('shader.vert', 'shader.frag'); 5 | } 6 | function setup() { 7 | createCanvas(windowWidth, windowHeight, WEBGL); 8 | // use the shader 9 | shader(mandel); 10 | noStroke(); 11 | mandel.setUniform('p', [-0.74364388703, 0.13182590421]); 12 | } 13 | 14 | function draw() { 15 | mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000)))); 16 | quad(-1, -1, 1, -1, 1, 1, -1, 1); 17 | } 18 | 19 | function windowResized(){ 20 | resizeCanvas(windowWidth,windowHeight) 21 | } 22 | -------------------------------------------------------------------------------- /shader-blends/blends.frag: -------------------------------------------------------------------------------- 1 | 2 | // Original shader code by ben 3 | // https://www.shadertoy.com/view/XdS3RW 4 | 5 | 6 | // License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. 7 | // 8 | // 25 of the layer blending modes from Photoshop. 9 | // 10 | // The ones I couldn't figure out are from Nvidia's advanced blend equations extension spec - 11 | // http://www.opengl.org/registry/specs/NV/blend_equation_advanced.txt 12 | // 13 | // ~bj.2013 14 | // 15 | 16 | 17 | // Ported to Processing by Raphaël de Courville 18 | // Improvements: 19 | // - added the opacity uniform 20 | // - added the option to switch between blend modes 21 | // - fixed artifacts due to out-of-bound values returned by blending funtions 22 | // Functions outside of main remain unchanged 23 | // 24 | 25 | // Transparency is not supported yet 26 | // Look at Adobe's W3C blending specs for an interesting reference 27 | // http://www.w3.org/TR/compositing-1/ 28 | 29 | 30 | #ifdef GL_ES 31 | precision mediump float; 32 | precision mediump int; 33 | #endif 34 | 35 | // texcoords from the vertex shader 36 | varying vec2 vTexCoord; 37 | // viewport resolution (in pixels) 38 | uniform vec2 sketchSize; 39 | 40 | // Textures to blend 41 | uniform sampler2D topLayer; // Source (top layer) 42 | uniform sampler2D lowLayer; // Destination (bottom layer) 43 | 44 | // Resolution of the textures 45 | uniform vec2 topLayerResolution; 46 | uniform vec2 lowLayerResolution; 47 | 48 | // Selected mode 49 | uniform int blendMode; 50 | 51 | // Opacity of the source layer 52 | uniform float blendAlpha; 53 | 54 | 55 | vec3 darken( vec3 s, vec3 d ) 56 | { 57 | return min(s, d); 58 | } 59 | 60 | vec3 multiply( vec3 s, vec3 d ) 61 | { 62 | return s*d; 63 | } 64 | 65 | vec3 colorBurn( vec3 s, vec3 d ) 66 | { 67 | return 1.0 - (1.0 - d) / s; 68 | } 69 | 70 | vec3 linearBurn( vec3 s, vec3 d ) 71 | { 72 | return s + d - 1.0; 73 | } 74 | 75 | vec3 darkerColor( vec3 s, vec3 d ) 76 | { 77 | return (s.x + s.y + s.z < d.x + d.y + d.z) ? s : d; 78 | } 79 | 80 | vec3 lighten( vec3 s, vec3 d ) 81 | { 82 | return max(s, d); 83 | } 84 | 85 | vec3 screen( vec3 s, vec3 d ) 86 | { 87 | return s + d - s * d; 88 | } 89 | 90 | vec3 colorDodge( vec3 s, vec3 d ) 91 | { 92 | return d / (1.0 - s); 93 | } 94 | 95 | vec3 linearDodge( vec3 s, vec3 d ) 96 | { 97 | return s + d; 98 | } 99 | 100 | vec3 lighterColor( vec3 s, vec3 d ) 101 | { 102 | return (s.x + s.y + s.z > d.x + d.y + d.z) ? s : d; 103 | } 104 | 105 | float overlay( float s, float d ) 106 | { 107 | return (d < 0.5) ? 2.0 * s * d : 1.0 - 2.0 * (1.0 - s) * (1.0 - d); 108 | } 109 | 110 | vec3 overlay( vec3 s, vec3 d ) 111 | { 112 | vec3 c; 113 | c.x = overlay(s.x, d.x); 114 | c.y = overlay(s.y, d.y); 115 | c.z = overlay(s.z, d.z); 116 | return c; 117 | } 118 | 119 | float softLight( float s, float d ) 120 | { 121 | return (s < 0.5) ? d - (1.0 - 2.0 * s) * d * (1.0 - d) 122 | : (d < 0.25) ? d + (2.0 * s - 1.0) * d * ((16.0 * d - 12.0) * d + 4.0) 123 | : d + (2.0 * s - 1.0) * (sqrt(d) - d); 124 | } 125 | 126 | vec3 softLight( vec3 s, vec3 d ) 127 | { 128 | vec3 c; 129 | c.x = softLight(s.x, d.x); 130 | c.y = softLight(s.y, d.y); 131 | c.z = softLight(s.z, d.z); 132 | return c; 133 | } 134 | 135 | float hardLight( float s, float d ) 136 | { 137 | return (s < 0.5) ? 2.0 * s * d : 1.0 - 2.0 * (1.0 - s) * (1.0 - d); 138 | } 139 | 140 | vec3 hardLight( vec3 s, vec3 d ) 141 | { 142 | vec3 c; 143 | c.x = hardLight(s.x, d.x); 144 | c.y = hardLight(s.y, d.y); 145 | c.z = hardLight(s.z, d.z); 146 | return c; 147 | } 148 | 149 | float vividLight( float s, float d ) 150 | { 151 | return (s < 0.5) ? 1.0 - (1.0 - d) / (2.0 * s) : d / (2.0 * (1.0 - s)); 152 | } 153 | 154 | vec3 vividLight( vec3 s, vec3 d ) 155 | { 156 | vec3 c; 157 | c.x = vividLight(s.x, d.x); 158 | c.y = vividLight(s.y, d.y); 159 | c.z = vividLight(s.z, d.z); 160 | return c; 161 | } 162 | 163 | vec3 linearLight( vec3 s, vec3 d ) 164 | { 165 | return 2.0 * s + d - 1.0; 166 | } 167 | 168 | float pinLight( float s, float d ) 169 | { 170 | return (2.0 * s - 1.0 > d) ? 2.0 * s - 1.0 : (s < 0.5 * d) ? 2.0 * s : d; 171 | } 172 | 173 | vec3 pinLight( vec3 s, vec3 d ) 174 | { 175 | vec3 c; 176 | c.x = pinLight(s.x, d.x); 177 | c.y = pinLight(s.y, d.y); 178 | c.z = pinLight(s.z, d.z); 179 | return c; 180 | } 181 | 182 | vec3 hardMix( vec3 s, vec3 d ) 183 | { 184 | return floor(s + d); 185 | } 186 | 187 | vec3 difference( vec3 s, vec3 d ) 188 | { 189 | return abs(d - s); 190 | } 191 | 192 | vec3 exclusion( vec3 s, vec3 d ) 193 | { 194 | return s + d - 2.0 * s * d; 195 | } 196 | 197 | vec3 subtract( vec3 s, vec3 d ) 198 | { 199 | return s - d; 200 | } 201 | 202 | vec3 divide( vec3 s, vec3 d ) 203 | { 204 | return s / d; 205 | } 206 | 207 | // rgb<-->hsv functions by Sam Hocevar 208 | // http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl 209 | vec3 rgb2hsv(vec3 c) 210 | { 211 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 212 | vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); 213 | vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); 214 | 215 | float d = q.x - min(q.w, q.y); 216 | float e = 1.0e-10; 217 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); 218 | } 219 | 220 | vec3 hsv2rgb(vec3 c) 221 | { 222 | vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); 223 | vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); 224 | return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); 225 | } 226 | 227 | vec3 hue( vec3 s, vec3 d ) 228 | { 229 | d = rgb2hsv(d); 230 | d.x = rgb2hsv(s).x; 231 | return hsv2rgb(d); 232 | } 233 | 234 | vec3 color( vec3 s, vec3 d ) 235 | { 236 | s = rgb2hsv(s); 237 | s.z = rgb2hsv(d).z; 238 | return hsv2rgb(s); 239 | } 240 | 241 | vec3 saturation( vec3 s, vec3 d ) 242 | { 243 | d = rgb2hsv(d); 244 | d.y = rgb2hsv(s).y; 245 | return hsv2rgb(d); 246 | } 247 | 248 | vec3 luminosity( vec3 s, vec3 d ) 249 | { 250 | float dLum = dot(d, vec3(0.3, 0.59, 0.11)); 251 | float sLum = dot(s, vec3(0.3, 0.59, 0.11)); 252 | float lum = sLum - dLum; 253 | vec3 c = d + lum; 254 | float minC = min(min(c.x, c.y), c.z); 255 | float maxC = max(max(c.x, c.y), c.z); 256 | if (minC < 0.0) return sLum + ((c - sLum) * sLum) / (sLum - minC); 257 | else if (maxC > 1.0) return sLum + ((c - sLum) * (1.0 - sLum)) / (maxC - sLum); 258 | else return c; 259 | } 260 | 261 | 262 | void main(void) 263 | { 264 | 265 | vec2 uv = vTexCoord; 266 | // the texture is loaded upside down and backwards by default so lets flip it 267 | uv.y = 1.0 - uv.y; 268 | 269 | vec3 s = texture2D(topLayer, uv ).rgb; 270 | vec3 d = texture2D(lowLayer, uv ).rgb; 271 | 272 | vec3 c = vec3(0.0); 273 | 274 | if (blendMode < 16) { 275 | if (blendMode < 8) { 276 | if (blendMode < 4) { 277 | if (blendMode < 2 ) { 278 | if (blendMode == 0) { 279 | // 0 280 | c = darken(s, d); 281 | } else { 282 | // 1 283 | c = multiply(s, d); 284 | } 285 | } else { 286 | if (blendMode == 2) { 287 | // 2 288 | c = colorBurn(s, d); 289 | } else { 290 | // 3 291 | c = linearBurn(s, d); 292 | } 293 | } 294 | } else { 295 | if (blendMode < 6) { 296 | if (blendMode == 4) { 297 | // 4 298 | c = darkerColor(s, d); 299 | } else { 300 | // 5 301 | c = lighten(s, d); 302 | } 303 | } else { 304 | if (blendMode == 6) { 305 | // 6 306 | c = screen(s, d); 307 | } else { 308 | // 7 309 | c = colorDodge(s, d); 310 | } 311 | } 312 | } 313 | } else { 314 | if (blendMode < 12) { 315 | if (blendMode < 10) { 316 | if (blendMode == 8) { 317 | // 8 318 | c = linearDodge(s, d); 319 | } else { 320 | // 9 321 | c = lighterColor(s, d); 322 | } 323 | } else { 324 | if (blendMode == 10) { 325 | // 10 326 | c = overlay(s, d); 327 | } else { 328 | // 11 329 | c = softLight(s, d); 330 | } 331 | } 332 | } else { 333 | if (blendMode < 14) { 334 | if (blendMode == 12) { 335 | // 12 336 | c = hardLight(s, d); 337 | } else { 338 | // 13 339 | c = vividLight(s, d); 340 | } 341 | } else { 342 | if (blendMode == 14) { 343 | // 14 344 | c = linearLight(s, d); 345 | } else { 346 | // 15 347 | c = pinLight(s, d); 348 | } 349 | } 350 | } 351 | } 352 | } else { 353 | if (blendMode < 24) { 354 | if (blendMode < 20) { 355 | if (blendMode < 18) { 356 | if (blendMode == 16) { 357 | // 16 358 | c = hardMix(s, d); 359 | } else { 360 | // 17 361 | c = difference(s, d); 362 | } 363 | } else { 364 | if (blendMode == 18) { 365 | // 18 366 | c = exclusion(s, d); 367 | } else { 368 | // 19 369 | c = subtract(s, d); 370 | } 371 | } 372 | } else { 373 | if (blendMode < 22) { 374 | if (blendMode == 20) { 375 | // 20 376 | c = divide(s, d); 377 | } else { 378 | // 21 379 | c = hue(s, d); 380 | } 381 | } else { 382 | if (blendMode == 22) { 383 | // 22 384 | c = color(s, d); 385 | } else { 386 | // 23 387 | c = saturation(s, d); 388 | } 389 | } 390 | } 391 | } else { 392 | // 24 393 | c = luminosity(s, d); 394 | } 395 | } 396 | 397 | // limit values to the [0.0,1.0] range 398 | c = clamp( c, 0.0, 1.0 ); 399 | 400 | // apply opacity 401 | vec3 pixelColor = mix( d.rgb, c.rgb, max( 0.0, blendAlpha ) ); 402 | 403 | gl_FragColor = vec4( pixelColor.rgb, 1.0 ); 404 | } 405 | -------------------------------------------------------------------------------- /shader-blends/blends.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | // our vertex data 3 | attribute vec3 aPosition; 4 | attribute vec2 aTexCoord; 5 | 6 | // we need our texcoords again 7 | varying vec2 vTexCoord; 8 | 9 | void main() { 10 | // copy the texcoords 11 | vTexCoord = aTexCoord; 12 | 13 | // copy the position data into a vec4, using 1.0 as the w component 14 | vec4 positionVec4 = vec4(aPosition, 1.0); 15 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 16 | 17 | // send the vertex information on to the fragment shader 18 | gl_Position = positionVec4; 19 | } -------------------------------------------------------------------------------- /shader-blends/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /shader-blends/sketch.js: -------------------------------------------------------------------------------- 1 | // a shader variable 2 | let blends; 3 | let blendOpacity = 1; 4 | // two Pgraphics objects to be blended 5 | let top_pg, low_pg; 6 | let blendType = 17; 7 | 8 | 9 | function preload() { 10 | blends = loadShader('blends.vert', 'blends.frag'); 11 | } 12 | 13 | function setup() { 14 | createCanvas(windowWidth, windowHeight, WEBGL); 15 | 16 | top_pg = createGraphics(width, height, WEBGL); 17 | low_pg = createGraphics(width, height, WEBGL); 18 | 19 | 20 | 21 | blends.setUniform("sketchSize", float(width), float(height)); 22 | // Pass the images to the shader 23 | blends.setUniform("topLayer", top_pg); 24 | blends.setUniform("lowLayer", low_pg); 25 | 26 | // Pass the resolution of the images to the shader 27 | blends.setUniform("topLayerResolution", float(width), float(height)); 28 | blends.setUniform("lowLayerResolution", float(width), float(height)); 29 | // You can set the blend mode using the name directly 30 | blends.setUniform("blendMode", BL_MULTIPLY); // LIGHTERCOLOR 31 | } 32 | 33 | function draw() { 34 | background(220); 35 | 36 | top_pg.background(0) 37 | top_pg.fill(255, 0, 255) 38 | top_pg.ellipse(0, 0, height * 0.4, height * 0.4) 39 | 40 | low_pg.background(0) 41 | low_pg.fill(255, 255, 0) 42 | low_pg.ellipse(mouseX - width * 0.5, mouseY - height * 0.5, 50, 50) 43 | 44 | 45 | blendOpacity = constrain(blendOpacity, 0, 1.5); 46 | blends.setUniform("blendAlpha", blendOpacity); 47 | blends.setUniform("blendMode", blendType); 48 | blends.setUniform("topLayer", top_pg); 49 | blends.setUniform("lowLayer", low_pg); 50 | 51 | shader(blends); 52 | // Draw the output of the shader onto a rectangle that covers the whole viewport 53 | // fill(0) 54 | rect(-width * 0.5, -height * 0.5, width, height); 55 | // Call resetShader() so that further geometry remains unaffected by the shader 56 | resetShader(); 57 | 58 | 59 | 60 | } 61 | 62 | function keyPressed() { 63 | 64 | if (key == 'a') { 65 | blendType -= 1 66 | } 67 | if (key == 'z') { 68 | blendType += 1 69 | } 70 | blendType = constrain(blendType, 0, 24) 71 | console.log(blendType); 72 | } 73 | 74 | function windowResized(){ 75 | resizeCanvas(windowWidth, windowHeight) 76 | } 77 | 78 | 79 | 80 | 81 | const BL_DARKEN = 0; 82 | const BL_MULTIPLY = 1; 83 | 84 | const BL_COLORBURN = 2; 85 | const BL_LINEARBURN = 3; 86 | const BL_DARKERCOLOR = 4; 87 | 88 | const BL_LIGHTEN = 5; 89 | const BL_SCREEN = 6; 90 | const BL_COLORDODGE = 7; 91 | const BL_LINEARDODGE = 8; 92 | const BL_LIGHTERCOLOR = 9; 93 | 94 | const BL_OVERLAY = 10; 95 | const BL_SOFTLIGHT = 11; 96 | const BL_HARDLIGHT = 12; 97 | const BL_VIVIDLIGHT = 13; 98 | const BL_LINEARLIGHT = 14; 99 | const BL_PINLIGHT = 15; 100 | const BL_HARDMIX = 16; 101 | 102 | const BL_DIFFERENCE = 17; 103 | const BL_EXCLUSION = 18; 104 | const BL_SUBSTRACT = 19; 105 | const BL_DIVIDE = 20; 106 | 107 | const BL_HUE = 21; 108 | const BL_COLOR = 22; 109 | const BL_SATURATION = 23; 110 | const BL_LUMINOSITY = 24; -------------------------------------------------------------------------------- /shader-bloom/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2renger/p5js-shaders/4fdbde758273de67c10d86e35047de63d5fc0719/shader-bloom/.DS_Store -------------------------------------------------------------------------------- /shader-bloom/base.vert: -------------------------------------------------------------------------------- 1 | // our vertex data 2 | attribute vec3 aPosition; 3 | attribute vec2 aTexCoord; 4 | 5 | // lets get texcoords just for fun! 6 | varying vec2 vTexCoord; 7 | 8 | void main() { 9 | // copy the texcoords 10 | vTexCoord = aTexCoord; 11 | 12 | // copy the position data into a vec4, using 1.0 as the w component 13 | vec4 positionVec4 = vec4(aPosition, 1.0); 14 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 15 | 16 | // send the vertex information on to the fragment shader 17 | gl_Position = positionVec4; 18 | } 19 | -------------------------------------------------------------------------------- /shader-bloom/bloom.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | // texcoords from the vertex shader 4 | varying vec2 vTexCoord; 5 | 6 | // our textures coming from p5 7 | uniform sampler2D tex0; 8 | uniform sampler2D tex1; 9 | 10 | // the mouse value between 0 and 1 11 | uniform float mouseX; 12 | 13 | void main() { 14 | 15 | vec2 uv = vTexCoord; 16 | // the texture is loaded upside down and backwards by default so lets flip it 17 | uv = 1.0 - uv; 18 | 19 | // get the camera and the blurred image as textures 20 | vec4 cam = texture2D(tex0, uv); 21 | vec4 blur = texture2D(tex1, uv); 22 | 23 | // calculate an average color for the blurred image 24 | // this is essentially the same as saying (blur.r + blur.g + blur.b) / 3.0; 25 | float avg = dot(blur.rgb, vec3(0.33333)); 26 | 27 | // mix the blur and camera together according to how bright the blurred image is 28 | // use the mouse to control the bloom 29 | vec4 bloom = mix(cam, blur, clamp(avg*(1.0 + mouseX), 0.0, 1.0)); 30 | 31 | gl_FragColor = bloom; 32 | } 33 | -------------------------------------------------------------------------------- /shader-bloom/blur.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | // texcoords from the vertex shader 4 | varying vec2 vTexCoord; 5 | 6 | // our texture coming from p5 7 | uniform sampler2D tex0; 8 | 9 | // the size of a texel or 1.0 / width , 1.0 / height 10 | uniform vec2 texelSize; 11 | 12 | // which way to blur, vec2(1.0, 0.0) is horizontal, vec2(0.0, 1.0) is vertical 13 | uniform vec2 direction; 14 | 15 | // gaussian blur filter modified from Filip S. at intel 16 | // https://software.intel.com/en-us/blogs/2014/07/15/an-investigation-of-fast-real-time-gpu-based-image-blur-algorithms 17 | // this function takes three parameters, the texture we want to blur, the uvs, and the texelSize 18 | vec3 gaussianBlur( sampler2D t, vec2 texUV, vec2 stepSize ){ 19 | // a variable for our output 20 | vec3 colOut = vec3( 0.0 ); 21 | 22 | // stepCount is 9 because we have 9 items in our array , const means that 9 will never change and is required loops in glsl 23 | const int stepCount = 9; 24 | 25 | // these weights were pulled from the link above 26 | float gWeights[stepCount]; 27 | gWeights[0] = 0.10855; 28 | gWeights[1] = 0.13135; 29 | gWeights[2] = 0.10406; 30 | gWeights[3] = 0.07216; 31 | gWeights[4] = 0.04380; 32 | gWeights[5] = 0.02328; 33 | gWeights[6] = 0.01083; 34 | gWeights[7] = 0.00441; 35 | gWeights[8] = 0.00157; 36 | 37 | // these offsets were also pulled from the link above 38 | float gOffsets[stepCount]; 39 | gOffsets[0] = 0.66293; 40 | gOffsets[1] = 2.47904; 41 | gOffsets[2] = 4.46232; 42 | gOffsets[3] = 6.44568; 43 | gOffsets[4] = 8.42917; 44 | gOffsets[5] = 10.41281; 45 | gOffsets[6] = 12.39664; 46 | gOffsets[7] = 14.38070; 47 | gOffsets[8] = 16.36501; 48 | 49 | // lets loop nine times 50 | for( int i = 0; i < stepCount; i++ ){ 51 | 52 | // multiply the texel size by the by the offset value 53 | vec2 texCoordOffset = gOffsets[i] * stepSize; 54 | 55 | // sample to the left and to the right of the texture and add them together 56 | vec3 col = texture2D( t, texUV + texCoordOffset ).xyz + texture2D( t, texUV - texCoordOffset ).xyz; 57 | 58 | // multiply col by the gaussian weight value from the array 59 | col *= gWeights[i]; 60 | 61 | // add it all up 62 | colOut += col; 63 | } 64 | 65 | // our final value is returned as col out 66 | return colOut; 67 | } 68 | 69 | 70 | void main() { 71 | 72 | vec2 uv = vTexCoord; 73 | // the texture is loaded upside down and backwards by default so lets flip it 74 | uv = 1.0 - uv; 75 | 76 | // use our blur function 77 | vec3 blur = gaussianBlur(tex0, uv, texelSize * direction); 78 | 79 | gl_FragColor = vec4(blur, 1.0); 80 | } 81 | -------------------------------------------------------------------------------- /shader-bloom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /shader-bloom/sketch.js: -------------------------------------------------------------------------------- 1 | // adapted from : https://github.com/aferriss/p5jsShaderExamples/blob/gh-pages/4_image-effects/4-11_bloom/sketch.js 2 | let blurH, blurV, bloom; 3 | 4 | // the camera variable 5 | 6 | let pg; 7 | 8 | // we need three createGraphics layers for our blur algorithm 9 | let pass1, pass2, bloomPass; 10 | 11 | function preload() { 12 | // load the shaders, we will use the same vertex shader and frag shaders for both passes 13 | blurH = loadShader('base.vert', 'blur.frag'); 14 | blurV = loadShader('base.vert', 'blur.frag'); 15 | bloom = loadShader('base.vert', 'bloom.frag'); 16 | 17 | } 18 | 19 | function setup() { 20 | // shaders require WEBGL mode to work 21 | // at present time, there is no WEBGL mode image() function so we will make our createGraphics() in WEBGL, but the canvas renderer will be P2D (the default) 22 | createCanvas(windowWidth, windowHeight); 23 | noStroke(); 24 | 25 | 26 | 27 | // initialize the createGraphics layers 28 | pass1 = createGraphics(windowWidth, windowHeight, WEBGL); 29 | pass2 = createGraphics(windowWidth, windowHeight, WEBGL); 30 | bloomPass = createGraphics(windowWidth, windowHeight, WEBGL); 31 | 32 | // turn off the cg layers stroke 33 | pass1.noStroke(); 34 | pass2.noStroke(); 35 | bloomPass.noStroke(); 36 | 37 | pg = createGraphics(windowWidth, windowHeight, WEBGL); 38 | } 39 | 40 | function draw() { 41 | 42 | let locX = mouseX - height / 2; 43 | let locY = mouseY - width / 2; 44 | 45 | pg.ambientLight(60, 60, 60); 46 | pg.pointLight(255, 255, 255, locX, locY, 100); 47 | 48 | pg.background(0); 49 | //pg.ambientMaterial(250); 50 | pg.specularMaterial(250); 51 | // pg.normalMaterial(); 52 | //pg.strokeWeight(1) 53 | //pg.stroke(255) 54 | pg.noStroke() 55 | pg.rotateX(map(mouseY, 0, windowHeight, -0.05, 0.05)); 56 | pg.rotateY(map(mouseX, 0, windowWidth, 0.05, -0.05)); 57 | pg.fill(50, 50, 255) 58 | pg.box(250); 59 | pg.fill(255, 0, 120) 60 | pg.sphere(160) 61 | // set the shader for our first pass 62 | pass1.shader(blurH); 63 | 64 | // send the camera texture to the horizontal blur shader 65 | // send the size of the texels 66 | // send the blur direction that we want to use [1.0, 0.0] is horizontal 67 | blurH.setUniform('tex0', pg); 68 | blurH.setUniform('texelSize', [1.0 / width, 1.0 / height]); 69 | blurH.setUniform('direction', [1.0, 0.0]); 70 | 71 | // we need to make sure that we draw the rect inside of pass1 72 | pass1.rect(0, 0, width, height); 73 | 74 | // set the shader for our second pass 75 | pass2.shader(blurV); 76 | 77 | // instead of sending the webcam, we will send our first pass to the vertical blur shader 78 | // texelSize remains the same as above 79 | // direction changes to [0.0, 1.0] to do a vertical pass 80 | blurV.setUniform('tex0', pass1); 81 | blurV.setUniform('texelSize', [1.0 / width, 1.0 / height]); 82 | blurV.setUniform('direction', [0.0, 1.0]); 83 | 84 | // again, make sure we have some geometry to draw on in our 2nd pass 85 | pass2.rect(0, 0, width, height); 86 | 87 | // set the bloom shader for the bloom pass 88 | bloomPass.shader(bloom); 89 | 90 | // send both the camera and the blurred camera to the bloom shader 91 | bloom.setUniform('tex0', pg); 92 | bloom.setUniform('tex1', pass2); 93 | 94 | // also send the mouse to control the amount of bloom 95 | bloom.setUniform('mouseX', .5); 96 | 97 | // we need some geometry for the bloom pass 98 | bloomPass.rect(0, 0, width, height); 99 | 100 | // draw the second pass to the screen 101 | image(bloomPass, 0, 0, width, height); 102 | 103 | } 104 | 105 | function windowResized() { 106 | resizeCanvas(windowWidth, windowHeight); 107 | } 108 | -------------------------------------------------------------------------------- /shader-lowfi_interferences/blends.frag: -------------------------------------------------------------------------------- 1 | 2 | // Original shader code by ben 3 | // https://www.shadertoy.com/view/XdS3RW 4 | 5 | 6 | // License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. 7 | // 8 | // 25 of the layer blending modes from Photoshop. 9 | // 10 | // The ones I couldn't figure out are from Nvidia's advanced blend equations extension spec - 11 | // http://www.opengl.org/registry/specs/NV/blend_equation_advanced.txt 12 | // 13 | // ~bj.2013 14 | // 15 | 16 | 17 | // Ported to Processing by Raphaël de Courville 18 | // Improvements: 19 | // - added the opacity uniform 20 | // - added the option to switch between blend modes 21 | // - fixed artifacts due to out-of-bound values returned by blending funtions 22 | // Functions outside of main remain unchanged 23 | // 24 | 25 | // Transparency is not supported yet 26 | // Look at Adobe's W3C blending specs for an interesting reference 27 | // http://www.w3.org/TR/compositing-1/ 28 | 29 | 30 | #ifdef GL_ES 31 | precision mediump float; 32 | precision mediump int; 33 | #endif 34 | 35 | // texcoords from the vertex shader 36 | varying vec2 vTexCoord; 37 | // viewport resolution (in pixels) 38 | uniform vec2 sketchSize; 39 | 40 | // Textures to blend 41 | uniform sampler2D topLayer; // Source (top layer) 42 | uniform sampler2D lowLayer; // Destination (bottom layer) 43 | 44 | // Resolution of the textures 45 | uniform vec2 topLayerResolution; 46 | uniform vec2 lowLayerResolution; 47 | 48 | // Selected mode 49 | uniform int blendMode; 50 | 51 | // Opacity of the source layer 52 | uniform float blendAlpha; 53 | 54 | 55 | vec3 darken( vec3 s, vec3 d ) 56 | { 57 | return min(s, d); 58 | } 59 | 60 | vec3 multiply( vec3 s, vec3 d ) 61 | { 62 | return s*d; 63 | } 64 | 65 | vec3 colorBurn( vec3 s, vec3 d ) 66 | { 67 | return 1.0 - (1.0 - d) / s; 68 | } 69 | 70 | vec3 linearBurn( vec3 s, vec3 d ) 71 | { 72 | return s + d - 1.0; 73 | } 74 | 75 | vec3 darkerColor( vec3 s, vec3 d ) 76 | { 77 | return (s.x + s.y + s.z < d.x + d.y + d.z) ? s : d; 78 | } 79 | 80 | vec3 lighten( vec3 s, vec3 d ) 81 | { 82 | return max(s, d); 83 | } 84 | 85 | vec3 screen( vec3 s, vec3 d ) 86 | { 87 | return s + d - s * d; 88 | } 89 | 90 | vec3 colorDodge( vec3 s, vec3 d ) 91 | { 92 | return d / (1.0 - s); 93 | } 94 | 95 | vec3 linearDodge( vec3 s, vec3 d ) 96 | { 97 | return s + d; 98 | } 99 | 100 | vec3 lighterColor( vec3 s, vec3 d ) 101 | { 102 | return (s.x + s.y + s.z > d.x + d.y + d.z) ? s : d; 103 | } 104 | 105 | float overlay( float s, float d ) 106 | { 107 | return (d < 0.5) ? 2.0 * s * d : 1.0 - 2.0 * (1.0 - s) * (1.0 - d); 108 | } 109 | 110 | vec3 overlay( vec3 s, vec3 d ) 111 | { 112 | vec3 c; 113 | c.x = overlay(s.x, d.x); 114 | c.y = overlay(s.y, d.y); 115 | c.z = overlay(s.z, d.z); 116 | return c; 117 | } 118 | 119 | float softLight( float s, float d ) 120 | { 121 | return (s < 0.5) ? d - (1.0 - 2.0 * s) * d * (1.0 - d) 122 | : (d < 0.25) ? d + (2.0 * s - 1.0) * d * ((16.0 * d - 12.0) * d + 4.0) 123 | : d + (2.0 * s - 1.0) * (sqrt(d) - d); 124 | } 125 | 126 | vec3 softLight( vec3 s, vec3 d ) 127 | { 128 | vec3 c; 129 | c.x = softLight(s.x, d.x); 130 | c.y = softLight(s.y, d.y); 131 | c.z = softLight(s.z, d.z); 132 | return c; 133 | } 134 | 135 | float hardLight( float s, float d ) 136 | { 137 | return (s < 0.5) ? 2.0 * s * d : 1.0 - 2.0 * (1.0 - s) * (1.0 - d); 138 | } 139 | 140 | vec3 hardLight( vec3 s, vec3 d ) 141 | { 142 | vec3 c; 143 | c.x = hardLight(s.x, d.x); 144 | c.y = hardLight(s.y, d.y); 145 | c.z = hardLight(s.z, d.z); 146 | return c; 147 | } 148 | 149 | float vividLight( float s, float d ) 150 | { 151 | return (s < 0.5) ? 1.0 - (1.0 - d) / (2.0 * s) : d / (2.0 * (1.0 - s)); 152 | } 153 | 154 | vec3 vividLight( vec3 s, vec3 d ) 155 | { 156 | vec3 c; 157 | c.x = vividLight(s.x, d.x); 158 | c.y = vividLight(s.y, d.y); 159 | c.z = vividLight(s.z, d.z); 160 | return c; 161 | } 162 | 163 | vec3 linearLight( vec3 s, vec3 d ) 164 | { 165 | return 2.0 * s + d - 1.0; 166 | } 167 | 168 | float pinLight( float s, float d ) 169 | { 170 | return (2.0 * s - 1.0 > d) ? 2.0 * s - 1.0 : (s < 0.5 * d) ? 2.0 * s : d; 171 | } 172 | 173 | vec3 pinLight( vec3 s, vec3 d ) 174 | { 175 | vec3 c; 176 | c.x = pinLight(s.x, d.x); 177 | c.y = pinLight(s.y, d.y); 178 | c.z = pinLight(s.z, d.z); 179 | return c; 180 | } 181 | 182 | vec3 hardMix( vec3 s, vec3 d ) 183 | { 184 | return floor(s + d); 185 | } 186 | 187 | vec3 difference( vec3 s, vec3 d ) 188 | { 189 | return abs(d - s); 190 | } 191 | 192 | vec3 exclusion( vec3 s, vec3 d ) 193 | { 194 | return s + d - 2.0 * s * d; 195 | } 196 | 197 | vec3 subtract( vec3 s, vec3 d ) 198 | { 199 | return s - d; 200 | } 201 | 202 | vec3 divide( vec3 s, vec3 d ) 203 | { 204 | return s / d; 205 | } 206 | 207 | // rgb<-->hsv functions by Sam Hocevar 208 | // http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl 209 | vec3 rgb2hsv(vec3 c) 210 | { 211 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 212 | vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); 213 | vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); 214 | 215 | float d = q.x - min(q.w, q.y); 216 | float e = 1.0e-10; 217 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); 218 | } 219 | 220 | vec3 hsv2rgb(vec3 c) 221 | { 222 | vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); 223 | vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); 224 | return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); 225 | } 226 | 227 | vec3 hue( vec3 s, vec3 d ) 228 | { 229 | d = rgb2hsv(d); 230 | d.x = rgb2hsv(s).x; 231 | return hsv2rgb(d); 232 | } 233 | 234 | vec3 color( vec3 s, vec3 d ) 235 | { 236 | s = rgb2hsv(s); 237 | s.z = rgb2hsv(d).z; 238 | return hsv2rgb(s); 239 | } 240 | 241 | vec3 saturation( vec3 s, vec3 d ) 242 | { 243 | d = rgb2hsv(d); 244 | d.y = rgb2hsv(s).y; 245 | return hsv2rgb(d); 246 | } 247 | 248 | vec3 luminosity( vec3 s, vec3 d ) 249 | { 250 | float dLum = dot(d, vec3(0.3, 0.59, 0.11)); 251 | float sLum = dot(s, vec3(0.3, 0.59, 0.11)); 252 | float lum = sLum - dLum; 253 | vec3 c = d + lum; 254 | float minC = min(min(c.x, c.y), c.z); 255 | float maxC = max(max(c.x, c.y), c.z); 256 | if (minC < 0.0) return sLum + ((c - sLum) * sLum) / (sLum - minC); 257 | else if (maxC > 1.0) return sLum + ((c - sLum) * (1.0 - sLum)) / (maxC - sLum); 258 | else return c; 259 | } 260 | 261 | 262 | void main(void) 263 | { 264 | 265 | vec2 uv = vTexCoord; 266 | // the texture is loaded upside down and backwards by default so lets flip it 267 | uv.y = 1.0 - uv.y; 268 | 269 | vec3 s = texture2D(topLayer, uv ).rgb; 270 | vec3 d = texture2D(lowLayer, uv ).rgb; 271 | 272 | vec3 c = vec3(0.0); 273 | 274 | if (blendMode < 16) { 275 | if (blendMode < 8) { 276 | if (blendMode < 4) { 277 | if (blendMode < 2 ) { 278 | if (blendMode == 0) { 279 | // 0 280 | c = darken(s, d); 281 | } else { 282 | // 1 283 | c = multiply(s, d); 284 | } 285 | } else { 286 | if (blendMode == 2) { 287 | // 2 288 | c = colorBurn(s, d); 289 | } else { 290 | // 3 291 | c = linearBurn(s, d); 292 | } 293 | } 294 | } else { 295 | if (blendMode < 6) { 296 | if (blendMode == 4) { 297 | // 4 298 | c = darkerColor(s, d); 299 | } else { 300 | // 5 301 | c = lighten(s, d); 302 | } 303 | } else { 304 | if (blendMode == 6) { 305 | // 6 306 | c = screen(s, d); 307 | } else { 308 | // 7 309 | c = colorDodge(s, d); 310 | } 311 | } 312 | } 313 | } else { 314 | if (blendMode < 12) { 315 | if (blendMode < 10) { 316 | if (blendMode == 8) { 317 | // 8 318 | c = linearDodge(s, d); 319 | } else { 320 | // 9 321 | c = lighterColor(s, d); 322 | } 323 | } else { 324 | if (blendMode == 10) { 325 | // 10 326 | c = overlay(s, d); 327 | } else { 328 | // 11 329 | c = softLight(s, d); 330 | } 331 | } 332 | } else { 333 | if (blendMode < 14) { 334 | if (blendMode == 12) { 335 | // 12 336 | c = hardLight(s, d); 337 | } else { 338 | // 13 339 | c = vividLight(s, d); 340 | } 341 | } else { 342 | if (blendMode == 14) { 343 | // 14 344 | c = linearLight(s, d); 345 | } else { 346 | // 15 347 | c = pinLight(s, d); 348 | } 349 | } 350 | } 351 | } 352 | } else { 353 | if (blendMode < 24) { 354 | if (blendMode < 20) { 355 | if (blendMode < 18) { 356 | if (blendMode == 16) { 357 | // 16 358 | c = hardMix(s, d); 359 | } else { 360 | // 17 361 | c = difference(s, d); 362 | } 363 | } else { 364 | if (blendMode == 18) { 365 | // 18 366 | c = exclusion(s, d); 367 | } else { 368 | // 19 369 | c = subtract(s, d); 370 | } 371 | } 372 | } else { 373 | if (blendMode < 22) { 374 | if (blendMode == 20) { 375 | // 20 376 | c = divide(s, d); 377 | } else { 378 | // 21 379 | c = hue(s, d); 380 | } 381 | } else { 382 | if (blendMode == 22) { 383 | // 22 384 | c = color(s, d); 385 | } else { 386 | // 23 387 | c = saturation(s, d); 388 | } 389 | } 390 | } 391 | } else { 392 | // 24 393 | c = luminosity(s, d); 394 | } 395 | } 396 | 397 | // limit values to the [0.0,1.0] range 398 | c = clamp( c, 0.0, 1.0 ); 399 | 400 | // apply opacity 401 | vec3 pixelColor = mix( d.rgb, c.rgb, max( 0.0, blendAlpha ) ); 402 | 403 | gl_FragColor = vec4( pixelColor.rgb, 1.0 ); 404 | } 405 | -------------------------------------------------------------------------------- /shader-lowfi_interferences/blends.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | // our vertex data 3 | attribute vec3 aPosition; 4 | attribute vec2 aTexCoord; 5 | 6 | // we need our texcoords again 7 | varying vec2 vTexCoord; 8 | 9 | void main() { 10 | // copy the texcoords 11 | vTexCoord = aTexCoord; 12 | 13 | // copy the position data into a vec4, using 1.0 as the w component 14 | vec4 positionVec4 = vec4(aPosition, 1.0); 15 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 16 | 17 | // send the vertex information on to the fragment shader 18 | gl_Position = positionVec4; 19 | } -------------------------------------------------------------------------------- /shader-lowfi_interferences/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /shader-lowfi_interferences/sketch.js: -------------------------------------------------------------------------------- 1 | // a shader variable 2 | let blends; 3 | let blendOpacity = 1; 4 | // two Pgraphics objects to be blended 5 | let top_pg, low_pg; 6 | let blendType = 17; 7 | 8 | 9 | function preload() { 10 | blends = loadShader('blends.vert', 'blends.frag'); 11 | } 12 | 13 | function setup() { 14 | createCanvas(windowWidth, windowHeight, WEBGL); 15 | 16 | top_pg = createGraphics(256, 256, WEBGL); 17 | low_pg = createGraphics(256, 256, WEBGL); 18 | 19 | 20 | 21 | blends.setUniform("sketchSize", float(width), float(height)); 22 | // Pass the images to the shader 23 | blends.setUniform("topLayer", top_pg); 24 | blends.setUniform("lowLayer", low_pg); 25 | 26 | // Pass the resolution of the images to the shader 27 | blends.setUniform("topLayerResolution", float(width), float(height)); 28 | blends.setUniform("lowLayerResolution", float(width), float(height)); 29 | // You can set the blend mode using the name directly 30 | blends.setUniform("blendMode", BL_MULTIPLY); // LIGHTERCOLOR 31 | } 32 | 33 | function draw() { 34 | background(0); 35 | 36 | top_pg.background(0) 37 | // top_pg.fill(255, 255,0) 38 | top_pg.stroke(255) 39 | //top_pg.ellipse(0, 0, 256 * 0.4, 256 * 0.4) 40 | for (let i = -top_pg.width*.5 ; i < top_pg.width*0.5; i+=2){ 41 | top_pg.line(i,-top_pg.height*.5,i,top_pg.height*.5) 42 | } 43 | 44 | low_pg.background(0) 45 | low_pg.stroke(255) 46 | for (let i = -low_pg.width*.5 ; i < low_pg.width*.5; i+=4){ 47 | 48 | low_pg.line(map(mouseX, 0, width, -low_pg.width*0.5, low_pg.width*.5),map(mouseY, 0, height, -low_pg.height*.5, low_pg.height*.5),i,low_pg.height*.5) 49 | } 50 | 51 | //low_pg.fill(255, 255, 0) 52 | //low_pg.noStroke() 53 | //low_pg.ellipse(mouseX - width * 0.5, mouseY - height * 0.5, 50, 50) 54 | 55 | 56 | blendOpacity = constrain(blendOpacity, 0, 1.5); 57 | blends.setUniform("blendAlpha", 1); 58 | blends.setUniform("blendMode", 17); 59 | blends.setUniform("topLayer", top_pg); 60 | blends.setUniform("lowLayer", low_pg); 61 | 62 | shader(blends); 63 | // Draw the output of the shader onto a rectangle that covers the whole viewport 64 | // fill(0) 65 | //rect(width * 0.5, height * 0.5, width, height); 66 | rect(0,0, width, height) 67 | // Call resetShader() so that further geometry remains unaffected by the shader 68 | resetShader(); 69 | 70 | 71 | 72 | } 73 | 74 | function keyPressed() { 75 | 76 | if (key == 'a') { 77 | blendType -= 1 78 | } 79 | if (key == 'z') { 80 | blendType += 1 81 | } 82 | blendType = constrain(blendType, 0, 24) 83 | console.log(blendType); 84 | } 85 | 86 | function windowResized(){ 87 | resizeCanvas(windowWidth, windowHeight) 88 | } 89 | 90 | 91 | 92 | 93 | const BL_DARKEN = 0; 94 | const BL_MULTIPLY = 1; 95 | 96 | const BL_COLORBURN = 2; 97 | const BL_LINEARBURN = 3; 98 | const BL_DARKERCOLOR = 4; 99 | 100 | const BL_LIGHTEN = 5; 101 | const BL_SCREEN = 6; 102 | const BL_COLORDODGE = 7; 103 | const BL_LINEARDODGE = 8; 104 | const BL_LIGHTERCOLOR = 9; 105 | 106 | const BL_OVERLAY = 10; 107 | const BL_SOFTLIGHT = 11; 108 | const BL_HARDLIGHT = 12; 109 | const BL_VIVIDLIGHT = 13; 110 | const BL_LINEARLIGHT = 14; 111 | const BL_PINLIGHT = 15; 112 | const BL_HARDMIX = 16; 113 | 114 | const BL_DIFFERENCE = 17; 115 | const BL_EXCLUSION = 18; 116 | const BL_SUBSTRACT = 19; 117 | const BL_DIVIDE = 20; 118 | 119 | const BL_HUE = 21; 120 | const BL_COLOR = 22; 121 | const BL_SATURATION = 23; 122 | const BL_LUMINOSITY = 24; -------------------------------------------------------------------------------- /shader-lowfi_interferences1/blends.frag: -------------------------------------------------------------------------------- 1 | 2 | // Original shader code by ben 3 | // https://www.shadertoy.com/view/XdS3RW 4 | 5 | 6 | // License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. 7 | // 8 | // 25 of the layer blending modes from Photoshop. 9 | // 10 | // The ones I couldn't figure out are from Nvidia's advanced blend equations extension spec - 11 | // http://www.opengl.org/registry/specs/NV/blend_equation_advanced.txt 12 | // 13 | // ~bj.2013 14 | // 15 | 16 | 17 | // Ported to Processing by Raphaël de Courville 18 | // Improvements: 19 | // - added the opacity uniform 20 | // - added the option to switch between blend modes 21 | // - fixed artifacts due to out-of-bound values returned by blending funtions 22 | // Functions outside of main remain unchanged 23 | // 24 | 25 | // Transparency is not supported yet 26 | // Look at Adobe's W3C blending specs for an interesting reference 27 | // http://www.w3.org/TR/compositing-1/ 28 | 29 | 30 | #ifdef GL_ES 31 | precision mediump float; 32 | precision mediump int; 33 | #endif 34 | 35 | // texcoords from the vertex shader 36 | varying vec2 vTexCoord; 37 | // viewport resolution (in pixels) 38 | uniform vec2 sketchSize; 39 | 40 | // Textures to blend 41 | uniform sampler2D topLayer; // Source (top layer) 42 | uniform sampler2D lowLayer; // Destination (bottom layer) 43 | 44 | // Resolution of the textures 45 | uniform vec2 topLayerResolution; 46 | uniform vec2 lowLayerResolution; 47 | 48 | // Selected mode 49 | uniform int blendMode; 50 | 51 | // Opacity of the source layer 52 | uniform float blendAlpha; 53 | 54 | 55 | vec3 darken( vec3 s, vec3 d ) 56 | { 57 | return min(s, d); 58 | } 59 | 60 | vec3 multiply( vec3 s, vec3 d ) 61 | { 62 | return s*d; 63 | } 64 | 65 | vec3 colorBurn( vec3 s, vec3 d ) 66 | { 67 | return 1.0 - (1.0 - d) / s; 68 | } 69 | 70 | vec3 linearBurn( vec3 s, vec3 d ) 71 | { 72 | return s + d - 1.0; 73 | } 74 | 75 | vec3 darkerColor( vec3 s, vec3 d ) 76 | { 77 | return (s.x + s.y + s.z < d.x + d.y + d.z) ? s : d; 78 | } 79 | 80 | vec3 lighten( vec3 s, vec3 d ) 81 | { 82 | return max(s, d); 83 | } 84 | 85 | vec3 screen( vec3 s, vec3 d ) 86 | { 87 | return s + d - s * d; 88 | } 89 | 90 | vec3 colorDodge( vec3 s, vec3 d ) 91 | { 92 | return d / (1.0 - s); 93 | } 94 | 95 | vec3 linearDodge( vec3 s, vec3 d ) 96 | { 97 | return s + d; 98 | } 99 | 100 | vec3 lighterColor( vec3 s, vec3 d ) 101 | { 102 | return (s.x + s.y + s.z > d.x + d.y + d.z) ? s : d; 103 | } 104 | 105 | float overlay( float s, float d ) 106 | { 107 | return (d < 0.5) ? 2.0 * s * d : 1.0 - 2.0 * (1.0 - s) * (1.0 - d); 108 | } 109 | 110 | vec3 overlay( vec3 s, vec3 d ) 111 | { 112 | vec3 c; 113 | c.x = overlay(s.x, d.x); 114 | c.y = overlay(s.y, d.y); 115 | c.z = overlay(s.z, d.z); 116 | return c; 117 | } 118 | 119 | float softLight( float s, float d ) 120 | { 121 | return (s < 0.5) ? d - (1.0 - 2.0 * s) * d * (1.0 - d) 122 | : (d < 0.25) ? d + (2.0 * s - 1.0) * d * ((16.0 * d - 12.0) * d + 4.0) 123 | : d + (2.0 * s - 1.0) * (sqrt(d) - d); 124 | } 125 | 126 | vec3 softLight( vec3 s, vec3 d ) 127 | { 128 | vec3 c; 129 | c.x = softLight(s.x, d.x); 130 | c.y = softLight(s.y, d.y); 131 | c.z = softLight(s.z, d.z); 132 | return c; 133 | } 134 | 135 | float hardLight( float s, float d ) 136 | { 137 | return (s < 0.5) ? 2.0 * s * d : 1.0 - 2.0 * (1.0 - s) * (1.0 - d); 138 | } 139 | 140 | vec3 hardLight( vec3 s, vec3 d ) 141 | { 142 | vec3 c; 143 | c.x = hardLight(s.x, d.x); 144 | c.y = hardLight(s.y, d.y); 145 | c.z = hardLight(s.z, d.z); 146 | return c; 147 | } 148 | 149 | float vividLight( float s, float d ) 150 | { 151 | return (s < 0.5) ? 1.0 - (1.0 - d) / (2.0 * s) : d / (2.0 * (1.0 - s)); 152 | } 153 | 154 | vec3 vividLight( vec3 s, vec3 d ) 155 | { 156 | vec3 c; 157 | c.x = vividLight(s.x, d.x); 158 | c.y = vividLight(s.y, d.y); 159 | c.z = vividLight(s.z, d.z); 160 | return c; 161 | } 162 | 163 | vec3 linearLight( vec3 s, vec3 d ) 164 | { 165 | return 2.0 * s + d - 1.0; 166 | } 167 | 168 | float pinLight( float s, float d ) 169 | { 170 | return (2.0 * s - 1.0 > d) ? 2.0 * s - 1.0 : (s < 0.5 * d) ? 2.0 * s : d; 171 | } 172 | 173 | vec3 pinLight( vec3 s, vec3 d ) 174 | { 175 | vec3 c; 176 | c.x = pinLight(s.x, d.x); 177 | c.y = pinLight(s.y, d.y); 178 | c.z = pinLight(s.z, d.z); 179 | return c; 180 | } 181 | 182 | vec3 hardMix( vec3 s, vec3 d ) 183 | { 184 | return floor(s + d); 185 | } 186 | 187 | vec3 difference( vec3 s, vec3 d ) 188 | { 189 | return abs(d - s); 190 | } 191 | 192 | vec3 exclusion( vec3 s, vec3 d ) 193 | { 194 | return s + d - 2.0 * s * d; 195 | } 196 | 197 | vec3 subtract( vec3 s, vec3 d ) 198 | { 199 | return s - d; 200 | } 201 | 202 | vec3 divide( vec3 s, vec3 d ) 203 | { 204 | return s / d; 205 | } 206 | 207 | // rgb<-->hsv functions by Sam Hocevar 208 | // http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl 209 | vec3 rgb2hsv(vec3 c) 210 | { 211 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 212 | vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); 213 | vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); 214 | 215 | float d = q.x - min(q.w, q.y); 216 | float e = 1.0e-10; 217 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); 218 | } 219 | 220 | vec3 hsv2rgb(vec3 c) 221 | { 222 | vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); 223 | vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); 224 | return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); 225 | } 226 | 227 | vec3 hue( vec3 s, vec3 d ) 228 | { 229 | d = rgb2hsv(d); 230 | d.x = rgb2hsv(s).x; 231 | return hsv2rgb(d); 232 | } 233 | 234 | vec3 color( vec3 s, vec3 d ) 235 | { 236 | s = rgb2hsv(s); 237 | s.z = rgb2hsv(d).z; 238 | return hsv2rgb(s); 239 | } 240 | 241 | vec3 saturation( vec3 s, vec3 d ) 242 | { 243 | d = rgb2hsv(d); 244 | d.y = rgb2hsv(s).y; 245 | return hsv2rgb(d); 246 | } 247 | 248 | vec3 luminosity( vec3 s, vec3 d ) 249 | { 250 | float dLum = dot(d, vec3(0.3, 0.59, 0.11)); 251 | float sLum = dot(s, vec3(0.3, 0.59, 0.11)); 252 | float lum = sLum - dLum; 253 | vec3 c = d + lum; 254 | float minC = min(min(c.x, c.y), c.z); 255 | float maxC = max(max(c.x, c.y), c.z); 256 | if (minC < 0.0) return sLum + ((c - sLum) * sLum) / (sLum - minC); 257 | else if (maxC > 1.0) return sLum + ((c - sLum) * (1.0 - sLum)) / (maxC - sLum); 258 | else return c; 259 | } 260 | 261 | 262 | void main(void) 263 | { 264 | 265 | vec2 uv = vTexCoord; 266 | // the texture is loaded upside down and backwards by default so lets flip it 267 | uv.y = 1.0 - uv.y; 268 | 269 | vec3 s = texture2D(topLayer, uv ).rgb; 270 | vec3 d = texture2D(lowLayer, uv ).rgb; 271 | 272 | vec3 c = vec3(0.0); 273 | 274 | if (blendMode < 16) { 275 | if (blendMode < 8) { 276 | if (blendMode < 4) { 277 | if (blendMode < 2 ) { 278 | if (blendMode == 0) { 279 | // 0 280 | c = darken(s, d); 281 | } else { 282 | // 1 283 | c = multiply(s, d); 284 | } 285 | } else { 286 | if (blendMode == 2) { 287 | // 2 288 | c = colorBurn(s, d); 289 | } else { 290 | // 3 291 | c = linearBurn(s, d); 292 | } 293 | } 294 | } else { 295 | if (blendMode < 6) { 296 | if (blendMode == 4) { 297 | // 4 298 | c = darkerColor(s, d); 299 | } else { 300 | // 5 301 | c = lighten(s, d); 302 | } 303 | } else { 304 | if (blendMode == 6) { 305 | // 6 306 | c = screen(s, d); 307 | } else { 308 | // 7 309 | c = colorDodge(s, d); 310 | } 311 | } 312 | } 313 | } else { 314 | if (blendMode < 12) { 315 | if (blendMode < 10) { 316 | if (blendMode == 8) { 317 | // 8 318 | c = linearDodge(s, d); 319 | } else { 320 | // 9 321 | c = lighterColor(s, d); 322 | } 323 | } else { 324 | if (blendMode == 10) { 325 | // 10 326 | c = overlay(s, d); 327 | } else { 328 | // 11 329 | c = softLight(s, d); 330 | } 331 | } 332 | } else { 333 | if (blendMode < 14) { 334 | if (blendMode == 12) { 335 | // 12 336 | c = hardLight(s, d); 337 | } else { 338 | // 13 339 | c = vividLight(s, d); 340 | } 341 | } else { 342 | if (blendMode == 14) { 343 | // 14 344 | c = linearLight(s, d); 345 | } else { 346 | // 15 347 | c = pinLight(s, d); 348 | } 349 | } 350 | } 351 | } 352 | } else { 353 | if (blendMode < 24) { 354 | if (blendMode < 20) { 355 | if (blendMode < 18) { 356 | if (blendMode == 16) { 357 | // 16 358 | c = hardMix(s, d); 359 | } else { 360 | // 17 361 | c = difference(s, d); 362 | } 363 | } else { 364 | if (blendMode == 18) { 365 | // 18 366 | c = exclusion(s, d); 367 | } else { 368 | // 19 369 | c = subtract(s, d); 370 | } 371 | } 372 | } else { 373 | if (blendMode < 22) { 374 | if (blendMode == 20) { 375 | // 20 376 | c = divide(s, d); 377 | } else { 378 | // 21 379 | c = hue(s, d); 380 | } 381 | } else { 382 | if (blendMode == 22) { 383 | // 22 384 | c = color(s, d); 385 | } else { 386 | // 23 387 | c = saturation(s, d); 388 | } 389 | } 390 | } 391 | } else { 392 | // 24 393 | c = luminosity(s, d); 394 | } 395 | } 396 | 397 | // limit values to the [0.0,1.0] range 398 | c = clamp( c, 0.0, 1.0 ); 399 | 400 | // apply opacity 401 | vec3 pixelColor = mix( d.rgb, c.rgb, max( 0.0, blendAlpha ) ); 402 | 403 | gl_FragColor = vec4( pixelColor.rgb, 1.0 ); 404 | } 405 | -------------------------------------------------------------------------------- /shader-lowfi_interferences1/blends.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | // our vertex data 3 | attribute vec3 aPosition; 4 | attribute vec2 aTexCoord; 5 | 6 | // we need our texcoords again 7 | varying vec2 vTexCoord; 8 | 9 | void main() { 10 | // copy the texcoords 11 | vTexCoord = aTexCoord; 12 | 13 | // copy the position data into a vec4, using 1.0 as the w component 14 | vec4 positionVec4 = vec4(aPosition, 1.0); 15 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 16 | 17 | // send the vertex information on to the fragment shader 18 | gl_Position = positionVec4; 19 | } -------------------------------------------------------------------------------- /shader-lowfi_interferences1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /shader-lowfi_interferences1/sketch.js: -------------------------------------------------------------------------------- 1 | // a shader variable 2 | let blends; 3 | let blendOpacity = 1; 4 | // two Pgraphics objects to be blended 5 | let top_pg, low_pg; 6 | let blendType = 17; 7 | 8 | 9 | function preload() { 10 | blends = loadShader('blends.vert', 'blends.frag'); 11 | } 12 | 13 | function setup() { 14 | createCanvas(windowWidth, windowHeight, WEBGL); 15 | 16 | top_pg = createGraphics(128, 128, WEBGL); 17 | low_pg = createGraphics(512, 512, WEBGL); 18 | 19 | 20 | 21 | blends.setUniform("sketchSize", float(width), float(height)); 22 | // Pass the images to the shader 23 | blends.setUniform("topLayer", top_pg); 24 | blends.setUniform("lowLayer", low_pg); 25 | 26 | // Pass the resolution of the images to the shader 27 | blends.setUniform("topLayerResolution", float(width), float(height)); 28 | blends.setUniform("lowLayerResolution", float(width), float(height)); 29 | // You can set the blend mode using the name directly 30 | blends.setUniform("blendMode", BL_MULTIPLY); // LIGHTERCOLOR 31 | } 32 | 33 | function draw() { 34 | background(0); 35 | 36 | top_pg.background(0) 37 | // top_pg.fill(255, 255,0) 38 | top_pg.stroke(255) 39 | //top_pg.ellipse(0, 0, 256 * 0.4, 256 * 0.4) 40 | for (let i = -top_pg.width * .5; i < top_pg.width * 0.5; i += 2) { 41 | //top_pg.strokeWeight(map(i, -top_pg.width * .5, top_pg.width * .5, 10, 0.5)) 42 | top_pg.line(i, -top_pg.height * .5, i, top_pg.height * .5) 43 | } 44 | 45 | low_pg.background(0) 46 | 47 | low_pg.noFill() 48 | //for (let i = -low_pg.width * .5; i < low_pg.width * .5; i += 4) { 49 | 50 | for (let j = low_pg.width; j > 0; j -= 25) { 51 | low_pg.stroke(map(j, low_pg.width, 0, 0, 255),255,0) 52 | low_pg.strokeWeight(map(j, low_pg.width, 0, 10, 0.15)) 53 | let rad = (j * abs(sin( + millis()/ 1000) + 1) /2 + 50 )* map(mouseX, 0, width, 1, 0.7) 54 | low_pg.ellipse(0, 0, rad, rad) 55 | } 56 | //low_pg.line(map(mouseX, 0, width, -low_pg.width*0.5, low_pg.width*.5),map(mouseY, 0, height, -low_pg.height*.5, low_pg.height*.5),i,low_pg.height*.5) 57 | //} 58 | 59 | //low_pg.fill(255, 255, 0) 60 | //low_pg.noStroke() 61 | //low_pg.ellipse(mouseX - width * 0.5, mouseY - height * 0.5, 50, 50) 62 | 63 | 64 | blendOpacity = constrain(blendOpacity, 0, 1.5); 65 | blends.setUniform("blendAlpha", 1); 66 | blends.setUniform("blendMode", 17); 67 | blends.setUniform("topLayer", top_pg); 68 | blends.setUniform("lowLayer", low_pg); 69 | 70 | shader(blends); 71 | // Draw the output of the shader onto a rectangle that covers the whole viewport 72 | // fill(0) 73 | //rect(width * 0.5, height * 0.5, width, height); 74 | rect(0, 0, width, height) 75 | // Call resetShader() so that further geometry remains unaffected by the shader 76 | resetShader(); 77 | 78 | 79 | 80 | } 81 | 82 | function keyPressed() { 83 | 84 | if (key == 'a') { 85 | blendType -= 1 86 | } 87 | if (key == 'z') { 88 | blendType += 1 89 | } 90 | blendType = constrain(blendType, 0, 24) 91 | console.log(blendType); 92 | } 93 | 94 | function windowResized() { 95 | resizeCanvas(windowWidth, windowHeight) 96 | } 97 | 98 | 99 | 100 | 101 | const BL_DARKEN = 0; 102 | const BL_MULTIPLY = 1; 103 | 104 | const BL_COLORBURN = 2; 105 | const BL_LINEARBURN = 3; 106 | const BL_DARKERCOLOR = 4; 107 | 108 | const BL_LIGHTEN = 5; 109 | const BL_SCREEN = 6; 110 | const BL_COLORDODGE = 7; 111 | const BL_LINEARDODGE = 8; 112 | const BL_LIGHTERCOLOR = 9; 113 | 114 | const BL_OVERLAY = 10; 115 | const BL_SOFTLIGHT = 11; 116 | const BL_HARDLIGHT = 12; 117 | const BL_VIVIDLIGHT = 13; 118 | const BL_LINEARLIGHT = 14; 119 | const BL_PINLIGHT = 15; 120 | const BL_HARDMIX = 16; 121 | 122 | const BL_DIFFERENCE = 17; 123 | const BL_EXCLUSION = 18; 124 | const BL_SUBSTRACT = 19; 125 | const BL_DIVIDE = 20; 126 | 127 | const BL_HUE = 21; 128 | const BL_COLOR = 22; 129 | const BL_SATURATION = 23; 130 | const BL_LUMINOSITY = 24; -------------------------------------------------------------------------------- /shader-mask-several-sources/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /shader-mask-several-sources/mask.frag: -------------------------------------------------------------------------------- 1 | 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | precision mediump int; 6 | #endif 7 | 8 | // texcoords from the vertex shader 9 | varying vec2 vTexCoord; 10 | // viewport resolution (in pixels) 11 | uniform vec2 sketchSize; 12 | 13 | // Textures to blend 14 | uniform sampler2D source1; // Source 15 | uniform sampler2D source2; // Source 16 | uniform sampler2D source3; // Source 17 | uniform sampler2D drawing; 18 | 19 | 20 | 21 | void main(void) 22 | { 23 | 24 | vec2 uv = vTexCoord; 25 | // the texture is loaded upside down and backwards by default so lets flip it 26 | uv.y = 1.0 - uv.y; 27 | 28 | 29 | vec4 s1 = texture2D(source1, uv ).rgba; 30 | vec4 s2 = texture2D(source2, uv ).rgba; 31 | vec4 s3 = texture2D(source3, uv ).rgba; 32 | vec4 d = texture2D(drawing, uv ).rgba; 33 | 34 | 35 | vec4 col; 36 | if(d.r == 1.) {col = mix(s1,vec4(0, 0, 0,0), 1.0 - (d.r+d.g+d.b)*0.333 );} 37 | if(d.g == 1.) col = mix(s2,vec4(0, 0, 0,0), 1.0 - (d.r+d.g+d.b)*0.333 ); 38 | if(d.b == 1.) col = mix(s3,vec4(0, 0, 0,0), 1.0 - (d.r+d.g+d.b)*0.333 ); 39 | 40 | 41 | gl_FragColor = col; 42 | } 43 | -------------------------------------------------------------------------------- /shader-mask-several-sources/mask.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | // our vertex data 3 | attribute vec3 aPosition; 4 | attribute vec2 aTexCoord; 5 | 6 | // we need our texcoords again 7 | varying vec2 vTexCoord; 8 | 9 | void main() { 10 | // copy the texcoords 11 | vTexCoord = aTexCoord; 12 | 13 | // copy the position data into a vec4, using 1.0 as the w component 14 | vec4 positionVec4 = vec4(aPosition, 1.0); 15 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 16 | 17 | // send the vertex information on to the fragment shader 18 | gl_Position = positionVec4; 19 | } -------------------------------------------------------------------------------- /shader-mask-several-sources/sketch.js: -------------------------------------------------------------------------------- 1 | // a shader variable 2 | let mask; 3 | 4 | let source1, source2, source3; 5 | let drawing; 6 | let drawingColor ; 7 | 8 | 9 | function preload() { 10 | mask = loadShader('mask.vert', 'mask.frag'); 11 | } 12 | 13 | function setup() { 14 | createCanvas(windowWidth, windowHeight, WEBGL); 15 | 16 | source1 = createGraphics(width*0.5, height*0.5, WEBGL); 17 | source2 = createGraphics(width*0.5, height*0.5, WEBGL); 18 | source3 = createGraphics(width*0.5, height*0.5, WEBGL); 19 | drawing = createGraphics(width, height, WEBGL); 20 | 21 | drawingColor = color(255,0,0); 22 | 23 | source1.background(0,0,255) 24 | source1.noStroke() 25 | source1.fill(255, 0, 255) 26 | source1.ellipse(0, 0, height * 0.4, height * 0.4) 27 | 28 | source2.background(0,255,255) 29 | source2.noStroke() 30 | source2.fill(0, 0, 255) 31 | source2.ellipse(0, 0, height * 0.2, height * 0.2) 32 | 33 | source3.background(255,0,255) 34 | source3.noStroke() 35 | source3.fill(255, 255, 0) 36 | source3.ellipse(0, 0, height * 0.3, height * 0.3) 37 | 38 | 39 | } 40 | 41 | function draw() { 42 | background(0); 43 | 44 | 45 | 46 | drawing.noStroke() 47 | drawing.noSmooth() 48 | drawing.fill(drawingColor) 49 | drawing.ellipse(mouseX - width * 0.5, mouseY - height * 0.5, 50, 50) 50 | 51 | 52 | mask.setUniform("source1", source1); 53 | mask.setUniform("source2", source2); 54 | mask.setUniform("source3", source3); 55 | mask.setUniform("drawing", drawing); 56 | 57 | shader(mask); 58 | // Draw the output of the shader onto a rectangle that covers the whole viewport 59 | // fill(0) 60 | rect(-width * 0.5, -height * 0.5, width, height); 61 | // Call resetShader() so that further geometry remains unaffected by the shader 62 | resetShader(); 63 | 64 | 65 | 66 | } 67 | 68 | function keyPressed() { 69 | if (key == '1') drawingColor = color(255,0,0) 70 | if (key == '2') drawingColor = color(0,255,0) 71 | if (key == '3') drawingColor = color(0,0,255) 72 | 73 | 74 | } 75 | 76 | function windowResized() { 77 | resizeCanvas(windowWidth, windowHeight) 78 | } 79 | 80 | 81 | -------------------------------------------------------------------------------- /shader-mask/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /shader-mask/mask.frag: -------------------------------------------------------------------------------- 1 | 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | precision mediump int; 6 | #endif 7 | 8 | // texcoords from the vertex shader 9 | varying vec2 vTexCoord; 10 | // viewport resolution (in pixels) 11 | uniform vec2 sketchSize; 12 | 13 | // Textures to blend 14 | uniform sampler2D topLayer; // Source (top layer) 15 | uniform sampler2D lowLayer; // Destination (bottom layer) 16 | 17 | 18 | 19 | void main(void) 20 | { 21 | 22 | vec2 uv = vTexCoord; 23 | // the texture is loaded upside down and backwards by default so lets flip it 24 | uv.y = 1.0 - uv.y; 25 | 26 | 27 | vec4 s = texture2D(topLayer, uv ).rgba; 28 | vec4 d = texture2D(lowLayer, uv ).rgba; 29 | 30 | gl_FragColor = mix(s, vec4(0, 0, 0,0), 1.0 - (d.r+d.g+d.b)*0.333); 31 | } 32 | -------------------------------------------------------------------------------- /shader-mask/mask.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | // our vertex data 3 | attribute vec3 aPosition; 4 | attribute vec2 aTexCoord; 5 | 6 | // we need our texcoords again 7 | varying vec2 vTexCoord; 8 | 9 | void main() { 10 | // copy the texcoords 11 | vTexCoord = aTexCoord; 12 | 13 | // copy the position data into a vec4, using 1.0 as the w component 14 | vec4 positionVec4 = vec4(aPosition, 1.0); 15 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 16 | 17 | // send the vertex information on to the fragment shader 18 | gl_Position = positionVec4; 19 | } -------------------------------------------------------------------------------- /shader-mask/sketch.js: -------------------------------------------------------------------------------- 1 | // a shader variable 2 | let mask; 3 | // two Pgraphics objects to be blended 4 | let top_pg, low_pg; 5 | 6 | 7 | function preload() { 8 | mask = loadShader('mask.vert', 'mask.frag'); 9 | } 10 | 11 | function setup() { 12 | createCanvas(windowWidth, windowHeight, WEBGL); 13 | 14 | top_pg = createGraphics(512, 512, WEBGL); 15 | low_pg = createGraphics(width, height, WEBGL); 16 | 17 | 18 | 19 | } 20 | 21 | function draw() { 22 | background(220); 23 | 24 | top_pg.background(0,0,255) 25 | top_pg.noSmooth() 26 | top_pg.noStroke() 27 | top_pg.fill(255, 0, 255) 28 | top_pg.ellipse(0, 0, top_pg.height * 0.4,top_pg. height * 0.4) 29 | 30 | low_pg.noStroke() 31 | low_pg.noSmooth() 32 | low_pg.fill(255) 33 | low_pg.ellipse(mouseX - width * 0.5, mouseY - height * 0.5, 50, 50) 34 | 35 | 36 | mask.setUniform("topLayer", top_pg); 37 | mask.setUniform("lowLayer", low_pg); 38 | 39 | shader(mask); 40 | // Draw the output of the shader onto a rectangle that covers the whole viewport 41 | // fill(0) 42 | rect(-width * 0.5, -height * 0.5, width, height); 43 | // Call resetShader() so that further geometry remains unaffected by the shader 44 | resetShader(); 45 | 46 | 47 | 48 | } 49 | 50 | function keyPressed() { 51 | 52 | } 53 | 54 | function windowResized() { 55 | resizeCanvas(windowWidth, windowHeight) 56 | } 57 | 58 | 59 | -------------------------------------------------------------------------------- /todo.txt: -------------------------------------------------------------------------------- 1 | - distortion 2 | => https://tympanus.net/codrops/2016/05/03/animated-heat-distortion-effects-webgl/ 3 | && distortion 3D 4 | 5 | - ripples from rainstick 6 | 7 | - light painting 8 | 9 | - blends 10 | 11 | - fake 12 | => https://tympanus.net/codrops/2019/02/20/how-to-create-a-fake-3d-image-effect-with-webgl/ --------------------------------------------------------------------------------