look ma, theres 3D now

2025-09-25 20:47:58 +00:00
parent 7c6047462f
commit 73e2b5a762
11 changed files with 78778 additions and 61 deletions
@@ -0,0 +1,93 @@
+//0. Add you dependencies in your controller.json :
+// { ...
+//     "controllerDependencies":  [
+//         ...
+//         "/thirdparty/Snaptobus/snap.svg-min",
+//         "/thirdparty/Snaptobus/snaptobus"
+//     ]
+// }
+// 1. Create your sprites :
+agentTypes = {
+    molecule1:{
+        type: 'circle',
+        attrs: {
+            r: 10,
+            fill: '#BFB',
+            stroke:  "#0A0",
+            strokeWidth: 2,
+        }
+    },
+    molecule2:{
+        type: 'circle',
+        attrs: {
+            r: 10,
+            fill: '#BBF',
+            stroke:  "#00A",
+            strokeWidth: 2,
+        }
+    }
+    
+}
+
+// 2. instantiate Snaptobus with the SVG playground selector, the sprites definitions,
+// and the configuration mapping bus chans, bus event, and events playloads to SNap attributes
+// You can assign a path in the event payload, or a transformer function like :
+//     fill: {
+//         arguments: [ 'age' ], // What to give from the event as function's params
+//         transformer: i => `rgb(${Math.round(255 * i / 10)},0,${Math.round(255 * (1 - i / 10))})`
+//     },
+//
+
+this.snaptobus = new Snaptobus({ 
+    snap: Snap("svg.stb"),
+    spriteDefs: this.agentTypes,
+    busConfig: [
+        {   
+            chan: 'gps:agents', // What to subscribe to
+            events: [  // What to select on this chan
+                {   eventName: 'moving', // which event will trigger a change
+                    snaps: [
+                        {
+                            selector: '#${aid}', // what svg elements do we change ?
+                            assign: { // what do we change and with what from the payload ?
+                                cx: 'attrs.x',  
+                                cy: 'attrs.y',
+                            },
+                            animate: true 
+                        }
+                    ]
+                },
+            ]
+        },
+    ]
+})
+
+
+//3. Create your sprites
+this.createAgent('molecule2', 'agent42', 100,100)
+createAgent(agentType, id,  x, y){
+    if(!Object.keys(this.agentTypes).includes(agentType)) return
+    this.agentTypes[agentType]
+    const svgAgent = this.snaptobus.snap[this.agentTypes[agentType].type]().attr(this.agentTypes[agentType].attrs)
+    svgAgent.attr({
+        id: id,
+        cx: x,
+        cy:y,
+    })
+}
+
+//4. Send a bus event like : (this is a bmsg)
+// {
+//     "channel":"gps:agents",
+//     "packet":{
+//         "eventType": "moving",
+//         "payload": {
+//             "aid": "agent42",
+//             "attrs": {
+//                 "x": "950",
+//                 "y": "650"
+//             }
+//         },
+//         "sender": "toto"
+//     }
+// }