[pageview url=”http://lmnarchitects.com/tech-studio/wp-content/uploads/sites/4/2014/01/D3_Sk/Concept-ob.html” width=”600px” border=”no”]
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:
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.
When clicking the buttons in the interface at the top of this post, are you able to perceive of the change in camera? While object constancy is a hot topic in data visualization, it can also be applied to rationalizing architectural forms for design, presentation, and fabrication. Upon transition between views, you’ll notice that the camera is not moving. The geometry is instead twisting and contorting so that each curve reaches its new destination. With these transitions, it’s interesting to consider the similarities between basic graph types and architectural objects. By preserving object constancy, one can still perceive of the transition of a perspective view without having to see a key in an orthographic drawing.
We’re looking forward to getting deeper into this topic, and now that we can quickly export SVG to a browser using Grasshopper and D3JS, we plan to release a script soon to do this on a generic level.