Post

Different kinds of node interfaces

#1

I spent a while thinking about the difference between "informational" and "functional" nodes today. In most UIs there is a distinction between input and output - something that displays information versus something that takes it in. I keep thinking that there must be some elegant way to separate these in the nodal interface - it feels a bit messy to have the "new" and "delete" action nodes sitting next to the informational nodes within the pointer type viewer, for example. I feel like there should be some difference - maybe you have to pull up an action menu if you want to see the node's inputs. Maybe the input nodes are in a different location, lining the top or bottom of the screen. I'm not sure what the right solution is yet, so now I just leave them in the mix with the other nodes, but it does bother me a little.
I read this in the devlog from today and thought "Hey this is something I know a lot about".
So I figured I should write something about how some differen't node based programs solve theese problems and maybe
this could inspire Josh in how to solve his problems with the LT-nodes.

Theese example are from different VFX-programms.
Where the input is different images and the nodes make different effects on theese images and finally writes an output-image.
But the ideas of how to manage the alterartion of data in a node tree stays the same.




------------------------------------------------------------------------------------------| Input/Output |-------------------------------------------------------------------------------------------------------------------------------





So for the input/output problem most node intefaces solve this simply by having an input-node and an output node (or multiple).
The Idea is that you have a node which only purpose is to supply the input or the output of data.

The only expecption I have seen to having a input node is in apple's "color.app" application and blackmagic's davinci Resolve.

In color.app all nodes assume that any nodes without any input from another node gets input from the original picture or source.
This makes the node tree in color look something like this :
Image Personally I allways disliked this interface as it tends to get very confusing to not visually see where the input comes from.
Especially since some nodes don't allways have an input.

In Resolve, you get input from the left side of the window, and output goes into the right side.
This makes sence if the node tree you work on will only have one input and one output.
Otherwise it wolud get pretty tricky. I also don't know how this would work in 3d.
Image I haven't used this program very much. All I know is that it's designed to work without mouse input.
But that people complain about how it works with complicated node trees.







----------------------------------------------------------------------------------| Editing node settings |---------------------------------------------------------------------------------------------------------------------------



So for the problem of how to change values of the induvidual nodes I've seen two different solutions.
The classical way is to have a sepperate widget that displays the sliders and inputboxes bellonging to the currently selected node.
This widget is usually totaly sepperate from the node graph. This keeps the tree clean of clutter, but also requiers more screenspace.

Most node based apps I've seen uses this scheme. Here is an example from NukeX:
(Nodes-settings or "properties" to the right)
Image The alternative is to have the nodes actually be the widgets within which you have the sliders and textboxes etc. This is how the 3d-app "blender" does it.
Personally I think this works better. And it is easier to visually understand than the classical way.
Here you also easily see different kinds of input very easy.
Image In case it gets messy you can also collapse the induvidual nodes by clicking that litle triangle and hide all the settings.
Image Note that different nodes have different colors, this shows what kind of data they modify. like the green/blueish nodes modify color values, and the orange one basically means output-node.
You can also see that the different inputs of the nodes have different colors. This indicates if the input expects "color-info", "vector-info", or simpler values (math, or monochrome).








-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------




All of theese are 2d-nodes. But it occured to me now that in LT there is a third dimention available to exploit!
Maybe this is where the settings of induvidual nodes could go (sliders and text input)?



-

Online Now

Users browsing this forum: No registered users and 9 guests

cron