---
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 to you a cheat sheets that lists the functions available to you:
   [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.
On that not you can [view my shaders here](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 -->