Yes, the time has finally come! I'll share a link to my visual programming project online! I've been mainly showing some video's on the devlog channel about the project. Warning upfront: Although I've been working on this for quite some time (I even started from the ground up last year after working on my previous visual programming project for multiple years).. there's still a lot of work to be done and bugs to be fixed. The UI/UX is far from perfect but it is demo-able enough I think. However, it's still just in "demo-stage" and not usable by other projects (I haven't build any npm packages for integrating or vs-code extension for example). My goal is to make a generic visual programming system (VPS) with which domain or application specific vpl's can be made. For now I am implementing 2 vpl's on top of the current base: a flow-based-programming inspired system and a "visual shader-toy". Since the tool is an infinite canvas, you can zoom and drag the canvas using mouse/wheel/touchpad. I've spend some time getting touchscreen support, but more work definitely needs to be done there. When you open up one of the editors, you can use the dropdown in the top-menu to load an example flow. Without further ado, here's the link: https://codeflowcanvas.io : there are 2 demo playgrounds in which you can play around. I'll post some more details in the 🧵. Thanks for some feedback!

Wow. How much feedback are you looking for? I've read and understood the Mandelbrot example, and if you'd like, I can walk you through my thought process of coming to an understanding.

First of all, thanks for going through the mandelbrot example and taking time to look at the project! Any feedback is welcome of course, although I am aware that my project still needs a lot of improvements UI-wise (building a flow from scratch is not as efficient as I would like it to be, but more then some months ago). But focusing on the mandelbrot example is a good starter I think. So if you want to share your thought process of going through the mandelbrot example then that is very welcome 😊.

Thought process in quick steps (glad to elaborate): 1.

z^2+c

is the heart of a Mandelbrot set, so where is it? Blue box. 2. Click on it. Click Edit Composition. Input on left. Output on right. Tangle in the middle from product being intrinsically two dimensional. So wires coming in and wires coming out is always going to overlap. Doesn't need to be as much but... 3. Why a "2" slider? Oh, instead of summing two xyi terms. Fine. How do we iterate? Click Exit edit composition. 4. Hmm. Z goes in and Z comes out. Um, okay? What's this ">" node. Red "Break". This grey box is a loop. Repeated 1024 times. 5. What is

$a > 511.0 ? 0.0 : $a - log2(log2(dot($b,$b))) + 4.0

? I wouldn't exactly call whatever comes out of that Iterations. Where does it go? 6. Through

0.5 + 0.5*cos( 3.0 + $a*0.15 + vec3(0.0,0.6,1.0))

. And that cycles the colors somehow to the output. Can I attach a slider to input b? 7. Doesn't seem so. After making a constant and dragging an arrow over, my cursor turns to a not allowed state. 8. And then going back to the top we define some vector variables. With the scene position, scroll wheel state, and x/y coordinate (UV) being accounted for. I see. 9. It is a bit funny that we have both arrows and named variables for wiring things together. 10. Likewise, we have both diagrams and symbolic expressions. Reminded a bit of Max.

Thanks for your feedback, I'll provide answers later today/evening

Now a little analysis now that the thoughts have had a little time to distill. Regarding (10): Sometimes expressions, especially math heavy ones are good, other times not. The real sweet spot is easily switching between formats. Being able, for example, to get a slider for a constant. Or fold something unwieldy like the product of imaginary numbers. Also, consider allowing for vectorized computations similar to how shaders do it. Feed many wires in, get many wires out. Regarding (9): Names are best for things that you want to just sort of be in the air around you. Regarding (4): Instead of iterated loops, you can get the same effect by being able to nest a copy of a box within itself.

1.blue boxes are "compositions" , which are reusable groups of nodes. These can be made from scratch or by selecting multiple node using shift and drag and press the "create composition" button. 2. I am not the best at Math, and I am thinking about finding a different way of representing such a calculation. Writing it in code is more clear I think than all the lines :-). How can the calculation itself be simplified? 3. The itertion is done by the for-node and the break-node is used to stop iterating depending on some condition. The diamond node with the ">" is the condition node together with the container which it connects to. These containers need better visual representations to make more clear what they are doing (the for-node and condition containers). 4. yes, see the above. I don't understand you last comment regarding nesting nodes within themselves. Do you mean using recursion instead of loops? 5. (and 6&7) This is taken from https://iquilezles.org/articles/msetsmooth/ .. it is a smoother iteration count for coloring the mandelbrot set. I've used a "custom glsl expression"-node as a hacky escape hatch. With this you can enter raw glsl code where $a and $b reference the input thumbs. Thumb $a expects a float and thumb $b expects a vec2. I want to make it more clear what type a thumb is expecting and also be able to specify the thumbs for this custom node-type (and others as well). Because $b is a vec2 you can't connect a value-node to it. I've changed the example on codeflowcanvas so that compositions are used instead of custom-nodes. Now the params from the calculations can be changed on the fly. The value-node-type has editable min/step/max parameters by the way.. if you click the numbers below the sliders you can edit them. 8. true, I haven't find a good way to working around the need of named variables. If nodes needed to be connected to variables with wires this would become a big mess I think. In my other flow-type (the "flow-based-programming inspired"-flow) there's a button which shows the hidden connections from nodes which reference variables. I haven't had a chance to add that functionality in the gl-flow as well. It could help I think.

I'm late to this conversation, but just wanted to say I played with it a bit today and shared it with my friend. I love that the classic shader example lets me zoom out on it very easily.

Thanks! And no worries, I am just very happy that you played with it!! The scene-position and scene-zoom nodes make it really easy to allow for zooming and positioning (although mobile touch screens need some work) 😀