A shape grammar derives Renaissance villa plans and facades, one rule at a time.
This is a parametric shape grammar in the spirit of Stiny and Mitchell's Palladian grammar, run in their stages: lay out a symmetric grid of bays, enclose it, carve the sala, loggia and side rooms by merging bays, put stairs in the small bays beside the sala, realign the interior walls so rooms take Palladio's favored proportions (1:1, 3:4, 2:3, 3:5, 1:root 2, 1:2), add porticos, open doors on enfilade axes and center windows on outside walls, then terminate with poche and dimensions in Vicentine feet. Every rule rewrites the left half and mirrors it, so bilateral symmetry holds by construction. Before a rule fires, the bays it matches are washed in yellow; at choice points the grammar branches. The front elevation is projected straight down from the plan, sharing its bays, window axes and columns: rusticated basement, piano nobile with alternating pediments, an Ionic portico under a pediment, and a hipped roof with chimneys.
Try it. Watch the derivation, or press Step (or the right arrow) to fire one rule at a time and pick the branch yourself at each choice point (keys 1 to 4 work too). Pause and Play control the autopilot, and Generate (or G) derives a new villa at speed.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a generator of Palladian villa floor plans with JavaScript and the HTML canvas element, driven by a simple shape grammar so each rule visibly fires in turn. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it a warm paper color and draw in dark ink.
- Represent the villa as a grid of bays: an odd number of columns with symmetric widths in feet (for example 18, 12, 30, 12, 18) and three rows. Keep a 2D array saying which room each bay belongs to.
- Write the grammar as an ordered list of rules, each a small function that changes the villa: make the center column into the sala, make the front center bay a loggia, merge pairs of side bays into rooms. Apply every change to the left half and mirror it, so the plan is always symmetric.
- Draw walls wherever two neighboring bays belong to different rooms, plus the outside walls, as thick filled rectangles. Fire one rule every second and redraw, listing the rules on the side with the current one highlighted.
Once that works, make it beautiful:
- Add doors in the middle of every shared wall, so they line up into enfilades, and windows centered on each room's outside walls.
- Add a portico of four or six columns in front of the loggia, with steps.
- Write each room's size in feet inside it, like Palladio's plates, and draw the front elevation below the plan using the same horizontal scale: a base, a row of windows on the same axes as the plan, the columns and a triangular pediment.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as choice points where the user picks the next rule, a rule that adjusts room depths to ideal proportions like 3:4 or 2:3, or a hipped roof with chimneys in the elevation.
