WebGL

├── 10 ├── index.html └── shader.frag ├── 11 ├── index.html └── shader.frag ├── 12 ├── index.html └── shader.frag ├── 13 ├── index.html └── shader.frag ├── 14 ├── index.html └── shader.frag ├── 15 ├── index.html └── shader.frag ├── 16 ├── index.html └── shader.frag ├── 17 ├── index.html └── shader.frag ├── 18 ├── index.html └── shader.frag ├── 19 ├── index.html └── shader.frag ├── 20 ├── index.html └── shader.frag ├── 21 ├── index.html └── shader.frag ├── 22 ├── index.html └── shader.frag ├── 23 ├── index.html └── shader.frag ├── 24 ├── index.html └── shader.frag ├── 25 ├── index.html └── shader.frag ├── 26 ├── index.html └── shader.frag ├── 27 ├── index.html └── shader.frag ├── 28 ├── index.html └── shader.frag ├── 29 ├── index.html └── shader.frag ├── 30 ├── index.html └── shader.frag ├── .gitignore ├── 01 ├── index.html └── shader.frag ├── 02 ├── index.html └── shader.frag ├── 03 ├── index.html └── shader.frag ├── 04 ├── index.html └── shader.frag ├── 05 ├── index.html └── shader.frag ├── 06 ├── index.html └── shader.frag ├── 07 ├── index.html └── shader.frag ├── 08 ├── index.html └── shader.frag ├── 09 ├── index.html └── shader.frag ├── README.md ├── complex-numbers-midi ├── index.html └── shader.frag ├── complex-numbers ├── index.html └── shader.frag ├── emitting-light ├── index.html └── shader.frag ├── gradient-editor ├── index.html └── shader.frag ├── iridescent-windows-2 ├── index.html └── shader.frag ├── iridescent-windows ├── index.html └── shader.frag ├── liquid-colors-midi ├── index.html └── shader.frag ├── liquid-pink-midi ├── index.html └── shader.frag ├── midi-socketio ├── client-1 │ ├── index.html │ └── shader.frag ├── client-2 │ ├── index.html │ └── shader.frag └── server │ ├── ca.pem │ ├── cert.pem │ ├── key.pem │ ├── package-lock.json │ ├── package.json │ └── server.js ├── shader-experiments-2 ├── index.html └── shader.frag ├── shader-experiments ├── index.html └── shader.frag ├── touch-gestures-2 ├── index.html └── shader.frag ├── touch-gestures ├── index.html └── shader.frag └── wip └── wip-1 ├── index.html └── shader.frag /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | /midi-socketio/server/node_modules/ -------------------------------------------------------------------------------- /01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 17 | 18 | 19 | 20 | 21 |

22 | 23 | function fullscreen(event) { 24 | const d = document.documentElement; 25 | if (d.requestFullscreen) { 26 | d.requestFullscreen(); 27 | } else if (d.webkitRequestFullScreen) { 28 | d.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 29 | } 30 | }; 31 | document.body.addEventListener("dblclick", fullscreen); 32 | 33 | -------------------------------------------------------------------------------- /02/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform vec2 u_mouse; 7 | uniform float u_time; 8 | #define PI 3.14159265359 9 | 10 | void main() { 11 | vec2 m = u_mouse.xy/u_resolution; 12 | vec2 st = gl_FragCoord.xy/u_resolution; 13 | float t = sin(u_time); 14 | 15 | gl_FragColor = vec4( 16 | sin(m.x * st.x), 17 | sin(m.y * st.y), 18 | sin(m.x * st.x + m.y * st.y), 19 | 1.0 20 | ); 21 | 22 | gl_FragColor = vec4( 23 | sin(m.x * st.y), 24 | sin(m.y * st.y * t / 2.0), 25 | sin(m.x * st.x + m.y * st.y), 26 | 1.0 27 | ); 28 | 29 | 30 | // b & w 31 | gl_FragColor = vec4( 32 | tan(m.x * st.x + m.y * st.y), 33 | tan(m.x * st.x + m.y * st.y), 34 | tan(m.x * st.x + m.y * st.y), 35 | 1.0 36 | ); 37 | 38 | // gl_FragColor = vec4( 39 | // cos(m.x * st.y* t *2.0), 40 | // sin(m.y * st.y * t ), 41 | // cos(m.x * st.x * t ), 42 | // 1.0 43 | // ); 44 | 45 | // gl_FragColor = vec4( 46 | // sin(m.y * st.x + m.x * st.y )* t, 47 | // sin(m.y * st.x + m.x), 48 | // sin(m.y * st.x + m.x * st.y* t / 3.0)* t, 49 | // 1.0 50 | // ); 51 | 52 | // // Figuring out where white is, bottom left is 0.0, 0.0, middle is 1.0, 1.0, (i think) 53 | // gl_FragColor = vec4( 54 | // m.x, 55 | // m.x , 56 | // m.x , 57 | // 1.0 58 | // ); 59 | 60 | // // lasers 61 | // gl_FragColor = vec4( 62 | // tan(m.x * st.x + m.x * st.y) / 110.0, 63 | // tan(m.x * st.x + m.y * st.y) / 112.0, 64 | // tan(m.x * st.x + m.y * st.y) / 112.0, 65 | // 1.0 66 | // ); 67 | 68 | } -------------------------------------------------------------------------------- /03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 17 | 18 | 19 | 20 | 21 |

22 | 23 | function fullscreen(event) { 24 | const d = document.documentElement; 25 | if (d.requestFullscreen) { 26 | d.requestFullscreen(); 27 | } else if (d.webkitRequestFullScreen) { 28 | d.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 29 | } 30 | }; 31 | document.body.addEventListener("dblclick", fullscreen); 32 | 33 | -------------------------------------------------------------------------------- /03/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | #define PI 3.14159265359 6 | 7 | uniform vec2 u_resolution; 8 | uniform vec2 u_mouse; 9 | uniform float u_time; 10 | 11 | vec3 colorA = vec3(0.96, 0.18, 0.8); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | // https://thebookofshaders.com/10/ 15 | float random (vec2 st) { 16 | return fract(sin(dot(st.xy, 17 | vec2(12.9898,78.233)))* 18 | 43758.5453123); 19 | } 20 | 21 | vec3 rgb2hsb( in vec3 c ){ 22 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 23 | vec4 p = mix(vec4(c.bg, K.wz), 24 | vec4(c.gb, K.xy), 25 | step(c.b, c.g)); 26 | vec4 q = mix(vec4(p.xyw, c.r), 27 | vec4(c.r, p.yzx), 28 | step(p.x, c.r)); 29 | float d = q.x - min(q.w, q.y); 30 | float e = 1.0e-10; 31 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), 32 | d / (q.x + e), 33 | q.x); 34 | } 35 | 36 | void main(){ 37 | vec2 res = gl_FragCoord.xy/u_resolution; 38 | 39 | vec2 heightAmount = res * 30.0; 40 | vec2 heightAmountInteger = floor(heightAmount); 41 | float random = random(vec2(heightAmountInteger.y)); 42 | 43 | vec3 color = vec3(0.0); 44 | vec3 pct = vec3(res.x); 45 | pct.r = smoothstep(0.0,1.0, random); 46 | pct.g = smoothstep(0.0,1.0, random); 47 | pct.b = pow(abs(sin(res.x + u_time * random / 2.5)),1.0); 48 | 49 | color = mix(colorA, colorB, pct); 50 | vec3 newColor = rgb2hsb(color); 51 | 52 | gl_FragColor = vec4(newColor,1.0); 53 | } -------------------------------------------------------------------------------- /04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 17 | 18 | 19 | 20 | 21 |

22 | 23 | function fullscreen(event) { 24 | const d = document.documentElement; 25 | if (d.requestFullscreen) { 26 | d.requestFullscreen(); 27 | } else if (d.webkitRequestFullScreen) { 28 | d.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 29 | } 30 | }; 31 | document.body.addEventListener("dblclick", fullscreen); 32 | 33 | -------------------------------------------------------------------------------- /04/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | #define PI 3.14159265359 6 | 7 | uniform vec2 u_resolution; 8 | uniform vec2 u_mouse; 9 | uniform float u_time; 10 | 11 | vec3 colorA = vec3(0.38, 0.18, 0.96); 12 | vec3 colorB = vec3(0.89, 0.07, 0.07); 13 | 14 | // https://thebookofshaders.com/10/ 15 | float random (vec2 st) { 16 | return fract(sin(dot(st.xy, 17 | vec2(12.9898,78.233)))* 18 | 43758.5453123); 19 | } 20 | 21 | // Green to beige glitch gradients 22 | vec3 rgb2hsb( in vec3 c ){ 23 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 24 | vec4 p = mix(vec4(c.bg, K.wz), 25 | vec4(c.gb, K.xy), 26 | step(c.b, c.g)); 27 | vec4 q = mix(vec4(p.xyw, c.r), 28 | vec4(c.r, p.yzx), 29 | step(p.x, c.r)); 30 | float d = q.x - min(q.w, q.y); 31 | float e = 1.0e-10; 32 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), 33 | d / (q.x + e), 34 | q.x); 35 | } 36 | 37 | void main(){ 38 | vec2 res = gl_FragCoord.xy/u_resolution; 39 | 40 | vec2 heightAmountInteger = floor(res * 28.0); 41 | float random = random(vec2(heightAmountInteger.y)); 42 | 43 | vec3 color = vec3(0.0); 44 | vec3 pct = vec3(res.x); 45 | pct.r = smoothstep(0.0,1.0, random); 46 | pct.g = smoothstep(0.0,1.0, random); 47 | pct.b = pow(abs(cos(res.x + u_time * random / 0.8)),0.1); 48 | 49 | color = mix(colorA, colorB, pct); 50 | vec3 newColor = rgb2hsb(color); 51 | 52 | gl_FragColor = vec4(newColor,1.0); 53 | } -------------------------------------------------------------------------------- /05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 17 | 18 | 19 | 20 | 21 |

22 | 23 | function fullscreen(event) { 24 | const d = document.documentElement; 25 | if (d.requestFullscreen) { 26 | d.requestFullscreen(); 27 | } else if (d.webkitRequestFullScreen) { 28 | d.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 29 | } 30 | }; 31 | document.body.addEventListener("dblclick", fullscreen); 32 | 33 | -------------------------------------------------------------------------------- /05/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | #define PI 3.14159265359 6 | 7 | uniform vec2 u_resolution; 8 | uniform float u_time; 9 | 10 | vec3 colorA = vec3(0.89); 11 | vec3 colorB = vec3(0.1); 12 | 13 | float random (vec2 st) { 14 | return fract(sin(dot(st.xy, 15 | vec2(12.9898,78.233)))* 16 | 43758.5453123); 17 | } 18 | 19 | // Black and white gradient, increasing glitch size with sin(u_time) by a multipler 20 | void main(){ 21 | vec2 res = gl_FragCoord.xy/u_resolution; 22 | 23 | vec2 heightAmountInteger = floor(res * 350.0 * abs(sin(u_time / 2.2))); 24 | float random = random(vec2(heightAmountInteger.y)); 25 | 26 | vec3 color = vec3(0.0); 27 | vec3 pct = vec3(res.y); 28 | pct.r = smoothstep(0.0,1.0, res.x * abs(tan(res.x + u_time * random * 2.0 ))); 29 | pct.g = smoothstep(0.0,1.0, res.x* abs(tan(res.x + u_time * random * 2.0 ))); 30 | pct.b = smoothstep(0.0,1.0, res.x* abs(tan(res.x + u_time * random * 2.0 ))); 31 | 32 | color = mix(colorA, colorB, pct); 33 | 34 | gl_FragColor = vec4(color,1.0); 35 | } -------------------------------------------------------------------------------- /06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 18 | 19 | 20 | 21 |

22 | 46 | 47 | -------------------------------------------------------------------------------- /06/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform vec2 u_mouse; 7 | uniform float u_time; 8 | 9 | vec3 colorA = vec3(0.55, 0.96, 0.18); 10 | vec3 colorB = vec3(0.17, 0.07, 0.71); 11 | 12 | // https://thebookofshaders.com/10/ 13 | float random (vec2 st) { 14 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 15 | } 16 | 17 | vec3 rgb2hsb( in vec3 c ){ 18 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 19 | vec4 p = mix(vec4(c.bg, K.wz), 20 | vec4(c.gb, K.xy), 21 | step(c.b, c.g)); 22 | vec4 q = mix(vec4(p.xyw, c.r), 23 | vec4(c.r, p.yzx), 24 | step(p.x, c.r)); 25 | float d = q.x - min(q.w, q.y); 26 | float e = 1.0e-10; 27 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), 28 | d / (q.x + e), 29 | q.x); 30 | } 31 | 32 | void main(){ 33 | vec2 res = gl_FragCoord.xy/u_resolution; 34 | 35 | vec2 heightAmount = res * 30.0; 36 | vec2 heightAmountInteger = floor(heightAmount); 37 | float random = random(vec2(heightAmountInteger.x + heightAmountInteger.y * 2.0)); 38 | 39 | vec3 color = vec3(0.0); 40 | vec3 pct = vec3(res.x); 41 | pct.r = abs(sin(res.x + u_time * random / 1.5)); 42 | pct.g = abs(cos(res.x + u_time * random / 1.5)); 43 | pct.b = abs(cos(res.x + u_time * random / 1.5)); 44 | 45 | color = mix(colorA, colorB, pct); 46 | vec3 newColor = rgb2hsb(color); 47 | 48 | gl_FragColor = vec4(newColor,1.0); 49 | } -------------------------------------------------------------------------------- /07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 18 | 19 | 20 | 21 |

22 | 46 | 47 | -------------------------------------------------------------------------------- /07/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform vec2 u_mouse; 7 | uniform float u_time; 8 | 9 | vec3 colorA = vec3(0.44, 0.78, 0.14); 10 | vec3 colorB = vec3(0.16, 0.12, 0.43); 11 | 12 | // https://thebookofshaders.com/10/ 13 | float random (vec2 st) { 14 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 15 | } 16 | 17 | vec3 rgb2hsb( in vec3 c ){ 18 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 19 | vec4 p = mix(vec4(c.bg, K.wz), 20 | vec4(c.gb, K.xy), 21 | step(c.b, c.g)); 22 | vec4 q = mix(vec4(p.xyw, c.r), 23 | vec4(c.r, p.yzx), 24 | step(p.x, c.r)); 25 | float d = q.x - min(q.w, q.y); 26 | float e = 1.0e-10; 27 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), 28 | d / (q.x + e), 29 | q.x); 30 | } 31 | 32 | void main(){ 33 | vec2 res = gl_FragCoord.xy/u_resolution; 34 | 35 | vec2 heightAmount = res * 25.0; 36 | vec2 heightAmountInteger = floor(heightAmount); 37 | float random = random(vec2(heightAmountInteger.x + heightAmountInteger.y * 2.0)); 38 | 39 | vec3 color = vec3(0.0); 40 | vec3 pct = vec3(res.x); 41 | pct.r = abs(sin(res.x + u_time * random / 1.5)); 42 | pct.g = abs(cos(res.x + u_time * random / 1.5)); 43 | pct.b = abs(tan(res.x + u_time * random / 1.5)); 44 | 45 | color = mix(colorA, colorB, pct); 46 | vec3 newColor = rgb2hsb(color); 47 | 48 | gl_FragColor = vec4(newColor,1.0); 49 | } -------------------------------------------------------------------------------- /08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 18 | 19 | 20 | 21 |

