add to constants

constants.js

@@ -0,0 +1,9 @@
+// constants.js
+
+export const COLORS = [
+    [1, 1, 0, 1],
+    [0, 1, 1, 1],
+    [1, 0, 1, 1],
+    [1, 0, 0, 1],
+    [0, 0.5, 1, 1]
+];

index.html

@@ -13,6 +13,8 @@
         import { mat4 } from 'https://webgpufundamentals.org/3rdparty/wgpu-matrix.module.js';
         import { fetchShaderCode } from './utility.js';
         import { config } from './config.js';
+        import { COLORS } from './constants.js';
+
         function generateGlyphTextureAtlas() {
             const canvas = document.createElement('canvas');
             canvas.width = 512;
@@ -73,7 +75,7 @@
             });
             device.queue.writeBuffer(indexBuffer, 0, new Uint32Array(indices));
 
-            function generateGlyphVerticesForText(s, colors = [[1, 1, 1, 1]]) {
+            function generateGlyphVerticesForText(s, COLORS = [[1, 1, 1, 1]]) {
                 const vertexData = new Float32Array(config.maxGlyphs * config.floatsPerVertex * config.vertsPerGlyph);
                 const glyphUVWidth = config.glyphWidth / glyphCanvas.width;
                 const glyphUVHeight = config.glyphHeight / glyphCanvas.height;
@@ -97,12 +99,12 @@
                         const v0 = v1 + glyphUVHeight;
                         width = Math.max(x1, width);
 
-                        addVertex(x0, y0, u0, v0, colors[colorNdx]);
-                        addVertex(x1, y0, u1, v0, colors[colorNdx]);
-                        addVertex(x0, y1, u0, v1, colors[colorNdx]);
-                        addVertex(x1, y1, u1, v1, colors[colorNdx]);
+                        addVertex(x0, y0, u0, v0, COLORS[colorNdx]);
+                        addVertex(x1, y0, u1, v0, COLORS[colorNdx]);
+                        addVertex(x0, y1, u0, v1, COLORS[colorNdx]);
+                        addVertex(x1, y1, u1, v1, COLORS[colorNdx]);
                     } else {
-                        colorNdx = (colorNdx + 1) % colors.length;
+                        colorNdx = (colorNdx + 1) % COLORS.length;
                         if (c === 10) { // Newline character
                             x0 = 0; x1 = 1; y0--; y1 = y0 + 1;
                             continue;
@@ -113,14 +115,7 @@
                 return { vertexData, numGlyphs: offset / config.floatsPerVertex, width, height: y1 };
             }
 
-            const colors = [
-                [1, 1, 0, 1],
-                [0, 1, 1, 1],
-                [1, 0, 1, 1],
-                [1, 0, 0, 1],
-                [0, .5, 1, 1]
-            ];
-            const { vertexData, numGlyphs, width, height } = generateGlyphVerticesForText('Hello\nworld!\nText in\nWebGPU!', colors);
+            const { vertexData, numGlyphs, width, height } = generateGlyphVerticesForText('Hello\nworld!\nText in\nWebGPU!', COLORS);
             device.queue.writeBuffer(vertexBuffer, 0, vertexData);
 
             const pipeline = device.createRenderPipeline({