Capturing And Visualising Parametric Design Flow Through Interactive Web Versioning Snapshots

Abstract

Design can be described as an exploration of options diverging and converging towards a final result. In the digital realm this process usually happens by copying a design file and continuing to make modifications, creating additional new or different files for different designs. However often design files are simply overwritten and hence the history of how a certain design is established is gone. Hence design flow exploration is rarely tracked systematically. This is an issue when designers what to retrieve a previous design or we want to learn about the development process after the fact. In this work, a workflow tool for familiar users of Grasshopper and Karamba to enable parametric structures to be tracked in a similar way to Git and Github. A custom plugin for Grasshopper allows the user to save/'push' the current design state as a 3D model and parametric information together with additional model data, values and notes to the cloud with a single action. Using this, a designer can choose intermittently to save the state he/she found important to be recorded. A branching mechanism is also developed to accommodate different designs a project could have. All recorded options and data is visualised in a graph/flow like manner and can be explored through a web. We foresee this tool to help understanding the flow of design exploration better in a project and serving as a clearer communication channel across different actors in the team.

Full text

Published in: Proceedings of the IASS Annual Symposium 2017
“Interfaces: architecture . engineering . science”
September 25 - 28th, 2017, Hamburg, Germany
Annette Bögle, Manfred Grohmann (eds.)
Copyright © 2017 by Verina Cristie and Sam Conrad Joyce
Capturing And Visualising Parametric Design Flow Through
Interactive Web Versioning Snapshots
Verina CRISTIE*, Sam C. JOYCEa
* Singapore University of Technology and Design
8 Somapah Road Singapore S487372
verina_cristie@mymail.sutd.edu.sg
a Singapore University of Technology and Design
Abstract
Design can be described as an exploration of options diverging and converging towards a final
result. In the digital realm this process usually happens by copying a design file and continuing
to make modifications, creating additional new or different files for different designs. However
often design files are simply overwritten and hence the history of how a certain design is
established is gone. Hence design flow exploration is rarely tracked systematically. This is an
issue when designers what to retrieve a previous design or we want to learn about the
development process after the fact. In this work, a workflow tool for familiar users of
Grasshopper and Karamba to enable parametric structures to be tracked in a similar way to Git
and Github. A custom plugin for Grasshopper allows the user to save/’push’ the current design
state as a 3D model and parametric information together with additional model data, values and
notes to the cloud with a single action. Using this, a designer can choose intermittently to save
the state he/she found important to be recorded. A branching mechanism is also developed to
accommodate different designs a project could have. All recorded options and data is visualised
in a graph/flow like manner and can be explored through a web. We foresee this tool to help
understanding the flow of design exploration better in a project and serving as a clearer
communication channel across different actors in the team.
Keywords: Conceptual design, version control, design exploration, dashboard
1. Introduction
Exploration via constant iteration, modification and refinement is the core of any design
process. In the recent years, we have seen more works are being developed to understand the
flow of iteration of exploration and refinements by managing the alternatives. Erhan et. al.
(2014) [1] developed a tool to manage multiple design alternatives, allowing users to create
designs through in-built sketching tool and to compare it against one another. Terry et. al (2015)
[2] developed a system to manage design alternatives together with in-built generative system
to produce designs. Tsunoda and Sakai (2015) [3] brought the idea of exploring alternatives to
the crowd and created a web application for people to create their 3D house design using
WebGL (Web Graphics Library) platform. In showing the flow of the design from one iteration
to another iteration, a tree diagram is created adopting parent-branch paradigm much like the
process in Github [4]; a software code repository platform where differences are tracked from
one version to another.

2
Similarly, [5] and [6] have also explored the paradigm of change tracking, branching and
versioning in the field of engineering and parametric design. Both mentioned the usefulness of
versioning and merging especially in collaborative practice. In revising user interface, for
example, changes are tracked, and annotations and alternatives are displayed [7].
In addition to a versioning mechanism, it is useful to have multiple views and types of views
such as geometry or data values that complement each other to understand the whole design
better. Several designs can be shown altogether in a gallery like panel showing results of variety
of parameters [8][9]. In [10], we noted a Grasshopper component used for viewing and selecting
multiple design instances predominantly used for Interactive Genetic Algorithm.
With the web technology, design could also be shared easier, be it in the form of 2D or 3D. A
design gallery system has been developed [11] to share design from Grasshopper to the web
upon click in 2D image and its parameter information. Examples such as [12] and [13]
demonstrated how a 3D parametric mesh model from Grasshopper could be shared online real-
time and audience can interact with it for an effective presentation. In [14] a mechanism is
created for transferring data between different software through the web such that
computational designer, technical director, architect, consultant engineer, project manager, and
BIM manager can collaborate seamlessly.
In this work, we created an interactive snapshot tool in Grasshopper that will also work with
Karamba to capture design state in parametric structure design. Taking account of having
versioning system, multiple views, and interactivity and connectivity (harnessing web
technology), design flow of a project is now to be explored with a clearer understanding and
inviting an ease of collaboration.
2. System Architecture
There are two main components of the work developed in this paper: (1) Client component
where designers use a custom grasshopper component to record the design state (design
snapshot) and send it over the web, (2) Server component – the system which manages project
repositories and is able to receive version data sent by the client, but one which is also able to
serve webpages where users can view their saved states.
The server was implemented in Node.js a popular open-source and cross-platform choice for
running server-side scripts in JavaScript due to its asynchronous nature which means a faster
processing and scalable web. As it can be used to run scripts before sending the webpage to
clients, webpages served are dynamic (created on request rather than static) and hence it allows
for flexibility in customising. In this work, Node.js is used to process design states data and
serve data in the versatile JSON format via web API, as well as serve html pages of the project
views via http as per user need.

