In the ever-evolving world of architectural design, balancing various urban constraints such as footprint, height, and open space, can be challenging. To address this, I developed an interactive web-based sandbox that integrates parametric design principles using Grasshopper, Vue.js, and Three.js. This tool enables designers to explore different configurations dynamically, adjusting parameters like building height and density in real time.
Concept & Goals
The primary objective of this educational tool is to provide architects with a hands-on way to manipulate urban constraints without diving into complex scripts. By utilizing parametric design, users can explore multiple design scenarios, visualize results instantly, and make informed decisions.
Key Features:
Interactive help messages guiding users
- Real-time updates with dropdown selectors for building height and footprint
- Camera controls for better understanding of scene
- Dynamic geometry generation using Grasshopper
- Web-based visualization powered by Three.js
- Interactive help messages guiding users
Workflow Overview
The web app consists of 3 core components:
- Grasshopper Definition Handles the parametric modeling logic.
- Vue.js Interface Manages user input and UI interactions.
- Three.js Renderer Displays the resulting geometry dynamically.
Grasshopper Definition
The logic behind the web app is powered by a Grasshopper definition that processes inputs and generates corresponding geometries using Rhino.Compute remotely on a server. Grasshopper dynamically computes geometry based on:
- Input parameters: 3 heights, 3 density
- Manipulated points (used as placement markers)
Implementing the Web Interface
The Vue.js framework handles UI interactions and communicates with the Grasshopper model. Below is a simplified example of how parameters are updated when the user selects a different option from the dropdown:
The updateValue function ensures that changes in the dropdown are properly registered and passed to Grasshopper:
Metadata
Metadata plays a crucial role in this tool, providing insights into each generated configuration. By analyzing metadata highlighted in the console in the web browser (image below), users can understand key parameters such as:
- Total working area
- Built footprint
- Maximum number of floors
- Nature vs. built environment ratio
- Interactive help message
Conclusion
This web-based tool demonstrates how parametric design can be leveraged for architectural decision-making in an interactive and intuitive way. By combining multiple technologies, such as Vue.js, Three.js, Rhino Compute, Grasshopper, Rhino, HTML, CSS, and JavaScript, users can explore urban constraints dynamically and efficiently on the web.
The project also emphasizes the concept of Geometry as a Service, bringing parametric design directly to the web. With the integration of GitHub and VSCode, the development process remains streamlined and collaborative.
Have a look at the live web app here: https://datamgmt25.iaac.net/
