Taking the Web off the Screen

Most web developers don’t get the joyous experience of touching and feeling the things they’ve created. Interest in generative art on the web is at an all-time high, but predominantly confined to screens and pixels, without much room for tactility.

Through her unwavering enthusiasm for making physical things, Charlotte will demonstrate a myriad of ways you can use your coding prowess to make art in the physical realm.

Transcription

[Music]

[Audience applause]

Charlotte Dann: Thanks. Thank you so much, Marc. This has been such an incredible conference so far and I’m so thankful to be here.

Hello. I’m Charlotte. I sometimes describe myself as a creative technologist and maker, which is like the wankiest title I’ve ever invented for myself. By day, I mostly am a front-end developer at a startup in London but, by night and on Thursdays, Fridays, and weekends, I make generative art and I turn it into real-world stuff. Today, I’m going to talk through a couple of my projects that cross that boundary and hopefully show you a couple of ways that you can use your coding skills to make cool, real-world things as well.

Firstly, why should we use computers to make art anyway, especially physical art? We think of art as being a very expressive process and adding this weird, binary, middle step of computers seems kind of in congress to that.

I want to argue that computers actually are better adapted to the design process than any kind of traditional medium. We have this cycle if you’re making a table or something. Every iteration, you get to build and you have to build the table from complete scratch.

With code, you get to build off whatever you already have and make as many copies as you’d like along the way. I think we often forget how bloody magnificent that is, that carbon copy’s perfect-perfect recreations - completely infallible, which is something you can’t do in the physical world at all.

Imagine building a table and then having infinite copies of that table. More so than that; imagine being able to vary every single one. That would be incredible.

When it comes to making physical things with code, usually this involves writing code to tell a machine how to make something. There’s still a time factor to that. It’s not going to be instant like it can be on the Web because you’d have to manually make the thing, but it’s still a lot less laborious than carpentry, I guess.

I want to start by talking about CSS. I love that we’ve been speaking about CSS already today. I think there’s a perception that generative art is very math-heavy, very JavaScript-heavy. I want to lower that barrier and show you, as well as myself, that you can make generative art just with HTML and CSS.

Here is a grid of white squares. Inside of each square is a black circle, which is twice the size of the square. Because of the default positioning, they’re all in the top left, which makes this kind of weird, triangular cutout.

This is already showing the key quality that makes generative art possible. We only have to write the styling for that grid item once and it gets applied to all of these things. Just forget that I had to write div a hundred times. [Laughter] No, I used JavaScript to do that. This is all a lie.

Repeatability, as I was saying, is one of the key concepts that make generative art possible. But doing the same thing over and over again can only get you so far. There needs to be some sort of input for genesis and that can often be randomness--we don’t have randomness in CSS, sadly--or some user input like touch, but I don’t want to make art that you have to hover over. No offense, Cassie. [Laughter]

We do have this one pseudo-class that can make things look kind of interesting and that’s nth-child. Ta-da! Yeah, this isn’t doing a lot right now. It’s just, for every second square, it’s anchoring the circle inside of it, to the right and the side, which makes these semicircles. But if we turn that 2N to 3N, we get this pattern, which is starting to look pretty interesting.

You can still see that it’s a grid of squares, but there’s something much more alive about it. That’s the joy of generative art. It’s finding these unexpected outputs by just tweaking the input. It’s a visual result you don’t expect from just three extra lines of code.

We can keep going with this. This time, we’ve added another nth-child modifier, which anchors the circle to the bottom of every second one, which means every sixth square will have the circle in the bottom right. By layering up these nth-child things in high orders, we can kind of similar randomness with CSS, which is pretty cool. This feels really different to me from the previous one.

We can just keep going, modifying these. This is just flipping that 2 and that 3 and it’s making completely different shapes already.

This is with 3 and 4. I really like this one. You get such different patterns every time. I was playing around with this for a while trying out different amounts of rows and columns as well.

I thought, “I’m weirdly proud of this. I want to show it off.” I think this would look really cool etched into glass or something like that, but we’re keeping it low level here with the CSS, so I thought it’d keep the production low level. I turned on my HP MV5540 and I pressed control P, not command P. Sorry for the slight delay. My laptop did not want to behave with the system here. I am a Windows girl through and through. Anyway, I made this.

We’re going to get onto all of the cool machines that make digital-physical art in a bit, but I want to take a moment for the humble desktop printer. It’s definitely the most accessible piece of equipment I’m going to talk about. I think most people have access to a printer. If not, you can go to a print shop. It’s like 10P for an A4 sheet of black and white, so it’s pretty easy to do.

This, I just printed them off in my studio, sandwiched them between two pieces of plastic, nail them on the wall, hung them up, and this was opposite my door every time I entered my old studio. It made me so happy every time I saw them. It made me feel so creative because it made all these really interesting shapes, but each of them was about 20 lines of code, which is kind of crazy when you think about it. The physical presence of having something you’ve made yourself decorating your space is real power and, clearly, it doesn’t have to cost a lot.

