Intro

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.

*(not to be confused with node.js)

Nodes was created and developed by Nick Nikolov and Marcin Ignac between 2017 and 2019 inside Variable. Even as the very nature of the tool is to experiment and explore new ways to play with code and data, Nodes has been used in several production-grade projects and tested in various real-world scenarios. We've used it to create realtime 3D graphics installations, explore and visualise data, experiment with AI and export results in various formats like images for print, videos for social media, 3D models for mobile AR and data files for further processing.

On this page we are going to explain our motivations, the evolution and the current state of Nodes and how it changed our approach to creative coding.

Quick primer on visual programming

Here’s a very quick primer if you’re a programmer but you’ve never heard of visual or node-based programming. In some tools, the actual programming language is visual, instead of writing text you construct your program visually. Think Scratch, or a modern take like Luna (which technically has a dual nature – visual and textual).

Scratch

Luna

Most of the popular visual programming tools today however use the visual interface as an abstraction one level above textual code. Usually, instead of files you have 2D representations of your program. Very often they are rectangles of some form, connected by wires of some form. Just like most programming languages have similar syntax (for loops and class constructs), visual tools generally tend to be rectangles wired up together representing data flows. This makes them very popular in areas like visual effects programming, real-time graphics, data-processing pipelines, procedural architecture and so on.

Houdini

These days, neural networks is another area where computational graphs tend to be visualised with nodes and wires.

Netron

Background, motivations and inspirations

At Variable – our data visualisation and generative design studio – we are programmers first and foremost. But each of us has their own unique background: interaction and graphic design, real-time graphics, new media art, music production etc. What these fields have in common is that artists rely on professional-grade, usually very visual and sophisticated software-based tools. As our main medium of expression shifted to code, we've enjoyed unparalleled creative flexibility but at the same time we traded that for our ability to “see”.