Voronoi Bookshelf Prototype, an experiment in interactive, generative design

[vimeo id=”39007762″ width=”600″ height=”337″ ]

[divider]

[one_fourth][h3]Download [/h3][/one_fourth] [one_fourth][h3]Try on-line[/h3][/one_fourth][one_fourth][h3]Get the code[/h3][/one_fourth]

[divider]

[h4]What is this?[/h4]

[list_circle] [li]This is a prototype. An experiment in generative, collaborative design.[/li] [li]The prototype consists of two parts: a generator and an object.[/li] [li]The generator is a piece of software that designs the object.[/li] [li]The object is a bookshelf based on a Voronoi Diagram. (I pronounce it vo-ro-NOY)[/li][/list_circle]

[h4]So what is generative, collaborative design?[/h4]

When think of a design, we typically imagine marks on paper (or a screen) specifying what the object is. Instead, imagine we use a set of rules, or a process (i.e. an algorithm) to generate the design. Following these rules can produce the same object each time, or the rules can include variations, interactions and randomness. Once you open the design to these other factors, it naturally invites others to influence, or collaborate, on the design.

The natural next step is to put the software managing the generation and interaction on the Internet.

[h4]What were your intention/goals for this project?[/h4]

My primary goals in this project were more technical than creative. My intent was to encounter and overcome as many of the technical problems involved with a project like this as possible. I also intended to develop a library of code for reuse in future online, interactive, generative design projects (when aesthetics are the focus).

My goal was to write a program with the following features:

[list_circle]

[li] 3D, interactive, and web-based[/li][li] Generate Voronoi patterns within an arbitrary bound and scale[/li][li] A fully parametric model with parameters for size, material thickness and shelf depth (among others)[/li][li] An “undo” function and a “clear all” function[/li][li] The ability to show/hide specific components[/li][li]Output files that could be used directly for digital fabrication on multiple machines[/li][li]The ability to save and load specific models to a web server[/li][/list_circle]

My secondary goal was to create a Voronoi bookshelf for my own home. And produce a limited series for select clients.

My secret hope was that in this first round, I’d be able to develop a program/experience that anyone could use easily and purchase online. While I don’t think I made it that far (more on that below), I’m confident that the program can be used by others to build their own Voronoi bookshelves, and I hope that you do.

I know I’ll surely use the program again to build some more bookshelves, both for myself and for clients who have already commissioned them.

If you’d like to build your own, keep reading, and I’ll tell you how. If you’d like to commission one of the prototypes, or a more developed version, please contact me.

[h4]Wait, I’ve seen stuff like this before, haven’t I?[/h4]

It’s likely. Online generative design applications are not radically new, and a few other designers produce this kind of work. Check out my hero Nervous System, who serves as an huge inspiration to me.

I have no doubt you’ll be seeing even more of this in the coming years from others and myself.

[h4]What is a Voronoi algorithm and why did you choose it?[/h4]

A Voronoi algorithm subdivides a space into a series of cells based on a set of points called seeds. The space is divided so that every spot within a cell is closer to the seed within that cell than any other seed. Voronoi patters are used in scientific research and technology, and are found widely in nature (the spots on a giraffe, for example).

If you’re already into generative art or design, or any related field, the sight of a Voronoi might make you roll your eyes. In fact, while I was in the middle of this project, Marius Watz declared the Voronoi to be “off limits until 2015” due to overuse. While I think this is an extreme (and wonderfully provocative) statement, I sympathize with Marius’ perspective.

That’s one reason why I chose it. My goals were more technical than aesthetic. I wanted the generated objects to be simple to create, both computationally and from a user’s perspective, but also to be highly complicated. I wanted to spend my efforts tackling technical problems that I knew I would encounter later with other projects, and not obsess over the generative system I used. I needed something that resulted in lots of differently sized parts. I wanted cool-looking complexity on the cheap and easy.

I also wanted my own Voronoi bookshelf.

[h4]What are some of the other great features of this program?[/h4]

[list_circle][li]It’s fully parametric and accepts material thickness as a parameter. This allows for really tight notching between elements, resulting in press fits between the edges and vertices. That means it’s a structurally rigid and assembles easily.[/li][li] You can specify two fabrication methods: laser cutter or a CNC router. If you chose laser cutter, the laser’s kerf is a parameter, and the program accounts for it when generating the cut file. When choosing the router, you specify your bit diameter & the cut margin. You can also specify the length and width of your raw material.[/li][li]When generating the cut file, the program efficiently packs the parts onto your cut sheet. In fact, there is even a genetic algorithmthat optimizes the packing (read more about this below).[/li][li] For the router, vertices in the cut file are mirrored.[/li][li]The program generates a file that numbers each part on the cut sheet, and a “map” showing which parts go together.[/li][li]All files are saved to a server, and can be downloaded as a single zip file.[/li][li]You can tweak the geometry of each vertex.[/li][/list_circle]

[h4]How can I make my own?[/h4]

In three ways. You can:

[list_ordered] [li]Use the online applet[/li] [li]Download the application[/li] [li]Download the source code[/li] [/list_ordered]

If you just want to see what the app does, watch some of the videos. If you want to play around with the program quickly and then forget about it, take a look at the applet.

If you want to make your own (you’re awesome), you should probably download the application and generate some cut files.

Be aware, it’s all a beta code: the applet is fussy, the code has some idiosyncrasies and some features are not 100%. Read more about that below. 

No matter what, I suggest you watch the video tutorial on how to use the program.

Contact me if you want one you’ve created online or using the application, or if you want me to design and build one for you. We can make anything happen.

[h4]What worked?[/h4]

