Difference between revisions of "Node editor"

From apm
Jump to: navigation, search
(basic page)
 
m (Related)
 
(17 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
Also called box-and-wire programming visual/graphical programming.  
 
Also called box-and-wire programming visual/graphical programming.  
  
== Usual advantages of node editors ==
+
= Usual advantages of node editors =
  
 
Node editors usually enforce referential transparency, purity, statelessness. <br>
 
Node editors usually enforce referential transparency, purity, statelessness. <br>
just like in [[purely functional programming languages]]. With the same benefits. <br>  
+
just like in [[purely functional programming|purely functional programming languages]]. With the same benefits. <br>  
 
Most notably is mathematical refactorability of code. <br>
 
Most notably is mathematical refactorability of code. <br>
 
As is Substitutability. Easy factoring out of code duplication. <br>  
 
As is Substitutability. Easy factoring out of code duplication. <br>  
  
== Usual problems with node editors ==
+
== The "wire-kraken" problem ==
 
+
=== The "wire-kraken" problem ===
+
  
 
Lack of ability to hide complexity. <br>
 
Lack of ability to hide complexity. <br>
Line 22: Line 20:
 
The limited expressiveness problem. As workarounds to this problem tend to significantly increase complexity. <br>
 
The limited expressiveness problem. As workarounds to this problem tend to significantly increase complexity. <br>
  
=== Limited expressiveness ===
+
== Limited expressiveness (boosting wire-kraken) ==
  
 
Some problems are hard to model in most existing node editors. Why?
 
Some problems are hard to model in most existing node editors. Why?
Line 46: Line 44:
 
== Bad support for code documentation ==
 
== Bad support for code documentation ==
  
Node editors often feature bad support for documentation.
+
Node editors often feature bad support for documentation. <br>
No way to attach documentation to individual noses in usage context.
+
No way to attach documentation to individual noses in usage context. <br>
No way to attach documentation for a node graph as a function without specified context.
+
No way to attach documentation for a node graph as a function without specified context. <br>
  
=== Misc: ===
+
== Node/Box position meaning(lessness) ==
  
 
'''Sort of meaningless positional information:''' <br>
 
'''Sort of meaningless positional information:''' <br>
Line 64: Line 62:
 
Not for code compilation and execution.
 
Not for code compilation and execution.
  
'''Low information density:''' <br>
+
== Low information density ==
 +
 
 
Compared to textual code node editors have a rather low <br>
 
Compared to textual code node editors have a rather low <br>
 
on screen areal information density. <br>
 
on screen areal information density. <br>
 +
 +
There's no way around that other than
 +
mixing node-editors with other more information dense [[code projections|projectional editor]].
 +
 +
== Context visualization and connectivity visualization ==
 +
 +
=== Only showing the code universe not the code multiverse ===
 +
 +
Node editors usually do not give (progressive disclosue) access to: <br>
 +
– Alternate call contexts (inactive form other code, live with same code but other data) <br>
 +
– memoization of overlapping sub-problems <br>
 +
 +
[[The glowing thread of execution through the stateless timeless code multiverse.]] <br>
 +
Related: [[Edit time immutability]].
 +
 +
=== Linking outputs directly to inputs ===
  
 
'''Conflation of function abstraction and function application:''' <br>
 
'''Conflation of function abstraction and function application:''' <br>
 
I.e. in node based editors outputs are directly connected to inputs. <br>
 
I.e. in node based editors outputs are directly connected to inputs. <br>
 +
This is kind of part of the definition of a bode editor. <br>
 +
 
This is not the case in [[annotated lambda diagrams]] <br>
 
This is not the case in [[annotated lambda diagrams]] <br>
 
where flowing a node (with nodegraphinside) through a wire comes more natural. <br>
 
where flowing a node (with nodegraphinside) through a wire comes more natural. <br>
Line 83: Line 100:
 
Beyond custom function definitions: <br>
 
Beyond custom function definitions: <br>
 
Support showing visual surrounding call context (super-context & sub context). [[Inverse tabs for call contexts]].<br>
 
Support showing visual surrounding call context (super-context & sub context). [[Inverse tabs for call contexts]].<br>
Support showing alternate upstream call contexts too for mind-bicycle-walks through the codebase-graph-multiverse
+
Support showing alternate upstream call contexts too for mind-bicycle-walks through the codebase-graph-multiverse <br>
 
Ideally both in inactive and live-coding context.
 
Ideally both in inactive and live-coding context.
  
Line 98: Line 115:
 
* https://twitter.com/mechadense/status/1235645491255414789
 
* https://twitter.com/mechadense/status/1235645491255414789
  
== Related ==
+
= Related =
  
* [[Projectional editing]]
+
* [[Projectional editing]]. A [[node editor]] can be a form of a projectional editor.
 
* [[Purely functional programming]]
 
* [[Purely functional programming]]
* [[Annotated lambda diagrams]] and  [[Annotated lambda diagram mockups]] and [[Lambda diagrams ]]
+
* [[Annotated lambda diagrams]] and  [[Annotated lambda diagram mockups]] and [[Lambda diagrams]]
  
== External links ==
+
= External links =
 +
 
 +
* Wikipedia: [https://en.wikipedia.org/wiki/Node_graph_architecture Node graph architecture]
 +
 
 +
== Projects ==
  
 
'''enso (formerly luna):'''
 
'''enso (formerly luna):'''
* https://x.com/enso_org
+
* landing page: https://ensoanalytics.com/
 +
* X-platform: https://x.com/enso_org
 
Historic:
 
Historic:
 
* http://staging.luna-lang.org/
 
* http://staging.luna-lang.org/
Line 114: Line 136:
 
* https://www.youtube.com/user/flowboxIO  
 
* https://www.youtube.com/user/flowboxIO  
 
----
 
----
* {{wikitodo|Find that cool project that combines a node graph with a drawing tool.}}
+
'''Crosscut''' – crossover between node editor and (computational) graphics canvas
 +
* landing page: https://www.inkandswitch.com/crosscut/
 +
* video: https://www.youtube.com/watch?v=ifYuvgXZ108&t=1814s
 +
----
 +
'''PANE''' by Joshua Horowitz – https://joshuahhh.com/
 +
* landing page: http://joshuahhh.com/projects/pane/
 +
* video: https://www.youtube.com/watch?v=Kp6YqmMxqKA&t=2169s
 +
----
 +
'''Blender geometry nodes:'''
 +
* Docs: https://docs.blender.org/manual/en/latest/modeling/geometry_nodes/index.html
 +
----
 +
'''Nodezator''' by Kennedy Richard
 +
* landing page: https://nodezator.com/
 +
* github: https://github.com/IndiePython/nodezator
 
----
 
----
* PANE experiment {{wikitodo|add link}}
+
'''Unit – Visual Programming System''' <br>
Swapping the meaning of wires and boxes.
+
This is atop an unusual programming language core: <br>
 +
"Multi Input Multi Output (MIMO) Finite State Machines (FSM)"
 +
* github: https://github.com/samuelmtimbo/unit/
 +
* https://unit.software/
 
----
 
----
* Blender geometry nodes
+
2023 – '''Multiple-Representation Visual Compositional Dataflow Programming''' <br>
 +
https://michael.homer.nz/Publications/PX2023 <br>
 +
This bridges over to concatenative programming which <br>
 +
also has a more kind of tabular alternative [[projectional editor|code projection]] <br>

Latest revision as of 12:11, 8 September 2024

This article is a stub. It needs to be expanded.

Also called box-and-wire programming visual/graphical programming.

Usual advantages of node editors

Node editors usually enforce referential transparency, purity, statelessness.
just like in purely functional programming languages. With the same benefits.
Most notably is mathematical refactorability of code.
As is Substitutability. Easy factoring out of code duplication.

The "wire-kraken" problem

Lack of ability to hide complexity.
Some older node editors even lack the ability for user-defined functions as sub-node-graphs.
Beyond mere grouping of nodes. Many node editors support that now.
Though it's usually an all or nothing for hiding the immediate surrounding computational call context.

This problem is aggravated by an other usual problem of node editors of the past.
The limited expressiveness problem. As workarounds to this problem tend to significantly increase complexity.

Limited expressiveness (boosting wire-kraken)

Some problems are hard to model in most existing node editors. Why?

As node editors usually share the referential transparency property with
purely functional languages they face similar challenges.

Purely functional languages usually (with few exceptions) make up for the absence of recursive mutability
in part by supporting higher order functions.
I.e. functions that take functions as arguments and or give functions as return type.
(callbacks, continuation passing style, functional reactive programming, and simpler things)
Recursion packaged in names of what they do structurally replaces for loops (map, fpold, scan, zipWith, …)
Preferably tail call recursion.

Unfortunately node editors rarely support (their direly needed) higher order functions
as they often strictly adhere to the "wires are values and boxes are functions" metaphor.

This leads to some strange workaround blossoms.
Taking blender geometry nodes as example:
– a copy of all operations for list/array types (less or more consistent).
– dedicated "simulation nodes" rather than an iterate function

Bad support for code documentation

Node editors often feature bad support for documentation.
No way to attach documentation to individual noses in usage context.
No way to attach documentation for a node graph as a function without specified context.

Node/Box position meaning(lessness)

Sort of meaningless positional information:
Position of nodes/boxes carries no inherent meaning and is just metadata.
Usually arranged for easy readability
– minimizing number of wire crossings
– putting related parts close together
– mimicking the geometry of an actual physical geometry
Or using auto layouting approaches
– force field based (often makes thing less readable)
– auto routing approaches (some heuristics, nowin 2024 AI might help here)
Node/box positions are meaningful for readability and documentation.
Not for code compilation and execution.

Low information density

Compared to textual code node editors have a rather low
on screen areal information density.

There's no way around that other than mixing node-editors with other more information dense projectional editor.

Context visualization and connectivity visualization

Only showing the code universe not the code multiverse

Node editors usually do not give (progressive disclosue) access to:
– Alternate call contexts (inactive form other code, live with same code but other data)
– memoization of overlapping sub-problems

The glowing thread of execution through the stateless timeless code multiverse.
Related: Edit time immutability.

Linking outputs directly to inputs

Conflation of function abstraction and function application:
I.e. in node based editors outputs are directly connected to inputs.
This is kind of part of the definition of a bode editor.

This is not the case in annotated lambda diagrams
where flowing a node (with nodegraphinside) through a wire comes more natural.
(TODO: Find out of the consequences of this in more detail.)

Potential Improvements

Provide better support for documentation. Per node and per node-graph.

Make higher order functions first-class-citizens (i.e. treat functions identically to values).
In other words: Make boxes and the wires going out mean the exact same thing.

Beyond custom function definitions:
Support showing visual surrounding call context (super-context & sub context). Inverse tabs for call contexts.
Support showing alternate upstream call contexts too for mind-bicycle-walks through the codebase-graph-multiverse
Ideally both in inactive and live-coding context.

Support both in-place-preview and out-of-place previe of For dependency functions that are called in the node graph:
– support in-place-preview. Inverse tabs for call contexts.
– support out-of-place-preview with indicate visual funnels (show memorization sharing)

Use an projectional editing approach with a code AST as core representation.
Ideally per function hash addressed.

(wiki-TODO: Add existing sketches for these ideas. The ones for now merely linked below.)

Related

External links

Projects

enso (formerly luna):

Historic:


Crosscut – crossover between node editor and (computational) graphics canvas


PANE by Joshua Horowitz – https://joshuahhh.com/


Blender geometry nodes:


Nodezator by Kennedy Richard


Unit – Visual Programming System
This is atop an unusual programming language core:
"Multi Input Multi Output (MIMO) Finite State Machines (FSM)"


2023 – Multiple-Representation Visual Compositional Dataflow Programming
https://michael.homer.nz/Publications/PX2023
This bridges over to concatenative programming which
also has a more kind of tabular alternative code projection