Masterplan AI Sketch
Collaborators: Jin Gao, Sayjel Patel
From Sketch to Design: A Cross-scale Workflow
Abstract
Urban designers think with symbols and sketches, but many generative tools still rely on numeric sliders and opaque “black-box” pipelines—making outcomes hard to steer and hard to explain. This paper proposes a cross-scale workflow and a web-based interactive prototype that converts hand-drawn symbolic inputs into controllable procedural generation.
The system (1) defines a compact symbol vocabulary from a user study, (2) recognizes sketches with lightweight gesture recognition, (3) translates symbols into attractors and parameters over a multi-dimensional grid, and (4) generates street networks as streamlines in tensor fields (grid/radial blends), producing structured layouts that remain adaptive to context constraints such as coastlines/terrain. The workflow then extends from urban massing to potential block/building-scale refinement by exporting to downstream architectural generative tools.
Contributions: a review of generative urban modeling + HCI approaches, a concrete symbol-driven methodology for controllable generation, and a prototype implementation (JavaScript/React + Three.js) with case-study evaluation.
Methodology
The research proposes a cross-scale workflow for generative urban design. The workflow takes the user’s intuitive ideas and context information as input, generates urban design scale massing, and then zooms into a plot to perform architectural scale massing design and room division.
Both the urban scale data (proximity, accessibility, porosity, FAR) and architectural scale data (floor area, structure, material usage, and energy efficiency) are evaluated through a comprehensive analysis process.
Prototyping and Implementation
The prototype is a web application consisting of three main components: a generation engine running at the backend, a render engine powered by Three.js to visualize the generated models, and a React-based frontend framework for user interaction.
Information is interchanged through inner APIs in the format of JSON objects, ensuring a seamless flow from sketch to 3D representation.
The algorithm finds street networks as streamlines within tensor fields. The street network is then divided into two hierarchies: major and minor roads. The hierarchy is defined by the distance and numbers between streamlines.
Interactive Demonstration
Below are the dynamic recordings of the prototype in action, showing the real-time translation of hand sketches into complex urban forms.
3D Massing Generation
The 3D massing is further defined by a grid system that incorporates various weighted parameters based on user inputs and surrounding contexts.
For instance, a "star" shape is interpreted as representing a "central area", influencing the density and program score of the grid parameters around its central point.
Real-world Use Cases
The tool stresses interactivity, which is fundamental in fitting the actual needs of designers. It allows for a seamless transition from urban-scale design to detailed architectural design, providing a cross-platform, interactive user interface for rapid conceptualization.
