From a3e87e084f2ce283f49e0cd5c6bb596a78562e8a Mon Sep 17 00:00:00 2001
From: Justin Young <justin_dean_young@yahoo.com>
Date: Fri, 11 Sep 2026 17:41:16 -0400
Subject: [PATCH] updated examples

---
 .../04-Materials Primer/code/try-it0.ts        |  8 ++++----
 .../04-Materials Primer/code/try-it2.ts        | 18 ++++++++++--------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/site/docs/00-tutorials/How-to's/04-Materials Primer/code/try-it0.ts b/site/docs/00-tutorials/How-to's/04-Materials Primer/code/try-it0.ts
index 302fa1a6..5454b058 100644
--- a/site/docs/00-tutorials/How-to's/04-Materials Primer/code/try-it0.ts	
+++ b/site/docs/00-tutorials/How-to's/04-Materials Primer/code/try-it0.ts	
@@ -4,17 +4,17 @@ const game = new ex.Engine({ canvasElementId: 'game', width: 400, height: 400 })
 
 const colorTintMaterial = game.graphicsContext.createMaterial({
   name: 'color-tint',
-  fragmentSource: ex.glsl`
+fragmentSource: glsl`
     uniform sampler2D u_graphic;
     in vec2 v_uv;
     out vec4 fragColor;
 
     void main() {
       vec4 tex = texture(u_graphic, v_uv);
-      // Tint sprite green based on horizontal position (v_uv.x)
-      fragColor = mix(tex.rgb, vec3(0.0, 1.0, 0.4), v_uv.x);
+      vec3 mixed = mix(tex.rgb, vec3(0.0, 1.0, 0.4), v_uv.x );
+      fragColor = vec4(mixed, 1.0);
     }
-  `
+  `,
 });
 
 const actor = new ex.Actor({ pos: game.screen.center, width: 100, height: 100 });
diff --git a/site/docs/00-tutorials/How-to's/04-Materials Primer/code/try-it2.ts b/site/docs/00-tutorials/How-to's/04-Materials Primer/code/try-it2.ts
index 469c63f4..307661a0 100644
--- a/site/docs/00-tutorials/How-to's/04-Materials Primer/code/try-it2.ts	
+++ b/site/docs/00-tutorials/How-to's/04-Materials Primer/code/try-it2.ts	
@@ -6,9 +6,9 @@ const game = new ex.Engine({ canvasElementId: 'game', width: 400, height: 400 })
 const chromaticPass = new ex.ShaderPass({
   graphicsContext: game.graphicsContext as ex.ExcaliburGraphicsContextWebGL,
   uniforms: {
-    u_shift: 0.005
+    u_shift: 0.05,
   },
-  fragmentSource: ex.glsl`
+  fragmentSource: glsl`
     uniform sampler2D u_graphic;
     uniform float u_shift;
     in vec2 v_uv;
@@ -22,25 +22,25 @@ const chromaticPass = new ex.ShaderPass({
       float a = texture(u_graphic, v_uv).a;
       fragColor = vec4(r, g, b, a);
     }
-  `
+  `,
 });
 
 // 2. Create material holding the pass
 const aberrationMaterial = new ex.Material({
-  name: 'chromatic-material',
+  name: "chromatic-material",
   graphicsContext: game.graphicsContext as ex.ExcaliburGraphicsContextWebGL,
   passes: [chromaticPass],
-  padding: 10
+  padding: 10,
 });
 
 // 3. Attach material to an Actor
 const actor = new ex.Actor({
   pos: game.screen.center,
   width: 100,
-  height: 100
+  height: 100,
 });
 
-actor.graphics.use(new ex.Rectangle({ width: 100, height: 100, color: ex.Color.Yellow }));
+actor.graphics.use(new ex.Rectangle({ width: 100, height: 100, color: ex.Color.Magenta }));
 actor.graphics.material = aberrationMaterial;
 
 // 4. Update shaderPass.uniforms dynamically on frame updates
@@ -48,7 +48,9 @@ let elapsed = 0;
 actor.onPreUpdate = (engine, delta) => {
   elapsed += delta / 1000;
   // Oscillate shift offset via direct uniform property access
-  chromaticPass.uniforms.u_shift = 0.015 * Math.sin(elapsed * 6.0);
+  console.log(chromaticPass.uniforms);
+
+  chromaticPass.uniforms.u_shift = 0.15 * Math.sin(elapsed * 6.0);
 };
 
 game.add(actor);
-- 
2.51.2