Besides making cool, abstract decorations, I think printing is really useful to give context to a project. Sort of an aside, but I think we kind of forget that computers are a transient medium. They’re constantly mode switching so, even mentally, you can remember that these variables with result in this output or this page, when I click that link, will go to this page. You can never see those two things at once. Printing things out is the only way to get a real-world context for those kinds of projects.

I like to go so far as to print out entire websites. [Laughter] This was a client project I was working on that had a lot of mismatched styles. I was building a component library for them.

I promise this isn’t going to turn into a design systems talk.

Everyone thought I was really excessive when I printed out the whole website. But, for me, this was a very obvious way of finding the inconsistencies of having to click through every page. I just want to encourage everyone to print things off more, please. You can offset the carbon or whatever if you don’t want to waste the paper.

Speaking of wasting paper, pen plotting, let’s move on to that. This was me in my new studio the other week. It’s so soothing I could stand here for this entire talk and just watch it - watch it paint. I’ll leave that there to hypnotize you.

Pen plotters are mechanical drawing devices. They tend to have an X and a Y-axis and some device to lift and drop a drawing implement. They were really popular in the ‘70s and ‘80s for large format printing, especially for architectural and engineering drawings, but they kind of fell out of favor when inkjet printers became a lot cheaper and more efficient.

In the last couple of years, they’ve had a massive comeback. A lot of artists and hackers have realized how cool they are. Models from the ‘80s, remarkably, still work really well. I think they’ve all dried up on eBay now. But there’s a company in the U.S. called Evil Mad Scientist who make these high-quality models. They’re specifically geared towards digital artists and hand letterers like Seb Lester.

There’s quite a wide spectrum of pen plotters available these days. There are so many on Kickstarter. Some are on the cheaper side but, as far as I can see, nothing matches the build quality and consistency of the AxiDraw, which is what this is.

I bought this about five or six months ago and I absolutely love it. This is the A3 AxiDraw. It cost 550 pounds, which is like 650 euros. Yeah, it’s a fairly hefty investment for a hobbyist. For me, this is the kind of device that really encourages me to be creative because I find the output so tantalizing.

I was saying before about how the digital world is distinct from the physical world because it has this perfect repeatability, which is kind of a shame because it means there’s no space for inconsistencies. There’s no room for serendipity. With pen plotting, you can have a millimeter perfect detailed plot and you’re still going to get these little spots where the pan-over inks hit the paper or the lines aren’t particularly even. I think that’s what makes these pieces so gorgeous.

When you look at a piece from a pen plotter, you can feel the hours that have gone into it. Even though they’re not human hours, I think it’s really beautiful to be able to see that intention go into a piece of art.

Throughout this talk, I’m going to have a couple of practical tips to point you in the right direction if you want to dip your toe into this world. Practical tip number one: If you are planning on getting into pen plotting, I urge you to get some thin, cheap paper and test all of your plots first. I cannot count how many I’ve had to just chuck out because I didn’t have the pen at the right height or something in the file was messed up. It just is really easy to go wrong.

To avoid having to do the entire plot twice on crappy paper, I have a template that I use to kind of calibrate the machine. It has some crop lines in, like one centimeter in, to make sure it’s aligned properly. Then I draw lines across the whole thing to make sure that it can draw across the whole thing; it doesn’t randomly dip down in bits. Then I isolate one bit of the final thing and draw that on to make sure you’ve picked the right pattern and that kind of thing.

Practical tip number two: Use this NPM library called canvas2svg to get your canvas art into a vector format.

Here is an illustration that does pretty much the same thing as the CSS one but in JavaScript for the canvas API. It’s a lot more mass. It’s pretty much unreadable. Don’t worry about it. I’m just telling you. I just kind of played with the variables until I got something beautiful.

Canvas allows us to use the GPU to draw primitives really performantly, directly into an HTML element. Here, we’re using quadratic curves. I don’t know if you can see that. You can use rectangles, circles, other types of lines and curves. Then you either fill them for background color or you stroke to outline them. Just layering those up is how much of the cool, generative art you see on the Internet is made.

The way it works is we make a canvas element and then we get the rendering context of that element. Then we apply all of these things that draws out.

Yeah, the issue with this is that the canvas element is a RAST output. Canvas is a black box, as Cassie Evans said yesterday. It’s actually kind of cool because you can right-click on a canvas element and save it. It’ll save as a PNG. If you want to print it off, you can do that. For pen plotting, you need some sort of vector file. That’s where this lovely library comes in where you create a canvas SVG context with the same size as you would a canvas element and then you can apply. It has all of the same methods as a 2D canvas rendering object.

