Node Paint


An ex­per­i­men­tal web-based draw­ing tool where you con­fig­ure the pen by con­nect­ing nodes in a graph­i­cal pro­gram­ming in­ter­face.

This started as an at­tempt to re­verse-en­gi­neer the brand­ing for RCA Show 2019 by Regular Practice. The idea for the node-based ed­i­tor comes pri­mar­ily from Blender’s shader ed­i­tor (because I use it a lot), though the idea of Flow-Based Programming is much older than that. I’m us­ing IBM Plex Sans, which works beau­ti­fully as an in­ter­face type­face.

It’s also part of a con­tin­ued ex­plo­ration of vi­sual ex­pres­sions of math­e­mat­ics — see Gradient Drawings from ear­lier this year. I like the idea that even though I only wrote a hand­ful of dif­fer­ent nodes (a cou­ple of colour pick­ers and some ba­sic math func­tions), the space of pos­si­ble pens is enor­mous.

View the live app here (best viewed on desk­top). The code is on Github.


This is also my first React app. I made a con­scious de­ci­sion to write this in React be­cause build­ing a real-world thing tends to be the best way to learn new tech­nol­ogy for me. It prob­a­bly slowed me down (especially at the start, when I was still com­ing to grips with JSX and the top-down dataflow), but it’s worth the ef­fort.

I did­n’t read much out­side the of­fi­cial React doc­u­men­ta­tion, which has to be one of the best pieces of tech­ni­cal writ­ing out there. I’m con­vinced the qual­ity of the on­board­ing process is a ma­jor rea­son why React is as suc­ces­ful as it is.