diff options
| -rw-r--r-- | Shaders/index.md | 58 |
1 files changed, 57 insertions, 1 deletions
diff --git a/Shaders/index.md b/Shaders/index.md index 83ff1dc..d7c14a6 100644 --- a/Shaders/index.md +++ b/Shaders/index.md @@ -9,10 +9,64 @@ created: 2025-01-04 <span style="color: grey">if you do not see the image above, check if your browser supports webgl, at: [caniuse.com/webgl](https://caniuse.com/webgl)</span> -I'll link the resources i used as an introduction to the subject, hence this serves as an OK starting point. +The code below is what generates the graphic you see. + +You can paste it into [shadertoy.com](https://www.shadertoy.com/new) to play around with it + +```GLSL +float color_scale = 1.; +float color_wave_speed = -.25; +float mouse_effect = 0.00005; +float wave_height = 1.5; + + +void mainImage( out vec4 fragColor, in vec2 fragCoord ) +{ +// Normalized pixel coordinates (from 0 to 1) +vec2 uv = fragCoord/iResolution.xy; +uv.x *= iResolution.x/iResolution.y; // Make it scale evenly on all resolutions (makes it work on phones) +uv.y *= 2.2; // Set the width + +// Generate color 1 +vec3 col1_1 = vec3(0, 0, .2); +vec3 col1_2 = vec3(.2, 0, 0.1); +vec3 col_1 = mix(col1_1, col1_2, sin(sin(uv.x + iTime * color_wave_speed) * color_scale)); + +// Generate color 2 +vec3 col2_1 = vec3(0.,1.,1.); +vec3 col2_2 = vec3(1., 0., 1.); +vec3 col_2 = mix(col2_1, col2_2, sin(uv.y + iTime * color_wave_speed) * color_scale); + +// Generate waves +float d = sin(uv.y + uv.x - wave_height); +//d += abs(float(uv.y / uv.x) / sin(iTime / 35.) / 10.); + +float c = sin((uv.x + iMouse.x * mouse_effect) * 35.) / (sin(((uv.y + iMouse.y * 2. * mouse_effect) * 20.) - iTime) + 3.); +//c = sin(c * 2.); +//float d = c; +##//d = step(.1, d); + +// Intersect waves +//d = clamp(iTime - d, 0., .1); +d = step(c, d); + +// Use color for mask +vec3 col_3 = mix(col_2, col_1, d); + +// Output to screen +fragColor = vec4(col_3,1.); +} +``` + +## What is it? + +TLDR It's a function that is called on the GPU with the input of the pixel coordinates, returning color. +It's run on a GPU as it can accelerate parallel computing ## How to get started +I'll link the resources i used as an introduction to the subject, hence this serves as an OK starting point. + 1. Browse [shadertoys.com](https://www.shadertoy.com/results?query=&sort=popular&filter=), and be inspired. 2. Step 2 realise that it's coded in the forbidden tounge of black magic "enchantment book" moon runes. That some people call... <b style="font-size: 1.2em; color: #f88" class="wavy-text">math</b> *queue ominous thunder effect* @@ -48,6 +102,8 @@ It's also utilized on my landing page in the background [node5.net](https://node So masive shout out to [xemantic](https://xemantic.com/), [go buy them a tea](https://buymeacoffee.com/kazik) +## Minimal file size +  As xemantic also points out, one of the awesome things about shaders instead of e.g. video is the miniscule file size. |