a slow demo of 4 dimensional grid

moon.mod.json

@@ -11,4 +11,4 @@
   "keywords": [],
   "description": "",
   "source": "src"
-}
+}

src/caterfoil.mjs

@@ -7,8 +7,8 @@ console.log("Caterfoil loaded", Caterfoil);
 // load js code which Vite does not detect
 import("../target/js/debug/build/main/main.js")
   .then((module) => {
-    console.log("Main loaded", module);
+    console.log("mbt app loaded", module);
   })
   .catch((error) => {
-    console.error("Main error", error);
+    console.error("mbt app loading error", error);
   });

src/main/container.mbt

@@ -9,11 +9,12 @@ enum Tab {
   QuatProduct
   PrimeWalk
   SphereTessellation
+  CubeGrid
 }
 
 ///|
 fn Tab::default() -> Tab {
-  SphereTessellation
+  CubeGrid
 }
 
 ///|
@@ -28,6 +29,7 @@ fn Tab::from_string(s : String) -> Tab {
     "quat-product" => QuatProduct
     "prime-walk" => PrimeWalk
     "sphere-tess" => SphereTessellation
+    "cubic-grid" => CubeGrid
     _ => {
       println("Unknown tab: " + s)
       Tab::default()
@@ -62,6 +64,7 @@ fn comp_container(
         )
       PrimeWalk => comp_prime_walk!()
       SphereTessellation => comp_sphere_tessellation()
+      CubeGrid => comp_cubic_gird!(width=2)
     },
     if params.show_axis {
       comp_axis!(width=4)

src/main/cubic-grid.mbt

@@ -0,0 +1,61 @@
+///|
+fn comp_cubic_gird(
+  width? : Float
+) -> @caterfoil.CaterfoilRenderObject!@caterfoil.BuilderError {
+
+  // create lines of grid in 4 dimension, 4x4x4x4 cells, thus 5x5x5x5 lines
+  let triangles_list : Array[@caterfoil.PolylineVertex] = []
+  let unit : Float = 10.0
+  let size = 16
+  for ix = 0; ix <= size; ix = ix + 1 {
+    for iy = 0; iy <= size; iy = iy + 1 {
+      for iz = 0; iz <= size; iz = iz + 1 {
+        for iw = 0; iw <= size; iw = iw + 1 {
+          let x = ix.to_float() * unit - unit * size.to_float() * 0.5
+          let y = iy.to_float() * unit - unit * size.to_float() * 0.5
+          let z = iz.to_float() * unit - unit * size.to_float() * 0.5
+          let w = iw.to_float() * unit - unit * size.to_float() * 0.5
+          let p = Quaternion::new(x~, y~, z~, w~)
+          // draw 4 lines of unit length in 4 directions
+          if ix < size {
+            let line : Array[@caterfoil.Vertex] = [
+              { position: p, color: Color::yellow() },
+              { position: p + Quaternion::new(x=unit), color: Color::yellow() },
+            ]
+            triangles_list.push_iter(
+              @caterfoil.create_vertex_data!(line, width=width.or(1)).iter(),
+            )
+          }
+          if iy < size {
+            let line : Array[@caterfoil.Vertex] = [
+              { position: p, color: Color::orange() },
+              { position: p + Quaternion::new(y=unit), color: Color::orange() },
+            ]
+            triangles_list.push_iter(
+              @caterfoil.create_vertex_data!(line, width=width.or(1)).iter(),
+            )
+          }
+          if iz < size {
+            let line : Array[@caterfoil.Vertex] = [
+              { position: p, color: Color::gray() },
+              { position: p + Quaternion::new(z=unit), color: Color::gray() },
+            ]
+            triangles_list.push_iter(
+              @caterfoil.create_vertex_data!(line, width=width.or(1)).iter(),
+            )
+          }
+          if iw < size {
+            let line : Array[@caterfoil.Vertex] = [
+              { position: p, color: Color::blue() },
+              { position: p + Quaternion::new(w=unit), color: Color::blue() },
+            ]
+            triangles_list.push_iter(
+              @caterfoil.create_vertex_data!(line, width=width.or(1)).iter(),
+            )
+          }
+        }
+      }
+    }
+  }
+  @caterfoil.object(label="axis", data=WithTriangles(triangles_list))
+}

src/main/main.mbt

@@ -50,33 +50,29 @@ fn render_app() -> Unit!@caterfoil.BuilderError {
 }
 
 ///|
-fn loaded() -> Unit {
-  let _ret = @caterfoil.initialize_context().then(fn(_ctx) {
-    @caterfoil.initialize_canvas_textures()
-    // atomClearColor.reset({ r: 0.0, g: 0.0, b: 0.0, a: 0.0 });
-    let window = @caterfoil.window()
-    let document = window.document()
-    let canvas = document.query_selector("canvas")
-    render_app?().unwrap()
-    window.set_onresize(fn() {
-      @caterfoil.reset_canvas_size(canvas)
-      @caterfoil.initialize_canvas_textures()
-      @caterfoil.paint_caterfoil_tree()
-    })
+fn create_app() -> Unit {
+  @caterfoil.initialize_canvas_textures()
+  // atomClearColor.reset({ r: 0.0, g: 0.0, b: 0.0, a: 0.0 });
+  let window = @caterfoil.window()
+  let document = window.document()
+  let canvas = document.query_selector("canvas")
+  render_app?().unwrap()
+  window.set_onresize(fn() {
     @caterfoil.reset_canvas_size(canvas)
-
-    // window.__caterfoilHandleCompilationInfo = (e, code) => {
-    //   if (e.messages.length) {
-    //     console.error(e);
-    //   }
-    // };
-    // // setupMouseEvents(canvas);
-
-    @caterfoil.load_gamepad_control()
+    @caterfoil.initialize_canvas_textures()
     @caterfoil.paint_caterfoil_tree()
-    @caterfoil.js_undefined()
   })
+  @caterfoil.reset_canvas_size(canvas)
 
+  // window.__caterfoilHandleCompilationInfo = (e, code) => {
+  //   if (e.messages.length) {
+  //     console.error(e);
+  //   }
+  // };
+  // // setupMouseEvents(canvas);
+
+  @caterfoil.load_gamepad_control()
+  @caterfoil.paint_caterfoil_tree()
 }
 
 ///|
@@ -85,7 +81,11 @@ fn main {
     "caterfoil.mbt",
     read=read_params().read,
   )
-  @caterfoil.window().set_onload(loaded)
+  let _ret = @caterfoil.initialize_context().then(fn(_x) {
+    create_app()
+    @caterfoil.js_undefined()
+  })
+
 }
 
 // declare global {

src/main/shader/triangle.wgsl

@@ -26,7 +26,7 @@ struct Params {
 
 struct PointResult {
   point_position: vec3f,
-  r: f32,
+  distanceRatio: f32,
   s: f32,
 };
 
@@ -82,10 +82,10 @@ fn vertex_main(
   let ret = transform_perspective(position);
   let p = ret.point_position;
   let scale: f32 = 0.002;
-  output.position = vec4(p[0] * scale, p[1] * scale, p[2] * scale, 1.0);
+  output.position = vec4(p.xyz * scale, 1.0);
   // output.position = position;
   output.color = color;
-  if ret.r < -0.2 {
+  if ret.distanceRatio < -0.2 {
     output.color.a = 0.;
   }
   return output;

src/main/sphere-tessellation.mbt

@@ -96,5 +96,9 @@ pub fn comp_sphere_tessellation(
       data.push(v)
     }
   }
-  @caterfoil.object(label="lamp-tree", topology=LineList, data=WithPoints(data))
+  @caterfoil.object(
+    label="sphere-tessellation",
+    topology=LineList,
+    data=WithPoints(data),
+  )
 }