1 files changed, 176 insertions, 0 deletions
diff --git a/Shaders/index.md b/Shaders/index.md
new file mode 100644
index 0000000..2ba7e02
--- /dev/null
+++ b/Shaders/index.md
@@ -0,0 +1,176 @@
+---
+description: "My findings while playing around with <i>fragment</i> shaders"
+created: 2025-01-04
+---
+
+<canvas id="my-canvas"></canvas>
+
+<span id="my-canvas-description">**Shader eye candy**</span>
+
+<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.
+
+## How to get started
+
+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*
+3. Watch this video
+   [Introduction to shaders: Learn the basics! by Barney Codes - youtube.com](https://www.youtube.com/watch?v=3mfvZ-mdtZQ)
+   (a few times) To learn the basics.
+4. Realise the ancient magic is is not reserved for only wizards and high elves alike.
+   On the contrary like with most things, you'll find that it's quite surmountable,
+   if you break the subject matter down into bite sized pieces.
+6. On this note i present you with the holy grail of cheat sheets within the subject matter:
+   [A cheat sheet of which functions can be called - http://learnwebgl.brown37.net](http://learnwebgl.brown37.net/12_shader_language/documents/webgl-reference-card-1_0.pdf)
+   (see page 4)
+7. The grind - Put in the legwork playing around with this newfound knowledge.
+   This part is the hardest, and most frustratin, as you put in a lot of work into making the most basic of things.
+   But if you keep it up, you'll eventually make something that looks halfway decent.
+
+After a few days of playing around using the knowledge gained from the video linked above,
+i was able to code [what you see above](#my-canvas). Albeit i have a background as a developer.
+All this is to say, tamper you expectations before getting into the subject matter,
+it takes some time before you make something halfway decent,
+and i still am not able to bring all my ideas to fruition.
+
+You'll often times find that you accidentally create something interesting,
+just by faffing about with mathematical functions.
+
+You can follow my progress: [My shaders](https://node5.net/shader_indexes/my_shaders/)
+
+<style>
+#my-canvas {
+	width: 100%;
+	height: 30em;
+}
+
+@font-face {
+    font-family: 'WavedLine-BL3';
+    src: url('WavedLine-BL3.ttf') format('truetype');
+}
+
+.wavy-text {
+    font-family: 'WavedLine-BL3';
+}
+</style>
+
+
+<!-- region shader code -->
+
+<script src="shader-web-background.min.js"></script>
+<script type="x-shader/x-fragment" id="Image">
+	precision highp float;
+
+	uniform vec2	iResolution;
+	uniform float iTime;
+	uniform vec2  iMouse;
+	uniform sampler2D iChannel0;
+
+	// -- Paste your Shadertoy code here
+
+	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.);
+	}
+
+	// -- End of Shadertoy code
+
+	void main() {
+		mainImage(gl_FragColor, gl_FragCoord.xy);
+	}
+</script>
+
+<script>
+	// mouse coordinates taken from from the mousemove event
+	var mouseX;
+	var mouseY;
+
+	document.addEventListener("mousemove", (event) => {
+		 mouseX = event.clientX;
+		 mouseY = event.clientY;
+	});
+
+	// mouse coordinates relative to the shader, you can also store them on the context
+	var shaderMouseX;
+	var shaderMouseY;
+	shaderWebBackground.shade({
+		canvas: document.getElementById("my-canvas"),
+		onInit: (ctx) => {
+			// screen center
+			mouseX = ctx.cssWidth / 2;
+			mouseY = ctx.cssHeight / 2;
+		},
+
+	onBeforeFrame: (ctx) => {
+		shaderMouseX = ctx.toShaderX(mouseX);
+		shaderMouseY = ctx.toShaderY(mouseY);
+	},
+		shaders: {
+			Image: {
+				uniforms: {
+					iResolution: (gl, loc, ctx) => gl.uniform2f(loc, ctx.width, ctx.height),
+					iTime:       (gl, loc) => gl.uniform1f(loc, performance.now() / 1000),
+					iChannel0:   (gl, loc, ctx) => ctx.texture(loc, ctx.buffers.BufferA),
+					iMouse:      (gl, loc) => gl.uniform2f(loc, shaderMouseX, shaderMouseY)
+				}
+			}
+		}
+	});
+</script>
+
+<!-- endregion shader code -->
+
+<!-- region lines -->
+
+<script src="leader-line.min.js"></script>
+<script defer>
+// Add new leader line from `start` to `end` (HTML/SVG element, basically).
+new LeaderLine(
+	document.getElementById('my-canvas-description'),
+	document.getElementById('my-canvas'),
+	{ dash: {animation: true}, color: 'white', startSocket: 'right', endSocket: 'bottom'}
+);
+</script>
+
+<!-- endregion lines -->
+