Visual node based programming

a.k.a. dataflow graphs, patchers, visual coding, flow-based progamming


Visual programming is for people who find this more soothing than lists of instructions

Graphical dataflow programming languages, a.k.a. node-based visual programming. Probably descended from flow based programming or at least dataflow programming. A specific kind of DSL, with a visual functional graph interface. There is much crossover between these and the new generation of low code development systems.

For the record, I hate programming using visual dataflow, although I do like visualizing my programs this way. The patchers that offer only a GUI workflow are arse-backwards for my work process, forcing you to click a million times to do every simple thing. But they are famous, and seem simple to the sort of people who prefer clicking on 100 buttons instead of tapping 100 keys. These are the same kind of people who will drive their cars until the rims are on the road rather than take half an hour to pump up the tyres.

This is popular in audio, visual multimedia in systems like VVVV and Quartz Composer and web api programming systems like nodered. Possibly the most important application now is the neural net paradigm that treats neural data flow as a dataflow graph.

This is not the only way you can program visually. I would argue that the hierarchical tree like structures of teaching tool scratch or art lisp project fluxus while having some obvious parallels, are different.

Luna

Vidual patcher programming is being made respectable by projects like Luna, which translate general purpose languages back and forth between equivalent graphical and textual representations.

Nodes

nodes:

Nodes is a JavaScript-based 2D canvas for computational thinking. It's powered by the npm ecosystem and lives on the web. We take inspiration from popular node-based tools but strive to bring the visual interface and textual code closer together while also encouraging patterns that aid the programmer in the prototype and exploratory stage of their process.

They have probably the best explanation of the whole field, for the ousider:

One common differentiation between visual programming tools is the level of abstraction they operate on. Some tools like Origami for example are meant to prototype interactions of user interfaces and not much more. Others – like Pure Data for instance – are meant to be very low-level and let users craft their own environments. Some – like UE4 Blueprints or the Unity Visual Effects Graph – are embedded and part of a larger system (e.g. a game engine environment).

Nodes is more directly comparable to Cable.gl, FlowHub or MaxMSP does come with some batteries included but there are less preconceptions of what you use it for. However, unlike most of them we adopt a more programmer-first approach where the nodes themselves are generally a lot more high-level and users are encouraged to peek inside, copy and modify, and write their own. While you could drop on a lower level and express language-level semantics like if-checks and for-loops, or math concepts like add or multiply on a node level we generally don't feel that is a productive way to work and prefer to write that logic in a textual programming language. This might feel conceptually familiar if you have used NoFlo.