Nat Alison

Transcript

NAT: Hello, JSConf EU. My name is Nat Alison and I'm going to make all of you fall in love with polyhedra. Your first question is, what is a polyhedron. It's a solid in three dimensions with flat faces, sharp corners or verity seize. For example, some of you may know of the platonic solid, the cube in the tetrahedron, they have a single type of face and are really symmetric.

So whichever way you turn them, you get the same figure. And the relatives, the Archimedean solids, they're highly symmetric and you can rotate and get the same shape. And the Johnson solids which can be made of any regular polygon in whatever order. These can range from a simple square pyramid to a triangular habesphenorotunda.

Anyways, I love polyhedra. And I'm not the only one. They have been used in art and architecture and games and films for centuries. They're beautiful and symmetrical and found in nature.

They're simple, but somehow extremely alien to us. But there's another reason that I like them. And it has to do with Pokemon.

And this isn't really  it's kind of silly but not really. Both polyhedra and Pokemon have data associated with them. Polyhedra have symmetries, Pokemon have different sets and rarities. There's like a buttload of each of them. Of a lot of unique polyhedra in Pokemon to discover and that involve in different ways.

The Pokemon just gets bigger and stronger. And sometimes can branch off and become two different Pokemon or more. But with polyhedra, it's more difficult. You can do this weird twisty thing, snubification.

And when I was a kid, I spent hours poring over websites looking at models in VR and origami which was really fun but also made me kind of sad. The thing was, lots of people love and know about Pokemon, me included. In fact, I loved Pokemon so much that the first thing I did in Europe was catch one in Pokemon, it's a regional exclusive. I just had to.

But not as many people know about polyhedra and that's kind of a shame and sad. I wanted to make the best polyhedra website that ever was. To have my quest and understand them as my cause.

Today I'm going to share my journey to becoming a polyhedra master. But before that, before talking about code. Let's talk about the other ways that I tried to bring my love of polyhedra to life. I went through several attempts.

The first of which is origami. It's cool and artsy and I thought, why not make my own? I made one cube and I got a paper cut and didn't want to do it anymore.

I got tired quickly. I thought, maybe I could 3D print them and make cool jewelry. You know, 3D printing technology advanced a lot. You need to upload a model and, oh, my god, it's too expensive. The next step which followed was writing polyhedra fan fiction.

[ Laughter ]

But less said about that phase, the better. And after this I decided you know what? Let me just make a website. That's what I know how to do.

So, I got started. Our journey begins in May 2015. I was working as an internal tools engineer making code for engineers who make code for engineers who make code for other people. It felt like a Pikachu in the generator just grinding away. So, wait.

So, I asked my boss, I really wanted to do frontend and I asked him, can I work on frontend stuff. And eventually he got back to me and said well, you know, I heard you like this. We have a new project coming up. I have just the thing for you, Jenkins.

[ Laughter ]

It's a UI. You should work on that. Needless to say, I was not very happy with this, so I decided to take matters into my own hands. And what better way to do that than by making something that I already love. When I started, I had a bunch of big brain ideas about collecting every single fact about polyhedra in Wikipedia and putting them on my page, I wanted to do VR.

I wanted to do cool transformations, transforming them into once another. And I still had my job going Jenkins. In Pokemon, before you challenge the elite four, you have to get your first gym badge.

That's what I did. I narrowed it down to an updated version of the sites that hi loved as a kid where I could see my favorite polyhedra. I downloaded from one of my favorite websites. JS was a little too low level and I didn't to want struggle with lighting and buffers.

But I knew D3 and the data binding model and I found a library, xFreedom, letting me express 3D modelling data as dominoes like D3. It worked perfectly. It took me about a week of parttime work to get it working.

And I'll just bring this over here. And you can see I have a little tetrahedron. A cube. An Archimedean solid.

Different Johnson solids. But that was kind of it. Let me close this out.

I showed that to a few friends, but kind of left. it was a good start, but also too simple and not really interactive and I found myself being unsatisfied by it. Fast forward two years later, I got fired because I hated Jenkins. I took a sabbatical and wrote a video game and more science fiction and started a job with frontend. It was Angular 1, but baby steps.

I did that and we were in the process of switching out our frontend from Angular to React and I thought that I should be a good employee and learn about it in a side project. But I didn't want to do the basic TD app that everyone does with learning a new frontend framework. So, I thought, why not make my old polyhedra viewer into React. After all, Nintendo has been making the same Pokemon game for decades and we love them.