22 | 46 | 47 | -------------------------------------------------------------------------------- /08/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform vec2 u_mouse; 7 | uniform float u_time; 8 | 9 | vec3 colorA = vec3(0.44, 0.78, 0.14); 10 | vec3 colorB = vec3(0.79, 0.05, 0.41); 11 | 12 | // https://thebookofshaders.com/10/ 13 | float random (vec2 st) { 14 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 15 | } 16 | 17 | vec3 rgb2hsb( in vec3 c ){ 18 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 19 | vec4 p = mix(vec4(c.bg, K.wz), 20 | vec4(c.gb, K.xy), 21 | step(c.b, c.g)); 22 | vec4 q = mix(vec4(p.xyw, c.r), 23 | vec4(c.r, p.yzx), 24 | step(p.x, c.r)); 25 | float d = q.x - min(q.w, q.y); 26 | float e = 1.0e-10; 27 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), 28 | d / (q.x + e), 29 | q.x); 30 | } 31 | 32 | 33 | // pink, purple, blue 34 | void main(){ 35 | vec2 res = gl_FragCoord.xy/u_resolution; 36 | 37 | vec2 heightAmount = res * 60.0; 38 | vec2 heightAmountInteger = floor(heightAmount); 39 | float random = random(vec2(heightAmountInteger.x + heightAmountInteger.y * 960.0)); 40 | 41 | vec3 color = vec3(0.0); 42 | vec3 pct = vec3(res.x); 43 | pct.r = abs(sin(res.x * res.y + u_time * random / 1.5)); 44 | pct.g = abs(cos(res.y * res.x + u_time * random / 1.5)); 45 | pct.b = abs(tan(res.x * res.y + u_time * random / 1.5)); 46 | 47 | color = mix(colorA, colorB, pct); 48 | vec3 newColor = rgb2hsb(color); 49 | 50 | gl_FragColor = vec4(newColor,1.0); 51 | } -------------------------------------------------------------------------------- /09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 18 | 19 | 20 | 21 |

22 | 46 | 47 | -------------------------------------------------------------------------------- /09/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | #define PI 3.14159265359 6 | 7 | uniform vec2 u_resolution; 8 | uniform vec2 u_mouse; 9 | uniform float u_time; 10 | 11 | vec3 colorA = vec3(0.09, 0.22, 0.02); 12 | vec3 colorB = vec3(0.8, 0.57, 0.68); 13 | 14 | // https://thebookofshaders.com/10/ 15 | float random (vec2 st) { 16 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 17 | } 18 | 19 | vec3 rgb2hsb( in vec3 c ){ 20 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 21 | vec4 p = mix(vec4(c.bg, K.wz), 22 | vec4(c.gb, K.xy), 23 | step(c.b, c.g)); 24 | vec4 q = mix(vec4(p.xyw, c.r), 25 | vec4(c.r, p.yzx), 26 | step(p.x, c.r)); 27 | float d = q.x - min(q.w, q.y); 28 | float e = 1.0e-10; 29 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), 30 | d / (q.x + e), 31 | q.x); 32 | } 33 | 34 | // rainbow 35 | void main(){ 36 | vec2 res = gl_FragCoord.xy/u_resolution; 37 | 38 | vec2 heightAmount = res * 100.0; 39 | vec2 heightAmountInteger = floor(heightAmount); 40 | float random = random(vec2(heightAmountInteger.x + heightAmountInteger.y * 60.0)); 41 | 42 | vec3 color = vec3(0.0); 43 | vec3 pct = vec3(res.x); 44 | pct.r = abs(sin(res.x * res.y * 112.0 + u_time+ random / 1.5)); 45 | pct.g = abs(cos(res.y * 112.0* res.x + u_time * random / 1.5)); 46 | pct.b = abs(tan(res.x * res.y + u_time * random / 1.5)); 47 | 48 | color = mix(colorA, colorB, pct); 49 | // vec3 newColor = rgb2hsb(color); 50 | 51 | gl_FragColor = vec4(color,1.0); 52 | } -------------------------------------------------------------------------------- /10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 18 | 19 | 20 | 21 |

22 | 46 | 47 | -------------------------------------------------------------------------------- /10/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform vec2 u_mouse; 7 | uniform float u_time; 8 | 9 | // vec3 colorA = vec3(0.16); 10 | // vec3 colorB = vec3(0.64, 0.78, 0.26); 11 | vec3 colorA = vec3(0.16); 12 | vec3 colorB = vec3(0.64, 0.78, 0.26); 13 | 14 | float random (vec2 st) { 15 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 16 | } 17 | 18 | vec3 rgb2hsb( in vec3 c ){ 19 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 20 | vec4 p = mix(vec4(c.bg, K.wz), 21 | vec4(c.gb, K.xy), 22 | step(c.b, c.g)); 23 | vec4 q = mix(vec4(p.xyw, c.r), 24 | vec4(c.r, p.yzx), 25 | step(p.x, c.r)); 26 | float d = q.x - min(q.w, q.y); 27 | float e = 1.0e-10; 28 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), 29 | d / (q.x + e), 30 | q.x); 31 | } 32 | 33 | 34 | // blue, white 35 | void main(){ 36 | vec2 res = gl_FragCoord.xy/u_resolution; 37 | 38 | vec2 heightAmount = res * 3.0; 39 | vec2 heightAmountInteger = floor(heightAmount); 40 | float random = random(vec2(heightAmountInteger.x + heightAmountInteger.y * 960.0)); 41 | 42 | vec3 color = vec3(0.75, 0.11, 0.11); 43 | vec3 pct = vec3(res.x); 44 | pct.r = abs(tan(res.x * res.y + u_time * random / 1.5)); 45 | pct.g = abs(cos(res.x * res.y+ u_time * random / 1.5)); 46 | pct.b = abs(cos(res.x * res.y + u_time * random / 0.5)); 47 | 48 | color = mix(colorA, colorB, pct); 49 | vec3 newColor = rgb2hsb(color); 50 | 51 | gl_FragColor = vec4(newColor,1.0); 52 | } -------------------------------------------------------------------------------- /11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 18 | 19 | 20 | 21 |

22 | 46 | 47 | -------------------------------------------------------------------------------- /11/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform vec2 u_mouse; 7 | uniform float u_time; 8 | 9 | // vec3 colorA = vec3(0.16); 10 | // vec3 colorB = vec3(0.64, 0.78, 0.26); 11 | vec3 colorA = vec3(0.16); 12 | vec3 colorB = vec3(0.64, 0.78, 0.26); 13 | 14 | float random (vec2 st) { 15 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 16 | } 17 | 18 | vec3 rgb2hsb( in vec3 c ){ 19 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 20 | vec4 p = mix(vec4(c.bg, K.wz), 21 | vec4(c.gb, K.xy), 22 | step(c.b, c.g)); 23 | vec4 q = mix(vec4(p.xyw, c.r), 24 | vec4(c.r, p.yzx), 25 | step(p.x, c.r)); 26 | float d = q.x - min(q.w, q.y); 27 | float e = 1.0e-10; 28 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), 29 | d / (q.x + e), 30 | q.x); 31 | } 32 | 33 | 34 | // fading squares 35 | void main(){ 36 | vec2 res = gl_FragCoord.xy/u_resolution; 37 | 38 | vec2 heightAmount = res * 200.0; 39 | // vec2 heightAmountInteger = heightAmount; 40 | vec2 heightAmountInteger = floor(heightAmount); 41 | float random = random(vec2(heightAmountInteger.x + heightAmountInteger.y * 10.0)); 42 | 43 | vec3 color = vec3(0.28, 0.01, 0.01); 44 | vec3 pct = vec3(res.x); 45 | // pct.r = abs(atan(res.y * res.x + u_time * random / 1.5)); 46 | // pct.g = abs(atan(res.y * res.x+ u_time * random / 1.5)); 47 | // pct.b = abs(atan(res.x * res.x + u_time * random / 1.5)); 48 | 49 | pct.r = abs(acos(res.y / res.x *res.y *res.y * res.x + u_time * random / 10.5)); 50 | pct.g = abs(asin(res.y / res.x * res.y *res.y * res.x + u_time * random / 14.5)); 51 | pct.b = abs(atan( res.y / res.x * res.y + u_time * random /10.5)); 52 | 53 | color = mix(colorA, colorB, pct); 54 | vec3 newColor = rgb2hsb(color); 55 | 56 | gl_FragColor = vec4(newColor,1.0); 57 | } -------------------------------------------------------------------------------- /12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 18 | 19 | 20 | 21 |

22 | 46 | 47 | -------------------------------------------------------------------------------- /12/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform vec2 u_mouse; 7 | uniform float u_time; 8 | 9 | // vec3 colorA = vec3(0.16); 10 | // vec3 colorB = vec3(0.64, 0.78, 0.26); 11 | 12 | // vec3 colorA = vec3(0.16, 0.01, 0.01); 13 | // vec3 colorB = vec3(0.74, 0.13, 0.95); 14 | 15 | vec3 colorA = vec3(0.39, 0.07, 0.61); 16 | vec3 colorB = vec3(0.85); 17 | 18 | float random (vec2 st) { 19 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 20 | } 21 | 22 | vec3 rgb2hsb( in vec3 c ){ 23 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 24 | vec4 p = mix(vec4(c.bg, K.wz), 25 | vec4(c.gb, K.xy), 26 | step(c.b, c.g)); 27 | vec4 q = mix(vec4(p.xyw, c.r), 28 | vec4(c.r, p.yzx), 29 | step(p.x, c.r)); 30 | float d = q.x - min(q.w, q.y); 31 | float e = 1.0e-10; 32 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), 33 | d / (q.x + e), 34 | q.x); 35 | } 36 | 37 | // purple rain 38 | void main(){ 39 | vec2 res = gl_FragCoord.xy/u_resolution; 40 | 41 | vec2 heightAmount = (res + 1.0) * 300.0; 42 | vec2 heightAmountInteger = floor(heightAmount) ; 43 | float random = random(vec2(heightAmountInteger.x )); 44 | 45 | vec3 color = vec3(1.0); 46 | vec3 pct = vec3(heightAmountInteger.x); 47 | // pct.r = abs(atan(res.y * res.x + u_time * random / 1.5)); 48 | // pct.g = abs(atan(res.y * res.x+ u_time * random / 1.5)); 49 | 50 | // pct.b = abs(atan(res.x * res.x + u_time * random / 1.5)); 51 | // pct.r = abs(acos(res.y * random / 10.5)); 52 | pct.g = abs(tan(res.y + 10.0 + u_time * 1.5 * random + 100.0 )); 53 | // pct.b = abs(atan( res.y / res.x + u_time * 12.0* random /10.5)); 54 | 55 | color = mix(colorA, colorB, pct); 56 | vec3 newColor = rgb2hsb(color); 57 | 58 | gl_FragColor = vec4(newColor,1.0); 59 | } -------------------------------------------------------------------------------- /13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 18 | 19 | 20 | 21 |