Overall, I’m pleased with the end result. Everything I set out to make work is working.

The overall process (code to cut) worked well. This was the first time I’d generated cut files directly in code at several scales, and I was pleased with the resulting tolerances. I’ve no doubt I can now write code to generate cut files.

The notching method for attaching the vertices to the edges is a good fast-and-dirty connection and looks better then I anticipated.

Structurally, it’s solid, and as a bookcase, it’s awesome.

[h4]What did not work, and lessons learned:[/h4]

The biggest problem (and lesson) came at the end. Prior to this, I had written webpages, dabbled in JavaScript and PHP, and written a lot of Java code. But I had never put an interactive 3D application online before. I developed the project in Processing, a Java library for creative coding, and planed to embed a Java applet on my site. This turned out to be a huge mistake.

PROBLEM 1: I originally used the OpenGL renderer, and when embedding my applet, discovered two things:

1) To use OpenGL in an applet, my .jar files need signing. This meant that before anyone could launch it, they’d need to click through several warnings. This was annoying and a total deal-breaker.

2) Processing does not properly export applets using OpenGL. I ended up having to rewrite huge chunks of the program at the very end to be able to get it onto the web as an applet.

PROBLEM 2: Once it was on the web, I discovered why no one really uses Java applets. They suck. In every browser there is at least one function of the program that is problematic.

[list_circle]

[li]Chrome & Firefox: Overall sluggish behavior, the text fields sometimes don’t work . After you lay down the first boundary point, the program hiccups. Restarting the browser often helps[/li][li]Safari: Overall fast and smooth performance, the text fields always work. However, the download link does not work.[\li]

If you’re using the applet, I recommend Safari. To download your file in Safari, simply open a new window and put in this URL: https://hero-design.com/Voronoi/<your_file_name>/<your_file_name>.zip

For future projects, I’ll focus on using JavaScript and WebGL. There are some really awesome JavaScript libraries for creative coding right now, including Processing.js, Toxiclibs.js, Three.js.

Some other things that I’m not 100% happy with:
[list_circle][li]The creation process in unintuitive. First you need to create a boundary, and then you need to place points in it. The boundary can only be scaled when it is first created, and it cannot be adjusted.[/li][li]You can’t pick and move specific points. This is because there are limits on where points can be placed to ensure it can be fabricated. Edge lengths can’t be too short—otherwise, the vertices overlap. Similarly, there’s a limit to allowed angles between edges, preventing vertices from getting unreasonably long.[/li][li]The notched joints are effective but ugly.[/li][li]The space between the front-facing edges and the vertices. I’d like the edge lines to come up to the same level as the vertices.[/li][li]The wall mounting needs to be better.[/li]The packing algorithm is too slow, and does not create additional sheets of material. If all your parts don’t fit on the sheet, pieces pile up in the corner.[/li][li]The packing algorithm does not handle irregular polygons. It bounds everything in a rectangle and packs that. In this case, that works well because everything is roughly rectangular.[/li][li]The Genetic Algorithm that optimized the packing is slow and does not significantly increase efficiency. It’s currently disabled.[/li][li]The notches and tabs are laid out with sharp corners with the routing option. It should automatically insert “dog-bones” to account for the round bit in the sharp corners.[/li]

[h4]What improvements can be made, and what are your next steps with this?[/h4]

I’m not 100% sure what I’m going to do with the Voronoi component of the generator. I could refine it and turn it into a more elegant design. I have quite a few ideas on other ways to handle the joints and mounting. I’ve also got ideas to go beyond the base algorithm. I also have other ways I’d like to fabricate this pattern. If I sense there is a interest in this as a product, I’ll certainly develop and refine the design more. At the very least, I’ll address some of the issues above.

For a variety of reasons (complexity, intuitiveness, UI) this will never be a great online experience for most users. And it’s not exactly the type of experience I want to provide.

The real improvements will be made to the packing and optimization algorithms. I know I’ll use these again, and I know other people will have a use for them. I’d like to build this into a library.

If I decide to continue with this generator, I might redevelop it in JavaScript, and move the packing algorithm server-side.

[h4]Where’s all this going, what’s the big idea?[/h4]

A lot of work went into this prototype, and I knew going in that it was likely not going to result in something I’d be fully satisfied with. However, as mentioned above, my goal here was to lay the groundwork for future projects.

The confluence of digital fabrication and the Internet opens wonderful new design spaces. As a designer, a fabricator, and coder, and someone who loves creating experiences, I’m drawn to the ability to offer spaces where the designer, the participant and the object interact. I love the idea of designing experiences and systems for people to create and influence objects, rather than simply creating the objects themselves. My long-term goal is to use these generative, online, and collaborative design experiences to connect people with the objects in new and personal ways. The internet allows us to incorporate elements of narrative, game and play into designs. These elements will deepen our connections to our objects, and generate innovative designs.

[h4]Thanks and attribution:[/h4]

All the code was written using Processing, a creative coding platform developed by Ben Fry and Case Reas. My code makes extensive use of Karsten Schmidt fucking awesome Toxiclibs library. The code that principally generates the Voronoi is directly from Toxiclibs. I also make use of the ControlP5 library, PeasyCam (in my older versions) and ProScene. I’m very thankful to those on the Processing forum, specifically pho.lho, ammon.owed, and Xiaohan Zhang. I’d also like to tip my hat to Nervous System, Marius Watz and many others in the creative coding community for inspiration. Finally, special thanks to Chris Chalmers for his thoughts on configurable design, Danny Rolnick for awesome Java help, and Kelly Parkinson for pointing to a Voronoi pattern and saying “I want a bookshelf like that!”