I got started. And it turns out that React as a framework, it works really well with X3 DOM just like D3.

Moreover, I found that React was easier to add in reactivity such as a configuration panel or a search bar or an index page where you can see my collection at once. And I don't have a live version of this running. But I showed it to my boss and teammates and that was it. Oh, get back to work.

It was more interactive, but still esthetic. You can change the colors but doesn't tell you about polyhedra. What I wanted was the cool transitions, but I didn't have time because I was busy refactoring an Angular app, so I had to put it away again. Fast forward another couple of months.

And in October, left my job due to burnout and depression and kind of just wanted to take a break from all the coding and focus on my other hobbies. Like fan fiction.

But somehow writing polyhedra fan fiction did not make me forget about polyhedra. And old habits die hard and I kept coming back to the polyhedra and making improvements to it. More specifically, I wanted to arrange the polyhedra into sort of a periodic table based on their properties. And seeing all the polyhedra related to each other and correlating it like that made me think, why not just do what I wanted to do in the first place? I finally feel I have the skills to do it, and more importantly, I have the time.

I got started on the long, laborious process of finally making the final evolution of my polyhedra viewer. I have no idea what I'm doing.

But the very first step was to determine what operations were possible and actually valid. After all, not over Pokemon can evolve or combine into one another. And you don't want to allow free form combinations in polyhedra as cool as they might look. I had the relations for the periodic table.

And when you see lines connecting dots like this, you're looking at a state machine or a graph with the polyhedra's notes and the operations at the edges. And there's a pretty straight forward to represent this as an object. You can  it's just like an object of an object of a list of objects.

You just label it with metadata to differentiate between multiple results. But there's a lot of polyhedra and a lot of relationships to encode. And it's all really  but luckily, it's all really structured. And through an advanced programming technique called foreloops, we can save time from manually coding the entire graph.

Okay. Now that we have this graph, we can figure out what configurations and options to transfer a polyhedra to another one.

And you can disable operations, if they're invalid. You can test whether an operation leads to a result that matches the model that we currently have. You can mock the applications and click the next polyhedron instead of animating them. Now that we have that out of the way, let's talk about the transitions.

At the beginning, I didn't know what I was doing and how many operations or what I wanted. So, it would be nice to have an abstract interface that I can plug in. Hi to think to myself, what is a transition? Think about what we're doing. We're interpolating verities from a start to an end.

The faces and edges are defined by the Vertices. They don't change even if they're invisible at some point or overlap. But there's a problem with doing duplication.

And that's that we want to be able to chain operations like this. We want to be able to blow stuff up and contract stuff. And it would be too complicated to keep track of all the due my cushions for every operation. And we have the switch, and it's hard to see which is which, it's impossible to tell the duplicate, but one has extra vertices and faces.

And we can define an interface. And as long as the functions return the interface, we can animate all of them the same way.

And the algorithm is one, replace the vertices with the duplicated versions, and interpolate and switch out the end result with the D duplicated version. This is kind of what it looks like in code. We have the state function, set it to the start and interpolate and set it to the D duplicated end. And finally, you need an interpolation function.

There's a lot of libraries you can use for animation in JavaScript. Half don't exist anymore because animation in JavaScript is a crap shoot.

Or you can Google and roll out your own. It's great. We don't have anything to test it on, though. So, let's talk about the actual operations we're going to make.

I'm not going to go over all of them. But I wanted to share one example that's kind of easy and it's this operation called rectify. You have this shape, a cuboctahedron. And you have the cube and draw the points and draw lines and cut them up and slice them up.

But we don't want to go back and forth, we want a smooth transition. In order to get the smooth transition, to animate it, we duplicate each twice so there are three vertices at each corner.

Pull them to the midpoints and if there are two sets of vertices, we consolidate them into one. The algorithm is just duplicate and then map to the end. The duplication is annoying and not interesting. It's making sure that the old stuff maps to the new stuff and allow crossreferencing vertices. Finding the vertex is just picking the one that is not one of your duplicates and calculating the midpoint through a map library.

And finally, you put it all together and return the interface that we just defined. And here we go. Squash and stretch.

[ Applause ] that really wasn't that impressive. I don't know why you all are clapping. So, I think I made about half the operation before realizing, math is kind of hard, y'all. In particular, the way that you usually represent polyhedral geometry is through a list of coordinates and a list of faces that refer to the indices of the vertices that are in the faces. Which is fine for 3D modelling, but that doesn't always translate well to the math stuff we want to do.