3
Figure 1: Design Exploration Web Page as a tool to view design snapshots and discussion with other team
members
3. System Description
3.1. Grasshopper Plugin Script
Using C# component of Grasshopper (GH), we created a protocol that will send the current
components in the document to the server upon will (toggling of true/false button or even at
every update of the GH model). The script component will also accept a 3D mesh model input
and send the mesh model information to the server. In addition, user key in additional
information passed as values or text through the panel will also be sent.
Each time this is sent it interacts with a versioning mechanism. For every new design a GUID
is provided, but users are able to give a name and description for the design. The first save is
appended with the start index 0. Upon every subsequent save to the cloud, the script will also
create a local copy and increment the index number. Should a user choose to branch the design,
the branch toggle input is set to true. Every subsequent design process will then be saved from
this branch. Should the user want to continue the previous design, he/she can go to the local file
saved in his/her computer and continue from that file. For every successful save on the server,
the panel on GH document will print the information of the last version saved on the server.
Version history is saved in the server database for versioning integrity.
3.2. Design Flow Exploration Graph
Flow Exploration Graph works in twofold manner. Firstly, it helps a designer to understand the
wide view current and past state of the design exploration, especially in the case where many
branches are created often during the early ideation stage. Typically, each branch represents a
discrete and differential design option with a version the progression or evolution of a prior
design. As the design progress and resolves we also see the convergence and pruning of the
branches as opinions and preferences are developed. Secondly it allows a structure and way of
navigating and accessing data about individual design options by allowing each option
represented as a single data point which can be selected accessing an individual view on an
option.

4
Figure 2: Grasshopper Plugin Script with attached mesh information and notes. Data is being sent to the server
upon pressing save button.
3.2.1. Project Model Tree Generation
To save the design states in the server, MongoDB Database is used. Each collection in the
database represents a whole project, and may contain many documents as each design state
recorded from client is saved as an individual document in MongoDB. The number of
documents then represents the number of design states saved. Each design state is called a node,
with every node containing a reference to the parent node. The information of the parent is sent
together with other design information from the client. With the parent information, a tree
representing relationship between the nodes then can be maintained. This tree information is
converted to JSON format and sent to the client for visualisation on request.
3.2.2. Project Model Tree Visualisation
Once the tree information is received on the client, it can visualised using a web page view
using the D3 data visualisation library. This representation shows each model node as a point
on the tree and the ‘hereditary’ relationships shown as links on the left of a node for parents
and right as children. Figure 3 shows an example of a small project model tree, with child
models as well as branching.
3.3. WebGL 3D Model Viewer
Mesh models produced by Grasshopper can also be sent by the custom component to the server
in the format of vertices list, faces list, and vertex color list. For compatibility with WebGL they
are converted to all triangular faces. The WebGL mesh geometry data structure then will build
the vertices and faces list, while the vertex color is attached as the material. Both material and
geometry are attached as one object, and the mesh model then will be rendered into the 3D
space using a certain setting of camera and light. Using WebGL a user is then able to interact
with the 3D model to have a better understanding of the design through the browser. The user
can rotate and zoom in/out the 3D model with their mouse.

5
Figure 3: Main page showing design flow and the exploration of design
3.4. Grasshopper Document Viewer
A grasshopper document sent to the server can be visualised to support the understanding the
design. A designer can then relate how the geometric mode (mesh) is produced as the result of
the whole parametric system. A toggle is available for the user to activate each grasshopper
viewer and model viewer. Both views complements each other. A script extracts the list of
components in the grasshopper document together with the position (x,y) of the components
and the connection between the components, where each input parameter source in a component
can be traced to a parameter output in another component. Scalable Vector Graphics (SVG) is
then used to reconstruct visually the parametric system on the web, a rectangle element for each
component, and a path element for each connection.
4. Use Case Example
An example of this tool is shown using Figure 3 demonstrating the usage of this tool. An
initial model was created producing a simple UV mesh with four segments in U direction V
direction was created using GH components (uvMesh0). Kangaroo components were then
added to optimise the shape of the mesh under selfweight, these curve elements can be seen in
the next model (uvMesh1). Then a model development by adding Karamba components were
beam elements can be seen (uvMesh2). Next, the user wanted to explore the design by
changing the number of U and V components. As such, branch toggle was activated and a
branch is created. The new design with six segments in U direction and ten segments in V
direction was saved (uvMesh3). From here on, the user continues refining the number of U
and V segments (uvMesh4, uvMesh5). Each save point can be examined interactively on the
web. Figure 5 shows the progression from uvMesh0 to uvMesh2.

