As a jumping off point, we want to create generic tools for common tasks that we predict will occur when creating these dashboards. The first tool is a generic D3JS drawer for Grasshopper which we’re releasing on this site as a demo (download at the bottom of the page). This tool allows the user to toggle a button in Grasshopper to create a D3JS view. Views can be orthogonal or perspective and are either defined by the viewport or by an optional rectangle drawn in the Rhino model.
The aim here is to make the tool simple to use for Grasshopper beginners. The tool uses a Python script (you’ll need to download python for GH, and check out some of the great new features) to create a JSON file from Grasshopper. This JSON is then read with D3JS when one loads the html file in a browser. The above video demonstrates the use of the tool with some Kangaroo studies, and here is a live version of the interface:
[pageview url=”http://lmnarchitects.com/tech-studio/wp-content/uploads/sites/4/2014/02/Kangaroo/Prototype.html” width=”600px” height=”480px” border=”no”]
This dashboard can be customized to become fully interactive, yet there are some tricky parts when dealing with changing geometry. Kangaroo was helpful in this case because the objects are maintaining a set number of curves since they are representations of the original mesh. Maintaining object constancy gets more difficult when adding or removing objects from a view, and the interface below demonstrates these transitions. The buttons iterate from curves of differing vertex counts to views with differing curve counts. Notice when moving from a larger curve count to a smaller curve count, the additional curves are removed. The Grasshopper definition needs to be set up properly to keep object constancy:
[pageview url=”http://lmnarchitects.com/tech-studio/wp-content/uploads/sites/4/2014/02/polygonDemo/Prototype.html” width=”600px” height=”320px” border=”no”]
And here’s a demo showing axons, perspectives, two point perspectives, and dashed lines:
[pageview url=”http://lmnarchitects.com/tech-studio/wp-content/uploads/sites/4/2014/02/Arch/Prototype.html” width=”600px” height=”380px” border=”no”]
And last, the video and interface which should be referenced for using the demo:
[pageview url=”http://lmnarchitects.com/tech-studio/wp-content/uploads/sites/4/2014/02/demo/Prototype.html” width=”600px” height=”500px” border=”no”]
The svg button on the browser allows the user to download the file at its current state of the interface and open it with Adobe Illustrator as a vector drawing (thanks to SVG Crowbar). This will help for parametrically controlled drawings. And while there are often standardized diagrams for projects, particularly with climate based studies, we plan on using this tool for making that workflow more efficient. This is a starting point for our interface work, but should provide ample opportunity for studying parametric models.
For an implementation of this interface with 3D models, see this post.
*This is the first version of the tool, so it currently only works with polylines. There are surely some bugs to figure out with the script, so let us know if you have any trouble getting it to run.