Progress on encapsulating shaders (#60).

music/NYCEMF-2024/cloud-5.js

@@ -598,6 +598,10 @@ customElements.define("cloud5-strudel", Cloud5Strudel);
  * Presents visuals generated by a GLSL shader. These visuals can 
  * show a visualization of the music, or be sampled to generate notes for 
  * Csound to perform.
+ * 
+ * The SWSS glsl function accepts a dictionary of parameters, documented 
+ * here: https://github.com/google/swissgl/blob/main/docs/API.md. The most 
+ * often used of these parameters have setters in this class.
  */
 class Cloud5Shader extends HTMLElement {
   constructor() {
@@ -606,7 +610,7 @@ class Cloud5Shader extends HTMLElement {
      * The user may define a vertex shader in GLSL code for generating 
      * visuals, and assign a string containing the code to this property.
      */
-    this.fragment_shader = null;
+    this.glsl_parameters = {};
     /**
      * This is GLSL code for a default vertex shader; the user may define a 
      * different vertex shader and assign it to this property.
@@ -633,6 +637,18 @@ class Cloud5Shader extends HTMLElement {
      */
     this.audio_visualizer_hook = null;
   }
+  set fragment_shader(code) {
+    this.parameters['FP'] = code;
+  }
+  set vertex_shader(code) {
+    this.parameters['VP'] = code;
+  }
+  set normal(variable){
+    this.parameters[variable] = variable;
+  }
+  set includes(code) {
+    this.parameters['Inc'] = code;
+  }
   /**
     * Called by the browser whenever this element is added to the document.
     */
@@ -649,7 +665,7 @@ class Cloud5Shader extends HTMLElement {
       t /= 1000; // ms to sec
       host.glsl({
         t, // pass uniform 't' to GLSL
-        Mesh: [10, 10],  // draw a 10x10 tessellated plane mesh
+        Mesh: [100, 100],  // draw a 10x10 tessellated plane mesh
         // Vertex shader expression returns vec4 vertex position in
         // WebGL clip space. 'XY' and 'UV' are vec2 input vertex 
         // coordinates in [-1,1] and [0,1] ranges.