batching

diorama.js

@@ -11,7 +11,7 @@ export class Diorama {
 
         this.target = [0.5, 0, 0.5];
         this.radius = 4;
-        this.theta = 135;
+        this.theta = 45;
         this.phi = 30;
 
         this.projMatrix = new Float32Array(16);

index.html

@@ -32,18 +32,21 @@
 <main>
     <h1>Visualizer</h1>
 
-    <h2>Static</h2>
-
-    <div class="figure" id="demo-1"></div>
-
     <h2>Dynamic</h2>
+
+    <div class="figure" id="demo-pulses"></div>
+
+    <div class="figure" id="demo-time"></div>
+
+    <div class="figure" id="demo-state"></div>
+
+    <h2>Static Sub-Figures</h2>
     <div style="display: grid; grid-template-columns: 1fr 1fr;">
         <div class="figure" id="demo-2"></div>
         <div class="figure" id="demo-3"></div>
     </div>
 
-    <div id="atlas-container"
+    <div id="atlas-container" style="position: absolute; right: 0; top: 0"></div>
-         style="position: fixed; left: 0; top: 0; border: 1px solid white;"></div>
 </main>
 
 <script type="module">
@@ -64,10 +67,46 @@
                 p 0 -2 0 piston facing=north extended=false
             `)
 
-            const world2 = new World(`
+            const pulses = `
+                p 0 0 0 observer facing=north powered=false
+                p 0 0 1 piston facing=south extended=false
+
+                p 0 -1 1 observer facing=up powered=false
+                p 0 -1 2 observer facing=up powered=false
+
+                t 2
+                p 0 0 0 powered=true
+                p 0 0 1 extended=true
+
+                t 3
+                p 0 0 1.5 piston_head facing=south short=true type=normal
+
+                t 4
+                p 0 0 0 powered=false
+
+                p 0 -1 1 powered=true
+
+                p 0 -1 2 powered=true
+
+                t 6
+                p 0 -1 1 powered=false
+                p 0 -1 2 powered=false
+            `;
+
+            const world_pulses = new World(pulses);
+
+            const demo_pulses = new Diorama('demo-pulses', world_pulses, () => engine.requestRender())
+            demo_pulses.radius = 4;
+            demo_pulses.centerView()
+            demo_pulses.saveState()
+            engine.addDiorama(demo_pulses);
+
+            const piston = `
                 p 0 0 0 redstone_wire power=0 east=side west=none north=none south=none
                 p 1 0 0 repeater facing=west powered=false locked=false delay=2
                 p 2 0 0 piston facing=east extended=false
+                p 3 0 0 slime_block
+                p 4 0 0 slime_block
 
                 t 2
                 p 0 0 0 power=15
@@ -77,11 +116,20 @@
 
                 t 7
                 p 2 0 0 extended=true
+
+                p 4.0 0 0 air &
+                p 4.5 0 0 slime_block
+                p 3.0 0 0 air &
+                p 3.5 0 0 slime_block
                 p 2.5 0 0 piston_head facing=east short=true type=normal
 
                 t 8
-                p 2.5 0 0 air
+                p 4.5 0 0 air &
-                p 3 0 0 piston_head facing=east short=false type=normal
+                p 5.0 0 0 slime_block
+                p 3.5 0 0 air &
+                p 4.0 0 0 slime_block
+                p 2.5 0 0 air &
+                p 3.0 0 0 piston_head facing=east short=false type=normal
 
                 t 12
                 p 0 0 0 power=0
@@ -90,23 +138,38 @@
                 p 1 0 0 powered=false
 
                 t 17
-                p 3 0 0 air
+                p 3 0 0 air &
                 p 2.5 0 0 piston_head facing=east short=true type=normal
+                p 4.0 0 0 air &
+                p 3.5 0 0 slime_block
+                p 5.0 0 0 air &
+                p 4.5 0 0 slime_block
 
                 t 18
                 p 2.5 0 0 air
+                p 3.5 0 0 air &
+                p 3.0 0 0 slime_block
+                p 4.5 0 0 air &
+                p 4.0 0 0 slime_block
                 p 2 0 0 extended=false
-            `);
+            `;
 
-            const demo1 = new Diorama('demo-1', world1, () => engine.requestRender())
+            const piston_time = new World(piston);
-            demo1.radius = 3;
+            const piston_state = new World(piston);
-            demo1.phi = 10;
-            demo1.theta = -5;
-            demo1.target = [0.5, 0, 0.5]
-            demo1.saveState()
-            engine.addDiorama(demo1);
 
-            const demo2 = new Diorama('demo-2', world2, () => engine.requestRender())
+            const demo_time = new Diorama('demo-time', piston_time, () => engine.requestRender())
+            demo_time.radius = 4;
+            demo_time.centerView()
+            demo_time.saveState()
+            engine.addDiorama(demo_time);
+
+            const demo_state = new Diorama('demo-state', piston_state, () => engine.requestRender())
+            demo_state.radius = 4;
+            demo_state.centerView()
+            demo_state.saveState()
+            engine.addDiorama(demo_state);
+
+            const demo2 = new Diorama('demo-2', world1, () => engine.requestRender())
             demo2.radius = 5;
             demo2.theta = 180;
             demo2.phi = 90;
@@ -114,7 +177,7 @@
             demo2.saveState()
             engine.addDiorama(demo2);
 
-            const demo3 = new Diorama('demo-3', world2, () => engine.requestRender())
+            const demo3 = new Diorama('demo-3', world1, () => engine.requestRender())
             demo3.radius = 5;
             demo3.centerView()
             demo3.saveState()
@@ -123,20 +186,40 @@
             // Fetch and build everything concurrently!
             await engine.updateAll();
 
-            const factor = 1;
+            const factor = 2.5;
-            setInterval(() => {
+            const update_time = () => {
                 for (let i = 0; i < 20; i++) {
-                    setTimeout(() => world2.seek(i), i * factor * 50)
+                    setTimeout(() => piston_time.seek(i), i * factor * 50)
                 }
-            }, factor * 1000)
+            };
+            setInterval(update_time, factor * 1000)
+            update_time();
 
-            // let i = 0;
+            let i = 0;
-            // let n = world2.eventCount;
+            let n = piston_state.eventCount;
-            // setInterval(() => {
+            const update_state = () => {
-            //     world2.seekIndex(i);
+                piston_state.seekIndex(i);
-            //     i = (i + 1) % n;
+                i = (i + 1) % n;
-            // }, 500);
+            };
+            setInterval(update_state, 250);
+            update_state()
 
+            const update_pulses = () => {
+                for (let i = 0; i < 10; i++) {
+                    setTimeout(() => world_pulses.seek(i), i * factor * 50)
+                }
+            };
+            setInterval(update_pulses, factor * 500)
+            update_pulses();
+
+            // let j = 0;
+            // let m = world_pulses.eventCount;
+            // const update_pulses = () => {
+            //     world_pulses.seekIndex(j);
+            //     j = (j + 1) % m;
+            // };
+            // setInterval(update_pulses, 250);
+            // update_state()
 
         } catch (err) {
             console.error("Renderer Initialization Failed:", err);

world.js

@@ -55,9 +55,35 @@ export class World {
         return this.blocks.get(`${x},${y},${z}`);
     }
 
+    #apply(data, x, y, z) {
+        const key = `${x},${y},${z}`;
+        if (data) {
+            this.blocks.set(key, new Block(data.id, [x, y, z], {...data.state}));
+        } else {
+            this.blocks.delete(key);
+        }
+    }
+
+    reset() {
+        this.blocks.clear();
+
+        for (const [key, block] of this.initialState.entries()) {
+            this.blocks.set(key, new Block(block.id, [...block.pos], {...block.state}));
+        }
+
+        this.currentIndex = this.initialIndex;
+
+        if (this.initialIndex > 0 && this.events.length > 0) {
+            this.currentTime = this.events[this.initialIndex - 1].time;
+        } else {
+            this.currentTime = -Infinity;
+        }
+
+        this.notify();
+    }
+
     #compile(script) {
         let currentTime = -1;
-        let subTick = 0;
         let capturedInitialState = false;
 
         const shadowWorld = new Map();
@@ -73,18 +99,32 @@ export class World {
 
         const lines = script.split('\n').map(l => l.trim()).filter(l => l && !l.startsWith('#'));
 
-        for (const line of lines) {
+        let currentBatch = [];
+
+        for (let line of lines) {
+            let mergeNext = false;
+
+            // Check for the continuation operator
+            if (line.endsWith('&')) {
+                mergeNext = true;
+                line = line.slice(0, -1).trim();
+            }
+
             const tokens = line.split(/\s+/);
             const cmd = tokens[0];
 
             if (cmd === 't') {
                 const newTime = parseFloat(tokens[1]);
 
-                // If we are crossing the tick 0 threshold, lock in the initial state
                 if (newTime >= 0 && !capturedInitialState) captureInitial();
 
+                // Force flush any pending batch if time suddenly changes
+                if (currentBatch.length > 0) {
+                    this.events.push({time: currentTime, actions: currentBatch});
+                    currentBatch = [];
+                }
+
                 currentTime = newTime;
-                subTick = 0;
                 continue;
             }
 
@@ -131,17 +171,20 @@ export class World {
                 const nextBlock = shadowWorld.get(key);
                 const next = nextBlock ? {id: nextBlock.id, state: {...nextBlock.state}} : null;
 
-                this.events.push({
+                currentBatch.push({x, y, z, prev, next});
-                    time: currentTime,
+
-                    subTick: subTick++,
+                // Commit the batch to the timeline if it's not waiting for a continuation
-                    x, y, z,
+                if (!mergeNext) {
-                    prev,
+                    this.events.push({time: currentTime, actions: currentBatch});
-                    next
+                    currentBatch = [];
-                });
+                }
             }
         }
 
-        // Fallback catch if the script ends entirely before tick 0
+        if (currentBatch.length > 0) {
+            this.events.push({time: currentTime, actions: currentBatch});
+        }
+
         if (!capturedInitialState) captureInitial();
 
         this.eventCount = this.events.length - this.initialIndex;
@@ -149,15 +192,6 @@ export class World {
         this.reset();
     }
 
-    #apply(data, x, y, z) {
-        const key = `${x},${y},${z}`;
-        if (data) {
-            this.blocks.set(key, new Block(data.id, [x, y, z], {...data.state}));
-        } else {
-            this.blocks.delete(key);
-        }
-    }
-
     seek(target) {
         let targetTime = target;
 
@@ -166,37 +200,45 @@ export class World {
             if (targetTime === undefined) throw new Error(`Label not found: ${target}`);
         }
 
-        // Scrub Forward
         while (this.currentIndex < this.events.length && this.events[this.currentIndex].time <= targetTime) {
-            const ev = this.events[this.currentIndex];
+            const batch = this.events[this.currentIndex];
-            this.#apply(ev.next, ev.x, ev.y, ev.z);
+            for (const action of batch.actions) {
+                this.#apply(action.next, action.x, action.y, action.z);
+            }
             this.currentIndex++;
         }
 
-        // Scrub Backward
         while (this.currentIndex > 0 && this.events[this.currentIndex - 1].time > targetTime) {
             this.currentIndex--;
-            const ev = this.events[this.currentIndex];
+            const batch = this.events[this.currentIndex];
-            this.#apply(ev.prev, ev.x, ev.y, ev.z);
+            for (let i = batch.actions.length - 1; i >= 0; i--) {
+                const action = batch.actions[i];
+                this.#apply(action.prev, action.x, action.y, action.z);
+            }
         }
 
         this.currentTime = targetTime;
-        this.notify(); // Dispatch a single batched update to the Engine
+        this.notify();
     }
 
     seekIndex(targetIndex) {
         targetIndex = targetIndex + this.initialIndex;
 
         while (this.currentIndex < this.events.length && this.currentIndex < targetIndex) {
-            const ev = this.events[this.currentIndex];
+            const batch = this.events[this.currentIndex];
-            this.#apply(ev.next, ev.x, ev.y, ev.z);
+            for (const action of batch.actions) {
+                this.#apply(action.next, action.x, action.y, action.z);
+            }
             this.currentIndex++;
         }
 
         while (this.currentIndex > 0 && this.currentIndex > targetIndex) {
             this.currentIndex--;
-            const ev = this.events[this.currentIndex];
+            const batch = this.events[this.currentIndex];
-            this.#apply(ev.prev, ev.x, ev.y, ev.z);
+            for (let i = batch.actions.length - 1; i >= 0; i--) {
+                const action = batch.actions[i];
+                this.#apply(action.prev, action.x, action.y, action.z);
+            }
         }
 
         if (this.currentIndex < this.events.length) {
@@ -207,22 +249,4 @@ export class World {
 
         this.notify();
     }
-
-    reset() {
-        this.blocks.clear();
-
-        for (const [key, block] of this.initialState.entries()) {
-            this.blocks.set(key, new Block(block.id, [...block.pos], {...block.state}));
-        }
-
-        this.currentIndex = this.initialIndex;
-
-        if (this.initialIndex > 0 && this.events.length > 0) {
-            this.currentTime = this.events[this.initialIndex - 1].time;
-        } else {
-            this.currentTime = -Infinity;
-        }
-
-        this.notify();
-    }
 }