Hello! So after much obsession with Propagator Networks as discussed on this slack here, i decided to make a little propagator network simulator on top of tldraw. In short: Propagator networks enabling bi-directional computation via independently operating nodes- in the gif you can see one for converting temperatures. Propagators (squares) listen to changing inputs, run code, and update connected outputs. You can make your own here. - Put your variables in circles - Put your JS in squares (you can write a return or not) - Draw arrows from circles to squares with text that matches the variables - Draw arrows from squares to the circles to be updated. There's lot of awesome stuff than can be made with these (maybe everything?). If you want to have fun with it, try to make a conditional or a switch. Its fun 🙂 Cheers!

Awesome! I tried doing some array stuff! I wasn't able to use anything but the first entry of the array in a JS square. I tried a few different methods including wrapping the array in another array. Is there a way around this? I also tried wrapping the entries in an object instead.

This thing is so raw, haha let me get in there and troubleshoot this.

Sweet!

Hell yes! So glad i can help. Im using it for experiments too, so if you have more trouble with this let me know. Planning on getting code error messages in there somehow

Here's two arrays that are synchronized but have their elements swapped!

Yoooo thats so sick!

Does it propagate based upon if changes are detected with string comparison?

Yep. After stringifying and removing any quotes it does a strict inequality via

!==

operator in JS.

Big TY!

Ah, like a memory cell. That seems.. important... im going to play around with this.

ah! I got it

Brilliant!

Here's one so that you can selectively record changes to

a

when the

c

flag is truthy.

This is good stuff! I recommend adding an interval node of some kind so you can feed the network over time. There are some examples of this kind of thing in this Maria document: https://www.maria.cloud/cells

This is amazing! Thanks so much for sharing. I wonder if it would be possible to create “sub-canvases” which would be “normal” TLDraw canvases that expose their geometric properties and mouse/keyboard events to the propagator simulator. This could give us a a sort of Fabrik-like environment where it’s possible to create bidirectional relationships between computer graphics and propagators.

Thank y'all so much! @Jack Rusher Really interesting, and very cool examples. Cells in that context are almost like the merging of a cell and propagator in propagator model context, but rather updating 'upstream' variables via reference rather than a reversal function (if i surmise correctly). In any case, intervals would be epic, and are necessary- basically need a way for propagators to wake themself up in the future ha. Gotta stew on that one. @avon I think this is an excellent idea and i think your seeing a lot of the vision that i am. Essentially propagators can be unidirectional or composed into bidirectional connections that can connect together geometric objects on a canvas. This can be used to create constraint systems and logic. I think the only key difference with my current thinking is... how do i get it all the logic to live right on the canvas rather then having things plug into a canvas like a data source. Effectively merging the inner 'code' world with the visual world (hiding 'implementation' details away when they aren't helpful, of course). Here's a graphic i made that has given me a hint of how propagator networks map to a geometric system like this (and an algebraic one too).

omg nice will share this with the rest of the tldraw team

@Lu Wilson Ayy, heck yeah! Code is here 🙂 https://github.com/dennishansen/propagator-draw

Effectively merging the inner 'code' world with the visual world (hiding 'implementation' details away when they aren't helpful, of course).

Really cool! This is the kinda stuff that’s been bouncing around my head for the past few months. I don’t have any great approaches yet, but there are some attempts at this in the Fabrik paper I linked earlier, which you might find useful. Pure Data, also has some interesting attempts at this too, both in its “canvases” (http://www.pd-tutorial.com/english/ch05s02.html) and also with its “data structures”. For a cool look at PD’s data structures at work check out this clip where geometric shapes are passing messages to a DSP graph that’s running behind the scene: Computer music is where I spend a bunch of my time so I figure it’s also worth mentioning PD’s

delay

object which takes an arbitrary message and schedules it some time in the future (this is how intervals are set up in PD from what I understand) there’s also similar constructs in the ChucK programming language where you can “chuck” your program forward in time, but I don’t have a ton of ChucK experience. for kicks here’s my attempt at a ring buffer memory propagator:

@avon Wow ring buffer is freakin sick. Secondly, im excited to read the rest of this Fabrik paper as well as the PD stuff. In the meantime to address your delay/ChucK ideas- as well as @Jack Rusher’s interval idea.. If propagators are implemented like they are intended: as independent, continuously running machines, i suppose waking up and doing something is straightforward. Less so in the simulator since functions are run reactively. With that being said... I did find a workaround. Creating a loop where a propagator outputs time and hooking that up to itself allows us to at least get a time variable into the system, which enables making.. well.. ✨ interactivity ✨ . Here's a counter. Notice i reset it by switching the 0 to a 1.

cc @Orion Reed get in here

Been having some fun experimenting with propagators reacting to time! Here’s my attempt at a network that continuously calculates the rolling average of a cell's contents over time:

Listen my mind can only be so blown. Unreal. haha. The SVG us just an image but if you export as JSON i believe that should do it! I can import that

ah my bad let's see if this works:

This is awesome! I’ve been hacking on some propagator stuff in C too. How are you handling the scheduling?

@Jacob Zimmerman oh sick- c was my next choice ha. Right now it’s pretty straightforward and not optimized. When a cell changes, tl fires a callback so I just fire a propagate function on downstream propagators, which run and then update downstream cells. This triggers tl to fire the callback and the cycle continues. Code is here https://github.com/dennishansen/propagator-draw

Folks here may also enjoy @Orion Reed’s Scoped Propagators https://www.orionreed.com/posts/scoped-propagators