Then you can also export it as a serialized SVG. Here, I just saved that and downloaded that as an SVG directly. Yeah, following on from Cassie’s talk yesterday, SVG is really, really cool. Beyond just downloading this for something like a pen plotter, there are many cases where, for the developer experience, it’s actually nicer to build in JavaScript using canvas like this. But actually, in the client, it makes more sense to render it as SVG because then you get all of those automatic wins. You can animate it with CSS; change the colors with CSS. Also, with canvas, you have to do a really complicated resizing event thing to make sure it’s rendered at the right scale every time. If you just output an SVG, you get all of that built-in, so that’s pretty cool.

This library also works with NodeCanvas, so you can run it on a server if you wanted to. I haven’t quite figured out why you’d want to do that, but there’s got to be a good reason. [Laughter]

Cool. Now we’re ramping up to laser cutting. First, I want to talk about jigsaw puzzles a little bit. This colorful thing in the background is an evolution of one of the first pieces of generative art I ever made, like three or four years ago. It’s not the most complex piece of art ever imagined. It just has some kind of colorful circles that leave these dual-tone trails.

Ever since I made it, I thought it would make a really good design for a jigsaw puzzle. For the last two years, I’ve been very sporadically working on creating generative art jigsaw puzzles as actual products you can buy. Obviously, not too far along in that process, but if you want to sign up to my mailing list, abstractPuzzl.es at the start of 2020, someday it’s going to happen. [Laughter]

The challenge for designing jigsaws is about balancing the simplicity and complexity in the design. You want all the pieces to be unique, but you also want there to be some sort of obvious way of grouping them. I think colorful, abstract art is a really fun way of fulfilling both of those criteria. Plus, the idea of having every single puzzle be a completely different design is really cool.

The second element to making giant jigsaw puzzles is how you cut the pieces. I don’t know if anyone here has ever written an algorithm to randomly generate jigsaw patterns. Anyone? This is not…. If you are, it’s what you spend your weekend doing because it’s really fun. This is why I love creative coding so much because you can be very expressive making generative art.

This is more like generative design. There’s some sort of boundary there. There’s a framework you have to work within. Whether that’s a material limitation or something like this, which is a product convention, you get to come up with all these creative solutions to those problems, which is great fun.

Most of the jigsaw puzzles you can buy are made out of recycled cardboard and are cut with a big metal die. It’s like a giant pastry cutter that just stamps through it. A lot of jigsaw companies will only have a handful of these die in different sizes because they can last tens of thousands of cuts before they dull.

The downside of that is that you can’t vary the design between puzzles because, obviously, the die is in a set shape. The alternative is laser cutting. By the way, this is all developed in a browser. Just like with the pen plotting example, I used that canvas SVG library to get the output of a laser cutter.

You might be able to tell from this rather smoky video that I’m kind of still working out the kinks in this method of production. Making things is really rewarding but often super difficult and frustrating because you don’t know what kind of complexity is going to be thrown your way from the material or the method of production.

Like with this, I wanted to use six millimeter MDF, which is medium density fiberboard. It’s like a wood composite material. That’s because it’s a very consistent material and it’s six millimeters is nice and chunky for a puzzle, but it’s hard to burn through that density of wood without it getting really smoky. Usually, you shouldn’t have to worry about that. But with this, in theory, I have a picture of a puzzle printed on it already so you need to care about the smoke because that might affect the puzzle.

Then there were so many other variables as well like what you’re printing the puzzle design on. How thick is that paper? How do you mount it onto the wood? Do you want to have it face up or face down in the laser cutter?

There were all of these aspects that it’s really annoying to work with physically because, in code, it’s just refresh and here it’s every single step is quite a bit of time and quite a bit of money. But just like in code, if you try hard enough and just don’t quit, you’ll get there eventually. Yeah, abstractpuzzl.es, 2020.

I’ve been cutting puzzles out of MDF and plywood, but you can laser cut out of all sorts of materials. They have some really interesting results. This was a project. It’s by a place in Florida called Cape Coral. It’s the city in the world that has the most navigable canals. It has 400 miles of canals, which is bananas. Every single house is on a canal. From a satellite, it just looks like a giant maze, so I made some mazes and also an algorithm as if water was spilling to see how it would disburse.

Side note: Mazes are also an incredibly fun, creative coding challenge. There’s a really great book on the topic called Mazes for Programmers by Jamis Buck. I’d really recommend that.

Paper is really fun to laser cut because you get very, very neat edges and, because it’s so thin, it takes barely any time at all. You can make very complicated, intricate patterns and it’ll happen really quickly. There’s basically zero effort.

The downside is paper is pretty delicate. I don’t really think about that when I made mazes but trying to pick up a sheet of something where everything only connects to one thing is very, very difficult. That’s fine.

