NOTES
How a Number Becomes a Street
A Japanese street drawn in SVG, grown from a seed number, and sent to a pen plotter
Type a six digit number and get a street. Type the same number tomorrow and get the same street. That is the whole idea behind Machinami, a Japanese shopfront street that never ends, never repeats, and can be drawn on paper by a pen plotter.
It started with two things I could not stop looking at. A short video by bodam.sketch, who draws a taiyaki shop in ink and flat color until it looks lit from inside. And a small open source project by LingDong-, shan-shui-inf, which builds an endless Chinese ink landscape from nothing but code and vector shapes. I wanted to know if the second could make the first. Then I wanted to know if a pen could draw the result.
The name is 町並み, machinami. It means the look of a row of buildings along a street.
Project objectives
Four goals shaped it.
The street should never end and never repeat. Scroll as far as you like in either direction and there is always more.
Every street should come from a number. A number is easy to share, easy to return to, and easy to hand to a plotter again. If a street is good, you should be able to keep it by writing six digits on a card.
It should look drawn, not computed. Generated art usually looks generated. The lines are too straight and the colors too clean. The reference is warm because it is slightly wrong in all the right places.
And it should leave the screen. A drawing that only exists in a browser is half a drawing. The street had to come out of a plotter as a real object.
Three rules made that possible. No images, only vectors. One file that runs in a browser with nothing to install. And every part of the street is made by a function that remembers nothing, so any piece can be made again without the others.
Why SVG
Everything on screen is a path. A path is a list of points and a color, nothing more. A roof is a few dozen of them. A cherry tree is a hundred. There are no sprites and no photographs. That has three consequences.
The drawing scales. The same street fills a phone or a poster with no loss.
The drawing is data. Every line is an object on the page that code can read back. This mattered more than anything else, because it means the thing on the screen can also be the plotter's source file.
And it is light enough to be endless. The page only builds what is near the view. A building is about 54 KB of path data and roughly 330 drawn elements, and about a dozen exist at a time. Walk right and new ones are made ahead of you while the ones behind are thrown away. I borrowed that idea from shan-shui-inf, which builds its scroll in chunks the same way.
The street also has layers that move at different speeds. Mountain ridges drift at a tenth of your pace, far rooftops at about four tenths, and everything in front moves with you. It is the cheapest depth trick there is, and it works.
The seed
The street number is a seed. The browser picks one at random between 100000 and 999999. You can type any number from 1 to 999999, or put it in the address after a hash, like machinami-v1.html#100140.
Every building gets its own seed, made from that number and its position along the street.
buildingSeed = streetNumber × 100003 + position × 7919 + 17
That one line does most of the work. A building depends only on the street number and where it stands. It knows nothing about its neighbors, so buildings can be made in any order, left or right, forever. Generate positions 0 to 5 forward, then backward, and the six drawings are identical.
The same trick runs through the rest of the street. The ground, the trees and the telephone poles are made in wide chunks with their own seeds. A pole has to know where the next pole is so the wires can reach it. Instead of making the next chunk, each chunk asks a small function where its neighbor's pole will stand, and the function needs only the number. The mountain ridges are a smooth noise function of distance along the street, so they join across chunk edges without a seam.
Two small tools sit under all of it. A random number generator called mulberry32, which turns a seed into a stream of repeatable numbers. And value noise, a smooth random curve that drives every wobble.
There is one catch. A seed only means something for one version of the code. The generator draws its random numbers in order, so adding a single new decision shifts every number after it and every street changes. That is not a bug. It is how any seeded generator works. During the build I changed the generator many times, and each change reshuffled every street. It is why the version on this site is numbered, and why old versions will stay up under their own names.
One building
Here is what a seed decides for a single building.
First, what it is. Roughly three in ten are shops. A little over two in ten are restaurants, and two in ten are private houses. Bathhouses, storehouses and small shrines make up about one in ten each. Everything after that follows from the kind.
Then its body. A width between 122 and 176 units. Two floors, or one time in five, three. A roof height. A side wall that recedes to the right in about two thirds of buildings. A gap to the next one. Then a palette. The roof is one of a short list of blue greys, the timber an ochre, the plaster a warm white. The wave pattern on the roof and window panels comes from one of four colorways.
Then its parts. The ground floor is split into three zones in a random order: a slatted wall, an open counter, a sliding door. The upper floor is a row of bays, each a window, a patterned panel, a balcony or plain plaster. A shop name is picked from a list and written on the curtain. A sign hangs out front, either a paper lantern or a corner board. On about one shop in sixteen it is a big red sea bream, a nod to the taiyaki shop in the reference.
The other kinds use the same skeleton with different parts. A restaurant gets lit windows, red lanterns and a banner on a pole. A house gets a wooden lattice front and a small nameplate with a family name. A storehouse gets a grid of white tiles over black plaster and a heavy studded door. The bathhouse gets a curved gable over the entrance and a brick chimney that smokes. The shrine is its own small drawing: cedar trees, a hall with a green roof, stone lanterns and a red gate.
What stands in front is a separate layer with its own seeds. A cherry tree stands in front of about six in every ten stretches of street. There are vending machines, and small stone statues of Jizo in red bibs.
Style
Three techniques make the code look drawn.
The first is wobble. No line in the street is straight. Each one is cut into segments about ten units long, and every point is pushed sideways by a small amount of smooth noise. The ends overshoot by up to two units, the way a pen does before it lifts.
The second is misregistration. Every fill is a flat color, shifted off its outline by a unit or two, with the corners nudged and the lightness varied by a few percent. Woodblock printers did not choose this. Their blocks never lined up exactly, and the prints are better for it. The reference video has the same look, color sliding slightly off the ink. Of everything in the project, this cost the least code and changed the most.
The third is the palette. I kept to traditional pigments: sumi ink, indigo, vermilion, ochre and a pale celadon green, on warm washi paper. The sky is a dawn gradient in the manner of bokashi, the soft shading of a woodblock print. A fine grain over everything makes it paper. The patterns on the roofs and windows are seigaiha, the overlapping wave motif, and the storehouses wear namako tiles.
From screen to pen
A screen drawing lies to a pen plotter. On screen a shop hides the mountain behind it. A pen has no such manners. It draws every line, including the ones that should be hidden, and it cannot fill anything.
So the plotter export is a second program. It reads the drawing back from the page and rebuilds it for a pen.
It starts by flattening every path, lines, curves and arcs, into plain polylines in page coordinates. Then it removes hidden lines. It works in painter's order: each stroke is cut wherever a shape drawn after it covers it. The cut is plain geometry, a stroke against a polygon, with a grid of cells so each line only checks the shapes near it. A full view takes well under a second.
Next comes shading. A pen cannot fill, so dark areas are hatched at forty five degrees, closer together where the color is darker. The darkest get a line every millimeter, mid tones a line every three and a half. Pale areas get nothing. The pen color follows the hue: indigo for the blue greys, vermilion for the reds and pinks, black for the rest. Trees and poles can be set to outlines only, so a cherry tree reads as a cloud of scalloped shapes in red.
Then the layout. The drawing is placed in millimeters on Letter, A4, Tabloid or A3 paper, cropped to fill the page or fitted whole. Last, the strokes are sorted so the pen takes the shortest way between them. On one test street that cut the pen-up travel from about thirty meters to under seven.
The file comes out as one layer per pen, named 1 black, 2 indigo and 3 vermilion. The names matter. AxiDraw's software only treats a layer as a layer if its name starts with a number, and that is what lets it plot one pen at a time while you swap. A typical street is around three thousand strokes and twenty to twenty five meters of line.
The page does not talk to the plotter directly. It writes the file, and it writes the exact commands to run in AxiDraw's own command line tool. There is also an experimental direct connection over Web Serial, which speaks to the AxiDraw's controller board straight from Chrome.
I should be plain about where this stops. No street has been drawn on paper yet. What has been checked is everything up to the pen: the hidden line removal, the hatching, the layer naming, the millimeter layout and the travel sort all produce the file they are supposed to produce, and the direct connection has been run against a simulated controller board, where strokes landed at the right length, the carriage returned home, the step rates stayed in range, and Stop and the pen height check both worked. None of that is the same as ink on washi. The axicli route, which hands the file to AxiDraw's own software, is the one I would trust first. A real plot, with a photo, is the next thing to happen here.
What broke
The first plot file was wrong in a way I could not see on screen. A screen shows the result of the fills. The pen needs the lines. Everything about the export grew from that gap.
The first instructions I wrote for the plotter failed on a real Mac. On a Mac the command is python3, not python. The install put the tool in a folder the shell could not find. And a comment pasted into a terminal is not a comment, it is a command, and it fails. I fixed all three. A project like this has two prototypes: the thing, and the instructions for the thing. Instructions you have not run are a guess.
A sandboxed frame cannot reach a USB device. The preview I built the app in blocked the direct connection outright. The frame on the project page is granted serial permission explicitly, so in principle it should get through, but I have not confirmed that against a real board from inside the frame, and a browser is entitled to refuse a device picker to a framed page whatever the permission says. If you want to plot, open the street full screen. That is the path the instructions are written for.
And seeds are fragile, as above. A number is a promise only to one version.
What held
The number held up as a unit of authorship. It is small enough to say aloud and complete enough to rebuild a street. I did not expect to enjoy a six digit number as much as I do. Most of the streets have never been seen by anyone.
I built it in a long conversation with Claude, which wrote the code while I steered the look and ran every command on my own machine. The taste is mine. The bookkeeping was not.
Next is paper. Three pens, a few good streets, and a proper first plot. After that, a night version where the lit windows come from the seed too.
Streets to visit
Each of these is a link to the version on this site. They were chosen by searching for streets with something specific in them, so each one holds what it says.
100140 has a bathhouse, a storehouse, a shrine, a restaurant and houses in one view, with a cherry tree in front. 100091 has two bathhouses and two shrines. 100105 has four lantern restaurants in the opening view. 100119 is three houses in a row, nameplates and all. 100168 has three storehouses. 429958 is a quiet street of houses with a cherry tree and a vending machine. 119901 is a street of shrines under blossom.
Luke Paxton. Square Mile Design, October 2026.