22 | 46 | 47 | -------------------------------------------------------------------------------- /13/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform vec2 u_mouse; 7 | uniform float u_time; 8 | 9 | 10 | vec3 colorA = vec3(0.37, 0.69, 0.55); 11 | vec3 colorB = vec3(0.65, 0.47, 0.47); 12 | 13 | // vec3 colorA = vec3(0.39, 0.62, 0.63); 14 | // vec3 colorB = vec3(0.73, 0.04, 0.04); 15 | 16 | float random (vec2 st) { 17 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 18 | } 19 | 20 | vec3 rgb2hsb( in vec3 c ){ 21 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 22 | vec4 p = mix(vec4(c.bg, K.wz), 23 | vec4(c.gb, K.xy), 24 | step(c.b, c.g)); 25 | vec4 q = mix(vec4(p.xyw, c.r), 26 | vec4(c.r, p.yzx), 27 | step(p.x, c.r)); 28 | float d = q.x - min(q.w, q.y); 29 | float e = 1.0e-10; 30 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), 31 | d / (q.x + e), 32 | q.x); 33 | } 34 | 35 | // fire 36 | void main(){ 37 | vec2 res = gl_FragCoord.xy/u_resolution; 38 | 39 | vec2 heightAmount = (res + 1.0) * 60.0; 40 | vec2 heightAmountInteger = floor(heightAmount) ; 41 | float random = random(vec2(tan(heightAmountInteger.x + heightAmountInteger.y) )); 42 | 43 | vec3 color = vec3(0.0); 44 | vec3 pct = vec3(heightAmountInteger.x); 45 | // pct.r = abs(atan(res.y * res.x + u_time * random / 1.5)); 46 | // pct.g = abs(atan(res.y * res.x+ u_time * random / 1.5)); 47 | 48 | // pct.b = abs(atan(res.x * res.x + u_time * random / 1.5)); 49 | // pct.r = abs(acos(res.y * random / 10.5)); 50 | pct.g = abs(tan(res.y + (res.x * 12.0) + 10.0 + u_time * 3.5 * random + 400.0 )); 51 | // pct.b = abs(atan( res.y / res.x + u_time * 12.0* random /10.5)); 52 | 53 | color = mix(colorA, colorB, pct); 54 | // vec3 newColor = rgb2hsb(color); 55 | 56 | gl_FragColor = vec4(color,1.0); 57 | } -------------------------------------------------------------------------------- /14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /14/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | 48 | // Define our points 49 | vec2 a0 = vec2(0.32, -0.45); 50 | vec2 a1 = vec2(-0.49, -0.32); 51 | vec2 a2 = vec2(-0.31, 0.38); 52 | vec2 a3 = vec2(-0.12, 0.04); 53 | 54 | vec2 b0 = vec2(-0.71, 0.53); 55 | vec2 b1 = vec2(0.01, 0.23); 56 | vec2 b2 = vec2(-0.24, 0.31); 57 | vec2 b3 = vec2(-0.01, -0.42); 58 | 59 | // Blending colors 60 | void main() { 61 | // Set up our imaginary plane 62 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 63 | vec2 z = uv * 10.; 64 | 65 | vec2 polyA = a0 66 | + cx_mul(a1, vec2(sin(u_time + z))) 67 | + cx_mul(a2, vec2(sin(u_time * z))) 68 | + cx_mul(a3, cx_pow(z, 2.0)); 69 | 70 | // Calculate the sum of our second polynomial 71 | vec2 polyB = b0 72 | + cx_mul(b1, vec2(sin(u_time * z))) 73 | + cx_mul(b2, vec2(sin(u_time * z))) 74 | + cx_mul(b3, cx_pow(z, 2.)); 75 | 76 | // Calculate the ratio of our complex polynomials 77 | vec2 result = cx_div(polyA, polyB); 78 | 79 | float imaginary = cx_log(result).y ; 80 | // float col = (imaginary / PI); 81 | 82 | 83 | // pink and blue 84 | // vec3 col = pal( 85 | // imaginary * 2., 86 | // vec3(abs(sin(u_time / 1.8)),.59,0.93), 87 | // vec3(0.2,0.12,.115), 88 | // vec3(0.2,0.34,.115), 89 | // vec3(abs(sin(u_time / 1.8)),1.13,.112) 90 | // ); 91 | 92 | // green / red 93 | // vec4 col = vec4( 94 | // pal(imaginary, 95 | // vec3(.52,.45,.61), 96 | // vec3(.40,.42,.31), 97 | // vec3(.26,.30,.35), 98 | // vec3(.15,.4,.4)), 99 | // 1.0); 100 | 101 | // red/pink and blue 102 | // vec4 col = vec4( 103 | // pal(imaginary, 104 | // vec3(.92,.25,.61), 105 | // vec3(-1.,.42,.31), 106 | // vec3(.26,.30,.35), 107 | // vec3(.15,.4,.4)), 108 | // 1.0); 109 | 110 | // blue / orange / pink / green 111 | float a = 1.0; 112 | vec4 col = vec4( 113 | pal(imaginary, 114 | vec3(a,.25,.61), 115 | vec3(a,.42,.31), 116 | vec3(.26,.30,a), 117 | vec3(.15,.4,a)), 118 | 1.0); 119 | 120 | 121 | // green / yellow / red 122 | // float a = 1.0; 123 | // vec4 col = vec4( 124 | // pal(imaginary, 125 | // vec3(a,.3,.11), 126 | // vec3(a,.52,.31), 127 | // vec3(.26,.30,a), 128 | // vec3(.15,.4,a)), 129 | // 1.0); 130 | 131 | // float a = 1.0; 132 | // vec4 col = vec4( 133 | // pal(imaginary, 134 | // vec3(a,.3,.41), 135 | // vec3(a,.52,.41), 136 | // vec3(.26,.30,a), 137 | // vec3(.15,.4,a)), 138 | // 1.0); 139 | 140 | 141 | // MISC 142 | // vec3 col = pal( 143 | // imaginary * 2., 144 | // vec3(abs(sin(u_time / 1.8)),.99,1.93), 145 | // vec3(0.2,0.0,.115), 146 | // vec3(0.2,0.1,.115), 147 | // vec3(abs(sin(u_time / 1.8)),0.13,1.112) 148 | // ); 149 | 150 | // vec3 col = pal( 151 | // imaginary * 2., 152 | // vec3(abs(sin(u_time / 1.8)),.69,2.93), 153 | // vec3(0.3,0.12,.115), 154 | // vec3(0.3,0.34,.115), 155 | // vec3(abs(sin(u_time / 1.8)),1.13,.112) 156 | // ); 157 | 158 | // vec3 col = pal( 159 | // imaginary * 2., 160 | // vec3(abs(sin(u_time / 1.8)),.79,0.93), 161 | // vec3(0.4,0.12,.115), 162 | // vec3(0.4,0.34,.115), 163 | // vec3(abs(sin(u_time / 1.8)),0.93,.112) 164 | // ); 165 | 166 | // vec3 col = pal( 167 | // imaginary * 2., 168 | // vec3(abs(cos(u_time / 1.8)),0.11,0.33), 169 | // vec3(0.3,0.12,0.115), 170 | // vec3(0.3,0.94,0.1115), 171 | // vec3(abs(cos(u_time / 1.8)),0.13,.2) 172 | // ); 173 | 174 | // old 175 | // gl_FragColor = vec4(col, 1.0); 176 | 177 | gl_FragColor = col; 178 | 179 | } -------------------------------------------------------------------------------- /15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /15/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | 48 | // Define our points 49 | vec2 a0 = vec2(0.32, -0.45); 50 | vec2 a1 = vec2(-0.49, -0.32); 51 | vec2 a2 = vec2(-0.31, 0.38); 52 | vec2 a3 = vec2(-0.12, 0.04); 53 | 54 | vec2 b0 = vec2(-0.71, 0.53); 55 | vec2 b1 = vec2(0.01, 0.23); 56 | vec2 b2 = vec2(-0.24, 0.31); 57 | vec2 b3 = vec2(-0.01, -0.42); 58 | 59 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 60 | // iridescent windows 61 | void main() { 62 | // Set up our imaginary plane 63 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 64 | vec2 z = uv * 10.; 65 | 66 | vec2 polyA = a0 67 | + cx_mul(a1, vec2(cos(u_time + z) * 2.)) 68 | + cx_mul(a2, vec2(cos(u_time + z)* 2.)) 69 | + cx_mul(a3, cx_pow(z, 2.0)); 70 | 71 | // Calculate the sum of our second polynomial 72 | vec2 polyB = b0 73 | + cx_mul(b1, vec2(cos(u_time + z)* 2.)) 74 | + cx_mul(b2, vec2(tan(u_time + z)* 2.)) 75 | + cx_mul(b3, cx_pow(z, 2.)); 76 | 77 | // Calculate the ratio of our complex polynomials 78 | vec2 result = cx_div(polyA, polyB); 79 | 80 | float imaginary = cx_log(result).y; 81 | // float imaginary = cx_log(result).y * cx_log(result).x; 82 | 83 | // blue / orange / pink / green 84 | float a = 1.0; 85 | vec4 col = vec4( 86 | pal(imaginary, 87 | vec3(a,.25,.61), 88 | vec3(a,.42,.31), 89 | vec3(.26,.30,a), 90 | vec3(.15,.4,a)), 91 | 1.0); 92 | 93 | gl_FragColor = col; 94 | 95 | } -------------------------------------------------------------------------------- /16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /16/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | float random (vec2 st) { 48 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 49 | } 50 | // Define our points 51 | vec2 a0 = vec2(0.32, -0.45); 52 | vec2 a1 = vec2(-0.49, -0.32); 53 | vec2 a2 = vec2(-0.31, 0.38); 54 | vec2 a3 = vec2(-0.12, 0.04); 55 | 56 | vec2 b0 = vec2(-0.71, 0.53); 57 | vec2 b1 = vec2(0.01, 1.23); 58 | vec2 b2 = vec2(-0.24, 1.31); 59 | vec2 b3 = vec2(-1.01, -0.42); 60 | 61 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 62 | // iridescent windows 63 | void main() { 64 | // Set up our imaginary plane 65 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 66 | vec2 z = uv * 10.; 67 | 68 | a3.y = cos(u_time / 2.); 69 | a3.x = sin(u_time / 2.); 70 | 71 | b1.y = cos(u_time / 2.); 72 | b1.x = sin(u_time / 2.); 73 | vec2 polyA = a0 74 | + cx_mul(a1, vec2(atan(u_time) * 32.)) 75 | + cx_mul(a2, vec2(cos(u_time* 2. )*10. )) 76 | + cx_mul(a3, cx_pow(z, 3.0)); 77 | 78 | // Calculate the sum of our second polynomial 79 | vec2 polyB = b0 80 | + cx_mul(b1, vec2(cos(u_time + z)* 2.)) 81 | + cx_mul(b2, vec2(cos(u_time )* 2.)) 82 | + cx_mul(b3, cx_pow(z, 2.)); 83 | 84 | // Calculate the ratio of our complex polynomials 85 | vec2 result = cx_div(polyA, polyB); 86 | 87 | float imaginary = cx_log(result).y; 88 | // float imaginary = cx_log(result).y * cx_log(result).x; 89 | 90 | // blue / orange / pink / green 91 | float a = 1.0; 92 | vec4 col = vec4( 93 | pal(imaginary / 2., 94 | vec3(a,.25,.61), 95 | vec3(a,.42,.31), 96 | vec3(.26,.30,a), 97 | vec3(.15,.4,a)), 98 | 1.0); 99 | 100 | gl_FragColor = col; 101 | 102 | } -------------------------------------------------------------------------------- /17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /17/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | float random (vec2 st) { 48 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 49 | } 50 | // Define our points 51 | vec2 a0 = vec2(0.32, -0.45); 52 | vec2 a1 = vec2(-0.49, -0.32); 53 | vec2 a2 = vec2(-0.31, 0.38); 54 | vec2 a3 = vec2(-0.12, 0.04); 55 | 56 | vec2 b0 = vec2(-0.71, 0.53); 57 | vec2 b1 = vec2(0.01, 1.23); 58 | vec2 b2 = vec2(-0.24, 1.31); 59 | vec2 b3 = vec2(-1.01, -0.42); 60 | 61 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 62 | void main() { 63 | // Set up our imaginary plane 64 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 65 | vec2 z = uv * 80.; 66 | 67 | a1.y = sin(u_time / 2.); 68 | a1.x = cos(u_time / 2.); 69 | 70 | a3.y = cos(u_time / 2.); 71 | a3.x = sin(u_time / 2.); 72 | 73 | b1.y = cos(u_time / 2.); 74 | b1.x = sin(u_time / 2.); 75 | 76 | // b3.y = cos(u_time / 2.); 77 | b2.x = atan(u_time / 2.); 78 | b3.y = sin(u_time / 2.); 79 | 80 | vec2 polyA = a0 81 | + cx_mul(a1, vec2(atan(u_time) * 32.)) 82 | + cx_mul(a2, vec2(cos(u_time* 2. )*10. )) 83 | + cx_mul(a3, cx_pow(z, cos(z.y ))); 84 | 85 | // Calculate the sum of our second polynomial 86 | vec2 polyB = b0 87 | + cx_mul(b1, vec2(cos(u_time + z)* 2.)) 88 | + cx_mul(b2, vec2(cos(u_time )* 2.)) 89 | + cx_mul(b3, cx_pow(z, sin(z.y ))); 90 | 91 | // Calculate the ratio of our complex polynomials 92 | vec2 result = cx_div(polyA, polyB); 93 | 94 | float imaginary = cx_log(result).y; 95 | // float imaginary = cx_log(result).y * cx_log(result).x; 96 | 97 | // blue / orange / pink / green 98 | float a = 1.0; 99 | vec4 col = vec4( 100 | pal(imaginary *1.5, 101 | vec3(a,.45,.61), 102 | vec3(a,.42,.31), 103 | vec3(.26,.30,a), 104 | vec3(.15,.4,a)), 105 | 1.0); 106 | 107 | gl_FragColor = col; 108 | 109 | } -------------------------------------------------------------------------------- /18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /18/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | float random (vec2 st) { 48 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 49 | } 50 | // Define our points 51 | vec2 a0 = vec2(0.32, -0.45); 52 | vec2 a1 = vec2(-0.49, -0.32); 53 | vec2 a2 = vec2(-0.31, 0.38); 54 | vec2 a3 = vec2(-0.12, 0.04); 55 | 56 | vec2 b0 = vec2(-0.71, 0.53); 57 | vec2 b1 = vec2(0.01, 1.23); 58 | vec2 b2 = vec2(-0.24, 1.31); 59 | vec2 b3 = vec2(-1.01, -0.42); 60 | 61 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 62 | void main() { 63 | // Set up our imaginary plane 64 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 65 | vec2 z = uv * 120.; 66 | 67 | a1.y = sin(u_time / 2.); 68 | a1.x = cos(u_time / 2.); 69 | 70 | a3.y = cos(u_time / 2.); 71 | a3.x = sin(u_time / 2.); 72 | 73 | // a2.y = atan(u_time / 2.); 74 | 75 | b1.y = cos(u_time / 2.); 76 | b1.x = sin(u_time / 2.); 77 | 78 | // b3.y = cos(u_time / 2.); 79 | b2.x = atan(u_time / 2.); 80 | b3.y = sin(u_time / 2.); 81 | 82 | vec2 polyA = a0 83 | + cx_mul(a1, vec2(atan(u_time) * 18.)) 84 | + cx_mul(a2, vec2(sin(u_time) )) 85 | + cx_mul(a3, cx_pow(z, cos(z.y / 2000. ))); 86 | 87 | // Calculate the sum of our second polynomial 88 | vec2 polyB = b0 89 | + cx_mul(b1, vec2(cos(u_time + z) / 2.)) 90 | + cx_mul(b2, vec2(sin(u_time ) / 2.)) 91 | + cx_mul(b3, cx_pow(z, sin(z.y / 2000. ))); 92 | 93 | // Calculate the ratio of our complex polynomials 94 | vec2 result = cx_div(polyA, polyB); 95 | 96 | float imaginary = cx_log(result).y; 97 | // float imaginary = cx_log(result).y * cx_log(result).x; 98 | 99 | // blue / orange / pink / green 100 | float a = 1.2; 101 | vec4 col = vec4( 102 | pal(imaginary / 1.6, 103 | vec3(a,.65,0.9), 104 | vec3(a,-.42,.31), 105 | vec3(.26,.30,a), 106 | vec3(.15,.4,a)), 107 | 1.0); 108 | 109 | gl_FragColor = col; 110 | 111 | } -------------------------------------------------------------------------------- /19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /19/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | float random (vec2 st) { 48 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 49 | } 50 | // Define our points 51 | vec2 a0 = vec2(0.32, -0.45); 52 | vec2 a1 = vec2(-0.49, -0.32); 53 | vec2 a2 = vec2(-0.31, 0.38); 54 | vec2 a3 = vec2(-0.12, 0.04); 55 | 56 | vec2 b0 = vec2(-0.71, 0.53); 57 | vec2 b1 = vec2(0.01, 1.23); 58 | vec2 b2 = vec2(-0.24, 1.31); 59 | vec2 b3 = vec2(-1.01, -0.42); 60 | 61 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 62 | void main() { 63 | // Set up our imaginary plane 64 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 65 | // vec2 z = uv * u_time * 10.; 66 | vec2 z = uv * 200.; 67 | 68 | a1.y = sin(u_time ); 69 | a1.x = cos(u_time ); 70 | 71 | a3.y = cos(u_time / 2.); 72 | a3.x = sin(u_time / 2.); 73 | 74 | a2.y = atan(u_time * 3. ); 75 | 76 | b1.y = cos(u_time / 2.); 77 | b1.x = sin(u_time / 4.); 78 | 79 | b3.y = cos(u_time / 2.); 80 | b2.x = atan(u_time / 2.); 81 | b3.y = sin(u_time / 2.); 82 | 83 | vec2 polyA = a0 84 | + cx_mul(a1, vec2(sin(u_time))) 85 | + cx_mul(a2, vec2(sin(u_time) )) 86 | + cx_mul(a3, cx_pow(z, cos(z.y / 2000. ))); 87 | 88 | // Calculate the sum of our second polynomial 89 | vec2 polyB = b0 90 | + cx_mul(b1, vec2(sin(u_time + z ) / 2.)) 91 | + cx_mul(b2, vec2(sin(u_time) / 2.)) 92 | + cx_mul(b3, cx_pow(z, sin(z.y / 2000. ))); 93 | 94 | // Calculate the ratio of our complex polynomials 95 | vec2 result = cx_div(polyA, polyB); 96 | 97 | float imaginary = cx_log(result).y; 98 | // float imaginary = cx_log(result).y * cx_log(result).x; 99 | 100 | // green / yellow / red 101 | float a = 1.4; 102 | vec4 col = vec4( 103 | pal(imaginary / 1.00, 104 | vec3(a,.5,0.6), 105 | vec3(a,.3,.41), 106 | vec3(.5,.40,a), 107 | vec3(.15,.3,a)), 108 | 1.0); 109 | 110 | gl_FragColor = col; 111 | } -------------------------------------------------------------------------------- /20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /20/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | float random (vec2 st) { 48 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 49 | } 50 | // Define our points 51 | vec2 a0 = vec2(0.32, -0.45); 52 | vec2 a1 = vec2(-0.49, -0.32); 53 | vec2 a2 = vec2(-0.31, 0.38); 54 | vec2 a3 = vec2(-0.12, 0.04); 55 | 56 | vec2 b0 = vec2(-0.71, 0.53); 57 | vec2 b1 = vec2(0.01, 1.23); 58 | vec2 b2 = vec2(-0.24, 1.31); 59 | vec2 b3 = vec2(-1.01, -0.42); 60 | 61 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 62 | void main() { 63 | // Set up our imaginary plane 64 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 65 | // vec2 z = uv * u_time * 10.; 66 | vec2 z = uv * 200.; 67 | 68 | a1.y = sin(u_time ); 69 | a1.x = cos(u_time ); 70 | 71 | a3.y = cos(u_time / 2.); 72 | a3.x = sin(u_time / 2.); 73 | 74 | a2.y = atan(u_time * 3. ); 75 | 76 | b1.y = cos(u_time / 2.); 77 | b1.x = sin(u_time / 4.); 78 | 79 | b3.y = cos(u_time / 2.); 80 | b2.x = atan(u_time / 2.); 81 | b3.y = sin(u_time / 2.); 82 | 83 | vec2 polyA = a0 84 | + cx_mul(a1, vec2(sin(u_time))) 85 | + cx_mul(a2, vec2(sin(u_time) )) 86 | + cx_mul(a3, cx_pow(z, cos(z.y / 2000. ))); 87 | 88 | // Calculate the sum of our second polynomial 89 | vec2 polyB = b0 90 | + cx_mul(b1, vec2(sin(u_time ) / 2.)) 91 | + cx_mul(b2, vec2(sin(u_time) / 2.)) 92 | + cx_mul(b3, cx_pow(z, sin(z.y / 2000. ))); 93 | 94 | // Calculate the ratio of our complex polynomials 95 | vec2 result = cx_div(polyA, polyB); 96 | 97 | float imaginary = cx_log(result).y; 98 | // float imaginary = cx_log(result).y * cx_log(result).x; 99 | 100 | // green / yellow / red 101 | float a = 1.4; 102 | vec4 col = vec4( 103 | pal(imaginary / 1.00, 104 | vec3(a,.5,0.6), 105 | vec3(a,.3,.41), 106 | vec3(.5,.40,a), 107 | vec3(.15,.3,a)), 108 | 1.0); 109 | 110 | gl_FragColor = col; 111 | } -------------------------------------------------------------------------------- /21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 79 | 80 | -------------------------------------------------------------------------------- /21/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | float random (vec2 st) { 48 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 49 | } 50 | // Define our points 51 | vec2 a0 = vec2(0.32, -0.45); 52 | vec2 a1 = vec2(-0.49, -0.32); 53 | vec2 a2 = vec2(-0.31, 0.38); 54 | vec2 a3 = vec2(-0.12, 0.04); 55 | 56 | vec2 b0 = vec2(-0.71, 0.53); 57 | vec2 b1 = vec2(0.01, 1.23); 58 | vec2 b2 = vec2(-0.24, 1.31); 59 | vec2 b3 = vec2(-1.01, -0.42); 60 | 61 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 62 | void main() { 63 | // Set up our imaginary plane 64 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 65 | // vec2 z = uv * u_time * 10.; 66 | vec2 z = uv * 100.; 67 | 68 | a1.y = sin(u_time ); 69 | a1.x = cos(u_time ); 70 | 71 | a3.y = cos(u_time / 2.); 72 | a3.x = sin(u_time / 2.); 73 | 74 | a2.y = atan(u_time * 3. ); 75 | 76 | b1.y = cos(u_time / 2.); 77 | b1.x = sin(u_time / 4.); 78 | 79 | b3.y = cos(u_time / 2.); 80 | b2.x = atan(u_time / 2.); 81 | b3.y = sin(u_time / 2.); 82 | 83 | vec2 polyA = a0 84 | + cx_mul(a1, vec2(sin(u_time+ z))) 85 | + cx_mul(a2, vec2(sin(u_time) )) 86 | + cx_mul(a3, cx_pow(z, cos(z.x / 2000. ))); 87 | 88 | // Calculate the sum of our second polynomial 89 | vec2 polyB = b0 90 | + cx_mul(b1, vec2(sin(u_time))) 91 | + cx_mul(b2, vec2(sin(u_time))) 92 | + cx_mul(b3, cx_pow(z, sin(z.y / 20000. ))); 93 | 94 | // Calculate the ratio of our complex polynomials 95 | vec2 result = cx_div(polyA, polyB); 96 | 97 | float imaginary = cx_log(result).y ; 98 | // float imaginary = cx_log(result).y * cx_log(result).x; 99 | 100 | // green / yellow / red 101 | float a = 1.3; 102 | vec4 col = vec4( 103 | pal(imaginary / 2.00, 104 | vec3(a,.9,0.6), 105 | vec3(a,.4,.91), 106 | vec3(.9,.30,a), 107 | vec3(-.25,-.3,a)), 108 | 1.0); 109 | 110 | gl_FragColor = col; 111 | } -------------------------------------------------------------------------------- /22/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /22/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | float random (vec2 st) { 48 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 49 | } 50 | // Define our points 51 | vec2 a0 = vec2(0.32, -0.45); 52 | vec2 a1 = vec2(-0.49, -0.32); 53 | vec2 a2 = vec2(-0.31, 0.38); 54 | vec2 a3 = vec2(-0.12, 0.04); 55 | 56 | vec2 b0 = vec2(-0.71, 0.53); 57 | vec2 b1 = vec2(0.01, 1.23); 58 | vec2 b2 = vec2(-0.24, 1.31); 59 | vec2 b3 = vec2(-1.01, -0.42); 60 | 61 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 62 | void main() { 63 | // Set up our imaginary plane 64 | vec2 uv = (gl_FragCoord.xy - .5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 65 | // vec2 z = uv * u_time * 10.; 66 | vec2 z = uv * 6.; 67 | 68 | a1.y = sin(u_time ); 69 | a1.x = cos(u_time ); 70 | 71 | a3.y = cos(u_time / 2.); 72 | a3.x = sin(u_time / 2.); 73 | 74 | a2.y = atan(u_time ); 75 | 76 | // b1.y = cos(u_time / 2.); 77 | // b1.x = sin(u_time / 4.); 78 | 79 | // b3.y = cos(u_time / 2.); 80 | // b2.x = atan(u_time / 2.); 81 | b3.y = sin(u_time / 2.); 82 | 83 | vec2 polyA = a0 84 | + cx_mul(a1, vec2(sin(u_time + z))) 85 | + cx_mul(a2, vec2(sin(u_time) )) 86 | + cx_mul(a3, cx_tan(z )); 87 | 88 | vec2 polyB = b0 89 | + cx_mul(b1, vec2(sin(u_time ))) 90 | + cx_mul(b2, vec2(10.)) 91 | + cx_mul(b3, cx_pow(z / 19., sin(z.y / 2000. ))); 92 | 93 | vec2 result = cx_div(polyA, polyB); 94 | 95 | float imaginary = cx_log(result).y; 96 | // float imaginary = cx_log(result).y * cx_log(result).x; 97 | 98 | float a = 0.99; 99 | vec4 col = vec4( 100 | pal(imaginary / 2., 101 | vec3(a,.2,0.55), 102 | vec3(a,.7,.40), 103 | vec3(.2,-.40,a), 104 | vec3(.20,.3,a)), 105 | 1.0); 106 | 107 | gl_FragColor = col; 108 | } -------------------------------------------------------------------------------- /23/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /23/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | float colormap_red(float x) { 9 | if (x < 0.0) { 10 | return 54.0 / 255.0; 11 | } else if (x < 20049.0 / 82979.0) { 12 | return (829.79 * x + 54.51) / 255.0; 13 | } else { 14 | return 1.0; 15 | } 16 | } 17 | 18 | float colormap_green(float x) { 19 | if (x < 20049.0 / 82979.0) { 20 | return 0.0; 21 | } else if (x < 327013.0 / 810990.0) { 22 | return (8546482679670.0 / 10875673217.0 * x - 2064961390770.0 / 10875673217.0) / 255.0; 23 | } else if (x <= 1.0) { 24 | return (103806720.0 / 483977.0 * x + 19607415.0 / 483977.0) / 255.0; 25 | } else { 26 | return 1.0; 27 | } 28 | } 29 | 30 | float colormap_blue(float x) { 31 | if (x < 0.0) { 32 | return 54.0 / 255.0; 33 | } else if (x < 7249.0 / 82979.0) { 34 | return (829.79 * x + 54.51) / 255.0; 35 | } else if (x < 20049.0 / 82979.0) { 36 | return 127.0 / 255.0; 37 | } else if (x < 327013.0 / 810990.0) { 38 | return (792.02249341361393720147485376583 * x - 64.364790735602331034989206222672) / 255.0; 39 | } else { 40 | return 1.0; 41 | } 42 | } 43 | 44 | vec4 colormap(float x) { 45 | return vec4(colormap_red(x), colormap_green(x), colormap_blue(x), 1.0); 46 | } 47 | 48 | 49 | float rand(vec2 n) { 50 | return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); 51 | } 52 | 53 | float noise(vec2 p){ 54 | vec2 ip = floor(p); 55 | vec2 u = fract(p); 56 | u = u*u*(3.0-2.0*u); 57 | 58 | float res = mix( 59 | mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x), 60 | mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),u.y); 61 | return res*res; 62 | } 63 | 64 | const mat2 mtx = mat2( 0.80, 0.60, -0.60, 0.80 ); 65 | 66 | float fbm( vec2 p ) 67 | { 68 | float f = 0.0; 69 | 70 | f += 0.500000*noise( p + u_time); p = mtx*p*2.02; 71 | f += 0.031250*noise( p ); p = mtx*p; 72 | f += 0.250000*noise( p + u_time); p = mtx*p*2.03; 73 | f += 0.125000*noise( p + sin(u_time)); p = mtx*p*100.01; 74 | f += 0.062500*noise( p + u_time); p = mtx*p*2.04; 75 | f += 0.015625*noise( p + sin(u_time) ); 76 | 77 | return f/0.96875; 78 | } 79 | 80 | float pattern( in vec2 p ) 81 | { 82 | return fbm( p + fbm( p + fbm( p ) ) ); 83 | } 84 | 85 | void main() { 86 | vec2 uv = gl_FragCoord.xy / u_resolution.x * 10.; 87 | float shade = pattern(uv); 88 | gl_FragColor = vec4(colormap(shade).rgb, 1.0); 89 | } 90 | -------------------------------------------------------------------------------- /24/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /24/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | void main() { 9 | vec2 uv = (4.0 * gl_FragCoord.xy - u_resolution.xy) / min(u_resolution.x, u_resolution.y); 10 | 11 | for(float i = 1.0; i < 10.0; i++){ 12 | uv.x += 0.6 / i * cos(i * 2.0 * uv.y + u_time); 13 | uv.y += 0.6 / i * cos(i * 1.5 * uv.x + u_time); 14 | } 15 | 16 | gl_FragColor = vec4(vec3(0.1)/abs(sin(u_time-uv.y-uv.x)),1.0); 17 | } 18 | -------------------------------------------------------------------------------- /25/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /25/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | 48 | // Define our points 49 | vec2 a0 = vec2(0.32, -0.45); 50 | vec2 a1 = vec2(-0.49, -0.32); 51 | vec2 a2 = vec2(-0.31, 0.38); 52 | vec2 a3 = vec2(-0.22, 0.04); 53 | 54 | vec2 b0 = vec2(-0.71, 0.53); 55 | vec2 b1 = vec2(0.01, 0.23); 56 | vec2 b2 = vec2(-0.24, 0.31); 57 | vec2 b3 = vec2(-0.01, -0.42); 58 | 59 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 60 | void main() { 61 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 62 | vec2 z = uv * 10.; 63 | 64 | vec2 polyA = a0 65 | + cx_mul(a1, vec2(cos(u_time + z) * 2.)) 66 | + cx_mul(a2, vec2(sin(u_time + z)* 2.)) 67 | + cx_mul(a3, cx_pow(z, 2.0)); 68 | 69 | vec2 polyB = b0 70 | + cx_mul(b1, vec2(sin(u_time + z)* 2.)) 71 | + cx_mul(b2, vec2(atan(u_time + z)* 2.)) 72 | + cx_mul(b3, cx_pow(z, 2.)); 73 | 74 | vec2 result = cx_div(polyA, polyB); 75 | 76 | float imaginary = cx_log(result).y; 77 | 78 | // blue / orange / pink / green 79 | float a = 1.0; 80 | vec4 col = vec4( 81 | pal(imaginary, 82 | vec3(a,.25,.61), 83 | vec3(a,.42,.31), 84 | vec3(.26,.30,a), 85 | vec3(.15,.4,a)), 86 | 1.0); 87 | 88 | gl_FragColor = col; 89 | } -------------------------------------------------------------------------------- /26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /26/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | 48 | // Define our points 49 | vec2 a0 = vec2(0.42, -0.45); 50 | vec2 a1 = vec2(-.49, -0.32); 51 | vec2 a2 = vec2(-0.31, 0.38); 52 | vec2 a3 = vec2(-0.22, 0.04); 53 | 54 | vec2 b0 = vec2(-0.71, 0.3); 55 | vec2 b1 = vec2(0.01, 0.23); 56 | vec2 b2 = vec2(-0.24, 0.21); 57 | vec2 b3 = vec2(-0.01, -1.42); 58 | 59 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 60 | void main() { 61 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 62 | vec2 z = uv * 10.; 63 | 64 | vec2 polyA = a0 65 | + cx_mul(a1, vec2(cos(u_time + z) * 2.)) 66 | + cx_mul(a2, vec2(sin(u_time + z)* 2.)) 67 | + cx_mul(a3, cx_pow(z, 2.0)); 68 | 69 | vec2 polyB = b0 70 | + cx_mul(b1, vec2(sin(u_time + z)* 2.)) 71 | + cx_mul(b2, vec2(atan(u_time + z)* 2.)) 72 | + cx_mul(b3, cx_pow(z, 2.)); 73 | 74 | vec2 result = cx_div(polyA, polyB); 75 | 76 | float imaginary = cx_log(result).y; 77 | 78 | float a = 1.0; 79 | vec4 col = vec4( 80 | pal(imaginary, 81 | vec3(a,.35,.51), 82 | vec3(a,.42,.31), 83 | vec3(.26,.30,a), 84 | vec3(.05,.4,a)), 85 | 1.0); 86 | 87 | gl_FragColor = col; 88 | } -------------------------------------------------------------------------------- /27/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /27/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | 48 | // Define our points 49 | vec2 a0 = vec2(0.42, -0.45); 50 | vec2 a1 = vec2(-1.49, -0.32); 51 | vec2 a2 = vec2(-0.31, 0.38); 52 | vec2 a3 = vec2(-0.22, 0.04); 53 | 54 | vec2 b0 = vec2(-0.71, 0.3); 55 | vec2 b1 = vec2(0.01, 1.23); 56 | vec2 b2 = vec2(-0.24, 0.21); 57 | vec2 b3 = vec2(-1.01, -1.42); 58 | 59 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 60 | void main() { 61 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 62 | vec2 z = uv * 9.; 63 | 64 | vec2 polyA = a0 65 | + cx_mul(a1, vec2(cos(u_time + z) * 2.)) 66 | + cx_mul(a2, vec2(sin(u_time)* 2.)) 67 | + cx_mul(a3, cx_pow(z, 3.0)); 68 | 69 | vec2 polyB = b0 70 | + cx_mul(b1, vec2(sin(u_time + z)* 2.)) 71 | + cx_mul(b2, vec2(atan(u_time + z)* 2.)) 72 | + cx_mul(b3, cx_pow(z, 2.)); 73 | 74 | vec2 result = cx_div(polyA, polyB); 75 | 76 | float imaginary = cx_log(result).x; 77 | 78 | float a = 1.2; 79 | vec4 col = vec4( 80 | pal(imaginary, 81 | vec3(a,.35,.61), 82 | vec3(a,.42,.31), 83 | vec3(.16,.35,a), 84 | vec3(.25,.4,a)), 85 | 1.0); 86 | 87 | gl_FragColor = col; 88 | 89 | } -------------------------------------------------------------------------------- /28/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /28/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | 48 | vec2 a0 = vec2(0.32, -0.45); 49 | vec2 a1 = vec2(-0.49, -0.32); 50 | vec2 a2 = vec2(-0.71, 0.53); 51 | vec2 a3 = vec2(-0.12, 0.04); 52 | 53 | vec2 b0 = vec2(-0.71, 0.53); 54 | vec2 b1 = vec2(0.01, 0.23); 55 | vec2 b2 = vec2(-0.24, 0.31); 56 | vec2 b3 = vec2(-0.12, 0.04); 57 | 58 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 59 | void main() { 60 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 61 | vec2 z = uv * 3.; 62 | 63 | vec2 polyA = a0 64 | + cx_mul(a1, vec2(atan(z * u_time))) 65 | + cx_mul(a2, vec2(cos(u_time))) 66 | + cx_mul(a3, cx_pow(z, 18.0)); 67 | 68 | vec2 polyB = b0 69 | + cx_mul(b1, vec2(atan(z + u_time / 2.))) 70 | + cx_mul(b2, vec2(tan(z / 2.))) // divided by 2. gets rid of weird lines 71 | + cx_mul(b3, cx_pow(z, 16.)); 72 | 73 | vec2 result = cx_div(polyA, polyB); 74 | 75 | float imaginary = cx_log(result).y / 1.; 76 | 77 | // float a = 1.0; 78 | // vec4 col = vec4( 79 | // pal(imaginary, 80 | // vec3(a,.25,.61), 81 | // vec3(a,.42,.31), 82 | // vec3(.26,.30,a), 83 | // vec3(.15,.4,a)), 84 | // 1.0); 85 | 86 | float a = .95; 87 | vec4 col = vec4( 88 | pal(imaginary, 89 | vec3(a,.25,.21), 90 | vec3(a,.42,.31), 91 | vec3(.26,.30,a), 92 | vec3(.05,.4,a)), 93 | 1.0); 94 | 95 | gl_FragColor = col * 1.15; 96 | 97 | } -------------------------------------------------------------------------------- /29/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /29/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | 48 | vec2 a0 = vec2(0.32, -0.45); 49 | vec2 a1 = vec2(-0.49, -0.32); 50 | vec2 a2 = vec2(-0.71, 0.53); 51 | vec2 a3 = vec2(-0.12, 0.04); 52 | 53 | vec2 b0 = vec2(-0.71, 0.53); 54 | vec2 b1 = vec2(0.01, 0.23); 55 | vec2 b2 = vec2(-0.24, 0.31); 56 | vec2 b3 = vec2(-0.12, 0.04); 57 | 58 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 59 | void main() { 60 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 61 | vec2 z = uv * 3.; 62 | 63 | vec2 polyA = a0 64 | + cx_mul(a1, vec2(atan(z / u_time / 1.5))) 65 | + cx_mul(a2, vec2(cos(z + u_time / 1.5))) 66 | + cx_mul(a3, cx_pow(z, 14.0)); 67 | 68 | vec2 polyB = b0 69 | + cx_mul(b1, vec2(atan(z + u_time / 2.))) 70 | + cx_mul(b2, vec2(tan(z / 2.))) // divided by 2. gets rid of weird lines 71 | + cx_mul(b3, cx_pow(z, 16.)); 72 | 73 | vec2 result = cx_div(polyA, polyB); 74 | 75 | float imaginary = cx_log(result).y / 1.9; 76 | 77 | // float a = 1.0; 78 | // vec4 col = vec4( 79 | // pal(imaginary, 80 | // vec3(a,.25,.61), 81 | // vec3(a,.42,.31), 82 | // vec3(.26,.30,a), 83 | // vec3(.15,.4,a)), 84 | // 1.0); 85 | 86 | float a = .85; 87 | vec4 col = vec4( 88 | pal(imaginary, 89 | vec3(a,.25,.21), 90 | vec3(a,.42,.31), 91 | vec3(.26,.30,a), 92 | vec3(.05,.4,a)), 93 | 1.0); 94 | 95 | gl_FragColor = col; 96 | 97 | } -------------------------------------------------------------------------------- /30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /30/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | 48 | // Define our points 49 | vec2 a0 = vec2(0.32, -0.45); 50 | vec2 a1 = vec2(-0.49, -0.32); 51 | vec2 a2 = vec2(-0.31, 0.38); 52 | vec2 a3 = vec2(-0.12, 0.04); 53 | 54 | vec2 b0 = vec2(-0.71, 0.53); 55 | vec2 b1 = vec2(0.01, 0.23); 56 | vec2 b2 = vec2(-0.24, 0.31); 57 | vec2 b3 = vec2(-0.01, -0.42); 58 | 59 | // Blending colors 60 | void main() { 61 | // Set up our imaginary plane 62 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 63 | vec2 z = uv * 10.; 64 | 65 | vec2 polyA = a0 66 | + cx_mul(a1, vec2(sin(u_time + z))) 67 | + cx_mul(a2, vec2(sin(u_time * z))) 68 | + cx_mul(a3, cx_pow(z, 1.0)); 69 | 70 | // Calculate the sum of our second polynomial 71 | vec2 polyB = b0 72 | + cx_mul(b1, vec2(sin(u_time + z))) 73 | + cx_mul(b2, vec2(sin(u_time * z))) 74 | + cx_mul(b3, cx_pow(z, 2.)); 75 | 76 | // Calculate the ratio of our complex polynomials 77 | vec2 result = cx_div(polyA, polyB); 78 | 79 | float imaginary = cx_log(result).y ; 80 | // float col = (imaginary / PI); 81 | 82 | 83 | // pink and blue 84 | // vec3 col = pal( 85 | // imaginary * 2., 86 | // vec3(abs(sin(u_time / 1.8)),.59,0.93), 87 | // vec3(0.2,0.12,.115), 88 | // vec3(0.2,0.34,.115), 89 | // vec3(abs(sin(u_time / 1.8)),1.13,.112) 90 | // ); 91 | 92 | // green / red 93 | // vec4 col = vec4( 94 | // pal(imaginary, 95 | // vec3(.52,.45,.61), 96 | // vec3(.40,.42,.31), 97 | // vec3(.26,.30,.35), 98 | // vec3(.15,.4,.4)), 99 | // 1.0); 100 | 101 | // red/pink and blue 102 | // vec4 col = vec4( 103 | // pal(imaginary, 104 | // vec3(.92,.25,.61), 105 | // vec3(-1.,.42,.31), 106 | // vec3(.26,.30,.35), 107 | // vec3(.15,.4,.4)), 108 | // 1.0); 109 | 110 | // blue / orange / pink / green 111 | // float a = 1.0; 112 | // vec4 col = vec4( 113 | // pal(imaginary, 114 | // vec3(a,.25,.61), 115 | // vec3(a,.42,.31), 116 | // vec3(.26,.30,a), 117 | // vec3(.15,.4,a)), 118 | // 1.0); 119 | 120 | float a = 1.0; 121 | vec4 col = vec4( 122 | pal(imaginary, 123 | vec3(a,.35,.51), 124 | vec3(a,.42,.31), 125 | vec3(.26,.30,a), 126 | vec3(.05,.4,a)), 127 | 1.0); 128 | 129 | // green / yellow / red 130 | // float a = 1.0; 131 | // vec4 col = vec4( 132 | // pal(imaginary, 133 | // vec3(a,.3,.11), 134 | // vec3(a,.52,.31), 135 | // vec3(.26,.30,a), 136 | // vec3(.15,.4,a)), 137 | // 1.0); 138 | 139 | // float a = 1.0; 140 | // vec4 col = vec4( 141 | // pal(imaginary, 142 | // vec3(a,.3,.41), 143 | // vec3(a,.52,.41), 144 | // vec3(.26,.30,a), 145 | // vec3(.15,.4,a)), 146 | // 1.0); 147 | 148 | 149 | // MISC 150 | // vec3 col = pal( 151 | // imaginary * 2., 152 | // vec3(abs(sin(u_time / 1.8)),.99,1.93), 153 | // vec3(0.2,0.0,.115), 154 | // vec3(0.2,0.1,.115), 155 | // vec3(abs(sin(u_time / 1.8)),0.13,1.112) 156 | // ); 157 | 158 | // vec3 col = pal( 159 | // imaginary * 2., 160 | // vec3(abs(sin(u_time / 1.8)),.69,2.93), 161 | // vec3(0.3,0.12,.115), 162 | // vec3(0.3,0.34,.115), 163 | // vec3(abs(sin(u_time / 1.8)),1.13,.112) 164 | // ); 165 | 166 | // vec3 col = pal( 167 | // imaginary * 2., 168 | // vec3(abs(sin(u_time / 1.8)),.79,0.93), 169 | // vec3(0.4,0.12,.115), 170 | // vec3(0.4,0.34,.115), 171 | // vec3(abs(sin(u_time / 1.8)),0.93,.112) 172 | // ); 173 | 174 | // vec3 col = pal( 175 | // imaginary * 2., 176 | // vec3(abs(cos(u_time / 1.8)),0.11,0.33), 177 | // vec3(0.3,0.12,0.115), 178 | // vec3(0.3,0.94,0.1115), 179 | // vec3(abs(cos(u_time / 1.8)),0.13,.2) 180 | // ); 181 | 182 | // old 183 | // gl_FragColor = vec4(col, 1.0); 184 | 185 | gl_FragColor = col; 186 | 187 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Screenshot 2024-05-22 at 8 54 28 PM](https://github.com/adamfuhrer/shaders/assets/10779827/bc330e1b-665b-4d57-ab1e-e504cdbf7fff) 2 | 3 | Shaders: https://shaders-adamfuhrer.vercel.app/ 4 | 5 | Website: https://adamfuhrer.com/ 6 | -------------------------------------------------------------------------------- /complex-numbers-midi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 115 | 116 | -------------------------------------------------------------------------------- /complex-numbers-midi/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | uniform float u_width; 8 | 9 | #define PI 3.141592653589793 10 | #define cx_div(a, b) vec2(((a.x*b.x+a.y*b.y)/(b.x*b.x+b.y*b.y)),((a.y*b.x-a.x*b.y)/(b.x*b.x+b.y*b.y))) 11 | 12 | vec2 as_polar(vec2 z) { 13 | return vec2( 14 | length(z), 15 | atan(z.y, z.x) 16 | ); 17 | } 18 | 19 | vec2 cx_log(vec2 a) { 20 | vec2 polar = as_polar(a); 21 | float rpart = polar.x; 22 | float ipart = polar.y; 23 | if (ipart > PI) ipart=ipart-(2.0*PI); 24 | return vec2(log(rpart),ipart); 25 | } 26 | 27 | vec3 palette( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) { 28 | return a + b*cos( 0.38*2.*PI*(c*t+d) ); 29 | } 30 | 31 | // Most code from here: https://hturan.com/writing/complex-numbers-glsl 32 | // Alternating between all pink -> all blue - with varying width controlled via ortho remote 33 | void main() { 34 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 35 | vec2 z = uv; 36 | 37 | float angle = sin(u_time/8.) * 2.5 * PI; 38 | 39 | float length = u_width / 1000.; 40 | 41 | float c = cos(angle); 42 | float s = sin(angle); 43 | vec2 p = vec2( s*length, c*length); 44 | vec2 q = vec2( s*-length, c*-length ); 45 | 46 | vec2 division = cx_div((z - p), (z - q)); 47 | vec2 log_p_over_q = cx_log(division); 48 | float imaginary = log_p_over_q.y / PI; 49 | 50 | vec3 col = palette( 51 | imaginary, 52 | vec3(sin(u_time / 1.9),.52,0.53), 53 | vec3(5.7,.42,.35), 54 | vec3(0.2,.84,.45), 55 | vec3(sin(u_time / 1.9),0.93,0.12) 56 | ); 57 | 58 | gl_FragColor = vec4(col, 1.0); 59 | } -------------------------------------------------------------------------------- /complex-numbers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /complex-numbers/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | 6 | uniform vec2 u_resolution; 7 | uniform float u_time; 8 | 9 | #define PI 3.141592653589793 10 | 11 | #define cx_div(a, b) vec2(((a.x*b.x+a.y*b.y)/(b.x*b.x+b.y*b.y)),((a.y*b.x-a.x*b.y)/(b.x*b.x+b.y*b.y))) 12 | 13 | vec2 as_polar(vec2 z) { 14 | return vec2( 15 | length(z), 16 | atan(z.y, z.x) 17 | ); 18 | } 19 | 20 | vec2 cx_log(vec2 a) { 21 | vec2 polar = as_polar(a); 22 | float rpart = polar.x; 23 | float ipart = polar.y; 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec3 palette( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) { 29 | return a + b*cos( 0.38*2.*PI*(c*t+d) ); 30 | } 31 | 32 | // Copy of this: https://hturan.com/writing/complex-numbers-glsl 33 | // Updated to: alternating between all pink -> all blue 34 | void main() { 35 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 36 | vec2 z = uv; 37 | 38 | float angle = sin(u_time/6.) * 2. * PI; 39 | float length = .3; 40 | 41 | // Spin our points in a circle of radius length 42 | float c = cos(angle); 43 | float s = sin(angle); 44 | vec2 p = vec2( s*length, c*length); 45 | vec2 q = vec2( s*-length, c*-length ); 46 | 47 | // Divide z-p by z-q using complex division 48 | vec2 division = cx_div((z - p), (z - q)); 49 | 50 | // Calculate the log of our division 51 | vec2 log_p_over_q = cx_log(division); 52 | 53 | // Extract the imaginary number 54 | float imaginary = log_p_over_q.y / PI; 55 | 56 | vec3 col = palette( 57 | imaginary, 58 | vec3(sin(u_time / 1.8),.52,0.53), 59 | vec3(5.7,.32,.35), 60 | vec3(0.2,.84,.45), 61 | vec3(sin(u_time / 1.8),0.33,0.22) 62 | ); 63 | 64 | gl_FragColor = vec4(col, 1.0); 65 | } -------------------------------------------------------------------------------- /emitting-light/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /emitting-light/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | 48 | // Define our points 49 | vec2 a0 = vec2(0.32, -0.45); 50 | vec2 a1 = vec2(-0.49, -0.32); 51 | vec2 a2 = vec2(-0.31, 0.38); 52 | vec2 a3 = vec2(-0.12, 0.04); 53 | 54 | vec2 b0 = vec2(-0.71, 0.53); 55 | vec2 b1 = vec2(0.01, 0.23); 56 | vec2 b2 = vec2(-0.24, 0.31); 57 | vec2 b3 = vec2(-0.01, -0.42); 58 | 59 | float random (vec2 st) { 60 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 61 | } 62 | 63 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 64 | // iridescent windows 65 | void main() { 66 | // Set up our imaginary plane 67 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 68 | vec2 z = uv * 20.; 69 | 70 | vec2 heightAmountInteger = floor(z * 3.0); 71 | float random = random(vec2(heightAmountInteger.x)); 72 | 73 | vec2 polyA = a0 74 | + cx_mul(a1, vec2(sin(z) *1.)) 75 | + cx_mul(a2, vec2(cos( z)* 11111.)) 76 | + cx_mul(a3, cx_pow(z, 2.0)); 77 | 78 | // Calculate the sum of our second polynomial 79 | vec2 polyB = b0 80 | + cx_mul(b1, vec2(cos(z)* 1111.)) 81 | + cx_mul(b2, vec2(sin( z))) 82 | + cx_mul(b3, cx_pow(z, 2.)); 83 | 84 | // Calculate the ratio of our complex polynomials 85 | vec2 result = cx_div(polyA, polyB); 86 | 87 | float imaginary = cx_log(result).x ; 88 | 89 | // pink / orange 90 | float a = 1.9 ; 91 | vec4 col = vec4( 92 | pal(imaginary , 93 | vec3(3.,.95,.7), 94 | vec3(a,.99,.35), 95 | vec3(.96,.30,a), 96 | vec3(.95,.4,a)), 97 | 1.0); 98 | 99 | // blue / green 100 | // float a = 1.9 ; 101 | // vec4 col = vec4( 102 | // pal(imaginary , 103 | // vec3(a ,.95,.91), 104 | // vec3(a,.99,.31), 105 | // vec3(.16,.30,a), 106 | // vec3(.95,.4,a)), 107 | // 1.0); 108 | 109 | // float a = 1.9 ; 110 | // vec4 col = vec4( 111 | // pal(imaginary , 112 | // vec3(a ,.95,.91), 113 | // vec3(a,.99,.31), 114 | // vec3(.16,.30,a), 115 | // vec3(.95,.4,a)), 116 | // 1.0); 117 | 118 | gl_FragColor = col; 119 | 120 | } -------------------------------------------------------------------------------- /gradient-editor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 150 | 151 | -------------------------------------------------------------------------------- /iridescent-windows-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /iridescent-windows-2/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | 48 | // Define our points 49 | vec2 a0 = vec2(0.32, -0.45); 50 | vec2 a1 = vec2(-0.49, -0.32); 51 | vec2 a2 = vec2(-0.31, 0.38); 52 | vec2 a3 = vec2(-0.12, 0.04); 53 | 54 | vec2 b0 = vec2(-0.71, 0.53); 55 | vec2 b1 = vec2(0.01, 0.23); 56 | vec2 b2 = vec2(-0.24, 0.31); 57 | vec2 b3 = vec2(-0.01, -0.42); 58 | 59 | float random (vec2 st) { 60 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 61 | } 62 | 63 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 64 | // iridescent windows 65 | void main() { 66 | // Set up our imaginary plane 67 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 68 | vec2 z = uv * 10.; 69 | 70 | vec2 polyA = a0 71 | + cx_mul(a1, vec2(sin(u_time + z) * 11.)) 72 | + cx_mul(a2, vec2(cos(u_time + z)* 11.)) 73 | + cx_mul(a3, cx_pow(z, 2.0)); 74 | 75 | // Calculate the sum of our second polynomial 76 | vec2 polyB = b0 77 | + cx_mul(b1, vec2(cos(u_time + z))) 78 | + cx_mul(b2, vec2(tan(u_time / 2. + z))) 79 | + cx_mul(b3, cx_pow(z, 3.)); 80 | 81 | // Calculate the ratio of our complex polynomials 82 | vec2 result = cx_div(polyA, polyB); 83 | 84 | float imaginary = cx_log(result).x ; 85 | 86 | // blue / orange / pink / green 87 | float a = 0.9; 88 | vec4 col = vec4( 89 | pal(imaginary , 90 | vec3(a,.25,.61), 91 | vec3(a,.42,.31), 92 | vec3(.26,.30,a), 93 | vec3(.15,.4,a)), 94 | 1.0); 95 | 96 | gl_FragColor = col; 97 | 98 | } -------------------------------------------------------------------------------- /iridescent-windows/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /iridescent-windows/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | 48 | // Define our points 49 | vec2 a0 = vec2(0.32, -0.45); 50 | vec2 a1 = vec2(-0.49, -0.32); 51 | vec2 a2 = vec2(-0.31, 0.38); 52 | vec2 a3 = vec2(-0.12, 0.04); 53 | 54 | vec2 b0 = vec2(-0.71, 0.53); 55 | vec2 b1 = vec2(0.01, 0.23); 56 | vec2 b2 = vec2(-0.24, 0.31); 57 | vec2 b3 = vec2(-0.01, -0.42); 58 | 59 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 60 | // iridescent windows 61 | void main() { 62 | // Set up our imaginary plane 63 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 64 | vec2 z = uv * 10.; 65 | 66 | vec2 polyA = a0 67 | + cx_mul(a1, vec2(cos(u_time + z) * 2.)) 68 | + cx_mul(a2, vec2(cos(u_time + z)* 2.)) 69 | + cx_mul(a3, cx_pow(z, 2.0)); 70 | 71 | // Calculate the sum of our second polynomial 72 | vec2 polyB = b0 73 | + cx_mul(b1, vec2(cos(u_time + z))) 74 | + cx_mul(b2, vec2(tan(u_time + z))) 75 | + cx_mul(b3, cx_pow(z, 2.)); 76 | 77 | // Calculate the ratio of our complex polynomials 78 | vec2 result = cx_div(polyA, polyB); 79 | 80 | float imaginary = cx_log(result).x ; 81 | 82 | // blue / orange / pink / green 83 | float a = 1.0; 84 | vec4 col = vec4( 85 | pal(imaginary, 86 | vec3(a,.25,.61), 87 | vec3(a,.42,.31), 88 | vec3(.26,.30,a), 89 | vec3(.15,.4,a)), 90 | 1.0); 91 | 92 | gl_FragColor = col; 93 | 94 | } -------------------------------------------------------------------------------- /liquid-colors-midi/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | // Properties 6 | uniform vec2 u_resolution; 7 | uniform float u_time; 8 | uniform float u_1; 9 | uniform float u_2; 10 | uniform float u_3; 11 | 12 | // Color 13 | uniform float u_19; 14 | uniform float u_20; 15 | uniform float u_21; 16 | 17 | // Size 18 | uniform float u_7; 19 | 20 | float colormap_red(float x) { 21 | return u_19; 22 | } 23 | 24 | float colormap_green(float x) { 25 | if (x < 20049.0 / 82979.0) { 26 | return 0.0; 27 | } else if (x < 327013.0 / 810990.0) { 28 | return (8546482679670.0 / 10875673217.0 * x - 2064961390770.0 / 10875673217.0) / 255.0; 29 | } else if (x <= 1.0) { 30 | return (103806720.0 / 483977.0 * x + 19607415.0 / 483977.0) / 255.0; 31 | } else { 32 | return 1.0; 33 | } 34 | } 35 | 36 | float colormap_blue(float x) { 37 | return u_20; 38 | } 39 | 40 | vec4 colormap(float x) { 41 | return vec4(colormap_red(x), colormap_green(x), colormap_blue(x), 1.0); 42 | } 43 | 44 | 45 | float rand(vec2 n) { 46 | return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); 47 | } 48 | 49 | float noise(vec2 p){ 50 | vec2 ip = floor(p); 51 | vec2 u = fract(p); 52 | u = u*u*(3.0-2.0*u); 53 | 54 | float res = mix( 55 | mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x), 56 | mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),u.y); 57 | return res*res; 58 | } 59 | 60 | const mat2 mtx = mat2( 0.80, 0.60, -0.60, 0.80 ); 61 | 62 | float fbm( vec2 p ) 63 | { 64 | float f = 0.0; 65 | 66 | // f += 0.500000*noise( p + u_time ); p = mtx*p*2.02; 67 | // f += 0.31250*noise( p ); p = mtx*p*2.01; 68 | // f += u_3 *noise( p ); p = mtx*p*u_2; 69 | // f += 0.125000*noise( p ); p = mtx*p*2.01; 70 | // f += u_3 * 0.062500*noise( p ); p = mtx*p*2.04; 71 | // f += 0.015625*noise( p + sin(u_4) ); 72 | 73 | f += 0.500000*noise( p + u_time ); p = mtx*p*2.02; 74 | f += u_2 * 0.031250*noise( p ); p = mtx*p*2.01; 75 | f += u_3 *noise( p + sin(u_time)); p = mtx*p*u_2 ; 76 | f += 0.125000*noise( p + cos(u_time)); p = mtx*p*2.01; 77 | f += u_1 * 0.062500*noise( p ); p = mtx*p*2.04; 78 | f += 0.015625*noise( p + sin(u_time) ); 79 | 80 | return f/0.96875; 81 | } 82 | 83 | float pattern( in vec2 p ) 84 | { 85 | return fbm( p + fbm( p + fbm( p ) ) ); 86 | } 87 | 88 | // https://www.shadertoy.com/view/ftSSRR 89 | void main() { 90 | vec2 uv = gl_FragCoord.xy / u_resolution.x * u_7; 91 | float shade = pattern(uv); 92 | gl_FragColor = vec4(colormap(shade).rgb, 1.0); 93 | } 94 | -------------------------------------------------------------------------------- /liquid-pink-midi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 171 | 172 | -------------------------------------------------------------------------------- /liquid-pink-midi/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | uniform float u_1; 8 | uniform float u_2; 9 | uniform float u_3; 10 | uniform float u_4; 11 | uniform float u_5; 12 | uniform float u_6; 13 | uniform float u_7; 14 | 15 | float colormap_red(float x) { 16 | if (x < 0.0) { 17 | return 54.0 / 255.0; 18 | } else if (x < 20049.0 / 82979.0) { 19 | return (829.79 * x + 54.51) / 255.0; 20 | } else { 21 | return 1.0; 22 | } 23 | } 24 | 25 | float colormap_green(float x) { 26 | if (x < 20049.0 / 82979.0) { 27 | return 0.0; 28 | } else if (x < 327013.0 / 810990.0) { 29 | return (8546482679670.0 / 10875673217.0 * x - 2064961390770.0 / 10875673217.0) / 255.0; 30 | } else if (x <= 1.0) { 31 | return (103806720.0 / 483977.0 * x + 19607415.0 / 483977.0) / 255.0; 32 | } else { 33 | return 1.0; 34 | } 35 | } 36 | 37 | float colormap_blue(float x) { 38 | if (x < 0.0) { 39 | return 54.0 / 255.0; 40 | } else if (x < 7249.0 / 82979.0) { 41 | return (829.79 * x + 54.51) / 255.0; 42 | } else if (x < 20049.0 / 82979.0) { 43 | return 127.0 / 255.0; 44 | } else if (x < 327013.0 / 810990.0) { 45 | return (792.02249341361393720147485376583 * x - 64.364790735602331034989206222672) / 255.0; 46 | } else { 47 | return 1.0; 48 | } 49 | } 50 | 51 | vec4 colormap(float x) { 52 | return vec4(colormap_red(x), colormap_green(x), colormap_blue(x), 1.0); 53 | } 54 | 55 | 56 | float rand(vec2 n) { 57 | return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); 58 | } 59 | 60 | float noise(vec2 p){ 61 | vec2 ip = floor(p); 62 | vec2 u = fract(p); 63 | u = u*u*(3.0-2.0*u); 64 | 65 | float res = mix( 66 | mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x), 67 | mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),u.y); 68 | return res*res; 69 | } 70 | 71 | const mat2 mtx = mat2( 0.80, 0.60, -0.60, 0.80 ); 72 | 73 | float fbm( vec2 p ) 74 | { 75 | float f = 0.0; 76 | 77 | // f += 0.500000*noise( p + u_time ); p = mtx*p*2.02; 78 | // f += 0.31250*noise( p ); p = mtx*p*2.01; 79 | // f += u_3 *noise( p ); p = mtx*p*u_2; 80 | // f += 0.125000*noise( p ); p = mtx*p*2.01; 81 | // f += u_3 * 0.062500*noise( p ); p = mtx*p*2.04; 82 | // f += 0.015625*noise( p + sin(u_4) ); 83 | 84 | f += 0.500000*noise( p + u_time ); p = mtx*p*2.02; 85 | f += u_2 * 0.031250*noise( p ); p = mtx*p*2.01; 86 | f += u_3 *noise( p + sin(u_time)); p = mtx*p*u_2 ; 87 | f += 0.125000*noise( p + cos(u_time)); p = mtx*p*2.01; 88 | f += u_1 * 0.062500*noise( p ); p = mtx*p*2.04; 89 | f += 0.015625*noise( p + sin(u_time) ); 90 | 91 | return f/0.96875; 92 | } 93 | 94 | float pattern( in vec2 p ) 95 | { 96 | return fbm( p + fbm( p + fbm( p ) ) ); 97 | } 98 | 99 | // https://www.shadertoy.com/view/ftSSRR 100 | void main() { 101 | vec2 uv = gl_FragCoord.xy / u_resolution.x * u_7; 102 | float shade = pattern(uv); 103 | gl_FragColor = vec4(colormap(shade).rgb, 1.0); 104 | } 105 | -------------------------------------------------------------------------------- /midi-socketio/client-1/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | uniform float u_1; 8 | uniform float u_2; 9 | uniform float u_3; 10 | uniform float u_4; 11 | uniform float u_5; 12 | uniform float u_6; 13 | uniform float u_7; 14 | 15 | float colormap_red(float x) { 16 | if (x < 0.0) { 17 | return 54.0 / 255.0; 18 | } else if (x < 20049.0 / 82979.0) { 19 | return (829.79 * x + 54.51) / 255.0; 20 | } else { 21 | return 1.0; 22 | } 23 | } 24 | 25 | float colormap_green(float x) { 26 | if (x < 20049.0 / 82979.0) { 27 | return 0.0; 28 | } else if (x < 327013.0 / 810990.0) { 29 | return (8546482679670.0 / 10875673217.0 * x - 2064961390770.0 / 10875673217.0) / 255.0; 30 | } else if (x <= 1.0) { 31 | return (103806720.0 / 483977.0 * x + 19607415.0 / 483977.0) / 255.0; 32 | } else { 33 | return 1.0; 34 | } 35 | } 36 | 37 | float colormap_blue(float x) { 38 | if (x < 0.0) { 39 | return 54.0 / 255.0; 40 | } else if (x < 7249.0 / 82979.0) { 41 | return (829.79 * x + 54.51) / 255.0; 42 | } else if (x < 20049.0 / 82979.0) { 43 | return 127.0 / 255.0; 44 | } else if (x < 327013.0 / 810990.0) { 45 | return (792.02249341361393720147485376583 * x - 64.364790735602331034989206222672) / 255.0; 46 | } else { 47 | return 1.0; 48 | } 49 | } 50 | 51 | vec4 colormap(float x) { 52 | return vec4(colormap_red(x), colormap_green(x), colormap_blue(x), 1.0); 53 | } 54 | 55 | 56 | float rand(vec2 n) { 57 | return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); 58 | } 59 | 60 | float noise(vec2 p){ 61 | vec2 ip = floor(p); 62 | vec2 u = fract(p); 63 | u = u*u*(3.0-2.0*u); 64 | 65 | float res = mix( 66 | mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x), 67 | mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),u.y); 68 | return res*res; 69 | } 70 | 71 | const mat2 mtx = mat2( 0.80, 0.60, -0.60, 0.80 ); 72 | 73 | float fbm( vec2 p ) 74 | { 75 | float f = 0.0; 76 | 77 | // f += 0.500000*noise( p + u_time ); p = mtx*p*2.02; 78 | // f += 0.31250*noise( p ); p = mtx*p*2.01; 79 | // f += u_3 *noise( p ); p = mtx*p*u_2; 80 | // f += 0.125000*noise( p ); p = mtx*p*2.01; 81 | // f += u_3 * 0.062500*noise( p ); p = mtx*p*2.04; 82 | // f += 0.015625*noise( p + sin(u_4) ); 83 | 84 | f += 0.500000*noise( p + u_time ); p = mtx*p*2.02; 85 | f += u_2 * 0.031250*noise( p ); p = mtx*p*2.01; 86 | f += u_3 *noise( p + sin(u_time)); p = mtx*p*u_2 ; 87 | f += 0.125000*noise( p + cos(u_time)); p = mtx*p*2.01; 88 | f += u_1 * 0.062500*noise( p ); p = mtx*p*2.04; 89 | f += 0.015625*noise( p + sin(u_time) ); 90 | 91 | return f/0.96875; 92 | } 93 | 94 | float pattern( in vec2 p ) 95 | { 96 | return fbm( p + fbm( p + fbm( p ) ) ); 97 | } 98 | 99 | // https://www.shadertoy.com/view/ftSSRR 100 | void main() { 101 | vec2 uv = gl_FragCoord.xy / u_resolution.x * u_7; 102 | float shade = pattern(uv); 103 | gl_FragColor = vec4(colormap(shade).rgb, 1.0); 104 | } 105 | -------------------------------------------------------------------------------- /midi-socketio/client-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 | 24 | 25 |

