WAVY / TALLI / SMALLI : a Design System Vase Sets

During this quarter, I collaborated with my partner Nicole to create a series of vases that she designed. We implemented each vase in Rhino and Grasshopper, but did not use parametric design.

For this project, I started with this trio of designed vases to develop a parametric design system that allows the user to design a set of three vases.

The final system has a set of UI controls that allow the user to explore a high-level parameter space. Changes to each UI control can result in multiple changes to multiple vases in the trio.

By considering a trio of vases instead of a single vase, I seek to implement a parametric design space that affords end users the ability to quickly design multiple vases that are beautiful and functional individually and as a set.

Step 1: The Vases

For each vase, we started with a curve, either implemented in Rhino from a sketch, or imported as an SVG. Nicole created the curves for Talli and Smalli in a design program called Sketch and exported them as SVG. To implement the 3D geometry, we brought the curve into Grasshopper and constructed simple data flows using offset, extrude, and difference/union operations.

Nicole and I first created what we call "Wavy" vase. Its form was inspired by a perfume packaging box.

Upon completion of Wavy Vase, and satisfaction of using it to decorate our home, Nicole hatched the idea of creating a set of vases inspired by Ikebana.

She then designed the "Talli" vase, inspired by Roman pillars. Most recently, she designed the "Smalli" vase, with its rounded half-moon form designed to complement Wavy and Talli.

Step 2: Starting With Size Relationships

In the design process, we have been inspired by how Ikebana traditions have formalized relationships between sizes of branches/stems into strict rules.

While original ideas for the project involved codifying these rules directly into the design system, I decided instead to codify the concept of rules-based constraints, which allows for more creative freedom in constructing the parametric design space.

So instead of digging through Ikebana literature, I inspected Nicole's designs to motivate system constraints.

While the Moribana school uses a 2/3 ratio for cascading height calculations, Nicole decided on a 3/4 ratio for calculating heights.

As for widths, the Talli vase is 3/4 the width of Wavy, and the Smalli vase is 2/3 the width of Wavy.

Step 3: Normalize the Curves

In order to apply site relationship rules to the vase, sizes of the curves needed to be normalized in one project.

Since the Wavy vase was the starting point, I chose its width as the base width.

After resizing the Talli and Small curves to this base width of 110mm, I brought in the Wavy grasshopper code and created a cluster.

At this point, I had height, wallthickness, and depth as my system-level parameters.

Additionally, I added a Vase Position parameter that moves the final geometry along the X axis.

Step 4: Talli / Smalli Clusters

Once I added the Talli grasshopper cluster, I was able to duplicate the cluster and use it to generate the Smalli vase. Clusters were a new concept to me, so it was nice to see that they are automatically linked so that changes are propagated automatically-- this made my Grasshopper development significantly easier.

Step 5: Hoisting and Abstracting Parameters

Once the clusters were all in place, I was ready to start hoisting parameters from the individual level up to the system level. The first parameters to address was height. I created a python script object that took one max-height value in as input along with a height ratio and calculated resulting heights for each vase in the trio:

talli_height = maxHeight;
wavy_height = maxHeight * height_ratio;
smalli_height = wavy_height * height_ratio;

Moving wall thickness up to the system level was straightforward.

Controlling width in the system took some experimenting to figure out a solution. Initially, I attempted using area of the wavy vase: width * depth * some_scaling_factor. My initial tests down this path seemed unfruitful, so I again returned to the designed objects. I know that Nicole was most concerned with the width of Talli and Smalli having a certain relation to the Wavy vase, so I decided to make this relationship a parameter in the system, and only use Wavy vase width as the input.

For these mappings, I diverge from Nicole's designs.

talli_diameter = wavy_width * width_ratio;
smalli_diameter = talli_diameter * 0.95;

My motivation here was to simplify the UI by only having one width_ratio parameter. While this design decision maintains a structural balance in that the Talli and Smalli vases will always be nearly the same diameter/width and therefore provide some balance to the Wavy vase, this design also significantly constraints the output space.

Step 6: Curve Filtering With RebuildCrv

Once height and width relationships were codified in the system, I wanted to explore ways of modifying the input curve that was used to generate the 3D geometry.

My first attempt was to explore tweening between curves. In the video above, you can see the result of tweening between Talli and Smalli curves. There are interesting possibilities with this direction, but it requires having more than three base curves to work with.

My second attempt was to use smoothing. While looking for a smoothing object in Grasshopper, I found this RebuildCrv object, that attempts to rebuild a curve using a specified number of segments. To me, this resonated as a resolution slider. As a bonus, the object also has a smoothing degree input.

In the second video above, you can see the possibilities enabled by having these global resolution and smoothing sliders exposed at the system UI level.