!!Con West 2020: Tiffany Tseng - Packages, but in 3D!

Alright. Today I get to talk to you about one of my favorite things in the whole world. Packaging design! It combines a few things I really love, including design, digital fabrication, code, and snacks. So some of the coolest examples of packaging design that I’ve seen are in the food industry, where decorative boxes are used to package things like cakes. So if you go to the arts section of a bookstore, you can often find packaging diagram books, and they read like art books. So there’s often very little instruction in them.

00:58 - They just have the diagrams, and photographs of the final box that you’ll be able to create, if you learn how to assemble them. So the diagrams typically consist of two different types of lines. Solid lines, which is where you cut the paper, and then scored lines, where you fold them to create something like this doughnut box. People who get to create packages for a living are usually industrial designers, and they use professional tools like flatbed cutter plotters, which are on the order of $10,000. And the way they work is usually you print out your design on card stock first, and then the machine holds the card stock to the bed, using vacuum or static, and you send it a digital file, and it uses a blade and a scoring tool so that you can then assemble your design like this popcorn box.

01:49 - Those are really expensive, as I mentioned. Around $10K. But there are more consumer friendly options. There are things like desktop cutters that you can get for around $200. They’re even available at craft stores like Michael’s, but you can buy them online, of course. And similar to the plotters, they have holders for two different types of tools. Usually a blade and a scoring tool.

02:08 - And in this example, I’ve replaced a scoring tool with a marker so you can better see what’s going on. So typically the process is: You first do all the scoring. And then you cut out the outline of whatever package that you’re going to assemble. Like this rocket ship. So the problem I identified when I started working and looking at these packaging books is that typically there are images in the books, but they’re not in a format that you can actually send to a machine. So how do you translate those 2D diagrams into something that a machine can actually understand? And that’s where SVGs come in.

02:43 - So SVGs are an XML vector-based image format, and they’re used in graphics more generally. A lot of designers might use them to create vector artwork on the web or even animations, but they’re especially useful for digital fabrication. You can open up an SVG file in any text editor. Which is really awesome, because then you can see exactly what the machine is going to do, when you send it that SVG file. So we’re gonna walk through an example of SVG.

03:10 - There’s always an enclosing SVG element that has some basic properties like the width and height of your design. And then the most common element within an SVG is a path. So let’s walk through what a path looks like. Everything is with respect to a coordinate plane, where the origin is in the top left. So if we look at this path, the first thing in it is M, which stands for move. And that defines essentially where your starting coordinate is going to be. So in this example, x = 10 and y = 10. H stands for horizontal, so you just have to give it one parameter, which is how far to move in the x direction. In this example, 90. V is vertical, so I’m moving 90, and notice that I’m moving down, because y is positive in the down direction. I’m moving 10 again. So I’m moving to x = 10. And then L stands for line. So you’re drawing a line to the final coordinate, which is (10,10), which gives us a nice little square. Unfortunately, most SVGs are not that clean.

04:09 - (laughter) So SVGs are often exported from something like a CAD program or graphics program like Illustrator, and you might have thousands of commands in a packaging SVG or a packaging file like this one. So one thing you might notice in this SVG code is the command C, which we haven’t covered yet. So C stands for curve, and it’s pretty easy, actually. There’s just three different coordinate pairs for C. Two control points and an endpoint. So we kind of walk through this one – we’re starting, again, at (10,10). And the last pair in the curve code is your endpoint. So my endpoint here is at x = 90, y = 10. What the control points do is they define the slope of the curve at the start and the end. I can draw my first control point and draw a line between that control point and my starting point to define the slope of the start. And then I can do the same for the end of the curve. And then what it’ll do is actually draw a smooth curve through the start and end points, respecting the slope that you defined through your two control points.

05:13 - So now you basically know how to read most SVG files at this point. Where I started with this process is I wanted to see what libraries already existed for taking image input, basically images from the packaging diagram book, and converting them to SVGs. So I found this library that’s been maintained since 2003, by a Canadian math professor named Peter Selinger. It’s called Potrace and it does exactly that. You give it this bitmap image and it creates an SVG.

