├── .gitmodules ├── README.md ├── data ├── animation_easing.frag ├── animation_sprite.frag ├── color_dither.frag ├── draw_digits.frag ├── filter_bilateralBlur2D.frag ├── filter_boxBlur2D.frag ├── filter_edge2D.frag ├── filter_gaussianBlur2D.frag ├── filter_kuwahara2D.frag ├── filter_laplacian2D.frag ├── filter_median2D.frag ├── filter_noiseBlur2D.frag ├── filter_radialBlur2D.frag ├── filter_sharpen2D.frag ├── generative_cnoise.frag ├── generative_curl.frag ├── generative_fbm.frag ├── generative_noised.frag ├── generative_pnoise.frag ├── generative_random.frag ├── generative_snoise.frag ├── generative_voronoi.frag ├── generative_voronoise.frag ├── generative_worley.frag ├── guido_schmidt.frag ├── ilithya.frag ├── imgs │ ├── arches.jpg │ ├── danny.png │ ├── lut.png │ ├── noise_blue.png │ ├── rocks.png │ └── sprite_megaman.png ├── lighting_atmosphere.frag ├── lighting_raymarching.frag ├── lighting_raymarching_glass.frag ├── lighting_raymarching_pbr.frag ├── lighting_raymarching_volume.frag ├── mario_carrillo.frag └── sample_bracketing.frag ├── lygia_p5_examples.pde └── utils.pde /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "data/lygia"] 2 | path = data/lygia 3 | url = https://github.com/patriciogonzalezvivo/lygia.git 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Make sure to clone this repository and their submodules recursivelly 2 | 3 | ```bash 4 | git clone --recursive https://github.com/patriciogonzalezvivo/lygia_p5_examples.git 5 | ``` 6 | 7 | If you already clone it with out the `--recursive` flag, just do 8 | 9 | ```bash 10 | git pull 11 | git submodule init 12 | git submodule update 13 | ``` 14 | -------------------------------------------------------------------------------- /data/animation_easing.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform vec2 u_resolution; 9 | uniform vec2 u_mouse; 10 | uniform float u_time; 11 | 12 | #include "lygia/draw/circle.glsl" 13 | #include "lygia/space/ratio.glsl" 14 | #include "lygia/space/scale.glsl" 15 | #include "lygia/animation/easing.glsl" 16 | 17 | void main(void) { 18 | vec3 color = vec3(0.0); 19 | vec2 pixel = 1.0/u_resolution.xy; 20 | vec2 st = gl_FragCoord.xy * pixel; 21 | 22 | float pct = fract(u_time * 0.25); 23 | st = scale(st, 1.1); 24 | 25 | float rows = 10.0; 26 | float row = floor(st.y * rows); 27 | 28 | st.x += 0.5; 29 | 30 | if (row == 0.0) 31 | pct = pct < 0.5 ? linearOut(pct * 2.0) : linearIn( (1.0-pct) * 2.0 ); 32 | else if (row == 1.0) 33 | pct = pct < 0.5 ? exponentialOut(pct * 2.0) : exponentialIn( (1.0-pct) * 2.0 ); 34 | else if (row == 2.0) 35 | pct = pct < 0.5 ? quarticOut(pct * 2.0) : quarticIn( (1.0-pct) * 2.0 ); 36 | else if (row == 3.0) 37 | pct = pct < 0.5 ? cubicOut(pct * 2.0) : cubicIn( (1.0-pct) * 2.0 ); 38 | else if (row == 4.0) 39 | pct = pct < 0.5 ? circularOut(pct * 2.0) : circularIn( (1.0-pct) * 2.0 ); 40 | else if (row == 5.0) 41 | pct = pct < 0.5 ? quadraticOut(pct * 2.0) : quadraticIn( (1.0-pct) * 2.0 ); 42 | else if (row == 6.0) 43 | pct = pct < 0.5 ? sineOut(pct * 2.0) : sineIn( (1.0-pct) * 2.0 ); 44 | else if (row == 7.0) 45 | pct = pct < 0.5 ? elasticOut(pct * 2.0) : elasticIn( (1.0-pct) * 2.0 ); 46 | else if (row == 8.0) 47 | pct = pct < 0.5 ? bounceOut(pct * 2.0) : bounceIn( (1.0-pct) * 2.0 ); 48 | else if (row == 9.0) 49 | pct = pct < 0.5 ? backOut(pct * 2.0) : backIn( (1.0-pct) * 2.0 ); 50 | 51 | st.x -= pct; 52 | 53 | st.y = fract(st.y * rows); 54 | st = ratio(st, u_resolution); 55 | st = ratio(st, vec2(rows, 1.0)); 56 | 57 | color += circle(st, 0.2) * step(0.0, row) * step(row, 9.); 58 | color *= step(0.1, st.y) * step(st.y, 0.9); 59 | 60 | 61 | gl_FragColor = vec4(color, 1.0); 62 | } 63 | -------------------------------------------------------------------------------- /data/animation_sprite.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform sampler2D u_spriteTex; 9 | 10 | uniform vec2 u_resolution; 11 | uniform float u_time; 12 | 13 | varying vec4 vertTexCoord; 14 | 15 | #include "lygia/math/decimation.glsl" 16 | #include "lygia/space/scale.glsl" 17 | #include "lygia/sample/sprite.glsl" 18 | #include "lygia/animation/spriteLoop.glsl" 19 | 20 | void main (void) { 21 | vec4 color = vec4(0.0, 0.0, 0.0, 1.0); 22 | vec2 st = vertTexCoord.st; 23 | 24 | vec2 grid = vec2(10., 7.0); 25 | 26 | color = texture2D(u_spriteTex, st); 27 | st = decimation(st, vec2(50., 35.)); 28 | st = scale(st, 0.8); 29 | 30 | // color = sampleSprite(u_spriteTex, st, grid, 41.); 31 | 32 | // float time = u_time * 6.0; 33 | float time = mod(u_time * 6.0, 48.0); 34 | if (time < 6.0) 35 | color = spriteLoop(u_spriteTex, st, grid, 0., 2., time); 36 | else if (time < 12.0) 37 | color = spriteLoop(u_spriteTex, st, grid, 3., 6., time); 38 | else if (time < 18.0) 39 | color = spriteLoop(u_spriteTex, st, grid, 13., 16., time); 40 | else if (time < 24.0) 41 | color = spriteLoop(u_spriteTex, st, grid, 23., 26., time); 42 | else if (time < 30.0) 43 | color = spriteLoop(u_spriteTex, st, grid, 33., 36., time); 44 | else if (time < 36.0) 45 | color = spriteLoop(u_spriteTex, st, grid, 43., 46., time); 46 | else if (time < 42.0) 47 | color = spriteLoop(u_spriteTex, st, grid, 50., 53., time); 48 | else 49 | color = spriteLoop(u_spriteTex, st, grid, 60., 65., time); 50 | 51 | color.a = 1.0; 52 | 53 | gl_FragColor = color; 54 | } 55 | -------------------------------------------------------------------------------- /data/color_dither.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform sampler2D texture; 9 | uniform vec2 texOffset; 10 | 11 | uniform sampler2D u_noiseTex; 12 | uniform vec2 u_resolution; 13 | uniform vec2 u_mouse; 14 | uniform float u_time; 15 | 16 | // Uncomment the type of noise you want (only one at a time) 17 | // #define DITHER_FNC ditherShift 18 | // #define DITHER_FNC ditherVlachos 19 | #define DITHER_FNC ditherBlueNoise 20 | // #define DITHER_FNC ditherInterleavedGradientNoise 21 | // #define DITHER_FNC ditherTriangleNoise 22 | // #define DITHER_ANIMATED 23 | // #define DITHER_CHROMA 24 | #define TIME_SECS u_time 25 | #define BLUENOISE_TEXTURE u_noiseTex 26 | #include "lygia/color/dither.glsl" 27 | 28 | void main(void) { 29 | vec4 color = vec4(0.0, 0.0, 0.0, 1.0); 30 | vec2 pixel = 1.0/u_resolution.xy; 31 | vec2 st = gl_FragCoord.xy * pixel; 32 | 33 | // compress 34 | const float c0 = 32.0; 35 | vec2 its = mix( vec2(0.0), vec2(1.0) / c0, st ); 36 | color.rgb += mix(vec3(its.x), vec3(its.xy, 0.0), step(1.0+cos(u_time * 0.1), st.y + st.x) ); 37 | 38 | color.rgb = dither(color.rgb); 39 | 40 | // compress 41 | color.rgb = floor( color.rgb * 255.0 ) / 255.0; 42 | color.rgb *= c0; 43 | 44 | gl_FragColor = color; 45 | } 46 | -------------------------------------------------------------------------------- /data/draw_digits.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform vec2 u_resolution; 9 | uniform vec2 u_mouse; 10 | uniform float u_time; 11 | 12 | #include "lygia/sdf/circleSDF.glsl" 13 | #include "lygia/draw/fill.glsl" 14 | #include "lygia/draw/stroke.glsl" 15 | #include "lygia/draw/digits.glsl" 16 | 17 | void main(void) { 18 | vec3 color = vec3(0.0); 19 | vec2 xy = gl_FragCoord.xy/u_resolution.xy; 20 | 21 | float sdf = circleSDF(xy); 22 | 23 | // External ring 24 | float size1 = 0.5; 25 | float width = 0.1 + (sin(u_time) * 0.5 + 0.5) * 0.1; 26 | color += stroke(sdf, size1, width); 27 | 28 | // Inside circle 29 | float size2 = (size1 - width) * (cos(u_time * 0.25) * 0.5 + 0.5); 30 | color += fill(sdf, size2); 31 | 32 | // Debug 33 | color += digits(xy, width); 34 | color += digits(xy - vec2(0.5, 0.0), size2); 35 | 36 | gl_FragColor = vec4(color, 1.0); 37 | } 38 | -------------------------------------------------------------------------------- /data/filter_bilateralBlur2D.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform sampler2D texture; 9 | uniform vec2 texOffset; 10 | 11 | uniform vec2 u_resolution; 12 | uniform float u_time; 13 | 14 | varying vec4 vertColor; 15 | varying vec4 vertTexCoord; 16 | 17 | #include "lygia/sample/clamp2edge.glsl" 18 | #define BILATERALBLUR_SAMPLER_FNC(TEX, UV) sampleClamp2edge(TEX, UV) 19 | #include "lygia/filter/bilateralBlur.glsl" 20 | 21 | #include "lygia/draw/digits.glsl" 22 | 23 | void main (void) { 24 | vec3 color = vec3(0.0); 25 | vec2 pixel = texOffset; 26 | vec2 st = vertTexCoord.st; 27 | 28 | float ix = floor(st.x * 5.0); 29 | float kernel_size = max(1.0, ix * 4.0);; 30 | 31 | color += bilateralBlur(texture, st, pixel, int(kernel_size)).rgb; 32 | 33 | color += digits(st - vec2(ix/5.0 + 0.01, 0.01), kernel_size, 0.0); 34 | color -= step(.99, fract(st.x * 5.0)); 35 | 36 | gl_FragColor = vec4(color,1.0); 37 | } 38 | -------------------------------------------------------------------------------- /data/filter_boxBlur2D.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | #define PROCESSING_TEXTURE_SHADER 6 | 7 | uniform sampler2D texture; 8 | uniform vec2 texOffset; 9 | 10 | uniform vec2 u_resolution; 11 | uniform float u_time; 12 | 13 | varying vec4 vertColor; 14 | varying vec4 vertTexCoord; 15 | 16 | #define BOXBLUR_2D 17 | #include "lygia/sample/clamp2edge.glsl" 18 | #define BOXBLUR_SAMPLER_FNC(TEX, UV) sampleClamp2edge(TEX, UV) 19 | #include "lygia/filter/boxBlur.glsl" 20 | 21 | #include "lygia/draw/digits.glsl" 22 | 23 | void main (void) { 24 | vec3 color = vec3(0.0); 25 | vec2 pixel = texOffset; 26 | vec2 st = vertTexCoord.st; 27 | 28 | float ix = floor(st.x * 5.0); 29 | float kernel_size = max(1.0, ix * 4.0); 30 | 31 | color += boxBlur(texture, st, pixel, int(kernel_size)).rgb; 32 | 33 | color += digits(st - vec2(ix/5.0 + 0.01, 0.01), kernel_size, 0.0); 34 | color -= step(.99, fract(st.x * 5.0)); 35 | 36 | gl_FragColor = vec4(color,1.0); 37 | } 38 | -------------------------------------------------------------------------------- /data/filter_edge2D.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform sampler2D texture; 9 | uniform vec2 texOffset; 10 | 11 | varying vec4 vertColor; 12 | varying vec4 vertTexCoord; 13 | 14 | #include "lygia/sample/clamp2edge.glsl" 15 | #define EDGE_SAMPLER_FNC(TEX, UV) sampleClamp2edge(TEX, UV).r 16 | #include "lygia/filter/edge.glsl" 17 | #include "lygia/draw/digits.glsl" 18 | #include "lygia/math/saturate.glsl" 19 | 20 | void main(void) { 21 | vec4 color = vec4(0.0, 0.0, 0.0, 1.0); 22 | vec2 st = vertTexCoord.st; 23 | vec2 pixel = texOffset; 24 | 25 | float ix = floor(st.x * 5.0); 26 | float radius = max(0.1, ix * 0.5); 27 | 28 | if (st.y < 0.5) 29 | color.rgb += edgePrewitt(texture, st, pixel * radius); 30 | else 31 | color.rgb += edgeSobel(texture, st, pixel * radius); 32 | 33 | color.rgb -= step(st.y, 0.05) * 0.5; 34 | color.rgb = saturate(color.rgb); 35 | color.rgb += digits(st - vec2(ix/5.0 + 0.01, 0.01), radius); 36 | color.rgb -= step(.98, fract(st.x * 5.0)); 37 | 38 | gl_FragColor = color; 39 | } 40 | -------------------------------------------------------------------------------- /data/filter_gaussianBlur2D.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | #define PROCESSING_TEXTURE_SHADER 6 | 7 | uniform sampler2D texture; 8 | uniform vec2 texOffset; 9 | 10 | uniform vec2 u_resolution; 11 | uniform float u_time; 12 | 13 | varying vec4 vertColor; 14 | varying vec4 vertTexCoord; 15 | 16 | #define GAUSSIANBLUR_2D 17 | 18 | #include "lygia/sample/clamp2edge.glsl" 19 | #define GAUSSIANBLUR_SAMPLER_FNC(TEX, UV) sampleClamp2edge(TEX, UV) 20 | #include "lygia/filter/gaussianBlur.glsl" 21 | 22 | #include "lygia/draw/digits.glsl" 23 | 24 | void main (void) { 25 | vec3 color = vec3(0.0); 26 | vec2 pixel = texOffset; 27 | vec2 st = vertTexCoord.st; 28 | 29 | float ix = floor(st.x * 5.0); 30 | float kernel_size = max(1.0, ix * 4.0); 31 | 32 | color += gaussianBlur(texture, st, pixel, int(kernel_size)).rgb; 33 | 34 | color += digits(st - vec2(ix/5.0 + 0.01, 0.01), kernel_size, 0.0); 35 | color -= step(.99, fract(st.x * 5.0)); 36 | 37 | gl_FragColor = vec4(color,1.0); 38 | } 39 | -------------------------------------------------------------------------------- /data/filter_kuwahara2D.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform sampler2D texture; 9 | uniform vec2 texOffset; 10 | 11 | uniform vec2 u_resolution; 12 | uniform float u_time; 13 | 14 | varying vec4 vertColor; 15 | varying vec4 vertTexCoord; 16 | 17 | #include "lygia/sample/clamp2edge.glsl" 18 | #define KUWAHARA_SAMPLER_FNC(TEX, UV) sampleClamp2edge(TEX, UV) 19 | #include "lygia/filter/kuwahara.glsl" 20 | 21 | #include "lygia/draw/digits.glsl" 22 | 23 | void main (void) { 24 | vec3 color = vec3(0.0); 25 | vec2 pixel = texOffset; 26 | vec2 st = vertTexCoord.st; 27 | 28 | float ix = floor(st.x * 5.0); 29 | float kernel_size = max(1.0, ix * 3.0);; 30 | 31 | color += kuwahara(texture, st, pixel, int(kernel_size)).rgb; 32 | 33 | color += digits(st - vec2(ix/5.0 + 0.01, 0.01), kernel_size, 0.0); 34 | color -= step(.99, fract(st.x * 5.0)); 35 | 36 | gl_FragColor = vec4(color,1.0); 37 | } 38 | -------------------------------------------------------------------------------- /data/filter_laplacian2D.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | #define PROCESSING_TEXTURE_SHADER 6 | 7 | uniform sampler2D texture; 8 | uniform vec2 texOffset; 9 | 10 | uniform vec2 u_resolution; 11 | uniform float u_time; 12 | 13 | varying vec4 vertColor; 14 | varying vec4 vertTexCoord; 15 | 16 | #include "lygia/sample/clamp2edge.glsl" 17 | #define LAPLACIAN_SAMPLER_FNC(TEX, UV) sampleClamp2edge(TEX, UV) 18 | #include "lygia/filter/laplacian.glsl" 19 | 20 | #include "lygia/draw/digits.glsl" 21 | 22 | void main (void) { 23 | vec3 color = vec3(0.0); 24 | vec2 pixel = texOffset; 25 | vec2 st = vertTexCoord.st; 26 | 27 | float ix = floor(st.x * 5.0); 28 | float radius = max(1.0, ix * 3.0); 29 | 30 | color += laplacian(texture, st, pixel * radius).rgb * 0.5 + 0.5; 31 | 32 | color -= digits(st - vec2(ix/5.0 + 0.01, 0.01), radius, 0.); 33 | color -= step(.99, fract(st.x * 5.0)); 34 | 35 | gl_FragColor = vec4(color,1.0); 36 | } 37 | -------------------------------------------------------------------------------- /data/filter_median2D.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | #define PROCESSING_TEXTURE_SHADER 6 | 7 | uniform sampler2D texture; 8 | uniform vec2 texOffset; 9 | 10 | uniform vec2 u_resolution; 11 | uniform float u_time; 12 | 13 | varying vec4 vertColor; 14 | varying vec4 vertTexCoord; 15 | 16 | #include "lygia/sample/clamp2edge.glsl" 17 | #define MEDIAN_SAMPLER_FNC(TEX, UV) sampleClamp2edge(TEX, UV) 18 | #include "lygia/filter/median.glsl" 19 | 20 | #include "lygia/draw/digits.glsl" 21 | #include "lygia/draw/stroke.glsl" 22 | 23 | void main (void) { 24 | vec3 color = vec3(0.0); 25 | vec2 pixel = texOffset; 26 | vec2 st = vertTexCoord.st; 27 | 28 | float radius = fract(st.x * 2.0) * 4.0; 29 | 30 | color = mix( median3(texture, st, pixel * max(1., floor(radius))).rgb, 31 | median5(texture, st, pixel * max(1., floor(radius))).rgb, 32 | step(.5, st.x)); 33 | 34 | color += digits(st - vec2(0.01 + 0.5 * step(.5, st.x), 0.01), mix(3., 5., step(.5, st.x)), 0.0); 35 | color -= stroke(st.x, .5, pixel.x * 2.0); 36 | 37 | color -= step(1.0 - pixel.x * 5., fract(radius)) * 0.1; 38 | 39 | gl_FragColor = vec4(color,1.0); 40 | } 41 | -------------------------------------------------------------------------------- /data/filter_noiseBlur2D.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform sampler2D texture; 9 | uniform vec2 texOffset; 10 | 11 | uniform vec2 u_resolution; 12 | uniform float u_time; 13 | 14 | varying vec4 vertColor; 15 | varying vec4 vertTexCoord; 16 | 17 | #include "lygia/sample/clamp2edge.glsl" 18 | #define NOISEBLUR_SAMPLER_FNC(TEX, UV) sampleClamp2edge(TEX, UV) 19 | #include "lygia/filter/noiseBlur.glsl" 20 | 21 | #include "lygia/draw/digits.glsl" 22 | 23 | void main (void) { 24 | vec3 color = vec3(0.0); 25 | vec2 pixel = texOffset; 26 | vec2 st = vertTexCoord.st; 27 | 28 | float ix = floor(st.x * 5.0); 29 | float radius = max(1.0, ix * 4.0); 30 | 31 | color += noiseBlur(texture, st, pixel, radius).rgb; 32 | 33 | color += digits(st - vec2(ix/5.0 + 0.01, 0.01), radius, 0.0); 34 | color -= step(.99, fract(st.x * 5.0)); 35 | 36 | gl_FragColor = vec4(color,1.0); 37 | } 38 | -------------------------------------------------------------------------------- /data/filter_radialBlur2D.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | #define PROCESSING_TEXTURE_SHADER 6 | 7 | uniform sampler2D texture; 8 | uniform vec2 texOffset; 9 | 10 | uniform vec2 u_resolution; 11 | uniform float u_time; 12 | 13 | varying vec4 vertColor; 14 | varying vec4 vertTexCoord; 15 | 16 | #include "lygia/sample/clamp2edge.glsl" 17 | #define RADIALBLUR_SAMPLER_FNC(TEX, UV) sampleClamp2edge(TEX, UV) 18 | #include "lygia/filter/radialBlur.glsl" 19 | 20 | #include "lygia/math/decimation.glsl" 21 | #include "lygia/draw/digits.glsl" 22 | 23 | void main (void) { 24 | vec3 color = vec3(0.0); 25 | vec2 pixel = texOffset; 26 | vec2 st = vertTexCoord.st; 27 | 28 | vec2 center = vec2(0.5); 29 | 30 | float cols = 5.0; 31 | 32 | float x = st.x * cols; 33 | float xi = floor(x); 34 | float xf = fract(x); 35 | float strength = max(1.0, xi * 10.0); 36 | 37 | vec2 dir = st - center; 38 | float angle = atan(dir.y, dir.x); 39 | angle += u_time; 40 | dir = vec2(cos(angle), sin(angle)); 41 | 42 | color += radialBlur(texture, st, pixel * dir, strength).rgb; 43 | 44 | vec2 uv = vec2(fract(st.x * cols), st.y * cols) - 0.05; 45 | uv *= 0.3; 46 | 47 | color += digits(uv, strength, 0.0); 48 | color -= step(.99, xf); 49 | 50 | gl_FragColor = vec4(color,1.0); 51 | } 52 | -------------------------------------------------------------------------------- /data/filter_sharpen2D.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | precision mediump int; 4 | #endif 5 | 6 | #define PROCESSING_TEXTURE_SHADER 7 | 8 | uniform sampler2D texture; 9 | uniform vec2 texOffset; 10 | 11 | uniform vec2 u_resolution; 12 | uniform float u_time; 13 | 14 | varying vec4 vertColor; 15 | varying vec4 vertTexCoord; 16 | 17 | #include "lygia/filter/sharpen.glsl" 18 | 19 | void main (void) { 20 | vec3 color = vec3(0.0); 21 | vec2 pixel = texOffset; 22 | vec2 st = vertTexCoord.st; 23 | 24 | float radius = fract(st.x * 3.0) * 5.0; 25 | 26 | if (st.x < .33) 27 | color = sharpenAdaptive(texture, st, pixel * max(1.0, radius)).rgb; 28 | 29 | else if (st.x < .66) 30 | color = sharpenContrastAdaptive(texture, st, pixel * max(1.0, radius)).rgb; 31 | 32 | else 33 | color = sharpenFast(texture, st, pixel).rgb; 34 | 35 | 36 | color -= step(.95, fract(radius) ) * 0.1; 37 | color -= step(.98, fract(st.x * 3.0)); 38 | 39 | gl_FragColor = vec4(color,1.0); 40 | } 41 | -------------------------------------------------------------------------------- /data/generative_cnoise.frag: -------------------------------------------------------------------------------- 1 | 2 | #ifdef GL_ES 3 | precision mediump float; 4 | #endif 5 | 6 | uniform vec2 u_resolution; 7 | uniform float u_time; 8 | 9 | #include "lygia/generative/cnoise.glsl" 10 | 11 | void main(void) { 12 | vec4 color = vec4(vec3(0.0), 1.0); 13 | vec2 pixel = 1.0/u_resolution.xy; 14 | vec2 st = gl_FragCoord.xy * pixel; 15 | 16 | float d2 = cnoise(vec2(st * 5. + u_time)) * 0.5 + 0.5; 17 | float d3 = cnoise(vec3(st * 5., u_time)) * 0.5 + 0.5; 18 | 19 | color += mix(d2, d3, step(0.5, st.x)); 20 | 21 | gl_FragColor = color; 22 | } 23 | -------------------------------------------------------------------------------- /data/generative_curl.frag: -------------------------------------------------------------------------------- 1 | 2 | #ifdef GL_ES 3 | precision mediump float; 4 | #endif 5 | 6 | uniform vec2 u_resolution; 7 | uniform float u_time; 8 | 9 | #include "lygia/generative/curl.glsl" 10 | 11 | void main(void) { 12 | vec4 color = vec4(vec3(0.0), 1.0); 13 | vec2 pixel = 1.0/u_resolution.xy; 14 | vec2 st = gl_FragCoord.xy * pixel; 15 | 16 | vec2 d2 = curl(vec2(st * 5. + u_time)) * 0.5 + 0.5; 17 | vec3 d3 = curl(vec3(st * 5., u_time)) * 0.5 + 0.5; 18 | 19 | color.rgb += mix(vec3(d2, 0.0), d3, step(0.5, st.x)); 20 | 21 | gl_FragColor = color; 22 | } 23 | -------------------------------------------------------------------------------- /data/generative_fbm.frag: -------------------------------------------------------------------------------- 1 | 2 | #ifdef GL_ES 3 | precision mediump float; 4 | #endif 5 | 6 | uniform vec2 u_resolution; 7 | uniform float u_time; 8 | 9 | #include "lygia/generative/fbm.glsl" 10 | 11 | void main(void) { 12 | vec4 color = vec4(vec3(0.0), 1.0); 13 | vec2 pixel = 1.0/u_resolution.xy; 14 | vec2 st = gl_FragCoord.xy * pixel; 15 | 16 | float d2 = fbm(vec2(st * 5. + u_time)) * 0.5 + 0.5; 17 | float d3 = fbm(vec3(st * 5., u_time)) * 0.5 + 0.5; 18 | 19 | color += mix(d2, d3, step(0.5, st.x)); 20 | 21 | gl_FragColor = color; 22 | } 23 | -------------------------------------------------------------------------------- /data/generative_noised.frag: -------------------------------------------------------------------------------- 1 | 2 | #ifdef GL_ES 3 | precision mediump float; 4 | #endif 5 | 6 | uniform vec2 u_resolution; 7 | uniform float u_time; 8 | 9 | #include "lygia/generative/noised.glsl" 10 | 11 | void main(void) { 12 | vec4 color = vec4(vec3(0.0), 1.0); 13 | vec2 pixel = 1.0/u_resolution.xy; 14 | vec2 st = gl_FragCoord.xy * pixel; 15 | 16 | vec2 d2 = noised(vec2(st * 5. + u_time)).yz * 0.5 + 0.5; 17 | vec3 d3 = noised(vec3(st * 5., u_time)).yzw * 0.5 + 0.5; 18 | 19 | color.rgb += mix(vec3(d2,0.0), d3, step(0.5, st.x)); 20 | 21 | gl_FragColor = color; 22 | } 23 | -------------------------------------------------------------------------------- /data/generative_pnoise.frag: -------------------------------------------------------------------------------- 1 | 2 | #ifdef GL_ES 3 | precision mediump float; 4 | #endif 5 | 6 | uniform vec2 u_resolution; 7 | uniform float u_time; 8 | 9 | #include "lygia/generative/pnoise.glsl" 10 | 11 | void main(void) { 12 | vec4 color = vec4(vec3(0.0), 1.0); 13 | vec2 pixel = 1.0/u_resolution.xy; 14 | vec2 st = gl_FragCoord.xy * pixel; 15 | 16 | float d2 = pnoise(vec2(st * 5. + u_time), vec2(1.2, 3.4)) * 0.5 + 0.5; 17 | float d3 = pnoise(vec3(st * 5., u_time), vec3(1.2, 3.4, 5.6)) * 0.5 + 0.5; 18 | 19 | color += mix(d2, d3, step(0.5, st.x)); 20 | 21 | gl_FragColor = color; 22 | } 23 | -------------------------------------------------------------------------------- /data/generative_random.frag: -------------------------------------------------------------------------------- 1 | 2 | #ifdef GL_ES 3 | precision mediump float; 4 | #endif 5 | 6 | uniform vec2 u_resolution; 7 | uniform float u_time; 8 | 9 | #include "lygia/generative/random.glsl" 10 | 11 | void main(void) { 12 | vec4 color = vec4(vec3(0.0), 1.0); 13 | vec2 pixel = 1.0/u_resolution.xy; 14 | vec2 st = gl_FragCoord.xy * pixel; 15 | 16 | float d2 = random(vec2(st * 5. + u_time)); 17 | float d3 = random(vec3(st * 5., u_time)); 18 | 19 | color += mix(d2, d3, step(0.5, st.x)); 20 | 21 | gl_FragColor = color; 22 | } 23 | -------------------------------------------------------------------------------- /data/generative_snoise.frag: -------------------------------------------------------------------------------- 1 | 2 | #ifdef GL_ES 3 | precision mediump float; 4 | #endif 5 | 6 | uniform vec2 u_resolution; 7 | uniform float u_time; 8 | 9 | #include "lygia/generative/snoise.glsl" 10 | 11 | void main(void) { 12 | vec4 color = vec4(vec3(0.0), 1.0); 13 | vec2 pixel = 1.0/u_resolution.xy; 14 | vec2 st = gl_FragCoord.xy * pixel; 15 | 16 | float d2 = snoise(vec2(st * 5. + u_time)) * 0.5 + 0.5; 17 | float d3 = snoise(vec3(st * 5., u_time)) * 0.5 + 0.5; 18 | 19 | color += mix(d2, d3, step(0.5, st.x)); 20 | 21 | gl_FragColor = color; 22 | } 23 | -------------------------------------------------------------------------------- /data/generative_voronoi.frag: -------------------------------------------------------------------------------- 1 | 2 | #ifdef GL_ES 3 | precision mediump float; 4 | #endif 5 | 6 | uniform vec2 u_resolution; 7 | uniform float u_time; 8 | 9 | #include "lygia/generative/voronoi.glsl" 10 | 11 | void main(void) { 12 | vec4 color = vec4(vec3(0.0), 1.0); 13 | vec2 pixel = 1.0/u_resolution.xy; 14 | vec2 st = gl_FragCoord.xy * pixel; 15 | 16 | vec3 d2 = voronoi(vec2(st * 5. + u_time)); 17 | vec3 d3 = voronoi(vec3(st * 5., u_time)); 18 | 19 | color.rgb += mix(d2, d3, step(0.5, st.x)); 20 | 21 | gl_FragColor = color; 22 | } 23 | -------------------------------------------------------------------------------- /data/generative_voronoise.frag: -------------------------------------------------------------------------------- 1 | 2 | #ifdef GL_ES 3 | precision mediump float; 4 | #endif 5 | 6 | uniform vec2 u_resolution; 7 | uniform float u_time; 8 | 9 | #include "lygia/generative/voronoise.glsl" 10 | 11 | void main(void) { 12 | vec4 color = vec4(vec3(0.0), 1.0); 13 | vec2 pixel = 1.0/u_resolution.xy; 14 | vec2 st = gl_FragCoord.xy * pixel; 15 | 16 | vec2 p = 0.5 - 0.5*cos( u_time *vec2(1.0,0.5) ); 17 | 18 | // if( iMouse.w>0.001 ) p = vec2(0.0,1.0) + vec2(1.0,-1.0)*iMouse.xy/iResolution.xy; 19 | 20 | p = p*p*(3.0-2.0*p); 21 | p = p*p*(3.0-2.0*p); 22 | p = p*p*(3.0-2.0*p); 23 | 24 | float f = voronoise( vec3(24.0*st, u_time), p.x, 1. ); 25 | 26 | color += f; 27 | 28 | gl_FragColor = color; 29 | } 30 | -------------------------------------------------------------------------------- /data/generative_worley.frag: -------------------------------------------------------------------------------- 1 | 2 | #ifdef GL_ES 3 | precision mediump float; 4 | #endif 5 | 6 | uniform vec2 u_resolution; 7 | uniform float u_time; 8 | 9 | #include "lygia/generative/worley.glsl" 10 | 11 | void main(void) { 12 | vec4 color = vec4(vec3(0.0), 1.0); 13 | vec2 pixel = 1.0/u_resolution.xy; 14 | vec2 st = gl_FragCoord.xy * pixel; 15 | 16 | float d2 = worley(vec2(st*10. + u_time)); 17 | float d3 = worley(vec3(st*10., u_time)); 18 | 19 | color += mix(d2, d3, step(0.5, st.x)); 20 | 21 | gl_FragColor = color; 22 | } 23 | -------------------------------------------------------------------------------- /data/guido_schmidt.frag: -------------------------------------------------------------------------------- 1 | // Example by Guido Schmidt (@guidoschmidtcc) 2 | 3 | #ifdef GL_ES 4 | precision highp float; 5 | #endif 6 | 7 | uniform float u_time; 8 | uniform vec2 u_resolution; 9 | 10 | #include "lygia/generative/voronoi.glsl" 11 | #include "lygia/generative/curl.glsl" 12 | #include "lygia/generative/worley.glsl" 13 | #include "lygia/math/highPass.glsl" 14 | #include "lygia/color/palette.glsl" 15 | 16 | void main() { 17 | vec4 final = vec4(1.0, 0.0, 0.0, 1.0); 18 | 19 | vec2 uv = gl_FragCoord.xy / u_resolution * vec2(u_resolution.x / u_resolution.y, 1.0); 20 | float t = u_time * 0.25; 21 | 22 | vec3 c = curl(vec3(uv * 2.0, u_time * 0.05)); 23 | float w = worley(vec3(uv * 20.0 * c.yz + c.x, c.x)); 24 | vec3 v = voronoi(uv * 2.0, w * length(c) * c.r + t); 25 | vec3 p = palette(v.b * 2.0, 26 | vec3(0.7, sin(t * 1.1) * 0.2, 0.0), 27 | vec3(0.3, 0.2, cos(t * 1.2)), 28 | vec3(sin(t * 0.8), 0.2, 0.3), 29 | vec3(0.2, 0.2, cos(t * 0.9))); 30 | final.r = smoothstep(0.9, 0.91, length(v)); 31 | final.rgb = mix(vec3(0.2) - p, p, final.r); 32 | gl_FragColor = final; 33 | } -------------------------------------------------------------------------------- /data/ilithya.frag: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////// 2 | // Moire Groove 🫠 3 | // @ilithya_rocks 4 | // https://www.ilithya.rocks/ 5 | //////////////////////////////////////// 6 | 7 | #ifdef GL_ES 8 | precision highp float; 9 | #endif 10 | 11 | uniform vec2 u_resolution; 12 | uniform float u_time; 13 | 14 | #include "lygia/space/ratio.glsl" 15 | #include "lygia/generative/snoise.glsl" 16 | #include "lygia/sdf/circleSDF.glsl" 17 | 18 | void main(void) { 19 | vec2 uv = gl_FragCoord.xy / u_resolution; 20 | uv = ratio(uv, u_resolution); 21 | 22 | float t = u_time; 23 | 24 | vec3 color = vec3(0.0); 25 | 26 | uv.x = snoise(uv + t * 0.1); 27 | 28 | float freq = 25.0; 29 | 30 | float trippyCircles = circleSDF( 31 | fract(uv * freq), 32 | vec2(0.5) 33 | ) * 0.5; 34 | trippyCircles = step(trippyCircles, 0.3); 35 | // Uncomment following line and comment line above for another look ✨ 36 | // trippyCircles = step(0.275, trippyCircles); 37 | 38 | color += trippyCircles; 39 | 40 | // GRADIENT 41 | vec3 c1 = vec3(1.0, 0.0, 0.7); 42 | vec3 c2 = vec3(1.0, 0.5, 0.0); 43 | vec3 gradMix = mix(c1, c2, uv.y); 44 | color *= gradMix; 45 | 46 | gl_FragColor = vec4(color, 1.0); 47 | } -------------------------------------------------------------------------------- /data/imgs/arches.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patriciogonzalezvivo/lygia_p5_examples/2508ba17abb1559eea6022d5d4bab5efd600ae6c/data/imgs/arches.jpg -------------------------------------------------------------------------------- /data/imgs/danny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patriciogonzalezvivo/lygia_p5_examples/2508ba17abb1559eea6022d5d4bab5efd600ae6c/data/imgs/danny.png -------------------------------------------------------------------------------- /data/imgs/lut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patriciogonzalezvivo/lygia_p5_examples/2508ba17abb1559eea6022d5d4bab5efd600ae6c/data/imgs/lut.png -------------------------------------------------------------------------------- /data/imgs/noise_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patriciogonzalezvivo/lygia_p5_examples/2508ba17abb1559eea6022d5d4bab5efd600ae6c/data/imgs/noise_blue.png -------------------------------------------------------------------------------- /data/imgs/rocks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patriciogonzalezvivo/lygia_p5_examples/2508ba17abb1559eea6022d5d4bab5efd600ae6c/data/imgs/rocks.png -------------------------------------------------------------------------------- /data/imgs/sprite_megaman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patriciogonzalezvivo/lygia_p5_examples/2508ba17abb1559eea6022d5d4bab5efd600ae6c/data/imgs/sprite_megaman.png -------------------------------------------------------------------------------- /data/lighting_atmosphere.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | #define PROCESSING_TEXTURE_SHADER 6 | 7 | uniform vec2 u_resolution; 8 | uniform vec2 u_mouse; 9 | uniform float u_time; 10 | 11 | varying vec4 vertTexCoord; 12 | 13 | #include "lygia/space/fisheye2xyz.glsl" 14 | #include "lygia/lighting/atmosphere.glsl" 15 | 16 | void main(void) { 17 | vec3 color = vec3(0.0); 18 | vec2 pixel = 1.0/u_resolution.xy; 19 | vec2 st = vertTexCoord.xy; 20 | vec2 mouse = u_mouse * pixel; 21 | 22 | if (mouse.x <= 0.0 && mouse.y <= 0.0) 23 | mouse = vec2(fract(0.5+u_time*0.5), 0.6); 24 | 25 | vec3 eye_dir = fisheye2xyz(st); 26 | vec3 sun_dir = fisheye2xyz(mouse); 27 | 28 | color = atmosphere(eye_dir, sun_dir); 29 | 30 | gl_FragColor = vec4(color, 1.0); 31 | } 32 | -------------------------------------------------------------------------------- /data/lighting_raymarching.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 | #define RESOLUTION u_resolution 10 | #define RAYMARCH_SAMPLES 100 11 | #define RAYMARCH_MULTISAMPLE 4 12 | #define RAYMARCH_BACKGROUND ( vec3(0.7, 0.9, 1.0) + ray.y * 0.8 ) 13 | #define RAYMARCH_AMBIENT vec3(0.7, 0.9, 1.0) 14 | 15 | // #include "lygia/lighting/atmosphere.glsl" 16 | // #define RAYMARCH_BACKGROUND atmosphere(normal, normalize(u_light)) 17 | // #define RAYMARCH_AMBIENT atmosphere(normal, normalize(u_light)) 18 | #include "lygia/sdf.glsl" 19 | #include "lygia/space/ratio.glsl" 20 | #include "lygia/lighting/raymarch.glsl" 21 | #include "lygia/color/space/linear2gamma.glsl" 22 | 23 | float checkBoard(vec2 uv, vec2 _scale) { 24 | uv = floor(fract(uv * _scale) * 2.0); 25 | return min(1.0, uv.x + uv.y) - (uv.x * uv.y); 26 | } 27 | 28 | vec4 raymarchMap( in vec3 pos ) { 29 | vec4 res = vec4(1.0); 30 | 31 | float check = checkBoard(pos.xz, vec2(1.0)); 32 | res = opUnion( res, vec4( vec3( 0.5 + check * 0.5), planeSDF(pos) ) ); 33 | 34 | res = opUnion( res, vec4( 1.0, 1.0, 1.0, sphereSDF( pos-vec3( 0.0, 0.60, 0.0), 0.5 ) ) ); 35 | res = opUnion( res, vec4( 0.0, 1.0, 1.0, boxSDF( pos-vec3( 2.0, 0.5, 0.0), vec3(0.4) ) ) ); 36 | res = opUnion( res, vec4( 0.3, 0.3, 1.0, torusSDF( pos-vec3( 0.0, 0.5, 2.0), vec2(0.4,0.1) ) ) ); 37 | res = opUnion( res, vec4( 0.3, 0.1, 0.3, capsuleSDF( pos,vec3(-2.3, 0.4,-0.2), vec3(-1.6,0.75,0.2), 0.2 ) ) ); 38 | res = opUnion( res, vec4( 0.5, 0.3, 0.4, triPrismSDF( pos-vec3(-2.0, 0.50,-2.0), vec2(0.5,0.1) ) ) ); 39 | res = opUnion( res, vec4( 0.2, 0.2, 0.8, cylinderSDF( pos-vec3( 2.0, 0.50,-2.0), vec2(0.2,0.4) ) ) ); 40 | res = opUnion( res, vec4( 0.7, 0.5, 0.2, coneSDF( pos-vec3( 0.0, 0.75,-2.0), vec3(0.8,0.6,0.6) ) ) ); 41 | res = opUnion( res, vec4( 0.4, 0.2, 0.9, hexPrismSDF( pos-vec3(-2.0, 0.60, 2.0), vec2(0.5,0.1) ) ) ); 42 | res = opUnion( res, vec4( 0.1, 0.3, 0.6, pyramidSDF( pos-vec3( 2.0, 0.10, 2.0), 1.0 ) ) ); 43 | 44 | return res; 45 | } 46 | 47 | void main() { 48 | vec3 color = vec3(0.0); 49 | vec2 pixel = 1.0/u_resolution; 50 | vec2 st = gl_FragCoord.xy * pixel; 51 | vec2 uv = ratio(st, u_resolution); 52 | 53 | vec2 mo = u_mouse * pixel; 54 | float time = 32.0 + u_time * 1.5; 55 | vec3 cam = vec3( 4.5*cos(0.1*time + 7.0*mo.x), 2.2, 4.5*sin(0.1*time + 7.0*mo.x) ) * 10.; 56 | 57 | color = raymarch(cam, uv).rgb; 58 | color = linear2gamma(color); 59 | 60 | gl_FragColor = vec4( color, 1.0 ); 61 | } -------------------------------------------------------------------------------- /data/lighting_raymarching_glass.frag: -------------------------------------------------------------------------------- 1 | // Copyright Patricio Gonzalez Vivo, 2021 - http://patriciogonzalezvivo.com/ 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | uniform sampler2D u_envTex; // imgs/arches.jpg 8 | 9 | uniform vec2 u_resolution; 10 | uniform vec2 u_mouse; 11 | uniform float u_time; 12 | 13 | #define RESOLUTION u_resolution 14 | #define SCENE_CUBEMAP u_envTex 15 | #define SAMPLEEQUIRECT_FLIP_Y 16 | #define SAMPLE_CUBE_FNC(CUBEMAP, NORM, LOD) sampleEquirect(CUBEMAP, NORM, LOD) 17 | #define RAYMARCH_SAMPLES 100 18 | #define RAYMARCH_MULTISAMPLE 4 19 | #define RAYMARCH_BACKGROUND vec3(1.0) 20 | #define RAYMARCH_MATERIAL_FNC raymarchGlassRender 21 | 22 | vec3 raymarchGlassRender(vec3 ray, vec3 pos, vec3 nor, vec3 map); 23 | 24 | // #include "lygia/lighting/atmosphere.glsl" 25 | // #define ENVMAP_FNC(NORM, ROUGHNESS, METALLIC) atmosphere(NORM, normalize(LIGHT_POSITION)) 26 | 27 | #include "lygia/space/ratio.glsl" 28 | #include "lygia/sdf/sphereSDF.glsl" 29 | #include "lygia/sdf/opRepite.glsl" 30 | #include "lygia/sample/equirect.glsl" 31 | #include "lygia/lighting/raymarch.glsl" 32 | #include "lygia/lighting/envMap.glsl" 33 | #include "lygia/color/space/linear2gamma.glsl" 34 | 35 | vec4 raymarchMap(in vec3 pos ) { 36 | vec4 res = vec4(1.); 37 | 38 | float roughness = 0.001 + (floor(pos.x + 0.5) * 0.25) + 0.5; 39 | pos.x += 0.3; 40 | 41 | pos += 0.5; 42 | pos = opRepite(pos, vec3(-2.0, 0.0, 0.0), vec3(2.0, 0.0, 0.0), 1.0); 43 | pos -= 0.5; 44 | 45 | res = vec4( vec3(roughness, 0.0, 1.0), sphereSDF(pos, 0.3 ) ); 46 | 47 | return res; 48 | } 49 | 50 | vec3 raymarchGlassRender(vec3 ray, vec3 pos, vec3 nor, vec3 map) { 51 | if ( map.r + map.g + map.b <= 0.0 ) 52 | return tonemapReinhard( envMap(ray, 0.).rgb ); 53 | 54 | vec3 color = vec3(0.0); 55 | vec3 Kd = vec3(1.0); 56 | 57 | float roughness = map.x; 58 | 59 | vec3 ref = reflect( ray, nor ); 60 | vec3 vie = normalize( ray - pos); 61 | float occ = raymarchAO( pos, nor ); 62 | float dom = raymarchSoftShadow( pos, ref, 0.02, 2.5 ) * occ; 63 | 64 | const float etaR = 0.64; 65 | const float etaG = 0.65; 66 | const float etaB = 0.66; 67 | const float f = ((1.0-etaG)*(1.0-etaG)) / ((1.0+etaG)*(1.0+etaG)); 68 | float fr = saturate(f + (1.0 - f) * pow((1.0 - dot(-vie, nor)), 6.0)); 69 | 70 | #if defined(LIGHT_DIRECTION) 71 | vec3 lig = normalize( LIGHT_DIRECTION ); 72 | #else 73 | vec3 lig = normalize( LIGHT_POSITION - pos); 74 | #endif 75 | 76 | vec3 Id = Kd * max(dot(nor, lig), 0.0); 77 | color = color + Id * 0.25; 78 | 79 | vec3 Is = vec3(pow(max(dot(ref, -vie),0.0), 128.0)); 80 | color = color + Is * dom; 81 | 82 | vec3 Ir = fr * envMap(ref, roughness).rgb; 83 | color = color + Ir * dom; 84 | 85 | vec3 refractR = refract(vie, nor, etaR); 86 | vec3 refractG = refract(vie, nor, etaG); 87 | vec3 refractB = refract(vie, nor, etaB); 88 | 89 | vec3 refractColor = vec3(0.0); 90 | refractColor.r = envMap(refractR, roughness).r; 91 | refractColor.g = envMap(refractG, roughness).g; 92 | refractColor.b = envMap(refractB, roughness).b; 93 | 94 | vec3 It = (1.0-fr) * refractColor; 95 | color = color + It; 96 | 97 | return color; 98 | } 99 | 100 | 101 | void main(void) { 102 | vec3 color = vec3(0.0); 103 | vec2 pixel = 1.0/u_resolution; 104 | vec2 st = gl_FragCoord.xy * pixel; 105 | vec2 uv = ratio(st, u_resolution); 106 | 107 | vec2 mo = u_mouse * pixel; 108 | float time = 32.0 + u_time * 1.5; 109 | vec3 cam = vec3( 4.5*cos(0.1*time + 7.0*mo.x), 2.2, 4.5*sin(0.1*time + 7.0*mo.x) ) * 10.; 110 | 111 | color = raymarch(cam, uv).rgb; 112 | color = linear2gamma(color); 113 | 114 | gl_FragColor = vec4( color, 1.0 ); 115 | } 116 | -------------------------------------------------------------------------------- /data/lighting_raymarching_pbr.frag: -------------------------------------------------------------------------------- 1 | // Copyright Patricio Gonzalez Vivo, 2021 - http://patriciogonzalezvivo.com/ 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | uniform sampler2D u_envTex; // imgs/studio.png 8 | 9 | uniform vec2 u_resolution; 10 | uniform vec2 u_mouse; 11 | uniform float u_time; 12 | 13 | #define RESOLUTION u_resolution 14 | #define SCENE_CUBEMAP u_envTex 15 | #define SAMPLEEQUIRECT_FLIP_Y 16 | #define SAMPLE_CUBE_FNC(CUBEMAP, NORM, LOD) sampleEquirect(CUBEMAP, NORM, LOD) 17 | #define LIGHT_DIRECTION vec3(0., 1., 1.) 18 | #define RAYMARCH_SAMPLES 100 19 | #define RAYMARCH_MULTISAMPLE 4 20 | #define RAYMARCH_BACKGROUND vec3(1.0) 21 | #define RAYMARCH_MATERIAL_FNC raymarchPbrMaterial 22 | 23 | // #include "lygia/lighting/atmosphere.glsl" 24 | // #define ENVMAP_FNC(NORM, ROUGHNESS, METALLIC) atmosphere(NORM, normalize(LIGHT_POSITION)) 25 | vec3 raymarchPbrMaterial(vec3 ray, vec3 pos, vec3 nor, vec3 map); 26 | #include "lygia/space/ratio.glsl" 27 | #include "lygia/color/space/linear2gamma.glsl" 28 | #include "lygia/sdf/planeSDF.glsl" 29 | #include "lygia/sdf/sphereSDF.glsl" 30 | #include "lygia/sdf/opUnion.glsl" 31 | #include "lygia/sdf/opRepite.glsl" 32 | #include "lygia/sample/equirect.glsl" 33 | #include "lygia/lighting/raymarch.glsl" 34 | #include "lygia/lighting/diffuse.glsl" 35 | #include "lygia/lighting/specular.glsl" 36 | #include "lygia/lighting/envMap.glsl" 37 | #include "lygia/lighting/sphericalHarmonics.glsl" 38 | #include "lygia/lighting/fresnelReflection.glsl" 39 | 40 | float checkBoard(vec2 uv, vec2 _scale) { 41 | uv = floor(fract(uv * _scale) * 2.0); 42 | return min(1.0, uv.x + uv.y) - (uv.x * uv.y); 43 | } 44 | 45 | vec4 raymarchMap(in vec3 pos ) { 46 | vec4 res = vec4(1.); 47 | 48 | float check = checkBoard(pos.xz, vec2(1.0)); 49 | res = opUnion( res, vec4( vec3(1., 0.0, 0.5 + check * 0.5), planeSDF(pos) ) ); 50 | 51 | pos.y -= 0.3; 52 | 53 | float roughness = 0.0001 + (floor(pos.x + 0.5) * 0.25) + 0.5; 54 | float metallic = 0.0 + (floor(pos.z + 0.5) * 0.25) + 0.4; 55 | 56 | pos += 0.5; 57 | pos = opRepite(pos, vec3(-2.0, 0.0, -2.0), vec3(2.0, 0.0, 2.0), 1.0); 58 | pos -= 0.5; 59 | 60 | res = opUnion( res, vec4( vec3(roughness, metallic, 1.0), sphereSDF(pos, 0.3 ) ) ); 61 | 62 | return res; 63 | } 64 | 65 | vec3 raymarchPbrMaterial(vec3 ray, vec3 pos, vec3 nor, vec3 map) { 66 | if ( sum(map) <= 0.0 ) 67 | return tonemap( envMap(ray, 0.).rgb ); 68 | 69 | vec3 color = vec3(map.z); 70 | 71 | float roughness = map.x; 72 | float metallic = map.y; 73 | 74 | float notMetal = 1. - metallic; 75 | float smooth = .95 - saturate(roughness); 76 | 77 | vec3 ref = reflect( ray, nor ); 78 | #if defined(LIGHT_DIRECTION) 79 | vec3 lig = normalize( LIGHT_DIRECTION ); 80 | #else 81 | vec3 lig = normalize( LIGHT_POSITION - pos); 82 | #endif 83 | vec3 vie = normalize( ray ); 84 | float dom = smoothstep( -0.1, 0.1, ref.y ); 85 | float occ = raymarchAO( pos, nor ); 86 | float n2v = dot(nor, vie); 87 | 88 | float diffuse = diffuse(lig, nor, -vie, roughness); 89 | float specular = specular(lig, nor, -vie, roughness); 90 | 91 | diffuse *= raymarchSoftShadow( pos, lig, 0.02, 2.5 ); 92 | dom = raymarchSoftShadow( pos, ref, 0.02, 2.5 ); 93 | 94 | color.rgb *= diffuse; 95 | #ifdef SCENE_SH_ARRAY 96 | color.rgb *= tonemap( sphericalHarmonics(nor) ); 97 | #endif 98 | 99 | // SPECULAR 100 | float specIntensity = max(0.0, 0.04 * notMetal + 2.0 * metallic) * 101 | saturate(1.1 + n2v + metallic) * // Fresnel 102 | (metallic + smooth * 4.0); // make smaller highlights brighter 103 | 104 | vec3 ambientSpecular = vec3(0.0, 0.0, 0.0); 105 | ambientSpecular = tonemap( envMap(ref, roughness, metallic) ) * (specIntensity) * occ; 106 | ambientSpecular += tonemap( fresnelReflection(ref, vec3(0.04), n2v) ) * metallic; 107 | ambientSpecular *= LIGHT_COLOR * 0.1 + dom; 108 | 109 | color.rgb = color.rgb * notMetal + 110 | (ambientSpecular + LIGHT_COLOR * 2.0 * specular) * 111 | (notMetal * smooth + color.rgb * metallic); 112 | 113 | return color; 114 | } 115 | 116 | void main(void) { 117 | vec3 color = vec3(0.0); 118 | vec2 pixel = 1.0/u_resolution; 119 | vec2 st = gl_FragCoord.xy * pixel; 120 | vec2 uv = ratio(st, u_resolution); 121 | 122 | vec2 mo = u_mouse * pixel; 123 | float time = 32.0 + u_time * 1.5; 124 | vec3 cam = vec3( 4.5*cos(0.1*time + 7.0*mo.x), 2.2, 4.5*sin(0.1*time + 7.0*mo.x) ) * 10.; 125 | 126 | color = raymarch(cam, uv).rgb; 127 | color = linear2gamma(color); 128 | 129 | gl_FragColor = vec4( color, 1.0 ); 130 | } 131 | -------------------------------------------------------------------------------- /data/lighting_raymarching_volume.frag: -------------------------------------------------------------------------------- 1 | 2 | #ifdef GL_ES 3 | precision mediump float; 4 | #endif 5 | 6 | #ifdef GL_ES 7 | precision mediump float; 8 | #endif 9 | 10 | uniform vec2 u_resolution; 11 | uniform vec2 u_mouse; 12 | uniform float u_time; 13 | 14 | #define RESOLUTION u_resolution 15 | #define RAYMARCH_SAMPLES 60 16 | #define RAYMARCH_RENDER_FNC(RO, RD) raymarchVolume(RO, RD) 17 | vec4 raymarchVolume( in vec3 ro, in vec3 rd ); 18 | 19 | #include "lygia/math/saturate.glsl" 20 | #include "lygia/space/ratio.glsl" 21 | #include "lygia/generative/fbm.glsl" 22 | #include "lygia/sdf/boxFrameSDF.glsl" 23 | #include "lygia/lighting/raymarch.glsl" 24 | #include "lygia/lighting/raymarch/volume.glsl" 25 | #include "lygia/color/space/linear2gamma.glsl" 26 | 27 | vec4 raymarchMap(in vec3 pos) { 28 | vec4 res = vec4(1.); 29 | vec3 p = pos.xzy; 30 | 31 | res.a = boxFrameSDF(pos, vec3(1.0), 0.1); 32 | res.a *= (fbm(pos * 2.0) * 0.5 + 0.5); 33 | res.a *= 2.0; 34 | 35 | return saturate(res); 36 | } 37 | 38 | void main() { 39 | vec3 color = vec3(0.0); 40 | vec2 pixel = 1.0/u_resolution; 41 | vec2 st = gl_FragCoord.xy * pixel; 42 | vec2 uv = ratio(st, u_resolution); 43 | 44 | vec2 mo = u_mouse * pixel; 45 | float time = 32.0 + u_time * 1.5; 46 | vec3 cam = vec3( 4.5*cos(0.1*time + 7.0*mo.x), 2.2, 4.5*sin(0.1*time + 7.0*mo.x) ) * 10.; 47 | 48 | color = raymarch(cam, uv).rgb; 49 | color = linear2gamma(color); 50 | 51 | gl_FragColor = vec4( color, 1.0 ); 52 | } -------------------------------------------------------------------------------- /data/mario_carrillo.frag: -------------------------------------------------------------------------------- 1 | // Example by Mario Carrillo ( @marioecg ) 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | uniform float u_time; 8 | 9 | uniform vec2 u_resolution; 10 | 11 | #include "lygia/math/const.glsl" 12 | #include "lygia/math/map.glsl" 13 | #include "lygia/space/cart2polar.glsl" 14 | #include "lygia/color/palette.glsl" 15 | #include "lygia/generative/random.glsl" 16 | 17 | void main(void) { 18 | // Coords 19 | vec2 st = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.y; // origin in center and account for aspect ratio 20 | st = 0.5 - abs(st); // mirror coordinates 21 | vec2 puv = cart2polar(st); // polar coords 22 | puv.x /= TWO_PI + 0.5; // remap angular component from [-PI, PI] to [0, 1] (https://www.youtube.com/watch?v=r1UOB8NVE8I&t=238s) 23 | 24 | // Time and static noise 25 | float t = u_time * 0.75; 26 | float grain = random(st); 27 | 28 | // Ids 29 | vec2 repeat = vec2(1.0, 40.0); 30 | vec2 id = floor(puv * repeat); 31 | 32 | // Gradient 33 | float x = map( 34 | cos(id.y * -0.25 + cos(puv.x * TWO_PI + id.y * 0.5) + t), 35 | -1.0, 36 | 1.0, 37 | 0.0, 38 | 1.0 39 | ); 40 | vec3 brightness = vec3(0.59, 0.56, 0.71); 41 | vec3 contrast = vec3(0.94, 0.5, 0.5); 42 | vec3 oscillation = vec3(1.7, 1.91, 2.16); 43 | vec3 phase = vec3(0.03, 0.02, 0.05); 44 | vec3 color = palette(x + TWO_PI * 0.56, brightness, contrast, oscillation, phase); 45 | 46 | color += grain * 0.25; 47 | 48 | gl_FragColor = vec4(color, 1.0); 49 | } -------------------------------------------------------------------------------- /data/sample_bracketing.frag: -------------------------------------------------------------------------------- 1 | 2 | #ifdef GL_ES 3 | precision mediump float; 4 | #endif 5 | 6 | 7 | uniform sampler2D u_tex0; // imgs/rock_moss.jpg 8 | uniform vec2 u_tex0Resolution; 9 | 10 | uniform vec2 u_resolution; 11 | uniform vec2 u_mouse; 12 | uniform float u_time; 13 | 14 | varying vec2 v_texcoord; 15 | 16 | #include "lygia/math/const.glsl" 17 | #include "lygia/math/decimation.glsl" 18 | #include "lygia/generative/noised.glsl" 19 | 20 | #define ARROWS_LINE_STYLE 21 | #include "lygia/draw/arrows.glsl" 22 | 23 | #define TEXTUREBRACKETING_REPLACE_DIVERGENCE 24 | #include "lygia/sample/bracketing.glsl" 25 | 26 | void main (void) { 27 | vec4 color = vec4(vec3(0.0), 1.0); 28 | vec2 pixel = 1.0/u_resolution.xy; 29 | vec2 st = gl_FragCoord.xy * pixel; 30 | 31 | vec2 mouse = u_mouse * pixel; 32 | vec2 dir = ( noised( vec3(st, u_time * 0.1) ).yz ); 33 | 34 | float scale = 1.; 35 | 36 | if (st.x > mouse.x) 37 | color = sampleBracketing(u_tex0, st, dir, scale); 38 | else 39 | color = texture2D(u_tex0, scale * rotate(st, dir)); 40 | 41 | // // Output vector field directly 42 | // color = max(0.8*color, 43 | // 0.9*arrows(st, dir*70., u_resolution)); 44 | 45 | gl_FragColor = color; 46 | } 47 | -------------------------------------------------------------------------------- /lygia_p5_examples.pde: -------------------------------------------------------------------------------- 1 | /** 2 | * Edge Detection 3 | * 4 | * Change the default shader to apply a simple, custom edge detection filter. 5 | * 6 | * Press the mouse to switch between the custom and default shader. 7 | */ 8 | 9 | PShader shdr; 10 | PImage img_danny; 11 | PImage img_sprite; 12 | PImage img_blueNoise; 13 | PImage img_env; 14 | 15 | void setup() { 16 | size(512, 512, P2D); 17 | 18 | // Assets 19 | img_danny = loadImage("imgs/danny.png"); 20 | img_sprite = loadImage("imgs/sprite_megaman.png"); 21 | img_blueNoise = loadImage("imgs/noise_blue.png"); 22 | img_env = loadImage("imgs/arches.jpg"); 23 | 24 | // Examples 25 | //shdr = loadRecursiveShader("animation_easing.frag"); 26 | //shdr = loadRecursiveShader("animation_sprite.frag"); 27 | //shdr = loadRecursiveShader("color_dither.frag"); 28 | //shdr = loadRecursiveShader("draw_digits.frag"); 29 | //shdr = loadRecursiveShader("filter_bilateralBlur2D.frag"); 30 | //shdr = loadRecursiveShader("filter_boxBlur2D.frag"); 31 | //shdr = loadRecursiveShader("filter_gaussianBlur2D.frag"); 32 | //shdr = loadRecursiveShader("filter_noiseBlur2D.frag"); 33 | //shdr = loadRecursiveShader("filter_radialBlur2D.frag"); 34 | //shdr = loadRecursiveShader("filter_sharpen2D.frag"); 35 | //shdr = loadRecursiveShader("filter_edge2D.frag"); 36 | //shdr = loadRecursiveShader("filter_median2D.frag"); 37 | //shdr = loadRecursiveShader("filter_laplacian2D.frag"); 38 | //shdr = loadRecursiveShader("filter_kuwahara2D.frag"); 39 | //shdr = loadRecursiveShader("generative_random.frag"); 40 | //shdr = loadRecursiveShader("generative_cnoise.frag"); 41 | //shdr = loadRecursiveShader("generative_snoise.frag"); 42 | //shdr = loadRecursiveShader("generative_pnoise.frag"); 43 | //shdr = loadRecursiveShader("generative_noised.frag"); 44 | //shdr = loadRecursiveShader("generative_curl.frag"); 45 | //shdr = loadRecursiveShader("generative_fbm.frag"); 46 | //shdr = loadRecursiveShader("generative_voronoi.frag"); 47 | //shdr = loadRecursiveShader("generative_voronoise.frag"); 48 | //shdr = loadRecursiveShader("generative_worley.frag"); 49 | //shdr = loadRecursiveShader("lighting_atmosphere.frag"); 50 | //shdr = loadRecursiveShader("lighting_raymarching.frag"); 51 | //shdr = loadRecursiveShader("lighting_raymarching_glass.frag"); 52 | //shdr = loadRecursiveShader("lighting_raymarching_pbr.frag"); 53 | shdr = loadRecursiveShader("lighting_raymarching_volume.frag"); 54 | 55 | // Artist contributions 56 | //shdr = loadRecursiveShader("guido_schmidt.frag"); 57 | //shdr = loadRecursiveShader("ilithya.frag"); 58 | //shdr = loadRecursiveShader("mario_carrillo.frag"); 59 | } 60 | 61 | void draw() { 62 | shader(shdr); 63 | 64 | // Uniforms 65 | shdr.set("u_noiseTex", img_blueNoise); 66 | shdr.set("u_spriteTex", img_sprite); 67 | shdr.set("u_envTex", img_env); 68 | shdr.set("u_resolution", float(width), float(height)); 69 | shdr.set("u_mouse", float(mouseX), float(mouseY)); 70 | shdr.set("u_time", millis() / 1000.0); 71 | 72 | image(img_danny, 0, 0, 512, 512); 73 | } 74 | -------------------------------------------------------------------------------- /utils.pde: -------------------------------------------------------------------------------- 1 | import java.io.File; 2 | import java.nio.file.Path; 3 | 4 | void loadSource(String current_folder, String filename, ArrayList source) { 5 | File file = new File(current_folder,filename); 6 | String url = file.getPath().substring(1); 7 | String[] lines = loadStrings(url); 8 | 9 | for (int i = 0; i < lines.length; i++) { 10 | String line = lines[i]; 11 | String line_trim = line.trim(); 12 | if (line_trim.startsWith("#include")){ 13 | String include_file = line_trim.substring("#include".length()).replace("\"", "").trim(); 14 | File f = new File(current_folder,include_file); 15 | loadSource(f.getParent(), f.getName(), source); 16 | } else { 17 | source.add(line + System.getProperty("line.separator") ); 18 | } 19 | } 20 | } 21 | 22 | 23 | 24 | PShader loadRecursiveShader(String fragFilename) { 25 | ArrayList src = new ArrayList(); 26 | loadSource("", fragFilename, src); 27 | String[] fragSource = new String[src.size()]; 28 | src.toArray(fragSource); 29 | 30 | String[] vertSource = { 31 | "", 32 | "uniform mat4 transformMatrix;", 33 | "uniform mat4 texMatrix;", 34 | "", 35 | "attribute vec4 position;", 36 | "attribute vec4 color;", 37 | "attribute vec2 texCoord;", 38 | "", 39 | "varying vec4 vertColor;", 40 | "varying vec4 vertTexCoord;", 41 | "", 42 | "void main() {", 43 | " gl_Position = transformMatrix * position;", 44 | " vertColor = color;", 45 | " vertTexCoord = texMatrix * vec4(texCoord, 1.0, 1.0);", 46 | "}" 47 | }; 48 | 49 | //PShader shader = new PShader(); 50 | //shader.setType(5); 51 | //shader.setFragmentShader(fragSource); 52 | //shader.setVertexShader(vertSource); 53 | return new PShader(this, vertSource, fragSource); 54 | } 55 | --------------------------------------------------------------------------------