26 | 171 | 172 | -------------------------------------------------------------------------------- /midi-socketio/client-2/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | uniform float u_1; 8 | uniform float u_2; 9 | uniform float u_3; 10 | uniform float u_4; 11 | uniform float u_5; 12 | uniform float u_6; 13 | uniform float u_7; 14 | 15 | float colormap_red(float x) { 16 | if (x < 0.0) { 17 | return 54.0 / 255.0; 18 | } else if (x < 20049.0 / 82979.0) { 19 | return (829.79 * x + 54.51) / 255.0; 20 | } else { 21 | return 1.0; 22 | } 23 | } 24 | 25 | float colormap_green(float x) { 26 | if (x < 20049.0 / 82979.0) { 27 | return 0.0; 28 | } else if (x < 327013.0 / 810990.0) { 29 | return (8546482679670.0 / 10875673217.0 * x - 2064961390770.0 / 10875673217.0) / 255.0; 30 | } else if (x <= 1.0) { 31 | return (103806720.0 / 483977.0 * x + 19607415.0 / 483977.0) / 255.0; 32 | } else { 33 | return 1.0; 34 | } 35 | } 36 | 37 | float colormap_blue(float x) { 38 | if (x < 0.0) { 39 | return 54.0 / 255.0; 40 | } else if (x < 7249.0 / 82979.0) { 41 | return (829.79 * x + 54.51) / 255.0; 42 | } else if (x < 20049.0 / 82979.0) { 43 | return 127.0 / 255.0; 44 | } else if (x < 327013.0 / 810990.0) { 45 | return (792.02249341361393720147485376583 * x - 64.364790735602331034989206222672) / 255.0; 46 | } else { 47 | return 1.0; 48 | } 49 | } 50 | 51 | vec4 colormap(float x) { 52 | return vec4(colormap_red(x), colormap_green(x), colormap_blue(x), 1.0); 53 | } 54 | 55 | 56 | float rand(vec2 n) { 57 | return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); 58 | } 59 | 60 | float noise(vec2 p){ 61 | vec2 ip = floor(p); 62 | vec2 u = fract(p); 63 | u = u*u*(3.0-2.0*u); 64 | 65 | float res = mix( 66 | mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x), 67 | mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),u.y); 68 | return res*res; 69 | } 70 | 71 | const mat2 mtx = mat2( 0.80, 0.60, -0.60, 0.80 ); 72 | 73 | float fbm( vec2 p ) 74 | { 75 | float f = 0.0; 76 | 77 | // f += 0.500000*noise( p + u_time ); p = mtx*p*2.02; 78 | // f += 0.31250*noise( p ); p = mtx*p*2.01; 79 | // f += u_3 *noise( p ); p = mtx*p*u_2; 80 | // f += 0.125000*noise( p ); p = mtx*p*2.01; 81 | // f += u_3 * 0.062500*noise( p ); p = mtx*p*2.04; 82 | // f += 0.015625*noise( p + sin(u_4) ); 83 | 84 | f += 0.500000*noise( p + u_time ); p = mtx*p*2.02; 85 | f += u_2 * 0.031250*noise( p ); p = mtx*p*2.01; 86 | f += u_3 *noise( p + sin(u_time)); p = mtx*p*u_2 ; 87 | f += 0.125000*noise( p + cos(u_time)); p = mtx*p*2.01; 88 | f += u_1 * 0.062500*noise( p ); p = mtx*p*2.04; 89 | f += 0.015625*noise( p + sin(u_time) ); 90 | 91 | return f/0.96875; 92 | } 93 | 94 | float pattern( in vec2 p ) 95 | { 96 | return fbm( p + fbm( p + fbm( p ) ) ); 97 | } 98 | 99 | // https://www.shadertoy.com/view/ftSSRR 100 | void main() { 101 | vec2 uv = gl_FragCoord.xy / u_resolution.x * u_7; 102 | float shade = pattern(uv); 103 | gl_FragColor = vec4(colormap(shade).rgb, 1.0); 104 | } 105 | -------------------------------------------------------------------------------- /midi-socketio/server/ca.pem: -------------------------------------------------------------------------------- 1 | -----BEGIN PRIVATE KEY----- 2 | MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDByl+2Bw91i1al 3 | l2olCDkg3cMQYLJK4qNv/CUwNaJt6S/ZWlsv+SPQthwzWavKNV0PcC/629n2XQD8 4 | 7S0828JicaFJTuBWrB4LrKnObMW4+vlqDb8gtVOey7oHOt2GeBQUnkZ7EMz+FWKG 5 | J7RQO0sMn3JEO+YajtTks47iy6GQZU6DUY5CuVi1BmL0kcq1rbIqzDOHsgJVsIh1 6 | CdeTOG1vYO4H81ILKrYq3JIak7BV/K5HE0HubvQ4/Zn7x3YKHKprGPPEMecWTKQ4 7 | tn51schBcIbfFhA/JO1Rdtry82mqPrBX5GD+/QawPBr5DaCcB2XV37WMFDkxdFeN 8 | G/eNnBNrAgMBAAECggEBAJ4ou4qFIqHNUa8d73w/xNhFBUFlmb2yUK9Bu1woOeO4 9 | L9wVeVyi2g8pwcRLCAClIslJx27WZYJDD15dd9E2jePoVzjMTh2OpYrjpUaa0ZgS 10 | BOMASx+3vYJZRP9HlKp9b+4P6vffk14/N8TDvM7KRYsMyqZTuI2uSqRIw3HnvXlp 11 | OSkTyzwoghLQynbaWgBBTIpvM22B8f54+vcrCHbUc2LbKPYRaCf51wuEFFKNDKdM 12 | Gje9Cdk4vuzDmw7RwK3EDIOqn03/gsmvX0luwBxKcxpsDOjKSywFUtUmdYcpjkqv 13 | Ap7obosQPEClDnrVekgd18ikOFWuXAnP/r5eigRJLUECgYEA5tflXgSNreRe/PDG 14 | W02Vx8yWz/Oisiv9fYVCodtkkEQaXG95/Y/U/Dtl1Knmd14ore4OqdJzuMCduMN/ 15 | AG3+2M20dH7M5yDdHcijt/mWxLpnvHcH6nkCpeC4XOfgVpgTM66a29aArm9aI2Mb 16 | tRgDf4sbykkaK3+5ZBCQL0FWX+ECgYEA1ujFwFT5KrXp+5+2C9r3Pu1f+PjCh8WY 17 | jvuP01kHDSnneO+a6eyvywjqkmPUJJxU0dm3yEMZ28qb0EPbZMdu19y334Eh0RxB 18 | fdQNY2QSP5Ns01y66Se1PsBMkVfTZYbSnXsPzRQBr+FEYDQGLfDOIIJaMk8ATj2B 19 | r620LlOPjMsCgYBOXIWBB9ysZfSUuosrHUg1/c5IIzVcdDBltqHq3dXiXyvvquvn 20 | Vjb/tI4Zxd71MGJwwHn7zfP4iHJB8SMgmzZClHmofg7CetZ0sNJatoAmofxq7qEi 21 | SBfNBV6wMwpletQx3Bi3fbZLAIPBtXgHXnJ5jlhNr8kRcRcWz8SSNgTDIQKBgQC3 22 | PETPliPUXMKhfi0zsoC4sJ/xofgK11kaIDcjFndCrAXmQTUuWlYQoQuPwXoxtPFE 23 | 84MVRtEXa4qqahD3vmsttc04zdtNdfAJHvJDWiGM/1/8XsYm4WpRlJg0HFPr7qZJ 24 | C5IPYw2FLmakN/dE2FqHsVzCJEW4cAzRAyPrk+eDPQKBgGtOWf43N+lHYHEbjMtL 25 | S1z4Ampk/1glBREZQ0Muq6ZebSYFX+vw68fylZUDEm+gHUwc7GnFmQ2djPFSInw1 26 | XoqPxCekNAuX0/Gd1h6qZPQB+6/Tbepmb0WSekneO/KVQioLoDT/ZbEP/vzrxV5H 27 | sid5oov2UC8ISOMtWzEIhhaI 28 | -----END PRIVATE KEY----- 29 | -----BEGIN CERTIFICATE----- 30 | MIIDTDCCAjQCCQD97ZBWZGkL6jANBgkqhkiG9w0BAQsFADBoMQswCQYDVQQGEwJj 31 | YTEQMA4GA1UECAwHb250YXJpbzEQMA4GA1UEBwwHdG9yb250bzEQMA4GA1UECgwH 32 | aW1hbmFnZTEjMCEGCSqGSIb3DQEJARYUYWRhbWZ1aHJlckBnbWFpbC5jb20wHhcN 33 | MjMxMTE0MjM0NzAwWhcNMjQxMTEzMjM0NzAwWjBoMQswCQYDVQQGEwJjYTEQMA4G 34 | A1UECAwHb250YXJpbzEQMA4GA1UEBwwHdG9yb250bzEQMA4GA1UECgwHaW1hbmFn 35 | ZTEjMCEGCSqGSIb3DQEJARYUYWRhbWZ1aHJlckBnbWFpbC5jb20wggEiMA0GCSqG 36 | SIb3DQEBAQUAA4IBDwAwggEKAoIBAQDByl+2Bw91i1all2olCDkg3cMQYLJK4qNv 37 | /CUwNaJt6S/ZWlsv+SPQthwzWavKNV0PcC/629n2XQD87S0828JicaFJTuBWrB4L 38 | rKnObMW4+vlqDb8gtVOey7oHOt2GeBQUnkZ7EMz+FWKGJ7RQO0sMn3JEO+YajtTk 39 | s47iy6GQZU6DUY5CuVi1BmL0kcq1rbIqzDOHsgJVsIh1CdeTOG1vYO4H81ILKrYq 40 | 3JIak7BV/K5HE0HubvQ4/Zn7x3YKHKprGPPEMecWTKQ4tn51schBcIbfFhA/JO1R 41 | dtry82mqPrBX5GD+/QawPBr5DaCcB2XV37WMFDkxdFeNG/eNnBNrAgMBAAEwDQYJ 42 | KoZIhvcNAQELBQADggEBABdAuOxegWMTUCRaOopLny7ESy5ooV1j0a2hPY/7nfVs 43 | 1J7OObSlc71BxNapv3SWMDonbrP5goGtmYGjHPECq9smeZFDEYkqPBulvYolINHp 44 | v5eXzqbI9Kggxk/fBZZOB5dk4viiaSX535lrynnP0TEDrCpyN7mAolscCss79Dmq 45 | m/3SyRrNPoZcPbAFQ7jrwuDoBjcymL2zLh75A7rJmO4gdpSvupL+voLhqgaZDtlw 46 | 43c/ud33fURlgHEugOlO5k7JSIJTJximeBVCji0IZKEpiwAnpRJNJKW+oV0RIruR 47 | lhLIVrNu6pU4tNnajLd4WS5p+4v8t/45yH4QYtn+vyQ= 48 | -----END CERTIFICATE----- 49 | -------------------------------------------------------------------------------- /midi-socketio/server/cert.pem: -------------------------------------------------------------------------------- 1 | -----BEGIN CERTIFICATE----- 2 | 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 32 | -----END CERTIFICATE----- 33 | -------------------------------------------------------------------------------- /midi-socketio/server/key.pem: -------------------------------------------------------------------------------- 1 | -----BEGIN PRIVATE KEY----- 2 | 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 51 | tymRVRWbbViPWBY6SLhLXGb2jklmMQ== 52 | -----END PRIVATE KEY----- 53 | -------------------------------------------------------------------------------- /midi-socketio/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "midi-socketio", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "cors": "^2.8.5", 14 | "socket.io": "^4.7.2" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /midi-socketio/server/server.js: -------------------------------------------------------------------------------- 1 | const https = require('https'); // Use the 'https' module 2 | const socketIo = require('socket.io'); 3 | const cors = require('cors'); 4 | const fs = require('fs'); 5 | 6 | // Read the SSL certificate and private key 7 | const privateKey = fs.readFileSync('./key.pem', 'utf8'); 8 | const certificate = fs.readFileSync('./cert.pem', 'utf8'); 9 | 10 | const credentials = { key: privateKey, cert: certificate }; 11 | 12 | const server = https.createServer(credentials, (req, res) => { 13 | res.end('Socket.IO server'); 14 | }); 15 | 16 | // Configure Socket.IO with CORS 17 | const io = socketIo(server, { 18 | cors: { 19 | origin: "*", // Allow all origins 20 | methods: ["GET", "POST"] 21 | } 22 | }); 23 | 24 | io.on('connection', (socket) => { 25 | console.log('New client connected'); 26 | 27 | socket.on('message', (data) => { 28 | console.log('Message received:', data); 29 | socket.broadcast.emit('message', data); 30 | }); 31 | }); 32 | 33 | const PORT = 3000; 34 | server.listen(PORT, () => console.log(`Server running on port ${PORT}`)); -------------------------------------------------------------------------------- /shader-experiments-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /shader-experiments-2/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | float random (vec2 st) { 48 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 49 | } 50 | // Define our points 51 | vec2 a0 = vec2(0.32, -0.45); 52 | vec2 a1 = vec2(-0.49, -0.32); 53 | vec2 a2 = vec2(-0.31, 0.38); 54 | vec2 a3 = vec2(-0.12, 0.04); 55 | 56 | vec2 b0 = vec2(-0.71, 0.53); 57 | vec2 b1 = vec2(0.01, 1.23); 58 | vec2 b2 = vec2(-0.24, 1.31); 59 | vec2 b3 = vec2(-1.01, -0.42); 60 | 61 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 62 | void main() { 63 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 64 | // vec2 z = uv * u_time * 10.; 65 | vec2 z = uv * 6.; 66 | 67 | a1.y = sin(u_time ); 68 | a1.x = cos(u_time ); 69 | 70 | a3.y = cos(u_time / 2.); 71 | a3.x = sin(u_time / 2.); 72 | 73 | a2.y = atan(u_time * 3. ); 74 | b2.x = sin(u_time / 2.); 75 | 76 | b1.y = cos(u_time / 2.); 77 | b1.x = sin(u_time / 4.); 78 | 79 | b3.y = cos(u_time / 2.); 80 | b3.y = sin(u_time / 2.); 81 | 82 | 83 | vec2 polyA = a0 84 | + cx_mul(a1, vec2(sin(u_time+ z))) 85 | + cx_mul(a2, vec2(sin(u_time) )) 86 | + cx_mul(a3, cx_pow(z, cos(z.x / 2000. ))); 87 | 88 | vec2 polyB = b0 89 | + cx_mul(b1, vec2(cos(u_time))) 90 | + cx_mul(b2, vec2( z /1129.)) 91 | + cx_mul(b3, cx_pow(z , sin(z.y / 2000. ))); 92 | 93 | vec2 result = cx_div(polyA, polyB); 94 | 95 | float imaginary = cx_log(result).x ; 96 | // float imaginary = cx_log(result).y * cx_log(result).x; 97 | 98 | // rainbow 99 | // float a = 1.66; 100 | // vec4 col = vec4( 101 | // pal(imaginary / 2.00, 102 | // vec3(a,.9,0.3), 103 | // vec3(a,-.7,.91), 104 | // vec3(.8,.90,a), 105 | // vec3(-.55,-.3,a)), 106 | // 1.0); 107 | 108 | float a = 1.0; 109 | vec4 col = vec4( 110 | pal(imaginary, 111 | vec3(a,.35,.51), 112 | vec3(a,.42,.31), 113 | vec3(.26,.30,a), 114 | vec3(.05,.4,a)), 115 | 1.0); 116 | 117 | gl_FragColor = col; 118 | } -------------------------------------------------------------------------------- /shader-experiments/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /shader-experiments/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | float random (vec2 st) { 48 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 49 | } 50 | // Define our points 51 | vec2 a0 = vec2(0.32, -0.45); 52 | vec2 a1 = vec2(-0.49, -0.32); 53 | vec2 a2 = vec2(-0.31, 0.38); 54 | vec2 a3 = vec2(-0.12, 0.04); 55 | 56 | vec2 b0 = vec2(-0.71, 0.53); 57 | vec2 b1 = vec2(0.01, 1.23); 58 | vec2 b2 = vec2(-0.24, 1.31); 59 | vec2 b3 = vec2(-1.01, -0.42); 60 | 61 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 62 | void main() { 63 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 64 | // vec2 z = uv * u_time * 10.; 65 | vec2 z = uv * 10.; 66 | 67 | a1.y = sin(u_time ); 68 | a1.x = cos(u_time ); 69 | 70 | a3.y = cos(u_time / 2.); 71 | a3.x = sin(u_time / 2.); 72 | 73 | a2.y = atan(u_time * 3. ); 74 | 75 | b1.y = cos(u_time / 2.); 76 | b1.x = sin(u_time / 4.); 77 | 78 | b3.y = cos(u_time / 2.); 79 | b2.x = atan(u_time / 2.); 80 | b3.y = sin(u_time / 2.); 81 | 82 | vec2 polyA = a0 83 | + cx_mul(a1, vec2(sin(u_time+ z))) 84 | + cx_mul(a2, vec2(sin(u_time) )) 85 | + cx_mul(a3, cx_pow(z, cos(z.x / 2000. ))); 86 | 87 | vec2 polyB = b0 88 | + cx_mul(b1, vec2(sin(u_time))) 89 | + cx_mul(b2, vec2(sin(u_time))) 90 | + cx_mul(b3, cx_pow(z, sin(z.y / 20000. ))); 91 | 92 | vec2 result = cx_div(polyA, polyB); 93 | 94 | float imaginary = cx_log(result).y ; 95 | 96 | // rainbow 97 | // float a = 1.66; 98 | // vec4 col = vec4( 99 | // pal(imaginary / 3.00, 100 | // vec3(a,.9,0.3), 101 | // vec3(a,-.7,.91), 102 | // vec3(.8,.90,a), 103 | // vec3(-.55,-.3,a)), 104 | // 1.0); 105 | 106 | float a = 1.0; 107 | vec4 col = vec4( 108 | pal(imaginary, 109 | vec3(a,.35,.51), 110 | vec3(a,.42,.31), 111 | vec3(.26,.30,a), 112 | vec3(.05,.4,a)), 113 | 1.0); 114 | 115 | gl_FragColor = col; 116 | } -------------------------------------------------------------------------------- /touch-gestures-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 21 | 22 | 23 | 24 |

25 | 78 | 79 | -------------------------------------------------------------------------------- /touch-gestures-2/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform vec2 u_pointer; 7 | uniform vec2 u_mouse; 8 | uniform float u_time; 9 | 10 | float random (vec2 st) { 11 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 12 | } 13 | 14 | vec3 hsl2rgb(vec3 hsl) { 15 | vec4 k = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); 16 | vec3 p = abs(fract(hsl.xxx + k.xyz) * 6.0 - k.www); 17 | return hsl.z * mix(k.xxx, clamp(p - k.xxx, 0.0, 1.0), hsl.y); 18 | } 19 | 20 | // rainbow (horizontal) 21 | void main(){ 22 | vec2 res = gl_FragCoord.xy / u_pointer / 2.0; 23 | 24 | vec2 heightAmount = (res + 1.0) * 2.0; 25 | vec2 heightAmountInteger = floor(heightAmount); 26 | float random = random(vec2(heightAmountInteger.x * heightAmountInteger.y )); 27 | 28 | vec2 st = gl_FragCoord.xy / u_resolution.xy; 29 | float hue = pow(st.x, 4.0); 30 | 31 | vec3 hslColor = vec3(hue + pow(random / 3.0, st.x) + sin(u_time / 1.3), 0.9 , 0.9 ); 32 | vec3 rgbColor = hsl2rgb(hslColor); 33 | 34 | gl_FragColor = vec4(rgbColor, 1.0); 35 | } -------------------------------------------------------------------------------- /touch-gestures/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /touch-gestures/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform vec2 u_pointer; 7 | uniform vec2 u_mouse; 8 | uniform float u_time; 9 | 10 | float random (vec2 st) { 11 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123); 12 | } 13 | 14 | vec3 hsl2rgb(vec3 hsl) { 15 | vec4 k = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); 16 | vec3 p = abs(fract(hsl.xxx + k.xyz) * 6.0 - k.www); 17 | return hsl.z * mix(k.xxx, clamp(p - k.xxx, 0.0, 1.0), hsl.y); 18 | } 19 | 20 | // rainbow (touch gestures + mouse) 21 | void main(){ 22 | vec2 res = gl_FragCoord.xy / u_pointer / 2.0; 23 | 24 | vec2 heightAmount = (res + 1.0) * 2.0; 25 | vec2 heightAmountInteger = floor(heightAmount); 26 | float random = random(vec2(heightAmountInteger.x * heightAmountInteger.y )); 27 | 28 | vec2 st = gl_FragCoord.xy / u_resolution.xy; 29 | float hue = pow(st.y, 5.0); 30 | 31 | vec3 hslColor = vec3(hue / 0.3 + random + sin(u_time), 0.9 , 0.9 ); 32 | vec3 rgbColor = hsl2rgb(hslColor); 33 | 34 | gl_FragColor = vec4(rgbColor, 1.0); 35 | } -------------------------------------------------------------------------------- /wip/wip-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL 6 | 20 | 21 | 22 | 23 |