I also did some material tests with foamboard, which came out quite interestingly. Foamboard is foam sandwiched between card. It laser cut through both of them really easily, but the foam kind of melted and retracted, so it made these kinds of different levels on the foam board, which I thought was really interesting.

This isn’t actually generative art, but I just wanted to show that you can also edge on a laser cutter, which can have really interesting effects on acrylic and wood. This was a quick drawing I made with just a thick marker pen, just doing some sort of squiggles. I scanned it into the computer and brought up an illustrator and outlined each of the pieces. Then I edged it back into wood and then cut through where the outlines of each one were.

I was then able to take those pieces and rearrange them on a flatbed scanner and bring them back into a digital space. I think that kind of interplay of digital and physical is really exciting. You can use tech to further your art and art to further your tech. They can both be very complementary to each other.

Practical tip for laser cutting: Get access at a Hackspace, university, pay-by-the-hour facility. Laser cutters are extraordinarily expensive. The one I had at university cost 60,000 pounds. You can get cheap ones as low as like 200 quid, but I really wouldn’t recommend that because their lasers are very dangerous. You also need proper ventilation for them.

Also, if you get a cheaper one, they’re going to be less powerful. Everything you do will take a longer amount of time. There are quite a few trade-offs there. You’re just probably better going to a place that has a good one already.

If you’re a member of a university that has any sort of design department, they will--at least in England, but I feel like--the laser cutting technicians just really want to share the joy so, even if you’re not part of that department, you can usually ask for an induction and have access to that. Otherwise, there are hackerspaces around the whole world which have tons of equipment for metalworking and woodworking and digital prototyping, all of that.

There is a wiki called Hackerspaces, which is a compendium of these kinds of places. It lists 20 in Berlin. Probably not all of them have lasers, but some do. There’s one actually just across the park called MotionLab. I’ve looked them up. They have loads of 3D printers, loads of laser cutters that look really cool and it’s like 200 yards that way.

They’re often kind of subscription-based clubs, so you pay something like 40 euros a month to have access to all of their equipment. With laser cutters, there’s usually also an hourly fee because it actually uses up a consumable part. But they’re also very community-oriented spaces, so a good place to learn new skills and meet people that are into similar things.

There are also plenty of places where you can just straight up pay by the hour for a laser cutter. That’s what I’m doing at the moment. You obviously need to have done some laser cutting in the past. They need to be able to trust that you’re not going to break it. That’s pretty great and easy to just be like, “I want to do some laser cutting today. I’m going to book an hour.”

My second practical tip is that test-driven development still applies in this context. You may think you can come in with this perfect idea, this wonderful SVG that you’ve exported but it probably isn’t going to cut the way you’d expect it to. Lasers have both power and speed settings. Usually, next to the machine, it’ll have a list of common materials and what that will equate to. There are loads of different reasons that that might not be the case. It might cut perfectly at one edge of the laser bed and not work at the other, not go through the whole material.

Also, it’s really hard to know what material is actually appropriate for your job without trying some first. I’d really recommend, if you want to do some laser cutting, just bring in a few materials and just cut out a load of circles. Find the setting that works best for the material you want the best, so you can be really confident when you’re cutting the actual job that it’s going to be successful.

Whoo, 3D printing. [Laughter] I’m getting more and more excited.

Oh, is this not going to load? That would be a real shame because I’m going to talk over this for like five minutes. Oh, am I going to not have any demos from now on? That’s unfortunate. I’m not sure there’s anything I can do about it.

Help. [Laughter]

[Audience laughs]

Marc Thiele: (Indiscernible)

Charlotte Dann: No, they’re all, like--

Marc Thiele: Oh…

Charlotte Dann: Damaged. They’re on the file system.

Marc Thiele: Okay. Let’s check….

Charlotte Dann: I don’t know how to get out of it.

Well, anyway, I can tell you what I was going to talk over the slide on anyway. To give context to this project that I was just about to talk about, I’ll just have to give you a little bit of background for me.

I actually have a degree in jewelry design and silversmithing, which is where my obsession with touching things came from, I guess. But while I was doing that degree, I was working as a Web developer part-time, always. When I finished that degree, I was kind of leaning more towards a career in Web development than jewelry because jewelry is a very painful industry and I was already an okay Web developer.

I was really dissatisfied with my creative output on the Web. I really liked the problem-solving aspects of making websites but, without having any touchy-feely thing, it didn’t really do it for me. This is when I started finding out about generative art and the Web, seeing all of the cool, creative stuff you could do.

I found a master’s program at Goldsmiths in London called Computational Arts that was really cool. It was all about bringing other aspects like audio and robotics and making physical stuff like I do. I decided to undertake this master’s and, at the end of our first term, we had a class about simulating biological phenomena, which you would be able to see and hopefully will be able to see.

Marc Thiele: Yeah, we’re working on it.

Charlotte Dann: Cool.

Marc Thiele: I can dance for you.

[Audience laughs]