How you combine two polyhedra together? Or the selected faces of the polyhedra, it's hard. And what you end up doing is a lot of index manipulation. The face indices, you have indices of indices. And I'm so tired of indices.

Did you know the plural of index is indices? Now I do. How to solve this problem? Different types of Pokemon are strong against each other. If you're fighting a water Pokemon, use an electric Pokemon, that's what's effective. And different types of programming have different solutions. In this case, the solution we're going to use is objectoriented programming.

They have their weaknesses, but useful here. You can, of course, encapsulate method in the polyhedra like getting a centroid or combining two together. And you can keep track of metadata like the custom data like vector format that the vertices are stored in.

And in particular this is  there's a really useful structure called a doubly connected edge list. It's a link list where each face has links to adjacent facets, and it was easy to do with the class structure. I could have stopped at making the polyhedron class. They could stop with Pokemon, but then Nintendo couldn't make money with the Pokemon.

I made everything a class, the edges, the faces, I have no idea if that was a good idea or not. But didn't have to see the word indices again so I was happy. But even with this, it was hard.

For example, determining a solid. Sometimes they do different things depending on platonic or Archimedean. And you can see if they have the same, and there's this asshole, an elongated structure, it looks like an Archimedean solid, but it's annoying and it's like the Mr. Mime of polyhedra.

And to do it right is more involved. How to solve this problem.?

In Pokemon, there's a mythical Pokemon called Mu that you can only get in Tokyo. But when I played the first Pokemon game, I couldn't go to Tokyo because I was 8 years old. You can use this glitch to get the Mu much easier. Let's just cheat. We know there are only 13 Archimedean solid known since the Renaissance, it's proven.

Since we have the list, why not just list them all and check if it's one of those. And this turns out making these shortcuts was actually a lot really useful in a lot of areas because there are a lot of places where it's significantly easier to code when you know what thing you're turning into when you have the graph. Anyways, that's a lot of math.

So, let's go focus on art. Like I said in the beginning, a lot of these polyhedra sites are really old. They're often done by math professors on their spare time. For example, this is kind of the stateoftheart of polyhedra websites.

I took this screenshot not in 1995, but two weeks ago. They're so old a lot don't work anymore.

You can't see the polyhedra models or view or upload them. I wanted my website to be a new destination for polyhedra lovers. I wanted it to work on mobile phones so you could play with it anywhere. Or if you don't have access to a desktop. I wanted to make sure that there are a lot of visual aids so you can press around on the buttons even if you don't know what they do or know the math.

And I made sure to pass the site even if you have a bad connection or a disability or you don't have WiFi on a plane and need screenshots for your talk at JSConf EU. So, after much work, I was ready to present it. So, here is the polyhedra viewer. Here is the home page. You have the periodic table of polyhedra showing all of them.

Let's start out with a simple tetrahedron. You can truncate it. Sharpen it. You can augment it.

Or diminish it. You can do that operation that we coded together called rectification. And you can do that animation where you expand the polyhedron. And you can contract it back until it's a cube.

And finally, you can do this weird thing called snubification. And you can see it's expanding the faces, but it's like twist them. And you can also search and filter.

Change the colors. The color thing is like on my other screen. Or look at info about each polyhedron. Anyways, the link is up over there. And so, you can just play around with it instead of listening to me for the rest of the talk.

Ah. So, I kind of released it and expected it to just sync. After all, polyhedra are really obscure and the last couple of times I just showed it to friends and they were like, that's nice. Get back to work.

But to my surprise, a lot of people loved it. A lot of people I admired in the development community Retweeted it. I got interviewed we math publications.

I was able to connect with a lot of people both in the tech and art and math space who really enjoyed it. I had parents telling me their kids can't stop playing with it. Teachers telling me they want to use it to teach about polyhedron in the classroom. I was able to learn about other polyhedra projects by others obsessed with aspects of polyhedra. And I was able to connect with artists who loved polyhedra and expressed it in a different way through their art.

But at the end of my long, long journey, the message that I want to impart is, even if you think your passions are too obscure or weird, there's always a way to share it with the world and make other people fall in love with them as well. No matter if it's polyhedra or Pokemon.

And it's okay to take your time to evolve and grow whatever your passions are to transform them. And eventually I'm sure that you can create something amazing. Thank you.

[ Applause ]