By Matt Keeter
A computer-aided design (CAD) tool from a parallel universe in which CAD software evolved from Lisp machines rather than drafting tables.
A hybrid graphics editor and programming environment for creating interactive diagrams.
A set of tools which allow novices to program robots easily and efficiently.
- While Aseba isn't a visual programming tool itself, it does contain one.
- Paper: Visual Programming Language for Thymio II Robot
by Chris Pressey of Cat's Eye Technologies
Befunge is a stack-based, reflective, esoteric programming language. It differs from conventional languages in that programs are arranged on a two-dimensional grid.
This blog post by Dorian Brown does a fantastic job of visualizing the execution of Befunge, and includes an interactive playground.
by Ryan Challinor
A software modular synth with data visualisations in patch coords and more.
Blender is an open-source 3D animation program with several visual programming tools.
The node editor allows you to create materials (shaders), texture maps, and compositing flows. They're also used for rendering.
The logic editor is used to set up game logic for Blender's built-in game engine. The interface seems like a slightly different take on patching, with a 3-step sensor > controller > actuator layout.
by Neil Fraser with Quynh Neutron, Ellen Spertus, and Mark Friedman at Google.
A JavaScript library for building Scratch-like block-based visual programming editors. Block code can be transpiled into JavaScript, Python, PHP, Dart, or other languages. An outgrowth of the App Inventor project.
A scripting system built into the Unreal Engine.
- Blueprints From Hell is a Tumblr collecting examples of large or messy Blueprint scripts.
A drag-and-drop tool for creating web applications. There's a visual design mode that looks a bit like Keynote or iBooks Author, and a "Workflow" programming mode that seems similar to IFTTT.
by Undev
Cables is your model kit for creating beautiful interactive content. With an easy to navigate interface and results in real time, it allows for fast prototyping and prompt adjustments. Working with cables is just as easy as creating cable spaghetti: You are provided with a given set of operators such as mathematical functions, shapes and materials. Connect these to each other by virtual cables to create the scene you have in mind. Easily export your piece of work at any time. Embed it into your website or use it for any kind of creative installation.
- Here's a nice short tutorial video that shows some of the features, what the editor interface is like, etc.
A New Visual Programming Environment to Build JavaScript By Linking Blocks.
Not particularly interesting on its own, but Cochain is cute.
When I first read the word "coedit" I thought they meant the [dual](https://en.wikipedia.org/wiki/Dual_(category_theory)) of "edit" and got *very* excited, wondering what that could mean. Alas. Exercise for the reader! (Let me know what you come up with)
Interactive Construction of Bespoke Chart Layouts
A project from Microsoft research for building data visualizations using direct manipulation of graphics, very similar to (and presumably inspired by) Bret Victor's Drawing Dynamic Visualizations
A VPL editor that appears to be geared toward building NodeJS server apps.
Created by Murukesh Sadasivan
A rudimentary nodes-and-wires patcher used for procedural animation and rule-based particle effects in Cinema 4D.
You can read my impressions here.
Inspired by Bret Victor's Drawing Dynamic Visualizations. The developer made a rough prototype (unreleased) and a concept video (shown on the website), but then wasn't able to continue working any further on this project, sadly. They suggested to me that they believe Luna to be more promising direction because it's more generic and not restricted to the domain of interactive animations.
The language provides a uniform way to represent flowcharts of any complexity that are easy to read and understand.
by Bret Victor (et al.)
Programming wrested away from the screen, rendered into that most immersive and expressive medium: the physical world. If you are reading this and you've never heard of Dynamicland, I insist that you now go learn all you can about it — my codex references nothing else as interesting or exciting as this project.
by Rob Cheung
Fully open source and web based programming enviroment in javascript (React).
You can think of it as an extension of Sol LeWitt's process art in the sense that it's goal is to decompose art into procedural descriptions. Or you can think of it as an extension of Brian Eno's idea of "music as gardening" in the sense that it gives you a computational garden to tend to.
by Dan Ingalls, Scott Wallace, Yu-Ying Chow, Frank Ludolph, and Ken Doyle at the Apple ATG
An interesting and fairly early visual language, built in Smalltalk by one of Smalltalk's creators. Also interesting to consider that this work was being done coincidently with HyperCard at Apple.
Fabrik is a visual programming environment — a kit of computational and user-interface components that can be "wired" together to build new components and useful applications. Fabrik diagrams utilize bidirectional dataflow connections as a shorthand for multiple paths of flow. Built on object-oriented foundations, Fabrik components can compute arbitrary objects as outputs. Music and animation can be programmed in this way and the user interface can even be extended by generating graphical structures that depend on other data. An interactive type system guards against meaningless connections. As with simple dataflow, each Fabrik component can be compiled into an object with access methods corresponding to each of the possible paths of data propagation.
A new SmallTalk/HyperCard-like tool
by Donald Fisk
There are some interesting ideas about state and control flow in this one. It's the product of a formal academic process, being written up in a few papers, so there's definitely more thought put into it than might appear judging just by the visual design. It's also newer than you might think — circa 2015.
Iteration uses two special linked vertices called start+ and repeat+. The start+ vertex has an equal number of inputs and outputs. When a value is received on every input of start+, each value is output on the corresponding output. The repeat+ vertex has the same number of inputs as start+, each of which has the same type. An edge connected to an input on repeat+ really sends its values to the corresponding input on start+.
by Blackmagic
A commercial node-based video compositing software for visual effects, concurrent of Adobe After Effects and Foundry's Nuke.
by Rodrigo F. Figueiredo
IDE for modeling and simulation of Cellular Automata
A tool for configuring workflows triggered by Github repo events.
by Robbie Gleichman
Currently, the Glance executable produces a visual representation of your code in the form of an SVG image when given a textual Haskell source file.
- This tool has a particularly neat rendering style. I recommend taking a look at Advantages of Glance for examples.
- The Related Work page has some good links.
- Robbie recently posted a talk discussing the design of a new, more compact syntax for Glance. Feedback should be shared in the Future of Programming Slack community.
A VPL for procedural modelling in Rhino. It's neat that it uses little icons for nodes instead of names.
Grasshopper has a neat way of rendering the results of a "find" operation.
by Ivan Reese for LunchBox Sessions
A drawing tool with visual programming features, currently in private development. Hest is designed to allow the programmer to actively participate in the execution of their code, seeing data flow from function to function, interacting with the data like a video game.
I created this codex to help me do research for Hest. I'm including it here in the hope that some readers may find it interesting or useful as a reference for their own work.
by Hopscotch Technologies — Jocelyn Leavitt, Samantha John, Ana Handley, Rodrigo Tello, and Nazarí González
An iPhone/iPad app, heavily inspired by Scratch, with a focus on introducing children to programming by having them make games.
- Wikipedia
- Samantha John was a guest on Episode 5 of the Future of Coding podcast.
by SideFX
A suite of 3d modelling and visual effects tools, with a number of different VPLs serving various uses.
A popular, basic tool for connecting and automating a handful of apps, services, and APIs. The name is short for If This Then That.
A GPU/CPU Texture Generator using visual programming, available online: http://skaven.fr/imogen/
A language+environment designed to show interactive behaviour with more clarity, using state machines and constraints.
Includes: A live updating preview of the running program, a table view with current variable values, a schematic-like view of the state machine with animated transitions and current state highlighting, and highlighting of related elements across representations.
Joy.js by Nicky Case
A live programming environment with excellent use of visual interactivity. For example, by gradually moving your mouse down the number bullets that mark each (imperative) step of the program, you see that step's execution gradually take place.
A visual programming language for sound design on dedicated DSP hardware. The DSP handles audio processing and is controlled by the Kyma software running on an external computer. The Kyma language consists of sound sources and transforms connected with cables that represent signal flow.
A visual programming language predominantly used in automation, test and data science applications. Each LabVIEW program is referred to as a Virtual Instrument (VI) which consists of two components; a Front Panel and a Block Diagram. The Front Panel represents both the Graphical User Interface and I/O terminals for the software, whereas the Block Diagram uses the concept of dataflow to manage the propogation of data around nodes of execution.
"Lire is a Lisp expressions visual editor, it allows you to write programs using kind of abstract syntax tree (AST). It runs on top of Common Lisp."
The layout of nodes is quite distinct — it feels more like a transit map (or Mini Metro) than most patcher VPLs.
"A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs to be included in applications independently."
Handy list of projects using Litegraph
by Mike Matas, Jaron Lanier, et al. Now owned by Microsoft.
Build, train, and ship custom deep learning models using a simple visual interface.
A VPL with a simultaneous textual/visual view of the program. Recently rebooted as Enso.
Subreddit: LunaLang
Video: Wojciech Daniło & Marcin Kostrzewa Luna - Purely functional paradigm meets visual programming
Medium post: Luna, the visual way to create software
HN: Luna – Visual and textual functional programming language
A work-in-progress visual language with an emphasis on approachability. Looking at their What page is worthwhile, as they have a handful of UI ideas that I've not seen elsewhere, and many twists on typical UI ideas to make them nicer than the norm.
This is a tool based on Godot Engine that can be used to create textures procedurally. Its user interface is based on Godot's GraphEdit node: textures are described as interconnected nodes.
A commercial VPL for musicians and artists, evolved out of Pure Data.
Likely one of the most famous visual programming languages, widely used for more than 20 years.
A web-based tool for building interactive audio/visual projects.
Designed to encourage hacking and modding, like circuit bending but for software. For instance, you can edit the "meta drake" shown above here. (Be sure to click the "start" button in the tween node.)
An open source node-based video compositing software for visual effects, heavily inspired by Foundry's Nuke.
by Lutz Roeder
Visualizer for neural network, deep learning and machine learning models
"A programming tool for wiring together hardware devices, APIs and online services in new and interesting ways. It provides a browser-based editor that makes it easy to wire together flows using the wide range of nodes in the palette that can be deployed to its runtime in a single-click."
A dataflow environment created by the Experimental Media Research Group for datavis, generative design, and animations.
by Variable
Nodes is your thinking space for exploring ideas with code on the web, powered by JavaScript and NPM. What if programming was about ideas not semicolons? Compose, abstract, generalise. Start from top down or bottom up and refine as you go. With Nodes programming feels like sketching on canvas. Zoom in and out of problems, experiment on the side and easily re-use parts of other projects.
- They've written a fantastic blog post introducing the project and contextualizing it relative to similar tools.
There are a lot of nice features. One, shown above, is a profiler that colors nodes based on the amount of CPU they burn each frame.
A flow-based programming environment for JavaScript, targeting the web and Node.js.
Related projects: Flowhub, noflo-ui
by Duangle
A prototype VPL created for scripting in a game project. It's interesting how they found working in it felt unproductive, so they switched to a structured editor and a Lisp.
by Foundry
A commercial node-based video compositing software for visual effects, concurrent of Adobe After Effects and Blackmagic Fusion.
A meta-modelling tool built on top of Pharo (a SmallTalk dialect), used to experiment with the creation of modelling tools.
A free, open-source, cross-platform intermedia sequencer for precise and flexible scripting of interactive scenarios. Control and score any OSC-compliant software or hardware: Max/MSP, PureData, openFrameworks, Processing…
Orca is a visual programming playground. Orca is an esoteric programming language, designed to create procedural sequencers. Each letter of the alphabet is an operation, uppercase letters operate each frame, lowercase letters operate on bang.
If you haven't seen it in action, you might think that Orca doesn't really qualify as a visual language. Well, Orca uses text the same way classic roguelike games do — think ADOM or Dwarf Fortress. Each letter of the alphabet represents a function, with inputs on either side and output coming out the bottom. You pass data between functions by arranging them spatially on the grid. Your state is visible as numbers and letters on the grid, too. The fact that letters are used to represent both functions and data means there's a decent amount of metaprogramming easily within reach. In fact, Orca sits at an interesting space between "programming language" and "music sequencer", making the programming experience feel a lot like improvising and exploring on a musical instrument. Very cool.
Orca doesn't generate any sound on its own. It's not even a tool for music until you hook it up to (eg) a synthesizer. But you could also hook it up to something else, like a game engine, and use it to drive game logic or graphics.
- Example 1
- Example 2
- ORCA Sequencer Intro — This is a nice introductory tutorial. I've linked to a spot in the video that should give you a taste of the spatial nature of Orca.
I wonder what would happen if someone fed the output of a cellular automaton into Orca, or used it as part of a roguelike.
By Facebook
A prototyping tool originally built atop Quartz Composer, but more recently rebuilt as a standalone (albeit less capable) app.
-
Used to prototype the UI/UX of their Paper app.
-
I've found that it offers a few interesting tweaks on the common nodes-based VPL format, though with a raft of apparent shortcomings. You can read more of my impressions here.
Video demo — "PAD3D was a very early (about 1993) zoomable user interface implemented on an SGI in Lisp using accelerated 3D graphics. This demo shows zooming, authoring, text, images, dynamic fisheye of source code, live visual bookmarks, and a nested zooming file browser."
A live, functional programming environment built around data-visibility. All intermediate values are visible by default, and you construct a program by acting on these concrete values.
A simple VPL for automating tasks, similar to IFTTT.
A nice-looking VPL for creating repeating pattern graphics
Includes features for creating animated patterns
"Piet is a programming language in which programs look like abstract paintings."
Research project by Myriam Maleki
A visual scripting interface for parametric CAD
Echoes some of the ideas in Bret Victor's Learnable Programming and Drawing Dynamic Visualizations
Demo View (seemingly contains no sound — bummer)
A visual IDE for creative coding, focussing on realtime audio and video (OpenGL).
On Twitter
An open source VPL for musicians and artists. Pure Data (Pd) is the prototypical example of a VPL — boxes that direct or transform flowing data, connected together with lines through which the data flows. Pd has distinctly-styled lines for messages (strings) and for signals (audio data), and type-specific "objects" (boxes) like sin for messages and sin~ for signals.
The help and tutorial documents are implemented as Pd patches, and you are encouraged to edit them.
A discontinued tool from Apple that was useful for creating animations and prototypes, leveraging technologies in macOS like CoreImage.
Modular music and sound design environment that can run as a plugin in a DAW. Similar to Max but only really designed for processing midi and audio data. Also includes tools for building separate UIs for instruments and effects.
Recursive Drawing is an exploration of user interface ideas towards the development of a spatially-oriented programming environment.
Reflected on here
Rete is a modular framework for visual programming. Rete allows you to create node-based editor directly in the browser. You can define nodes and workers that allow users to create instructions for processing data in your editor without a single line of code.
This project seems pretty rough, but it's surprisingly popular. There might be something to it that wasn't immediately obvious to me in my initial quick kick of the tires.
by Gus Mueller at Flying Meat
Flexible, super charged, batch image processing for your Mac. A node based batch image processor means you can mix, match, and combine different operations together to make the perfect workflow. A node for every operation, from changing DPI to rotation to Machine Learning to custom behaviors with AppleScript. Optimize your images for fast delivery over the Internet.
A flow-based framework for creating websites.
Devine has a striking sense of aesthetics, and Riven is no exception.
You can view (though I don't believe edit) the Riven program that configures the server for their website.
by Dave Griffiths [Twitter]
A way to livecode scheme visually, by plugging in and tearing off bits of code.
A VPL designed mainly for children. Scratch is a text-centric language that you assemble using blocks that snap together, with the syntax rules enforced by the shape of the blocks. Color is used to indicate a block's type of data or behaviour.
- Scratch 3.0, which runs in the browser
Shadershop is an interface for programming GPU shaders in the mode of a direct manipulation image editor like Photoshop. It is an experiment in leveraging the programmer's spatial reasoning the way that coding today leverages the programmer's symbolic reasoning.
by Ivan Sutherland in 1963
- One of the first ever GUIs.
- Demo Video with commentary by Alan Kay
- HN Discussion
- HN Discussion
Snap! is a broadly inviting programming language for kids and adults that's also a platform for serious study of computer science.
A Scratch-inspired block-snapping VPL with first-class procedures, lists, objects, and continuations.
A rather neat-looking VPL, vaguely reminiscent of Scratch (ie. not a patch-based VPL). Very tree-centric. Based on Factor.
A node-based VPL for scripting Softimage (RIP). Useful for procedural modelling, deformation, rigging, particle simulation, animation, etc.
by Adobe
A commercial node-based editor for generating multi-channel texture images for video games and visual effects.
Visual programming language written in Swift that assembles to executable Swift code. WWDC '18 scholarship submission. This project aims to proof the node-based visual programming language that assembles executable Swift code and can be written using an Apple Pencil or touch entirely.
A rough prototype that looks modern but doesn't seem particularly fleshed-out. One nice feature is the way nodes are created using the Apple Pencil, which you can see here.
by Alan Borning
A Smalltalk-based visual programming system from the late 1970s. The definition of a ThingLab class includes a basic schema of data fields, constraints and other relationships between fields, some default values for the fields, and a drawing that would represent the class on the canvas. Attributes of the drawing (like point positions) are mapped to the data fields. By setting up the right sorts of constraints (which can include complex formulas), ThingLab allowed you to model complex geometric constructions, mass-and-spring physics, and electrical circuits.
- Here is a delightful video of Borning demoing ThingLab to his Xerox lab mates.
- The constraint system in ThingLab is similar to Borning's work on the cassowary solver.
Free, Cross-Platform, GPU-Accelerated Procedural Texture Generator, heavily inpired by Adobe's Substance Designer.
A neat prototype for directly manipulating abstractions.
- Sean has a number of videos of ThoughtTalk and other prototypes on his YouTube channel, like this narrated video and this quick demo.
by Eric Lengyel
A game engine that includes some VPL editor tools: A shader editor and script editor.
Features a node-based programming environment (mainly for multimedia) that is extendable/interoperable with Python
by Dave Griffiths [Site] [Twitter]
The UAV toolkit is an experimental android application for making use of your smartphone's sensors for airborne science. Its main purpose is using visually programmed time or space based triggers to capture images with associated sensor data for further processing.
by Unity
A tool for building real-time visual effects in Unity. The tool uses GPU run compute shaders, and a node-based workflow.
- Introductory Demo Video and Blog Post
- Documentation on Github
Software modular synthesizer inspired by Eurorack hardware. Robust API with many third-party plugins. Modules connect with patch cables that carry floating point voltages.
by Scott Kim
It struck me as odd, and deeply wrong, that we were building tools for visual artists in a programming language that was utterly symbolic, and lacking in visual sophistication. I yearned for a programming language that had the same visual clarity that graphic user interfaces had.
A prototype "pixel editor" programming system where the pixels on the screen hold the full state of the system, created during Kim's internship at Xerox PARC in the early 1980s.
- Demo Video
- Dissertation (PDF) — There's a brief update from 2013 included near the start, summarizing Kim's more recent thoughts about visual programming and reflecting on what the Viewpoint project was intended to achieve.
by Vizor
Patches is a visual programming editor for building WebVR and WebGL experiences. With over 350 patches, ranging from low level programming, loops, variables and arrays to colour pickers and interaction triggers, Patches is a powerful and flexible modular system for building complex webVR projects. Patches is free to use, released under an MIT licence. It offers a UI to the popular Three.js library.
An experimental direct manipulation interface for turtle graphics
- This isn't a general purpose language, but it is quite neat.
- Be warned that the video on the project page might take a long time to download. You can watch it on Vimeo.
- Nicky Case made something similar, leading to a good twitter thread.
A high-performance patcher VPL for live VJ-ing, similar to vvvv, Processing, Max, and Quartz Composer.
- Here's an interesting page: How does Vuo compare to other creative coding environments? (Be sure to flip through the various tabs)
A hybrid visual/textual live-programming environment. It is designed to facilitate the handling of large media environments with physical interfaces, real-time motion graphics, audio and video that can interact with many users simultaneously.
- Wikipedia
- Creating a Simple Drawing App (with Undo!) — a very cool demo that quickly gives you a taste of data types, collections, operators, etc.
A vertical patcher VPL for microcontrollers, with a nice looking grid structure (rows with gutters)
Prototype 5 demo video: A spatial VPL that uses omnidirectional pulses to convey data and drive execution.