Charlotte Dann: [Laughter] I can riff for another minute. Yeah, we had this. Actually, there was--

Marc Thiele: (Indiscernible)

Charlotte Dann: It was, of course, more aimed at kind of like artists that thought that code could help them with their practice, so there were a lot of people that were very, like, hadn’t done a lot of code before. For me and a handful of people that were okay developers, we found it really, really slow.

We basically made this offshoot class and they just were like, “Oh, I have this Ph.D. guy and he can teach you some stuff about simulating biological phenomena.” We were all like, “Yeah, sure.” We did that and we learned a lot about flocking and voids and physics models inside of code.

Marc Thiele: (Indiscernible)

Charlotte Dann: Can you open them just as HTML files? Where’s the mouse?

No…

Marc Thiele: (Indiscernible)

Charlotte Dann: No, it doesn’t need to be run. It’s just -- that’s going be some JavaScript that’s not working right now. Oh, maybe they do need to be online. I downloaded them all earlier and they’re fine. Can you get online?

Marc Thiele: Huh?

Charlotte Dann: Can you get online?

Marc Thiele: Yeah, we can try.

Charlotte Dann: Sorry.

Audience member: (Indiscernible)

Charlotte Dann: [Laughter]

[Audience laughs]

Charlotte Dann: Thank you.

[Audience applause]

Charlotte Dann: Yeah, Confucius haven’t been my friends today.

Marc Thiele: Oh, not today…. Are we online now?

Charlotte Dann: Yeah? So, this should just work.

It’s thinking.

Marc Thiele: We’re kind of online. [Laughter]

Charlotte Dann: It’s thinking. I don’t know what it’s trying to connect to. I think it didn’t all transfer onto that UBS.

Marc Thiele: Mm-hmm.

Charlotte Dann: So, maybe it’s just trying to get to father and it isn’t even there.

Marc Thiele: Want the USB again?

Charlotte Dann: Maybe it didn’t all make it to the USB, which is very upsetting.

Marc Thiele: Shall we try it again to get it on the USB?

Charlotte Dann: No, I can show something else. I’ll figure it out. I don’t know how to type on their weird keyboard, but I can make it work. [Laughter] I’ll just show you a collection on CodePen. Where are the slashes?

Marc Thiele: What?

Charlotte Dann: Slash? [Laughter]

Oh, I didn’t spell CodePen right. Oh, God. This is a--

Male: Icelandic keyboard, so it’s not--

[Audience laughs]

Marc Thiele: An Icelandic keyboard, not her computer.

[Laughter]

Male: And a slow Internet.

Marc Thiele: And slow Internet.

Charlotte Dann: Yeah, it’s fine. We’ll make it work. This has all the stuff in it.

Marc Thiele: Dah-dah-dah…

Charlotte Dann: I wonder if any of those demos work. Hey! That’s something! Ha-ha! Hey, there we go!

[Audience cheers]

Charlotte Dann: Thank you. [Laughter] Should we just leave it? I feel like we don’t want to tempt fate anymore.

Marc Thiele: (Indiscernible)

Charlotte Dann: Screw the notes. It’s fine. [Laughter]

[Audience laughs]

Charlotte Dann: Okay. Let’s go back one step. Is it going to let me go back one step? I’m touching the wrong thing. Yes, okay, right. This is what was supposed to be on the screen the whole time I was doing my spiel about my background.

Any fans of Conway’s Game of Life in here? No? Yeah? A couple. A couple.

Yeah, this is Conway’s Game of Life. I’ll explain it. At the end of this term project, we had to do something with all of the knowledge we’d learned. Basically, it had to be on a screen, which is kind of confining for me. They’d be like, “Use some of this stuff. Combine some stuff. Make something.”

One of the things I wanted to use was this, which is Conway’s Game of Life. It’s a really basic biological simulation where, every generation, the little bits turn on and off based on how many are on or off around them so they can die from starvation or overpopulation, but they can also generate from having the right number of neighbors.

I can start it again and you’ll see. This kind of reduces into quite a nice equilibrium, and it’s just a kind of magical thing. I wanted to do this, but I wanted to do it in hexagons because hexagons are awesome. [Laughter] I just thought they have more sizes, so there’s more room to play with there.

I didn’t really think about the fact that hexagons actually have fewer neighbors than squares because squares are counting the diagonal ones, but anyway. This didn’t work perfectly. There wasn’t the right combination of settings to make it keep going, so I had to randomly turn on a hexagon every now and then to keep it in state. Those were the two elements.

The third one, I’m not even going to try and pronounce this word. I’m sorry. This is the generative design book, which was originally written in German. It’s a really fantastic, chunky textbook with loads and loads of creative design projects. I’d really recommend it.

One of the things from there was this, which was a Cartesian grid. It was a drawing program, so you could draw on these cells. What was shown inside the cell depended on what was active around it. You could just drag across the screen and it would make these really interesting shapes because of the way the glyphs worked on it.