05:41 - The first thing I did is you have to take an image – this is an image from the book. You can open it up in any free software. I’m using Preview here, but you could use Inkscape, for example. And what I’m doing is I’m just removing the background and upping the contrast a bit so that the line work is as clear as possible. And then I built an app that’s called SVG Tracer. It’s a webapp. What you do with SVG Tracer is that you upload that image that you just cleaned – this is in realtime, it takes anywhere between 5 and 10 seconds to process that image.

06:15 - And then it gives you an SVG that you can export and send directly to a machine. Unfortunately, it’s not as easy as just using the Potrace output, because as I mentioned before, when you send it to a machine, you have to specify what is going to be scored and what’s going to be cut. So I need to actually take that Potrace output and separate the scoring path from the cut path. So I looked at the Potrace documentation, and there’s all these different options, and one of them, intriguingly, is called turd size. (laughter) I don’t know that much about image processing but I figured maybe that was like a common term for image processing? And it’s not at all.

06:51 - (laughter) I honestly think it’s just like a math professor having fun. Turd size is basically specifying what size speck in an image to ignore. So I can use turd size, specifically a turd size of 25, to eliminate all the scoring paths from my SVG. So that’s only step one. Because as I mentioned, I still need to figure out and isolate the scoring path. And what I did for that is I used this library called Clipper, and it lets you perform Boolean operations on a pair of SVG paths. So this is from their documentation.

07:26 - You can see I can switch between intersection, union, difference, or XOR, and then it will actually clip the SVGs relative to one another. So then what I do is I have this SVG of the Potrace output. I have the SVG of the cut path. And I then take the difference. That gives me the score path. And I can combine those two paths to create the final SVG. So with SVG Tracer, you kind of saw before I exported the SVG file. I can import it into a design tool. This is a proprietary tool called Cricut Design Space, that is for the plotter that I showed before. The desktop one.

08:00 - And you can see that there are very clearly two paths. One for the scoring and one for cutting. And that makes it really easy to then tell the machine: Use this path to use the scoring tool and this one for the blade. But wait! There’s even more to this. So one thing that I won’t be able to have time to talk through in completion, but I just wanted to briefly discuss, because it was interesting: Is when you look at the potrace output it looks at the scoring paths as blobs. And when you think about a machine cutting around a blob, it’s going to be really slow to cut hundreds of blobs, compared to cutting straight lines.

08:36 - So what I wanted to do is figure out a way to simplify those blobs into lines. And what I did is I used this library called svg-path-bounds, and I made some basic mathematical assumptions and I’m happy to chat with anyone about what those assumptions were. But I wanted to test: How much faster is it, if you use these simplified lines in place of those blobs? So I went through the books, and I found the most complicated design I could find that has 75 scoring lines. And I cut it using my desktop plotter. And of course, there are no instructions. I didn’t know how I was gonna put this together. I think it took me six times as long to assemble it as it did for me to fabricate it. But it makes this nice little cube.

09:19 - And what I did is I took many different examples from the book and I wanted to see: How much time do you save, depending on how many scoring paths there are in the design? So for the sphere, there were 75 lines. And what this table is showing is: The Potrace Default is basically – if you just cut a bunch of blobs, how long does it take? And the Simplified Path is: If you convert those blobs into lines, how much time do you save? And I found for designs where there are just a few scoring lines, it’s kind of negligible, but if you have a lot of them, you save up to 35% in terms of cutting time, which is pretty cool. So if you want to learn more about packaging diagrams, these are books that I highly recommend, and I used… I think the first two are out of print, unfortunately, but I went to the Strand in New York, which is an amazing bookstore for art, used books, and they were there. Hopefully they’re still there. I don’t know. You can probably find them online, though.

10:09 - And this is a free app, so you can find it at this URL. And if you click on the fish and click the view source button, you can actually view all the code. It’s a Node app, so the things that are probably the most interesting to people here is in the server.js file. So you can check that out, if you want to learn more. And if you do anything interesting with it, you actually don’t need to use it for packaging diagrams. You can use it just to convert any image to a bitmap. So I know a lot of people who use it for laser cutting, for example. So if you do anything interesting with it, please share it with me. That’s my handle. scientiffic, with two Fs. Thanks everyone for your attention! (applause) .