basic mechanics

2025-03-04 05:04:38 -05:00 · 2025-03-04 05:04:38 -05:00 · 2c842d5b0f
commit 2c842d5b0f
4 changed files with 216 additions and 0 deletions
--- a/docs/index.html
+++ b/docs/index.html
@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <title>WebGL Demo</title>
+    <script id="vertex-shader-2d" type="notjs">
+
+        // an attribute will receive data from a buffer
+        attribute vec4 a_position;
+        varying vec4 b_position;
+        uniform mat4 mat_thing;
+      
+        // all shaders have a main function
+        void main() {
+      
+          // gl_Position is a special variable a vertex shader
+          // is responsible for setting
+          gl_Position = a_position * mat_thing;
+          b_position = a_position;
+        }
+      
+      </script>
+    <script id="fragment-shader-2d" type="notjs">
+
+        // fragment shaders don't have a default precision so we need
+        // to pick one. mediump is a good default
+        precision mediump float;
+        varying vec4 b_position;
+        uniform float size_thing;
+        uniform float dist_thing;
+
+        void main() {
+          // gl_FragColor is a special variable a fragment shader
+          // is responsible for setting
+          float dist = (log(distance(b_position.xy,vec2(0.0))) - size_thing) / log(2.0) * 0.1;
+          gl_FragColor = vec4((mod(dist,0.1) - 0.1 + 0.1 * dist_thing) * 50.0 * vec3(1,1,1),1); // return redish-purple
+        }
+      
+      </script>
+    <script src="/js/twgl.min.js" type="module"></script>
+    <script src="/js/index.js" type="module"></script>
+    <link rel="stylesheet" href="main.css">
+</head>
+
+<body>
+    <canvas id="c" width="640" height="480"></canvas>
+    <div class='hud'>
+        hud
+    </div>
+</body>
+
+</html>