I wanted to combine all these three things and this was step one. I think it was actually step four. Here, I’m connecting the edge of every active hexagon to the edge of all of the other active hexagons that are near it.

This is kind of anarchy. Loads of things changed too quickly and there’s also this kind of like triangular sub-grid that’s developing. I thought this was kind of in the right direction because you get these flashes of these really interesting, complex shapes that were sort of what I wanted to go for. That was step one.

The next thing I did was introduce this concept called layouts. If you connected every single edge to all of the active edges, it just became quite noisy and I thought we could do something interesting by having different modes for these things. If you had four neighbors or a few different ways that it could line them up and they’re kind of randomly selected.

The next thing I did was get rid of the Game of Life concept. I should really have just never mentioned it in the first place. [Laughter] I thought it was just too much noise, so I tried a bunch of different kinds of ways of generating this kind of randomness.

I settled on the idea of a creator and destroyer relationship. There’s one that’s going around and leaving a trail behind it and there’s one over here that’s not doing much that’s kind of destroying its own path. Yeah, you’d get these clusters of really interesting shapes I really love. I just kind of didn’t stop.

The next thing I did was with the generative design book. They had these quite complicated glyphs. I thought, instead of introducing something more stylistic, what I would do instead is make a double active state so it could be off, on, or double on. When it’s double on, there are two lines. This means that if it goes from double on, to on, to off, these lines have to diverge and converge in really interesting ways.

The last step was to make them a lot more circular. It was being very triangular before, so this was kind of softening all of the angles. Yeah, I love this so much. It’s the proudest I’ve ever been of a piece of work. I could just look at it for ages.

One thing I did do in the process of this was that I added some keyboard interactions so you could stop it and I could get rid of them. I can make a ton of these creators and see, like, what they made. I could also make one creator and a load of destroyers. Do you see what that did? Sorry if the contrast isn’t good enough for you to see the things going on, but it’d leave these little bits of trails, which is quite cool.

But then what this also did was introduce mouse as an input, so then this is just a straight-up drawing tool. It makes these interesting kinds of shapes. I was doing this one day for many hours. [Laughter] Yeah, I kept coming back to some of these forms. I was like, “Shit. I’ve made jewelry.” [Laughter]

[Audience laughs]

Yeah, I’ve since realized that anyone that plays with this demo, they kind of bring what they know to it, so they kind of see whatever they’re used to. I was talking to a biologist once and he was like, “It’s protein strings.” I was like, “No, it isn’t.” Yeah, I ended up just making these kinds of things and just knew that they needed to be jewelry somehow.

Yeah, this project was over but, for our final project at the end of the master’s, you could do whatever you wanted. A lot of people started from scratch based on what they’d learned, but some people, including myself, picked up all projects and just kind of pushed them a bit further. That’s what I did with this. I decided it needed to be jewelry somehow.

What’s the next slide? Oops, no. Spoiler.

Yeah, the first thing was, like, how does this become jewelry? What’s the scale? What’s the material? To me, it always seemed very wire form-y. I could really imagine the ways these kinds of lines would overlap in a third dimension. But I wanted to, at this stage, not be limited by the actual production mechanism before.

As I said before, you can keep pushing through if you want to make something and, eventually, you’ll get to how it’s made, but I didn’t want to worry about how I was going to make it. I didn’t want that worry to impede my vision of what it could be, so I decided the first stage would just be to try and make a perfect 3D visualization of what I wanted and then deal with how I actually make it later because I know that no matter how crappy that is, I’m going to make it somehow.

It also involved a really big refactor. This was originally written in P5, which is a JavaScript implementation processing, which is just like an added layer on the canvas API. Completely unnecessary.

Yeah, so I did a few things. I got rid of the weird hacker back thing and came up with this.

Now, there’s like a canvas on the left-hand side. I want to draw something really nice for you. Hold on.

I also added a few features like you could hover to pick a new one of those layouts. Yeah, and I have random on. Yeah, so it makes something like this. [Laughter]

[Audience applause]

Thank you. This isn’t actually as shiny as in my current demo. Anyway, yeah, it also has these two sliders. These are for depth. If I bring them down to nothing, I’ll be able to explain them a bit more.

This first one is for layouts that need to overlap. If you have something here where they cross over, like inside the hexagon, I wanted to kind of attach the two edges and make sure that they separated. That first one -- this isn’t a great design to show that, but you kind of see that, over here, that one has gone up and that one has gone down.

Then the second slider was to--ooh, you can definitely see that--bring up the inside of anywhere that’s doubled up. Between these, you can sort of create; you can have a bit more choice over how deep it is. It’s kind of random. They’re kind of arbitrary rules for me to decide how depth works, but I think they’re pretty fun. Yay!

