Example updates v2

Author: iwoplaza

apps/typegpu-docs/src/examples/react/shifting-gradient/index.tsx

@@ -1,6 +1,6 @@
 import { d, common, std } from 'typegpu';
 import { useConfigureContext, useFrame, useRoot, useUniformValue } from '@typegpu/react';
-import { hexToRgb, oklabToRgb, hexToOklab, rgbToOklab } from '@typegpu/color';
+import { oklabToRgb, hexToOklab } from '@typegpu/color';
 
 function App() {
   const root = useRoot();
@@ -13,11 +13,11 @@ function App() {
         fragment: ({ uv }) => {
           'use gpu';
           const fromStart = hexToOklab('#ff0000');
-          const fromEnd = rgbToOklab(hexToRgb('#0000ff'));
+          const fromEnd = hexToOklab('#0000ff');
           const from = std.mix(fromStart, fromEnd, std.sin(time.$) * 0.5 + 0.5);
 
-          const toStart = rgbToOklab(hexToRgb('#00ff00'));
-          const toEnd = rgbToOklab(hexToRgb('#ff00ff'));
+          const toStart = hexToOklab('#00ff00');
+          const toEnd = hexToOklab('#ff00ff');
           const to = std.mix(toStart, toEnd, std.cos(time.$ * 1.5) * 0.5 + 0.5);
 
           const mixed = std.mix(from, to, (uv.x * 2 - 1) * 0.5 + std.sin(time.$ + uv.y * 3) * 0.5);

apps/typegpu-docs/src/examples/react/shifting-gradient/thumbnail.png

@@ -1,4 +1,5 @@
-import { d, std } from 'typegpu';
+import tgpu, { d, std } from 'typegpu';
+import { hexToOklab, oklabToRgb } from '@typegpu/color';
 import { useConfigureContext, useFrame, useRoot, useUniformValue } from '@typegpu/react';
 import { useMemo } from 'react';
 
@@ -12,6 +13,20 @@ function rotate(v: d.v2f, angle: number): d.v2f {
   return pos;
 }
 
+const purple = hexToOklab('#c463ff');
+const blue = hexToOklab('#22ffff');
+
+function getGradientColor(ratio: number) {
+  'use gpu';
+  return oklabToRgb(std.mix(purple, blue, ratio));
+}
+
+const positions = tgpu.const(d.arrayOf(d.vec2f, 3), [
+  d.vec2f(0, 1),
+  rotate(d.vec2f(0, 1), (Math.PI * 2) / 3),
+  rotate(d.vec2f(0, 1), (Math.PI * 4) / 3),
+]);
+
 function App() {
   const root = useRoot();
   const time = useUniformValue(d.f32, 0);
@@ -21,13 +36,20 @@ function App() {
       root.createRenderPipeline({
         vertex: ({ $vertexIndex: vid }) => {
           'use gpu';
-          const positions = [d.vec2f(0, 1.1), d.vec2f(-1, -0.7), d.vec2f(1, -0.7)];
-          const rotated = rotate(positions[vid], time.$);
-          return { $position: d.vec4f(rotated * 0.7, 0, 1) };
+          const local = positions.$[vid];
+          const rotated = rotate(local, time.$ * 0.1);
+          return {
+            $position: d.vec4f(rotated * 0.7, 0, 1),
+            dist0: std.length(local - positions.$[0]),
+            dist1: std.length(local - positions.$[1]),
+            dist2: std.length(local - positions.$[2]),
+          };
         },
-        fragment: () => {
+        fragment: ({ dist0, dist1, dist2 }) => {
           'use gpu';
-          return d.vec4f(1, 0, 0, 1);
+          const dist = 1 / (1.4 - std.min(dist0, dist1, dist2));
+          const albedo = getGradientColor(std.fract(dist * 2 - time.$) * 2 - 1 + std.cos(time.$));
+          return d.vec4f(albedo, 1);
         },
       }),
     [root, time],