IT'S ALIVE

www/js/smc/progbuilder.js

@@ -23,17 +23,24 @@ class SmcProgramBuilder {
     precision mediump float;
 
     // uniform float uTime;
-    // uniform vec2 uResolution;
+    uniform vec2 uResolution;
 
     void main() {
-      // vec2 uv = gl_FragCoord.xy / uResolution;
+      vec2 uv = gl_FragCoord.xy / uResolution.xy;
       // vec3 col = 0.5 + 0.5 * cos(uTime + uv.xyx + vec3(0, 2, 4));
       // gl_FragColor = vec4(col, 1.0);
       // gl_FragColor = vec4(216., 43., 72., 255.) / 255.;
 
 
-      float maxfc = max(gl_FragCoord.x, gl_FragCoord.y);
+      // float maxfc = max(gl_FragCoord.x, gl_FragCoord.y);
-      gl_FragColor = vec4(gl_FragCoord.xy, maxfc, maxfc) / maxfc;
+      // gl_FragColor = vec4(gl_FragCoord.xy, maxfc, maxfc) / maxfc;
+
+      float maxuv = max(uv.x, uv.y);
+      gl_FragColor = vec4(216. * maxuv, 43., 72., 255.) / 255.;
+
+      
+      // vec3 col = 0.5 + 0.5*cos(uv.xyx+vec3(0,2,4));
+      // gl_FragColor = vec4(col, 1.);
     }
   `;
 

www/js/smc/smc.js

@@ -46,6 +46,9 @@ class Smc {
     this.raiseError = this.raiseError.bind(this);
     this.render = this.render.bind(this);
     this.renderLoop = this.renderLoop.bind(this);
+    // DEBUG: is this necessary
+    this.setAttribute = this.setAttribute.bind(this);
+    this.setUniform = this.setUniform.bind(this);
 
     this.#canvas = canvas;
     this.#gl = Smc.#getWebGlContext(canvas);
@@ -137,17 +140,16 @@ class Smc {
 
     this.#addAttribute("aVertex", this.#setVerticesAttribute.bind(this));
     // DEBUG: uncomment afterwards
-    // this.#addUniform("uResolution", UniformType.Float2);
+    this.#addUniform("uResolution", UniformType.Float2, false, (_) => new Float32Array([this.#gl.canvas.width, this.#gl.canvas.height]));
-    // this.#addUniform("uTime", UniformType.Float1);
+    this.#addUniform("uTime", UniformType.Float1);
-    // this.#addUniform("uDelta", UniformType.Float1);
+    this.#addUniform("uDelta", UniformType.Float1);
     return this;
   }
 
   run() {
     this.#initDelegate()
     this.setAttribute("aVertex", this.#vertices);
-    // DEBUG: uncomment afterwards
+    this.setUniform("uResolution", this.#gl.canvas.width, this.#gl.canvas.height);
-    // this.setUniform("uResolution", new Float32Array([this.#gl.canvas.width, this.#gl.canvas.height]));
 
     if (this.#maxFps == 0)
       requestAnimationFrame(this.render)
@@ -170,29 +172,10 @@ class Smc {
   }
 
   render(time, delta) {
-    // DEBUG: uncomment afterwards
+    this.setUniform("uTime", time * 0.001);
-    // this.setUniform("uTime", time * 0.001);
+    this.setUniform("uDelta", delta);
-    // this.setUniform("uDelta", delta);
-
-    // DEBUG: START (remove if not necessary)
-    this.#gl.viewport(0, 0, this.#gl.canvas.width, this.#gl.canvas.height);
     this.#gl.clear(this.#gl.COLOR_BUFFER_BIT | this.#gl.DEPTH_BUFFER_BIT);
-
-    this.setAttribute("aVertex", this.#vertices);
-
-    this.#gl.useProgram(this.#program);
-
-    // DEBUG: uncomment afterwards
-    // this.setUniform("uTime", time * 0.001);
-    // this.setUniform("uDelta", delta);
-    // this.setUniform("uResolution", new Float32Array([this.#gl.canvas.width, this.#gl.canvas.height]));
-
     this.#gl.drawArrays(this.#gl.TRIANGLE_STRIP, 0, this.#vertices.length / 2);
-    // DEBUG: END   (remove if not necessary)
-
-    // DEBUG: uncomment afterwards
-    // this.#gl.clear(this.#clearBitFlags);
-    // this.#gl.drawArrays(this.#gl.TRIANGLE_STRIP, 0, this.#vertices.length);
   }
 
   #addAttribute(name, setDelegate, required = false) {
@@ -228,37 +211,35 @@ class Smc {
     }
 
     if (type == UniformType.Float1)
-      var uniformfv = this.#gl.uniform1f;
+      var uniformfv = (...values) => this.#gl.uniform1f(location, ...values);
     else if (type == UniformType.Float2)
-      var uniformfv = this.#gl.uniform2fv;
+      var uniformfv = (...values) => this.#gl.uniform2f(location, ...values);
     else if (type == UniformType.Float3)
-      var uniformfv = this.#gl.uniform3fv;
+      var uniformfv = (...values) => this.#gl.uniform3f(location, ...values);
     else if (type == UniformType.Float4)
-      var uniformfv = this.#gl.uniform4fv;
+      var uniformfv = (...values) => this.#gl.uniform4f(location, ...values);
     else if (type == UniformType.Int1)
-      var uniformfv = this.#gl.uniform1i;
+      var uniformfv = (...values) => this.#gl.uniform1i(location, ...values);
     else if (type == UniformType.Int2)
-      var uniformfv = this.#gl.uniform2iv;
+      var uniformfv = (...values) => this.#gl.uniform2i(location, ...values);
     else if (type == UniformType.Int3)
-      var uniformfv = this.#gl.uniform3iv;
+      var uniformfv = (...values) => this.#gl.uniform3i(location, ...values);
     else if (type == UniformType.Int4)
-      var uniformfv = this.#gl.uniform4iv;
+      var uniformfv = (...values) => this.#gl.uniform4i(location, ...values);
     else {
       // this.raiseError isn't needed because this should
       // be treated as a "compilation" error not a "runtime" error
       throw new Error(`Expected type from enum UniformType, but got "${type}"`);
     }
 
-    const setDelegate = value => uniformfv(location, value);
-
     // simplify function call to a single argument
     this.#uniforms.set(
       name,
       {
-        setDelegate: setDelegate,
+        setDelegate: uniformfv,
         location: location,
         setEachFrame: setEachFrame,
-        setCallback,
+        setCallback: setCallback,
       }
     );
   }
@@ -271,14 +252,15 @@ class Smc {
     return this.#uniforms.get(name).location;
   }
 
-  setAttribute(name, value) {
+  setAttribute(name, ...args) {
     if (this.#getAttributeLocation(name) != null)
-      this.#attributes.get(name).setDelegate(value);
+      this.#attributes.get(name).setDelegate(...args);
   }
 
-  setUniform(name, value) {
+  setUniform(name, ...args) {
-    if (this.#getUniformLocation(name) != null)
+    if (this.#getUniformLocation(name) != null) {
-      this.#uniforms.get(name).setDelegate(value);
+      this.#uniforms.get(name).setDelegate(...args);
+    }
   }
 
   #setVerticesAttribute(vertices) {