docs(examples): update comments

thi-ng · Oct 25, 2023 · 6176290 · 6176290
1 parent fc6e140
commit 6176290
Showing 1 changed file with 20 additions and 18 deletions.
diff --git a/examples/shader-ast-easings/src/index.ts b/examples/shader-ast-easings/src/index.ts
@@ -75,21 +75,22 @@ interface DemoUniforms extends ShaderToyUniforms {
 	dotColor: Vec4Sym;
 }
 
-// main shader function. the 2 args given are objects containing GLSL builtin
-// vars and uniform bindings
+// main shader function. the two args given are objects containing GLSL builtin
+// vars and uniform bindings. IMPORTANT: all the terms & function calls used
+// here are each only producing AST nodes, and the resulting syntax tree will
+// later be compiled to GLSL. this approach opens up powerful meta-programming
+// possibilities (using the full expressiveness of TypeScript) and indeed most
+// of that main function body will be dynamically generated by transforming the
+// above list of selected easing functions and pairing each with a small
+// dedicated viewport rect to visualize those curves...
 const main: MainImageFn<DemoUniforms> = (gl, unis) => {
 	// predeclare local vars / symbols
 	let uv: Vec2Sym, t: FloatSym;
-	// return the actual function body. IMPORTANT: all the terms & function
-	// calls used here are each only producing AST nodes, and the resulting
-	// syntax tree will later be compiled to GLSL. this approach opens up
-	// powerful meta-programming possibilities (using the full possibilities of
-	// TypeScript) and indeed most of that main function body will be
-	// dynamically generated by transforming the above list of selected easing
-	// functions and pairing each with a small dedicated viewport to visualize
-	// those curves...
+	// the actual function body:
 	return [
 		// compute UV coordinate for current fragment (aka [0..1] range)
+		// sym() is used to define a new symbol (variable) with the given inner expression as value
+		// $xy() is a vector swizzle (e.g. in GLSL: gl_FragCoord.xy)
 		(uv = sym(div($xy(gl.gl_FragCoord), unis.resolution))),
 		// loop & slow down animation
 		(t = sym(fract(mul(0.5, unis.time)))),
@@ -106,12 +107,12 @@ const main: MainImageFn<DemoUniforms> = (gl, unis) => {
 						vec2(pos[0], pos[1]),
 						vec2(1 / COLS, 1 / ROWS)
 					),
+
 					// the truthy branch of the conditional... if current
 					// fragment is within the defined region, call the
 					// visualization function and return its result.
-
-					// meta programming alert: we first generate and then
-					// immediately invoke the shader function to visualize the
+					// META-PROGRAMMING ALERT: we first generate and then
+					// immediately invoke the new shader function to visualize the
 					// current easing function within the given region/rect.
 					// this will result in just a function-call AST node with a
 					// reference to the actual generated function being stored
@@ -155,7 +156,7 @@ const main: MainImageFn<DemoUniforms> = (gl, unis) => {
 const easingVisualization = (
 	// the (shader) function to visualize
 	easingFn: TaggedFn1<"float", "float">,
-	// position & size of the view rect
+	// position & size of the view rect (UV coordinates)
 	[minx, miny]: number[],
 	[w, h]: number[],
 	// shader uniforms
@@ -171,12 +172,12 @@ const easingVisualization = (
 			// pre-compute min/max bounds
 			const bmin = vec2(minx + w * MARGIN, miny + h * MARGIN);
 			const bmax = vec2(minx + w * (1 - MARGIN), miny + h * (1 - MARGIN));
-			// pre-configure the actual plotting function
+			// pre-configure the plotting function
 			const sampler = std.functionSampler(
 				easingFn,
 				std.functionDomainMapper(bmin, bmax)
 			);
-			// the actual function body
+			// now the actual function body
 			return [
 				// compute the current (time based) curve position (in given screen space)
 				(q = sym(madd(vec2(t, easingFn(t)), sub(bmax, bmin), bmin))),
@@ -190,7 +191,7 @@ const easingVisualization = (
 						sampler(frag, unis.resolution)
 					)
 				)),
-				// chppse color for whichever shape is closest
+				// choose color for whichever shape is closest
 				(col = sym(
 					ternary(
 						lte(d, d2),
@@ -208,6 +209,7 @@ const easingVisualization = (
 				ret(
 					mix(
 						col,
+						// choose bg color based on mouse position
 						mix(
 							unis.bgColor,
 							unis.bgHoverColor,
@@ -257,5 +259,5 @@ const toy = shaderToy({
 	opts: { logger: new ConsoleLogger("shader"), prec: 4 },
 });
 
-// kick off
+// kick off animation
 toy.start();