Title
#devlog-together
m

Maikel

08/06/2022, 8:26 AM
I hope to find some time to make a video soon to better show how things work.. I'll try to explain it in text here: the statemachine definition is shown on the left. The states are the boxes with only a border and the current state is the blue box. The event/messages to trigger a state transition are defined by the boxes with a grey background. The flows on the right side use this statemachine: the flow on the top right handles storing the current state in a cookie but also initialises the statemachine with the stored state when the flow is loaded. A special node "OnStateChange" responds to statemachine changes... you can define the state that a OnStateChange node reponds to and trigger the output flow. In this example the statemachine shows the behavior of a lightswitch which can have 3 states: off, on and max.. the lightswitch can be put in "max-mode" only when the lightswitch is on. This is visualized by the image in the form-node. The buttons in the form-node also respond to the currentstate. Currently there's only support for 1 statemachine per flow, which is far too limiting offcourse, so I am going to change that soon.
10:27 AM
I notice that my current rendering method using html5 canvas with dom elements on top is getting really to its limits.. at some near point in the future I will need to rewrite the rendering and handle the UI elements differently .. I am thinking of an approach where I use only svg together with a floating propert editor (which will only be visible when a node is selected or hovered). Another approach would be pure webgl, although the complexity of that is a lot bigger then using pure svg. I hope to find the time to experiment with both.
l

Luke Persola

08/06/2022, 6:33 PM
Is this correct? The two graph views on the right are editable, and the state machine view on the left is derived from them. Good luck reworking the rendering. Using pure webgl or svg sounds like it could burn a lot of time though, is there some reason you don’t want to use a higher level library?
m

Maikel

08/06/2022, 6:55 PM
All is editable and nodes can be placed anywhere, it's a 2d infinite canvas. I have put the different graphs into sections to make the functionality more clear (hopefully). The different node-types can have constraints so that for example you cannot connect a State-node to something that is not meaningful. Currently I use react and react-konva as higher-level libraries, but I have to connect to the direct DOM-elements and konva-canvas elements to gain performance. I know that react and react-three-fiber can be very fast (also from pure development perspective not just performance). But I also want to try to and minimize the dependencies, so that would be my main reason for not using higher level libraries. Although loosing react would be painful I think. Something like tldraw uses react as well. I'll first start to do some experiments anyway before I ditch my current rendering solution and start using a different rendering solution.
l

Luke Persola

08/12/2022, 7:20 PM
OK, I misunderstood the graphs. Nice that it’s bidirectional. Hope you find a comfortable balance with the rendering.
m

Maikel

08/14/2022, 8:59 AM
Started rendering a flow using webgl and webassemembly this friday/weekend, using my own visual webassembly compiler (it can already render basic data using pure webgl). I've made a new node type which converts a json flow to webassembly memory so that it can be used to generate a 3d view of the flow. This approach serves multiple purposes.. since I am dogfooding my own editor, I use my own feedback to hopefully improve it and the custom programming language. Another goal is to build a webgl node and wire editor which has the least amount of dependencies (hopefully only javascript and webassembly manipulating the dom and webgl without the help of libraries). It will be a great learning experience for sure (whether I succeed or not). Hopefully I can show some screenshots later this week/next weekend of the progress.
l

Luke Persola

08/18/2022, 12:58 AM
Admirable dogfooding!
m

Maikel

08/27/2022, 11:55 AM
Spend some time again on the flow-based editor part of my project instead of the new renderer, because thanks to a colleague I've gotten an idea on how to render complex forms automatically based on a flow.. I'll provide more details in the thread.
12:18 PM
The flow in the above post is a flow of questions to determine if your kid could go to daycare during the pandemic here in the Netherlands.. I still had this flow in my repo as an example, and I think it illustrates the use-case.
w

wtaysom

09/12/2022, 2:53 PM
The shadows are a little stark but a more moderate use can help orient people in the scene.
m

Maikel

09/12/2022, 3:28 PM
Yes, the shadows can be softened quite a bit. also the camera system needs a lot of work.. currently you can move around freely but that can result in angles that are not practical as you can see in that screenshot😊
Duncan Cragg

Duncan Cragg

09/13/2022, 9:52 PM
You need ambient occlusion
m

Maikel

09/14/2022, 3:01 PM
Ah yes, good suggestion! I am rather new to shader-coding, so that will take a while before I have figured out how to do it. Although I'll focus on other tasks on my todo list first
Duncan Cragg

Duncan Cragg

09/14/2022, 3:10 PM
Not saying I know myself, in Vulkan one simply copies code from Sascha Willems! Or for fonts I copied from https://github.com/kocsis1david/font-demo πŸ˜πŸ‘
m

Maikel

09/14/2022, 3:18 PM
Thanks for that tip, I am going to take a lookπŸ˜€
Duncan Cragg

Duncan Cragg

09/14/2022, 3:18 PM
Well, it's Vulkan so maybe not for you? Just empathising with you!
m

Maikel

09/14/2022, 3:19 PM
Yeah I know, but the shader code might be easy converted to webgl-glsl
3:20 PM
For threejs there also lots of example where I can borrow from, although I am not using threejs myself (just pure webgl for now)
Duncan Cragg

Duncan Cragg

09/14/2022, 3:22 PM
I don't think "minimising dependencies" is necessarily a good reason to give up React, btw? It's a compact library really, or was last time I used it
m

Maikel

09/14/2022, 3:24 PM
I am still using react but not for the webgl part.
3:26 PM
Not that I dont like threejs or think that I can do it better (which I can't). But at least I can try to do it without it to have less dependencies and hopefully a smaller codebase and targeted on purely the needs of what I am building. It's also a good learning experience
Duncan Cragg

Duncan Cragg

09/14/2022, 3:28 PM
Cool. Happy hacking! 😊
m

Maikel

09/14/2022, 3:30 PM
Thanks! i'll keep posting my progress here and hopefully I can share a 2 minute video soonπŸ˜…
Duncan Cragg

Duncan Cragg

09/14/2022, 3:31 PM
I'll be following along πŸ€“