I made the thing I wanted to do. I made it perfect. This is how shiny it should look. Now was the point of thinking, how does this become a reality?

The obvious thing to think of was 3D printers. Ooh, no, wait. Yeah, the obvious thing to think of was 3D printers, but how do I get it into a thing that I can 3D print? You already saw the spoiler.

I thought I would have to export this as some sort of weird data format, import it into Rhino, and then recreate all of the logic I’ve made in here for how things connect up. It turns out that ThreeJS, which is the very commonly used 3D library for JavaScript -- that’s what’s making the demo. You can export STL files directly from ThreeJS, so STL files are 3D object files made out of a triangulated surface. Yeah, triangulated surfaces, so that’s what 3D printers can use to print things.

There’s an add-on for ThreeJS, which means you can export it directly from that. That means you can, as a JavaScript developer, make 3D models that you can print without ever having to touch any 3D modeling software. That is extremely cool and very easy. That’s my first practical tip.

Then it’s like, how do I make it into a reality? The most common noncommercial 3D printers are like these ones. They’re extrusion-based, so they have a reel of plastic that they melt and then kind of excrete it in layers and sort of build up the model.

The issue with that is that I wanted to make these things in precious metals. It would be fine if they were just in plastic, but they’re the kind of thing that really looked like wire forms. I really felt like they should be silver or gold.

The way you would usually do that with a 3D printer is that you would 3D print the thing in plastic. You’d make a mold of that in rubber. Then you’d cut that out of a mold and then you’d make a wax copy of the thing.

Sorry, this is getting quite complicated. I’ll explain that process more later.

You make a wax copy of the thing that you originally had in plastic. You’d use that with this traditional casting process to make it into metal. I can’t do that with my things because they’re so delicate and windy. You wouldn’t be able to cut them out of the mold. This wasn’t really an option for me.

What I really want is this. [Laughter] This is actually for steel. It’s a direct metal laser centering machine. There are a handful in the world that do it in gold. I’ve been lucky enough to see one. It’s incredible.

The way that works is that you have metal powder, like really fine powder. A laser comes from above and just melts the metal and then brings that down like a few microns, puts another layer of fine powder on and melts it again. You end up with this vat of gold powder and inside of it is the perfect final piece that you want to make.

Yeah, I can’t afford that. [Laughter] You may imagine, it’s really expensive. Maybe someday. I’m hoping for that lottery win. Yeah, that wasn’t really an option for me.

We did have, at university, a couple of these machines. These are Formlabs Form 2s. They are based on stereolithography, so they work slightly differently to the other ones in that they have a vat of liquid resin and they work the other way around. The build plate comes from the top and the laser goes underneath. It fuses this material and then brings it up and goes back down as another layer, so it kind of builds it backward.

The cool thing about this is that the materials just have to be photosensitive resins. It’s a different world from having to have a plastic that you heat up and then it goes back, which means that they have a lot, Formlabs has a lot of experimental materials including a wax prototype material. I could basically print something on here directly in the wax that I’d need for the casting process, which is amazing.

Yeah, this was the first model just in plastic, not in wax, that I made from a Formlabs printer. You can see the kind of structure behind that. There are little support things because you can imagine this is being printed upside down and you can’t laser just in midair, so you have to build something for the bit that you want to attach to, but it’s removable.

These are the second ones. They were far too small and delicate. These third ones were just about the kind of scale I was imagining. This relates to one-millimeter thick wire, which is a very standard size to make jewelry in. They just had a sort of feel of something that I could imagine being in metal and being really lovely.

This is a video that I could spend several hours talking to you about how to make those things into metal. I thought, in the interest of time, I’d save you that. I’m just going to talk over this video.

Where’s my mouse?

Right, so the first step is 3D printing, as I’d already mentioned. Then we have to remove all of the -- ooh, we put it in a UV chamber. I don’t have to do this step anymore, but it just looks really cool.

The next step is removing the support structure. Then I used to take it to this guy called George. I now 3D print all of this bit as well.

For the metal to get to the end of the thing, it needs to have space to run down. Otherwise, it will cool before it gets to the end. You need to kind of make these things called sprues, which kind of allow the metal to get to the end of the piece and turns it into a bit of like a tree structure. Yeah, this used to be extremely manual and now I’m sort of glad that I wrote the algorithms to 3D print it to get this.

Then you put them all on this root sprue, so you have a whole wand of these wax things. That gets put in a metal flask which gets tipped up and filled with this stuff called investment, which is really fine plaster. That then goes into a kiln and then all of the wax gets superheated out of it.

You’re left with this extremely hot thing of plaster that has a hole of exactly what you want them metal to be in. Then it goes into a casting machine, which is either centrifugal or vacuum-based. Then that’s where the actual metal gets melted. That’s all silver. That gets forced into where the wax was and that’s how you get a perfect copy of what you’re doing.

