Node Paint

An experimental web-based drawing tool where you configure the pen by connecting nodes in a graphical programming interface.


This started as an attempt to reverse-engineer the branding for RCA Show 2019 by Regular Practice. The idea for the node-based editor comes primarily from Blender's shader editor (because I use it a lot), though the idea of Flow-Based Programming is much older than that. I'm using IBM Plex Sans, which works beautifully as an interface typeface.

It's also part of a continued exploration of visual expressions of mathematics – see Gradient Drawings from earlier this year. I like the idea that even though I only wrote a handful of different nodes (a couple of colour pickers and some basic math functions), the space of possible pens is enormous.

View the live app here (best viewed on desktop). The code is on Github.


This is also my first React app. I made a conscious decision to write this in React because building a real-world thing tends to be the best way to learn new technology for me. It probably slowed me down (especially at the start, when I was still coming to grips with JSX and the top-down dataflow), but it's worth the effort.

I didn't read much outside the official React documentation, which has to be one of the best pieces of technical writing out there. I'm convinced the quality of the onboarding process is a major reason why React is as succesful as it is.