https://futureofcoding.org/ logo
#devlog-together
Title
# devlog-together
m

Maikel

02/10/2024, 2:56 PM
Hi, in this video (

https://youtu.be/iFga2bfptBk

) I show the progress on a new feature that I really wanted for quite some time: combining nodes into reusable compositions. This helps in making flows smaller. The compositions can be accessed from within the node-type selector so they can be added to the flow. One thing that I really like is how the inputs and outputs to compositions are created based on the connections which cross the bounds of the selected area. I've also finally added a way to copy & paste nodes which is a nice productivity improvement. In the video I demonstrate my other flow engine instance with which you can create fragment shaders in webgl and here I've recreated a shader form shadertoy made by kishimisu (see https://www.shadertoy.com/view/mtyGWy ). I had to extend the node-types to make this possible. Currently I cant yet create nested compositions but once that is possible I hope it will help decrease the "node-spaghetti" further. Because I do think that the textual shadertoy code is still easier to read then my visual version. Which obviously I want to improve. I am almost ready to send out a link to my visual editor but decided to work on it a little bit more for ar least this month. I want to extend and improve some features and create more example flows.
g

guitarvydas

02/10/2024, 4:55 PM
FYI - a trick I use for cleaning up diagrams...
m

Maikel

02/10/2024, 4:58 PM
Unfortunately I currently only have bezier and quadratic curves and straight lines without an option to add extra control points
I was thinking a bit more about this, I think I can automate this.. when a node has multiple connections from a port to other nodes.. simply create overlapping svg paths to the end nodes. I already do something similar for nodes that connect to nodes that have a smaller X position. If possible I want to prevent extra user actions
Here's a link to a small video demonstrating the above:

https://youtu.be/QrFnzhhHzD8

Connections that have the same output have their svg path calculated using the distance from the closest node to that output. I've also changed the way value-nodes are handled by the shader : instead of recompiling the shader after changing the value, now direct uniform parameters into the shader are used which is a much smoother experience.
2 Views