This is how 98% of all jewelry is made, by the way, on a lot more industrial process, but you can do it fairly small scale.

Yeah, I have all of these bits. They get cut off the tree. I bring them back to my studio. I do some sanding and some polishing to clean them all up. Then this was a pendant. I just put it on a chain. Yeah, I have a production process. You may all see I’m wearing one today if you want to see it up close later on.

Yeah, so this was all a great success. I did this all for my final exhibit at the university. I know I’ve said that you should make a lot of things in this talk. I would never advise you to make a light-up jewelry cabinet. It was the worst.

Yeah, this went really well. I needed to have a name for this when I produced it and I really couldn’t think of one. But as a teenager, I had this jewelry brand called Pentatope, which is the simplest, four-dimensional object. It’s like five points in 4D all connected to each other. I was like, “Ah, I could just use that, but that’s five. Let’s just call it Hexatope because that’s six and similar to a name I already have,” so I went with Hexatope.

Yeah, I got to the end of this. I had it on display with the program, so people could create their own and then show off some pieces. Then after that, I was like, I’ve got to keep going with this. I can’t stop now. So, I had access to this lovely 3D printer at this university, which I was sadly leaving, and to really progress with this I needed to get one of my own, so I ran a Kickstarter campaign.

Yeah, the 3D printer was only like 3,000 pounds. I don’t know why I set the goal so high. Yeah, mercifully, it was successful, which is amazing. The main reward was people being able to design their own pieces. I didn’t give many guidelines on what people could do. I didn’t even actually set a size limit, which was a mistake because I didn’t have a scale on the demo, so no one knew actually what they were going to get.

These are most of the pieces I had to make as a result of that Kickstarter campaign. This is all of the support structure that got cut off. Yeah, I thought you couldn’t make any ugly with this program but I was wrong. [Laughter]

[Audience laughs]

I found that when people were open to being abstract, there were some really interesting things that were made when people are trying to do certain things. Like, what’s going on here? [Laughter] It’s just a giant D. It was like this big.

Yeah, when people were trying to recreate particular things, it didn’t work so well. There were some things that were just astonishing that came out of it. These two in the corner blew my mind. I didn’t know you could do something like that with the system. Equally, I wouldn’t have thought to make -- this was weirdly deco in a way that I’d never thought to make. That was really beautiful.

There were also some pieces that had this kind of weird symmetry. These were just completely random people and they’d happen to make pieces that just went so well together, which I thought was really beautiful.

Yeah, nowadays, I’m still working on this project. I’m gearing more towards the production side of things in terms of what I’m improving. Because it’s a wax prototype material, it’s not normal wax the way you’d cast traditionally. The results are kind of inconsistent, so I’m working on bringing all of that in-house. I now own three kilns, which is kind of crazy, but that’s really exciting. Ooh, hexatope.io if you want to check it out.

I’m also working on earrings and rings. I have the only Hexatope prototype ring on my hand right now so, if you want to see that later, come up and I will show you it.

Gosh, I didn’t have my speaker’s notes. Now, I don’t remember what I was going to say at this point.

Yeah, I hope I’ve shown you that it’s not too hard to get started with this kind of thing. It would be hard to recreate this. Please don’t copy me. [Laughter]

[Audience laughs]

You can get pretty far with just a printer and just explore. You can build on these kinds of things. Also, something that starts as a fairly trivial bit of play, just a little demo in the browser, can actually turn into a high quality, physical product that you can actually sell.

Yeah, just to finish off, I’ve shown all of this has been my own work so far. I wanted to show a couple of really interesting things in the space that I get a lot of inspiration from. The first is--

Ooh, I put this in the wrong place. [Laughter]

Nervous System are a pair of incredible designer, maker, scientists from The Catskills in New York State. They’ve been making generative jewelry and generative jigsaw puzzles for a long time. We do things very differently. I really respect them.

This, I think they released last year, and it was based off simulations of coral. They 3D printed. They actually didn’t 3D print the mold. They 3D printed a mold for the mold. [Laughter] Then they used traditional slip casting and ceramic techniques to make these really beautiful, really tactile mugs, which are just gorgeous.

This is a company called Unmade that are doing really interesting things in the space of the fashion industry and the textiles industry and working with big brands to integrate user customization on their websites, which I think is really interesting and very high-quality work.

Finally, my favorite material to work with is glass, which I haven’t mentioned up until now. MIT have made a 3D printer that 3D prints glass. It’s like a kiln that keeps the glass melted and then another kiln. It’s like a kiln on top of kiln 3D printing. It is just bananas. The outputs are phenomenal.

I think this kind of proves that you can sort of 3D print everything. Eventually, we will be able to 3D print everything. I don’t know about you, but that’s a world that I really look forward to inhabiting.

Anyway, that’s it for me. Thank you so much for listening.

[Audience applause and cheers]