For the third installment of YCAM’s Guest Researcher Project, I was invited by YCAM Interlab to participate in a three-month research and development residency from December 2015 to February 2016. My work spans visual spatial design, fluid user interfaces, software engineering, and digital fabrication. Prior to my time at YCAM, I spent 2014 as an Artist-in-Residence at Autodesk, where I explored generative and parametric approaches to designing new forms and fabricating them.

Inspired by beautiful forms and influenced by online 3D printing repositories like Thingiverse, as well as co-design tools such as Nervous System’s Cell Cycle, I became deeply interested in democratizing 3D form design. I wanted to reduce the barriers to entry and address the challenges of designing for digital fabrication. During my residency at YCAM, I extended this research by focusing on creating web applications and interfaces that envision what the future of generative and parametric form (co)design could look like.

As part of this exploration, I developed eight JavaScript libraries to facilitate computational design applications in the browser and beyond. Additionally, I created two applications, “Hello World” and “Vase,” to demonstrate how these libraries can be integrated to build interfaces for exploring and co-designing forms. This work allows others to approach computational and generative form design in a way that is immediate, visual, and intuitive.

With these tools, a designer can create parametric forms that adhere to constraints such as material properties and aesthetics, while exposing parameters for users to adjust based on their needs—enabling the creation of thousands of variations. Users can then share these designs for feedback and further customization, bypassing the traditional prototyping process, which is often slow and time-consuming.

By increasing the range of possibilities, providing more time for iteration, and incorporating real-time collaborative feedback loops, we can rapidly prototype forms at an unprecedented speed—especially with the rise of low-cost, high-speed, and widely accessible 3D printing technologies.

The eight JavaScript libraries I developed—cga.js, lgp.js, mda.js, gaf.js, guf.js, sps.js, nsc.js, and mhf.js—were inspired by the Unix philosophy of minimalism and modularity, allowing them to be used independently or together as a cohesive toolkit. Each library addresses a specific challenge in the creation, manipulation, visualization, and exporting of 3D forms and 2D paths within a web application. They are designed to bring computational and parametric modeling to the web, supporting functionalities such as G-code generation, CNC machining, tool path creation, laser cutting paths, robotic motion planning, and more.

The tutorial below demonstrates how to use some of these libraries and highlights their capabilities.

cga.js is a collection of fundamental computational geometry algorithms. It includes algorithms such as convex hull calculation, line intersection, triangulation, and polygon expansion, along with many smaller algorithms found in Computational Geometry in C by Joseph O’Rourke. cga.js is designed to serve as the mathematical backbone for a variety of complex geometric modeling and manipulation operations.

mda.js is a JavaScript library that implements a half-edge mesh data structure, along with a collection of algorithms for mesh operations such as smoothing, subdivision, extrusion, and more. It also includes functions for mesh property queries and integrity checks. mda.js aims to be a core data structure for enabling the modeling and manipulation of complex three-dimensional shapes.

sps.js (Super Particle System) is a library for simulating particles and springs on the CPU. In addition to core components like particles, springs, and angular springs, it offers extensible behaviors (forces such as vortex, attraction, homing, damping) and physics solvers (Euler, Runge-Kutta, and Verlet). sps.js aspires to be the particle simulation engine for a wide range of generative and computational design approaches.

lgp.js, also known as “Let’s Get Printing,” is a collection of functions for reading and writing popular 3D printing file formats such as OBJ and STL. It also supports exporting images and SVG paths for laser etching and cutting. With its built-in file reader and writer, lgp.js simplifies file handling and can be extended to support additional formats based on the examples provided in the repository.

guf.js (Geometry Utility Functions) is a small library focused on calculating geometric properties of meshes. Its primary feature is normal calculation (both face and vertex normals), making it an essential tool for ensuring mesh normals are correctly oriented for rendering.

mhf.js is a collection of math helper functions, providing utility operations like Gaussian distribution, mapping, clamping, and 3D vector limiting. Though currently small, mhf.js aims to grow into a comprehensive library for generating noise, falloffs, distributions, and other mathematical functions useful for computational design.

nsc.js (New Shiny Camera) is a minimal, independent camera library for viewing 3D objects in WebGL applications. It provides a simple, Maya-like camera interface for navigating 3D scenes. nsc.js is designed to eventually expand into a full-featured collection of camera tools for viewing and exploring digital spaces.

gaf.js is a WebGL application framework consisting of an App class that creates a development environment similar to Processing, OpenFrameworks, or Cinder. It allows you to quickly build applications by simply overriding the setup and draw methods without worrying about managing the HTML canvas, initializing the WebGL context, or handling the draw loop through requestAnimationFrame. gaf.js aims to provide a flexible and modular framework for building a variety of web applications.

All eight JavaScript libraries are open-source projects licensed under the Apache License 2.0. The Apache License differs from the well-known MIT License by including a clause that protects against patent risks associated with the use or contribution to the code. This means you can copy, modify, and publish the code like the MIT License, without the requirement to publish source code as stipulated by the GPL. For more details, see the full license: Apache License 2.0.

Hello World & Vase are web applications, built using the eight libraries developed, that allow users to customize (co-design) forms, download them for 3D printing, and share their customized design. Both applications share a similar interface. The most important app buttons live on the top right corner of the page, these buttons toggle the application's options (form parameter user interface, download panel, the sharing popup and credits popup). Hello World and Vase each have unique form parameters but the other option menus are the same in both apps. These applications make it extremely simple to share and co-create because the form parameters are encoded in the app's URL as they are changed. This also allows a user to undo and redo by simply going back and forward in their browser. Lastly, once a form has been customized, it can be shared either though a the url, a short link, and / or Twitter, Pinterest and Facebook sharing buttons, which are built into the app for easy distribution (and future remixing) on these social channels. 

The Hello World app is a simple demo that makes a box, cup, plate, and / or a bowl. The box's dimensions and other properties can be set by tweaking the parameters exposed by the sliders in the UI. Furthermore, precise numbers for the box's parameters can be dialed in using the app's URL api (i.e. http://syedrezaali.com/apps/helloworld/?Width=1&Height=3&Depth=2.5...). In addition to a simple box, Hello World exposes the ability to generate smooth boxes, cups, bowls, and plates. Once the user has configured the form to their liking, they can click the download icon to show the download panel and select whether they want to download an OBJ or STL file for 3D printing. 

The Vase app allows for more complex form creation than the Hello World app. Specifically, this app enables the creation and exploration of faceted forms (vases, lamp shades, cups, glasses, bracelets, and rings). This application exemplifies how a current design trend / fad can be codified and parametrized by a designer and then further co-designed by users to fit their style and needs. Vase and Hello World are simple examples of what can be made using parametric modeling techniques and the libraries developed. There are tons of other form applications to be built and explored in this on-going research. 

Designer & Developer: Reza Ali
Output: 3D Prints & Web Apps & Javascript Libraries
Residency: YCAM Interlab GRP Vol3
Residency Coordinators: Keina Konno, Ito Takayuki Tsubasa Nishi,
YCAM Interlab Staff: Junji Nakaue, Tsubasa Nishi, Clarence Ng, Naoki Ise, Yohei Miura, 
Credit: Thank you YCAM for hosting me in Japan for three months. I had the time of my life exploring and researching. Also, I'd like to thank James George and Kyle McDonald for their input before and during the residency. Lastly, I'd like to thank all the YCAM Interlab staff for supporting my obsession and for making the residency experience warm and welcoming.  
Duration: 3 Months
Year: 2015/2016
Press: 3dPrintingIndustry