6
Figure 4: More information about the model is shown upon choosing an individual model. WebGL interactive
viewer (centre panel of each page) allows user to understand more of the design by viewing from different
angles. Panel on the right top of the model shows user inputted information inputted.
5. Conclusion and Future Work
In this paper, we have introduced an interactive recording and visualisation tool that is aimed
to capture and visualise parametric design flow process in Grasshopper. The benefit of using
Grasshopper is such that we do not add extra overhead for a designer to learn and use another
software to record, and Grasshopper is a system many designers use to create parametric
designs. Harnessing web technology, the snapshots can be accessed from anywhere by anyone
without having to install additional software. Other than serving as a backup place for the
designs, the web also has become an easier way of presenting to clients and point of discussion
for team members of the project. The flow visualisation, interactive model viewer and
grasshopper document viewer had been demonstrated to complement each other to understand
the flow of design.

7
Figure 5: For each snapshot sent to the server, the grasshopper document is also saved. User then can browse
through the history and observe the progress of the grasshopper model. Top-left: Original UV mesh components,
top-right: UV mesh with Kangaroo components, bottom: UV mesh with Kangaroo and Karamba components.
To ensure the restricted access of the parametric design states for the team members, a user
account system will be added to the web tool. In doing so, it will also enable multiple designers
to work on the same design project and to choose which snapshot he/she would like to continue
to work on. Another layer in the dashboard that will show all the projects within a certain team
also needed for the team to navigate between projects. In additional, we could also consider
saving the differences between design states instead of saving a full design state in the server
to save the memory space and probably a more efficient access.
This could be extended further to be used not just to passively consume data about project
model development but also to provide two ways interaction at the web level to obtain feedback
on the design, this social element could help to provide a ‘social’ level on top of the versioning
one in the same way as Github is able to support project team interaction on top of the base Git
versioning system.

8
Acknowledgements
The authors would like to thank Singapore University of Technology and Design, especially
President Graduate Scholarship fund by which this research is made possible.
References
[1] Kolarić, S., Woodbury, R. and Erhan, H., 2014, June. CAMBRIA: a tool for managing multiple
design alternatives. In Proceedings of the 2014 companion publication on Designing interactive
systems (pp. 81-84). ACM.
[2] Sakai, Y., and Tsunoda, D., 2015. Implementation of Decentralized Version Control in Collective
Design Modelling. In Modelling Behaviour (pp. 383-395). Springer International Publishing.
[3] Zaman, L., Stuerzlinger, W., Neugebauer, C., Woodbury, R., Elkhaldi, M., Shireen, N., and Terry,
M. 2015, April. Gem-ni: A system for creating and managing alternatives in generative design. In
Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems (pp.
1201-1210). ACM.
[4] Preston-Werner, T., Wanstrath, C., and Hyett, P.J., 2008. Github, accessed 12 January 2017,
<https://github.com/>
[5] Aish, R., 2000, June. Collaborative design using long transactions and ‘change merge’. In Promise
and Reality: State of the Art versus State of Practice in Computing for the Design and Planning
Process–18th eCAADe Conference Proceedings, Weimar, Germany (pp. 107-111).
[6] Burry, J., and Holzer, D., 2009, January. Sharing design space: Remote concurrent shared
parametric modeling. In Proceedings of the 27th eCAADe Conference (pp. 333-340).
[7] Hartmann, B., Follmer, S., Ricciardi, A., Cardenas, T., and Klemmer, S. R., 2010, April. D. note:
revising user interfaces through change tracking, annotations, and alternatives. In Proceedings of
the SIGCHI Conference on Human Factors in Computing Systems (pp. 493-502). ACM.
[8] Terry, M., Mynatt, E. D., Nakakoji, K., and Yamamoto, Y., 2004, April. Variation in element and
action: supporting simultaneous development of alternative solutions. In Proceedings of the
SIGCHI conference on Human factors in computing systems (pp. 711-718). ACM.
[9] Marks, J., Andalman, B., Beardsley, P.A., Freeman, W., Gibson, S., Hodgins, J., Kang, T., Mirtich,
B., Pfister, H., Ruml, W. and Ryall, K., 1997, August. Design galleries: A general approach to
setting parameters for computer graphics and animation. In Proceedings of the 24th annual
conference on Computer graphics and interactive techniques (pp. 389-400). ACM Press/Addison-
Wesley Publishing Co.
[10] Harding, J., 2016. Design Space, accessed 2 February 2017,
<https://github.com/johnharding/DesignSpace>
[11] Mohiuddin A., Woodbury R., Cichy M., Mueller V., and Ashtari N. 2016, December. A design
gallery system. Elsevier preprint, accessed 6 July 2017,
<https://www.academia.edu/31759296/A_Design_Gallery_System>
[12] Core Studio, 2014. Platypus, accessed 2 February 2017,
<http://www.food4rhino.com/app/platypus>
[13] Stefanescu, D. A., 2015. Speckle, accessed 2 February 2017, <https://speckle.works/>
[14] Flux, accessed 2 February 2017, <https://flux.io/>