👋 Welcome to the ShapeDiver tutorial library!
Introduction
In this library, you will find Grasshopper definitions demonstrating various ShapeDiver features. Before you get started, here are some links that you might find helpful:
- ❓ What is ShapeDiver?
- 👤 Create an account to the platform and start exploring.
- 🦗 Download the latest version of the ShapeDiver plugin for Grasshopper.
- ⬆️ Start uploading Grasshopper definitions to your account and generate online applications instantly!
How to use the tutorials
Each definition of this library doubles as a tutorial with in-depth explanations of the various steps to get a specific plugin functionality up and running:
Browse the various sections to read a description of what each tutorial covers, and a hint about the tutorial level:
★ ☆ ☆ : Beginner
★ ★ ☆ : Intermediate
★ ★ ★ : Expert
💡 Use the navigation on the left to browse sections.
The definitions are regularly updated to the latest version of the ShapeDiver plugin and ready to be uploaded to the ShapeDiver platform, but you can of course use them to get started and start developing your own designs.
Let’s get started!
Basics
| Ref | Description | ShapeDiver links | Grasshopper definition | Level |
|---|---|---|---|---|
| 1A | Basic example without the ShapeDiver plugin | Model | Download | ★ ☆ ☆ |
| 1B | Basic example with the ShapeDiver plugin | Model | Download | ★ ☆ ☆ |
Inputs
| Ref | Resources | Description | ShapeDiver links | Grasshopper definition | Level |
|---|---|---|---|---|---|
| 2A | 📖 | Direct Text Input | Model | Download | ★ ☆ ☆ |
| 2B | 📖 🎥 | File Imports | Model | Download | ★ ☆ ☆ |
| 2C | Import document properties and User Text using ShapeDiver Attributes. | Model | Download / Input | ★ ★ ☆ | |
| 2D | 📖 | Selection Input basic tutorial | Model / App | Download | ★ ☆ ☆ |
| 2E | 📖 | Use a Selection Input to influence both geometry and build a contextual App user interface | Model / App | Download | ★ ★ ☆ |
| 2F | 📖 | Gumball Input basic tutorial | Model / App | Download | ★ ☆ ☆ |
| 2G | 📖 | Use a Gumball Input to transform geometry in the viewer and apply the transformations in Grasshopper | Model / App | Download | ★ ★ ☆ |
| 2H | 📖 | Advanced Gumball example with dynamic transformable objects. | Model / App | Download | ★ ★ ★ |
| 2I | 📖 🎥 | Points Input basic tutorial | Model / App | Download | ★ ★ ☆ |
| 2J | 📖 🎥 | Points Input with geometry constraints | Model / App | Download | ★ ★ ☆ |
Outputs
| Ref | Resources | Description | ShapeDiver links | Grasshopper definition | Level |
|---|---|---|---|---|---|
| 3A | 📖 | Export Components basic tutorial | Model | Download | ★ ☆ ☆ |
| 3B | 📖 | Use attributes to export document properties (names, layers, colors, user text…). | Model | Download | ★ ☆ ☆ |
| 3E | 📖 | Direct Data Output - Explore all supported data types. | – | Download | ★ ☆ ☆ |
| 3H | 📖 | Export multiple files using the Create Stream and Zip Streams components. | Model | Download | ★ ☆ ☆ |
Display
| Ref | Description | ShapeDiver links | Grasshopper definition | Level |
|---|---|---|---|---|
| 4A | Display Basic tutorial - Learn about the various ways to display geometry in the ShapeDiver viewer | Model | Download | ★ ☆ ☆ |
| 4B | Materials Presets | Model | Download | ★ ☆ ☆ |
Basics
| Ref | Description | ShapeDiver links | Grasshopper definition | Level |
|---|---|---|---|---|
| 5A | Introduction to Grasshopper Bitmaps | Model | Download | ★ ☆ ☆ |
| 5B | ShapeDiver Image Sampler | Model | Download | ★ ☆ ☆ |
| 5C | ShapeDiver Image to Mesh | Model | Download | ★ ☆ ☆ |
| 5D | Use the Squid plugin to generate bitmaps in Grasshopper | Model | Download | ★ ★ ☆ |
| 5Dbis | Use the Squid plugin to generate pdfs in Grasshopper | Model | Download | ★ ★ ☆ |
Basics
| Ref | Description | ShapeDiver links | Grasshopper definition | Level |
|---|---|---|---|---|
| 6 | Introduction to JSON object manipulation | – | Download | ★ ☆ ☆ |
Inputs
| Ref | Resources | Description | ShapeDiver links | Grasshopper definition | Level |
|---|---|---|---|---|---|
| 7A | 📖 | Use the ShapeDiver Output component for attribute visualization in the viewer. | Model / App | Download | ★ ☆ ☆ |
App Builder
Some examples using App Builder.
General examples
| Ref | Description | ShapeDiver links | Grasshopper definition | Level |
|---|---|---|---|---|
| 11A | Build a static user interface | Model / App | Download | ★ ☆ ☆ |
| 11B | Use parametric logic to build a contextual interface | Model / App | Download / Input | ★ ☆ ☆ |
| 11C | Link Export components to image widgets in your apps. | Model / App | Download / Input | ★ ★ ☆ |
| 11D | Define charts and graphs | Model / App | Download | ★ ★ ★ |
Interaction inputs in App Builder
| Ref | Resources | Description | ShapeDiver model | Grasshopper definition | Level |
|---|---|---|---|---|---|
| 2D | 📖 | Selection Input basic tutorial | Model / App | Download | ★ ☆ ☆ |
| 2E | 📖 | Use a Selection Input to influence both geometry and build a contextual App user interface | Model / App | Download | ★ ★ ☆ |
| 2F | 📖 | Gumball Input basic tutorial | Model / App | Download | ★ ☆ ☆ |
| 2G | 📖 | Use a Gumball Input to transform geometry in the viewer and apply the transformations in Grasshopper | Model / App | Download | ★ ★ ☆ |
| 2H | 📖 | Advanced Gumball example with dynamic transformable objects. | Model / App | Download | ★ ★ ★ |
| 2I | 📖 🎥 | Points Input basic tutorial | Model / App | Download | ★ ★ ☆ |
| 2J | 📖 🎥 | Points Input with geometry constraints | Model / App | Download | ★ ★ ☆ |
Basics
| Tutorial | Description | ShapeDiver model | Grasshopper definition | Level |
|---|---|---|---|---|
| 2410A | 🎥 Fall ’24 Update: Barcelona Neighbourhood Analysis (Interactions components and Dynamic Parameters) | Model / App | Download | ★ ★ ☆ |
| 2410B | 🎥 Fall ’24 Update: Modular cabinets configurator (Interactions components and Dynamic Parameters) | Model / App | Download | ★ ★ ★ |
| 2503A | 🎥 Spring ’25 Update: Speckle pavillion | Model / App | Download | ★ ★ ☆ |
| 2503B | 🎥 Spring ’25 Update: Shopify workflow | Model / App | Download | ★ ★ ☆ |
Beta features
The features showcased in the following models are already available in App Builder but the corresponding Grasshopper components are not yet available in the plugin. Instead, the features are included using prototype JSON objects.
Note that the final components and component flow might differ from the current JSON version of these definitions.
Some of the examples below make use of the JSwan Grasshopper plugin (version 1.1.0).