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 butt load 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 part time 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 cross referencing

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.