fix typo

greggman · Aug 12, 2023 · 3fda691 · 3fda691
1 parent f4ea7b8
commit 3fda691
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/examples/transform-feedback-particles-va.html b/examples/transform-feedback-particles-va.html
@@ -58,6 +58,7 @@
       <div>Sorry but your browser doesn't appear to support WebGL2</div>
     </div>
   </body>
+  <script src="../3rdparty/chroma.min.js"></script>
   <script type="module">
 import * as twgl from '../dist/5.x/twgl-full.module.js';
 
@@ -74,6 +75,7 @@
   vec2 localMult = vec2(
       sin((a_positionIn.x + a_positionIn.y) * 5.127 + u_time),
       cos(atan(a_positionIn.x, a_positionIn.y) * 2.713 + u_time * 0.791)) * 4.0;
+
   a_positionOut = mod((a_positionIn + 3.0) + a_velocity * u_deltaTime * localMult, vec2(2)) - 1.0;
   v_color = a_color;
   gl_PointSize = 4.0;
@@ -93,12 +95,9 @@
   return min + Math.random() * (max - min);
 }
 
+const baseHue = rand(0, 360);
 function randColor32() {
-  const r = rand(  0, 128) | 0;
-  const g = rand(128, 256) | 0;
-  const b = rand( 64, 192) | 0;
-  const a = 255;
-  return [r, g, b, a];
+  return chroma.hsv((baseHue + rand(0, 60)) % 360, rand(0.4, 1), rand(0.25, 1)).gl().map(v => v * 255 | 0);
 }
 
 function main() {
@@ -135,7 +134,7 @@
     a_positionIn: { numComponents: 2, buffer: tfBufferInfo1.attribs.a_positionOut.buffer },
     a_positionOut: { numComponents: 2, buffer: tfBufferInfo1.attribs.a_positionIn.buffer },
     a_velocity: { numComponents: 2, buffer: tfBufferInfo1.attribs.a_velocity.buffer },
-    a_colors: { buffer: tfBufferInfo1.attribs.a_color.buffer },
+    a_color: { type: Uint8Array, buffer: tfBufferInfo1.attribs.a_color.buffer },
   });
 
   const tfVAInfo1 = twgl.createVertexArrayInfo(gl, feedbackProgramInfo, tfBufferInfo1);

diff --git a/examples/transform-feedback-particles.html b/examples/transform-feedback-particles.html
@@ -58,6 +58,7 @@
       <div>Sorry but your browser doesn't appear to support WebGL2</div>
     </div>
   </body>
+  <script src="../3rdparty/chroma.min.js"></script>
   <script type="module">
 import * as twgl from '../dist/5.x/twgl-full.module.js';
 
@@ -107,12 +108,9 @@
   return min + Math.random() * (max - min);
 }
 
+const baseHue = rand(0, 360);
 function randColor32() {
-  const r = rand(  0, 128) | 0;
-  const g = rand(128, 256) | 0;
-  const b = rand( 64, 192) | 0;
-  const a = 255;
-  return [r, g, b, a];
+  return chroma.hsv((baseHue + rand(0, 60)) % 360, rand(0.4, 1), rand(0.25, 1)).gl().map(v => v * 255 | 0);
 }
 
 function main() {
@@ -158,7 +156,7 @@
 
   const drawBufferInfo2 = twgl.createBufferInfoFromArrays(gl, {
     a_position: { numComponents: 2, buffer: tfBufferInfo2.attribs.a_positionOut.buffer },
-    a_colors: { buffer: drawBufferInfo1.attribs.a_color.buffer },
+    a_color: { type: gl.UNSIGNED_BYTE, buffer: drawBufferInfo1.attribs.a_color.buffer },
   });
 
   const feedback1 = twgl.createTransformFeedback(gl, feedbackProgramInfo, tfBufferInfo1);
@@ -168,7 +166,7 @@
     {
       feedback: feedback1,
       tfBufferInfo: tfBufferInfo1,
-      drawBufferInfo: drawBufferInfo1,
+      drawBufferInfo: drawBufferInfo2,
     },
     {
       feedback: feedback2,

diff --git a/resources/js/background.js b/resources/js/background.js
@@ -3,7 +3,7 @@
 (function() {
   twgl.setAttributePrefix("a_");
   const m4 = twgl.m4;
-  const gl = twgl.getWebGLContext(document.getElementById("canvas"), {
+  const gl = document.getElementById("canvas").getContext('webgl', {
     alpha: false,
     premultipliedAlpha: false,
   });