Design Studies / Drawing with Code
Drawing a Barn with Code
A hand-drawn-looking axonometric that is entirely code, taken from one canvas to a 20-second film. A quick test of how I pick up a technique and try it on our own work.
drawn by codeExperimentPersonal R&D
It started with a post on X: @mannay shared geodesic domes on drafting-paper sheets, all generated by code. I wanted to know how, so I tried it on one of our own building types: a timber-and-steel longhouse barn with a PV roof, a greenhouse, raised beds and a few hens.
Everything is drawn onto a single web canvas in plain JavaScript, with no libraries: the building, the wobbly pencil lines, the watercolour washes, the paper grain and the title block.
1Canvas
0Libraries
20sFilm, built from the same code
How it works
A model, a pencil and a sheet
- A real model. The barn is built in 3D, in metres, then flattened to an isometric view. Lifting the roof for the exploded view just means drawing it higher.
- An imperfect pencil. No line is straight. Each is drawn twice, with a slight overshoot, drift and bow, so it reads like a hand drawing rather than CAD.
- A proper sheet. Grid, grain, stains, title block, legend, scale bar and dimensions. The legend counts come from the model itself.
- A film. HyperFrames, an open-source tool from HeyGen, turns the page into video. Every stroke gets its own moment, so the drawing builds itself: site, slab, posts, frames, roof, PV, stamp.
Try it
Draw your own
Type any word and press Draw: it reshuffles the layout, from the number of bays to where the trees and hens go. Right-click to save the drawing.
How I test things
From someone else’s post to our own work
01
Spot a technique
A reference that raises a question: how was this made, and could it work for us?
02
Rebuild it on our brief
Not a copy, but a building type we design, with real dimensions, materials and site.
03
Push it further
Turn the drawing into a film, which exposes what the still version hid.
04
Decide what’s next
Keep what’s useful, name what isn’t working yet, and set the next test.
What I’m learning next
The drawings are charming, but different runs still look much the same: the style is fixed in the code. The next test is whether that style can be honed and steered, by extending our branding guidelines and style DNA into rules the code can follow, so it produces “art” that is recognisably ours rather than one generic look.