Shader - Add code snippet + title + TLDR

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
+
 ![node5 landing page grid tunnel shader background](node5_landing_page_grid_tunnel.gif)
 
 As xemantic also points out, one of the awesome things about shaders instead of e.g. video is the miniscule file size.