The interface above serves as a proof of concept for using interfaces to study architectural designs. In this case we have a linear form composed of a rotated panel system. This system has 11 unique panels, but when presenting the final form as a digital model, the efficiency of the system is not immediately clear.With conventional plans and sections, we’re able to provide levels of abstraction to allow one to study the model. The array of sections below offers one example for studying the geometry as a static image:
Another method, and arguably a more effective one, is to create a hybrid section to study how the overall system is formed:
But suppose we want to study a particular panel on the system: say the largest panel or the panel which represents the inflection point of rotation. To understand the connections between these panels, it’s also necessary to study adjacent sections. We want to select the particular panel for study, highlight it with a bolder lineweight, and also have control over the number of adjacent panels we can view.With this in mind, we can look towards interactivity (this is what the sliders are controlling in the interface above). To keep the workflow fluid, we export our Grasshopper data to a spreadsheet or database and recall the values interactively with D3JS*.
To create the perspective views above, one can use a Grasshopper definition to execute something similar to the “Make2D” command in Rhino. Lines are created between curve control points and the camera. These lines are then intersected by a rectangle in front of the camera on a parallel plane. By evaluating the surface uv intersection of each line with the rectangle, one can export each control point value to a spreadsheet and then recall those values in D3JS by using an SVG Container of the same aspect ratio.By using the transition() call in D3JS, there is very little work required for animating between views. The Grasshopper definition is run to export the curve values for each view, and D3JS will apply transitions when the data is changed.