24 | 77 | 78 | -------------------------------------------------------------------------------- /wip/wip-1/shader.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define PI 3.1415926535897932384626433832795 9 | float cosh(float x) { 10 | return (exp(x) + exp(-x)) * 0.5; 11 | } 12 | float sinh(float x) { 13 | return (exp(x) - exp(-x)) * 0.5; 14 | } 15 | #define cx_mul(a, b) vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x) 16 | #define cx_div(a, b) vec2(((a.x*b.x + a.y*b.y)/(b.x*b.x + b.y*b.y)),((a.y*b.x - a.x*b.y)/(b.x*b.x + b.y*b.y))) 17 | #define cx_sin(a) vec2(sin(a.x) * cosh(a.y), cos(a.x) * sinh(a.y)) 18 | #define cx_cos(a) vec2(cos(a.x) * cosh(a.y), -sin(a.x) * sinh(a.y)) 19 | 20 | vec2 cx_tan(vec2 a) {return cx_div(cx_sin(a), cx_cos(a)); } 21 | vec2 cx_log(vec2 a) { 22 | float rpart = sqrt((a.x*a.x)+(a.y*a.y)); 23 | float ipart = atan(a.y,a.x); 24 | if (ipart > PI) ipart=ipart-(2.0*PI); 25 | return vec2(log(rpart),ipart); 26 | } 27 | 28 | vec2 as_polar(vec2 z) { 29 | return vec2( 30 | length(z), 31 | atan(z.y, z.x) 32 | ); 33 | } 34 | vec2 cx_pow(vec2 v, float p) { 35 | vec2 z = as_polar(v); 36 | return pow(z.x, p) * vec2(cos(z.y * p), sin(z.y * p)); 37 | } 38 | 39 | float im(vec2 z) { 40 | return ((atan(z.y, z.x) / PI) + 1.0) * 0.5; 41 | } 42 | 43 | vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) 44 | { 45 | return a + b*cos(2.*PI*(c*t+d)); 46 | } 47 | 48 | // Define our points 49 | vec2 a0 = vec2(0.42, -0.45); 50 | vec2 a1 = vec2(-1.49, -0.32); 51 | vec2 a2 = vec2(-0.31, 0.38); 52 | vec2 a3 = vec2(-0.22, 0.04); 53 | 54 | vec2 b0 = vec2(-0.71, 0.3); 55 | vec2 b1 = vec2(0.01, 1.23); 56 | vec2 b2 = vec2(-0.24, 0.21); 57 | vec2 b3 = vec2(-1.01, -1.42); 58 | 59 | // Most code by Harley Turan: https://hturan.com/writing/complex-numbers-glsl 60 | // iridescent windows 61 | void main() { 62 | // Set up our imaginary plane 63 | vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); 64 | vec2 z = uv * 6.; 65 | 66 | vec2 polyA = a0 67 | + cx_mul(a1, vec2(cos(u_time / z) * 2.)) 68 | + cx_mul(a2, vec2(sin(u_time + z)* 2.)) 69 | + cx_mul(a3, cx_pow(z, 3.0)); 70 | 71 | // Calculate the sum of our second polynomial 72 | vec2 polyB = b0 73 | + cx_mul(b1, vec2(cos(u_time + z/z)* 2.)) 74 | + cx_mul(b2, vec2(atan(u_time + z)* 2.)) 75 | + cx_mul(b3, cx_pow(z, 2.)); 76 | 77 | // Calculate the ratio of our complex polynomials 78 | vec2 result = cx_div(polyA, polyB); 79 | 80 | float imaginary = cx_log(result).x; 81 | // float imaginary = cx_log(result).x * cx_log(result).x; 82 | 83 | // float a = 1.2; 84 | // vec4 col = vec4( 85 | // pal(imaginary, 86 | // vec3(a,.35,.51), 87 | // vec3(a,.42,.31), 88 | // vec3(.86,.30,0.2), 89 | // vec3(.25,.4,0.3)), 90 | // 1.0); 91 | 92 | // float a = 0.7; 93 | // vec4 col = vec4( 94 | // pal(imaginary, 95 | // vec3(a,.35,.51), 96 | // vec3(a,.49,.31), 97 | // vec3(.86,.30,0.3), 98 | // vec3(.25,.2,0.3)), 99 | // 1.0); 100 | 101 | // float a = 1.0; 102 | // vec4 col = vec4( 103 | // pal(imaginary, 104 | // vec3(a,.35,.51), 105 | // vec3(a,.42,.31), 106 | // vec3(.16,.30,0.2), 107 | // vec3(.25,.4,0.3)), 108 | // 1.0); 109 | 110 | 111 | float a = 1.0; 112 | vec4 col = vec4( 113 | pal(imaginary, 114 | vec3(a,.25,.21), 115 | vec3(a,.42,.31), 116 | vec3(.26,.30,a), 117 | vec3(.05,.4,a)), 118 | 1.0); 119 | 120 | gl_FragColor = col; 121 | 122 | } --------------------------------------------------------------------------------