[MUSIC]

Thank you very much.

Higher, higher, higher.

I should also mention, that because Steve Faulkner, my friend,

couldn't make it, I stole his identity at the start of the conference.

So, I'm also Steve Faulkner.

So, I work for the W3C and I edit HTML and ensure that HTML is more accessible.

So if we can get a big hand for me, Steve Faulkner, as well.

>> [APPLAUSE] >> I was just gonna say,

I'm Steve Faulkner,

I'm a poo head or something like that which would be a bit unfair.

So, I just need to do a little sound test here.

This is a little something that I've been working on for the Kelloggs company.

[MUSIC]

Just trying to get me get the levels right.

Can you hear me over the sound?

>> Hello, and welcome to today's program.

[SOUND] Corn flakes.

[SOUND] Rice Krispies.

[SOUND] [LAUGH] Only joking.

>> Right, okay, that seems to be normal, well for

certain versions of the web, normal.

My name is Heydon.

I'm not Steve Faulkner.

I am called Heydon.

>> It's quite a good name actually because,

it means that I can sometimes have a username which is just my name, Heyden,

because that's a slightly weird spelling.

So I'm @Heyden on Code Pen.

Don't follow me on Code Pen.

It's just a load of crap on there.

There is some disambiguation to take care of though, naming things is hard.

They do say that in programming, the two hardest things are naming things and

cache invalidation.

I don't even know what cache invalidation is, so that's gonna be even harder for me.

But, I'm not Hayden Panettiere, who's pictured on the left there.

Who, if you don't already know is a famous node hacker from Cornwall.

I'm also not Hayden Christensen, who, well, he started out as a UX designer, and

then he turned to the dark side and became a social media marketing strategist.

So I'm not. There's only three Heydons.

I'm not those two.

So, that's just process of elimination.

But I do have one thing in common with those other Heydons,

and that is that none of us are really known for our mathematics.

None of us are really known for either talking about

mathematics theoretically or applying mathematics to anything.

And so, it would be easy for

me to feel really nervous today standing in front of you for About 40 minutes

talking about mathematics, which is mostly what this talk is about.

Bu then I think of one man, who's a great inspiration.

I say a man, he's more of a being.

And I channel him, and he comes down into me, and into my heart, and makes

me feel peaceful, and confident, because this man has really made it his own.

He's really set the standard for

talking about things he knows fuck all about in public places.

And this man is Michael Gove, our former Education Secretary, who famously,

was asked during a public consultation, to justify a remark in which he said

that all schools in the country should be able to perform better than average.

Better than average.

Just to be specific, in case no one's got that yet, better than average for

all schools in the country.

So, and of course he tries to solve that by introducing other variable times.

Clutching at straws there.

But, if he's able to get up and talk about that in television interviews and

all sorts, then I feel quite comfortable talking about it today, in front of you.

And, you know, I don't set policy for millions of children, so that's good.

So, it's gonna be pretty basic mathematics.

It's enumeration, which is simply getting more than one thing which

is like other things and putting them in the same place and going there is some.

Divisibility, which is small sets of things and putting them in larger sets and

seeing how many small sets fit in the larger sets which is also pretty simple.

And prime numbers which is any numbers divisible by only one and themself.

And they have some odd properties.

I'm gonna apply that to sound design, cuz I do a bit of sound design, and

some animation.

So, I'm gonna be covering that as well, and

CSS layout too.

But first, I'm going to talk to you about Swedish death metal,

which is a bit tenuous, it seems, I think.

I just did a talk in Sweden.

I didn't do this slide and I didn't talk about Swedish death metal there,

which where it obviously comes from.

It's a much maligned musical genre, death metal.

I think a lot of people who aren't familiar with the ins and

outs of it see it as just sort of bluster.

It's just sort of Satan and that's it, and

it doesn't take a hell of a lot of talent or poise.

But that couldn't be further from the truth.

Whether or not you like the brutal aesthetic of death metal music,

it's actually very precise and complex in its construction.

And it takes a lot of dexterity to play, as well.

And Michaga took this one step further, or did something more interesting with

developing the complexity in their sound, in that they employed some mathematics.

And the reason they're called Michaga is it's from the Yiddish for crazy.

And when you listen to them, it's a bit like listening to sort of a fractal.

It's like being sucked into a vortex.

Because the things sort of overlap in unexpected ways.

There's a sort of a sense to it, but there isn't a sense to it.

It's sort of mind bending.

But you didn't have to understand mathematics or

even kind of get it cognitively that you're being sort of fucked with by this

band, because it affects you physically.

It's sort of somatic.

Basically, if you try and dance to it, you look like a drunk dad at a wedding.

And I'm gonna demonstrate that for you now.

I'm gonna really really regret this, I think.

And my microphone will probably come off and then the whole thing will be.

So, if you just imagine I'm at a wedding.

I'm having a sort of chat with some people.

I've had a few gin and tonics or whatever.

My daughter's just got married.

And then someone, the DJ naturally, after they've put on I don't know

Ride Sally Ride or something they put on a bit of Michaga, so.

[MUSIC]

[INAUDIBLE] And if you just listen to how everything's sort of flowing over

itself in a very strange, I don't know.

I can't dance anyway, so this is.

[INAUDIBLE] Anyway, good.

I did regret that, I did regret that.

So what was going on there?

Which would be the next question.

What they've employed is some polymetric syncopation.

Polymetric literally means of multiple lengths.

So what they're doing is the different instruments are playing parts,

which with different lengths, but they're playing them at the same tempo.

So they're sort of syncing up in terms of time, but then they're sort of

overlapping and they're ending and finishing at different times.

I've just made a simple version of this.

This is just using a four beat pattern and

a three beat pattern to make a composite polymetric pattern.

And that works a little bit like this.

So, this is the 4 beat pattern just played on it's own.

[MUSIC]

So I just made this in a sequencer on my computer.

So it's just one, two, three, four, one, two, three, four, etc. Most Pop music,

Blues, or whatever is sort of made around that.

And this is a three beat pattern, but it's the same tempo.

[MUSIC]

It's one, two, three, one, two, three, one, two, three, and so on.

And now I'm gonna bring in the four beat pattern behind it.

Now, I'll probably screw this up the first two or three times because of the lag.

There's a bit of latency in sort of sound engineer terms.

Cuz I'm doing this with JavaScript.

[MUSIC]

Not quite there.

So, you can here the composite pattern that that's made.

Now, I'm not changing either the three beat pattern or the four beat pattern, but

together, they create something more complex.

So, from something simple, we have something more complex.

And there's an axiom that governs this.

In mathematics, we have axioms, and

they're true statements based on certain conditions.

In this case, the length of a polymetric pattern is the lowest number,

the lowest integer, divisible by the length of each of its parts.

And so, when it's four, repeated patterns of four,

over repeated patterns of three, then the length of the combined pattern will be

twelve, because twelve is the first number divisible by both four and three.

So from that point onwards it will repeat itself in twelve beat intervals.

And that's pretty easy to sort of cover if you've only got two parts and two numbers.

If it's more complex,

you might wanna use some programming to sort of extrapolate it.

So, I wrote a bit of JavaScript here, and it's quite simple JavaScript.

The lengths, the constituent lengths, I've put into an array.

So, in this case, in the example four, six and nine.

Then there's a denominator,

like an incrementor, like when you do a plus, plus.

And then I increment that number.

And each time, I run a function which tests to see

if it's divisible by all three of those numbers.

And if it is, it then stops.

And then the output would be the length of my polymetric pattern.

And so then I created something graphical to express this.

So, I believe I did four, six, and nine, so I just enter them here.

And it sort of looks like a sequencer, like in Q-base or something like that.

And there's two things I noticed about this, one of which was unexpected to me,

and that's that it was symmetrical.

So, if I put in any numbers, it doesn't matter what the parts are.

Or how long they are, or how many there are.

This pattern, the visual pattern that I've created, which represents how the music

interacts, the relationships in the music, will always sort of fall back on itself.

And that's just one of those innate, weird,

beautiful things about mathematics I think.

The other thing I noticed is that if I used prime numbers,

then the overall length is much,

much greater, even though I can just use numbers of a similar magnitude.

So, if I use three,five, and seven and do the same thing,

I've actually got a scroll here, and show you the whole pattern.

So, at 120 bpm, this piece of music is unrepetitive for

its entire duration, because the relationships between the different parts

are constantly changing, until the very end, where they finally link up.

And that's nearly a minute long.

If I add another prime number in there,

I've now created a piece of music which is essentially prog rock.

It's nine minutes long, and it doesn't actually at any point repeat itself

because it's constantly shifting until it finally reaches that 9.65 minute mark.

Prime numbers are used in other areas of where the development and security.

I don't really understand RSA encryption very well, so

anyone can correct me at the end.

But, I gather that the idea is basically about the fact that encrypting is easy and

decrypting is hard.

Because, when you encrypt something, you're just taking two prime numbers and

multiplying them together.

And that's no harder than taking any other number and multiplying it together.

But when you're factoring the result,

that's finding the two numbers which were used to encrypt, it's much harder.

It's much more computationally heavy, which means it's more of an eyesite for

the people who are trying to hack.

That's RSA encryption in a nutshell, I guess.

Even Cicadas know more math's than Michael Gough, for instants, and myself.

They appear to actually do their gestational periods,

their life cycles, around prime numbers.

So biologist observe in different parts of the world.

You'd have one brood of cicadas, or cicadas,

depending on how you pronounce it.

Which did their life cycle in 11 year periods.

1 in 7, 1 in 13, I think.

And it makes perfect sense.

And just with the music, it's all about the fact that they don't sync up

with the rest of their environment so much.

So, with other animals having their cycles around normal numbers, even numbers, or

normal odd numbers, not prime numbers.

There's less convergence.

So, it's less likely that they'll emerge, which they do on mass.

Which is a very noisy and spectacular thing.

When predators are at large, which are more likely to eat them in large numbers.

So, a bit more music now.

I've done the sort of death metal bit of

divisibility of prime numbers through the [INAUDIBLE], and what I wanted

to demonstrate now is how you can actually create an entire piece of music,

just through simple sounds being triggered at certain beats.

So I created three chords.

They're simple chords just of two notes, and when they're played together,

they do harmonize.

So six notes together makes a chord, which works.

And either of the two, so

it would be a set of four in each case that would also work.

So the first one sounds like this.

[SOUND] And that's played every three beats.

The second like that and that's played every five.

And the third which is played every seven beats sounds like this.

And when you play them all together and just set them off like that, and

I did this just in Q-base to start with, but I'll show you how to do that later

just in HTML and JavaScript, it creates something like this.

[SOUND] So [SOUND] not only is this a piece of music which,

at no point, repeats itself.

It doesn't become repetitive like a piece of [INAUDIBLE].

I see a piece of music as more like a soundscape or something like that.

Bet there are also peaks and troughs in terms of amperage.

[MUSIC]

Because sometimes two of the chords will play simultaneously, and

because they're playing simultaneously, that's more sound.

Though you could think that perhaps playing two sounds with the same amplitude

together would double the volume, but that's not true.

It has to be orders of magnitude.

So you'd have to play the same sounds, you'd have to play 10 of

the same sound simultaneously for it to be double the volume.

Now this awkward, because this is generative, and

I don't know how long this is gonna last.

I think I'm just gonna quickly go and get a coffee I think, and then I'll come back.

[LAUGH] [SOUND]

Is it still on?

Oh, fucking hell.

[MUSIC]

This is awful now, isn't it?

[MUSIC]

I'm sorry I sort of left you in the room alone.

[MUSIC]

I think it's about 2 minutes altogether.

It's 2 minutes of music,

which is very, very easy to generate because I've just set things off.

That's what people mean by generative music.

You get a computer to do it for you or mathematical algorithm to do it for

you, instead of you actually sitting there with a guitar and

going, that's how I'd like to play it.

Okay, so bye-bye Gove.

Right, so there's a sort of inherent performance thing here.

And as I was experimenting with this for the talk I felt well, hey,

what I've got there is, because I'm repeating individual sounds, rather than

it being a whole sound, like the duration of that song, isn't a two minute file.

There's an inherent performance thing there, which I could try an exploit.

So, for the 15 seconds of actual sound that I might download.

Or a client might download in their browser.

I can actually create ten times, almost, that amount of music.

So, it's sort of a form of making music or

making sounds that's it's own compression algorithm.

So, how would I go about doing that?

With a little bit of HTML5 and JavaScript basically.

I'd have audio elements.

Give them ID's so I can reference them in the JavaScript and

obviously a path to the actual sound file.

In this case, ogg, but

you probably want to support other formats because browsers are a bit inconsistent.

Name that, and then just use the setInterval function.

So, you can see that window.setInterval there, and then, every three seconds, or

every 3,000 milliseconds, it would play that one sound.

But of course, once it's downloaded the sound,

it's then repeating it, so you're not actually

front loading it with lots of information that the client has to download.

I've commented out the sound in dot play, just above there.

You could get all the sounds in your polymetric music to play

simultaneously first, and then get them to repeat at their different intervals.

But then you get a sort of a loud sound at the beginning, which isn't so hot.

And then stopping further repetition of the sounds,

you just call clear interval function in JavaScript and to supply the name

of the repeater that you'd set off in motion before.

In that case, the one which is every three seconds.

And the cool thing about that is you get these sort of clean diminishes as well.

You're not just stopping the sound dead.

You're letting each individual sound play out in its own time,

and then they will end at different times.

And then it just doesn't start again.

So all of this simplicity gives you something which sounds quite rich.

I'd like to think, anyway.

So how would I apply this visually.

So the same sort of underlying mathematics now but

I'm going to apply it in to a sort of a visual context.

And of course you could do some CSS animation.

And there's the animation duration property

which allows you to set how long each animation lasts.

So I've just used nth-of-type, but I'm gonna talk a bit more about nth-of-type

and things like that in the CSS layout section of the talk.

And what I've done is I've said, take these objects which

are alike and make each one their animation last at different length.

And it took me a long time to think of something compelling

to show you how you could apply that.

So what to animate and I thought of clouds and things like that.

And eventually and inevitably I landed upon Whack-a-Mole.

So I drew a little mole here and if you've ever played Whack-a-Mole,

you have moles which comes in and out of holes like that.

And you have to hit them with a hammer.

[SOUND] And then you win the game I guess.

I guess you've got to hit as many as you can.

So exactly the same JavaScript behind what I did for the sequencer.

But in this case I'm gonna put a few moles in it.

i'm gonna just start with one which goes every two seconds, one every eight.

So this would be really easy for someone who's playing Whack-a-Mole to work out.

So that one always goes that amount of time but

that one the relationship is repetitive much quicker.

Where as, if I was to use prime numbers again, the overall.

Okay, I have to zoom out I think.

Three, five and seven. Why is that not working?

Oh, he's underneath.

Okay, because this screen's a bit different.

I didn't anticipate that.

So basically if you're using three, five, and seven intervals,

then the overall game like the piece of music that I played will be much longer.

Before it starts to repeat.

So for that whole duration of that time,

it takes ages to really kind of work out what the pattern is.

It's constantly, you have to second guess it I suppose.

And then I just added one more variable,

I'm just gonna show you that here actually, which is a difficulty variable.

So when I start the game again,

now you can see that it's much more difficult to catch the moles.

Oh, that helps if I do that [LAUGH].

But now I can't click on them.

I've got a dilemma now.

I think I'll move it on.

Anyway, you can see they're moving faster, and what I've done,

if I've applied the same, changed the same variable across all the moles, and

it's a really simple thing to do.

All I've done is change the distance that they have to cover.

So, the first example the easy mode is on your left there and

on the right is the difficult mode.

And this is really simple sort of primary school,

possibly middle school mathematics.

They're traveling the same distance in the same time but because they have to

travel a further distance they have to go faster to cover it.

Which means that the moles spend less time above ground proportionately.

So it's just speed equals distance over time.

In this case if you're interested in the code I just changed

the translate y property for all the mods.

So, Design vs Aesthetic.

Now when I built the whack a mole game, I was thinking to myself,

well this is really fun but the design of it is really the mathematics underneath.

That's sort of the algorithm which governs it.

And that to me is what design's about and that, so that's the important part.

But there's a lot to be said for aesthetic as well.

There's a guy called Tim Hunkin who's an engineer.

He actually took an old whack-a-mole game and he gutted it and

he took the mechanism out.

And the mechanism works exactly the way that it would have done originally, but

he just changed the theme.

He made it political.

He turned it into Whack-a-banker.

And the thing that I really like about this game is that instead of it now saying

insert 40p, it says minimum investment 40p on the game.

So I thought that was quite a cool joke.

I've done a similar thing here.

In that I have made a predictably, whack-a-Gove game here.

So you can see me whacking Gove on the head.

And I think that says something about aesthetic because I'm not really that

inclined to hit a small, innocent, wouldn't hurt anyone rodent over the head.

But I really fucking like hitting Gove over the head.

So I'm better at this game despite that it works in exactly the same way and

everything happens in exactly the same sequence as you've decided it.

I am actually better at this game because I'm more inclined to use it.

So, I'm going to put together some of the ideas I've talked about so

far, with the animation and the sound.

I'm going to do a demo now on my laptop.

Which, hopefully won't burn out.

Which, combines those ideas.

And, when I was making this, I was thinking about a game called

Monkey Island, which if you're as old as me, you may remember playing.

It's this sort of problem solving game where you go from scene to scene and

you sort of try and solve puzzles as you go along.

And I spent a lot of it, cuz I'm quite slow,

I spent a lot of this game standing around trying to workout what the puzzles were.

And just sort of just looking at the screen.

And what was nice is there was always little animations going on,

to keep it looking alive.

So you'd have someone blinking, or a fire flickering,

or blades of grass waving, or whatever.

And it occurred to me that the clever thing that was going on here, although I'm

not entirely sure they actually did this, but they could have done.

Is that if it was one set animation where the grass and

the blinking and the people twitching their leg or

whatever was all happening as part of one animation which then repeated,

you'd start to see that it was repetitive.

Whereas, if you did all of these, governed all of these animations independently,

it would work a bit like a combination lock.

So, on a combination lock, if you just had one wheel,

then it would just take ten attempts to work it out.

Or, you wouldn't even have to work it out, you just go for

the motions until you opened it, right?

Then if you had another one it doesn't make it twice as complex it makes it

ten times as complex.

And with four it would take

potentially 10,000 attempts to work out how to open that lock.

And it's the same thing with using concurrent animations which aren't

actually connected to each other.

Cause they're moving independently.

You're multiplying rather than just adding complexity.

And to demonstrate this, I have created a sort of a scene where the music

now in my browser is going to be playing and

repeating in the way that I described using a set interval.

And there's gonna be a number of CSS animations which all

happen in the same space, but independent in of each other as well.

It's just going to take a couple of minutes to come in.

This is a different sort of theme to the whack-a-mole theme.

It's a little bit more dark and disturbing, I suppose.

You can see flickers happening on the screen.

Those flickers are happening independent of each other.

It's not a flickery animation.

It's not a video of an underground car park camera.

It's a living thing with lots of different things happening independently.

Because there's so many, like the record button, the shutter, the different

flickers, the lights flashing and everything, the length, the overall length

of this animation, despite the fact that there's only a few parts.

Could be days or weeks or even years before it actually repeats itself.

This was inspired by the way by a film The Grudge.

And there's a bit in there,

I don't know, hands up anyone whose seen the film The Grudge.

The Japanese horror films, yeah, and

there's a bit where the ghost character sort of approaches the character.

You know with the eheh thing like that.

Comes up to the camera and it's really, really frightening.

So I've tried to incorporate something similar and

that only happens every so often.

So I'm going to do another poll here.

Who has a heart condition?

Okay, [LAUGH] could you put your fingers in your ears or close your eyes?

Actually, to be honest with you, that happens so infrequently,

the chances are I would run out of time before it even appeared, so just.

[SOUND] Of course, Gove sticks his fucking

face in where it's not wanted as usual.

So that's that.

So there's another great takeaway.

So, maths and CSS Layout.

I've been writing lots of articles for a List Apart recently

about some weird CSS techniques, and the last one was called Quantity Queries.

And it's all about combining different selectors in ways that you can achieve

strange effects.

So I'm gonna talk a little bit about that now, and

particularly employing the divisibility idea that I've used in the animation and

also previously in all of the Gove stuff, basically.

And the nth-child selector family, or nth

of type as well, and nth last child, etc., they're sort of inherently mathematical,

because they take an argument which is arithmetical or sort of algebraic.

The very simple example, which I'm sure a lot of you may have used to do CSS is just

putting a number in there.

So if a set of elements, of sibling elements, nth-child three would mean

just select the third of that set, the third from the beginning.

Nth-child n plus three is sort of an offset.

So it's saying all of the elements but starting from the third so

it's all invert but we're gonna start at this point third one.

So we'd select the third one and then the fourth and add in for an item.

Then you can do sort of multiples.

So three n would be like the three times table.

So 0, 3, 6, 9, 12 etc.

And then you can combine some of these ideas.

So you can do three n plus one, which would mean the three times table.

But starting at one rather than not.

So you'd actually have one, four, seven, ten etc.

And you can combine these together, you can concatenate them.

So, by doing that, you can actually achieve some really strange things,

like Styling by Quality.

So, I'm gonna just use two conditions in this first example, and

I'm gonna add elements and remove elements.

But I'm not adding any JavaScript to anything or adding any classes in there,

which determine how the elements look.

It's just the CSS logic.

So if it's the third last item and it's the first item,

what would we expect if I add that element, there's no match there.

It doesn't meet any of those conditions.

Oh, it does actually meet the first item condition, but

it doesn't meet the third last item condition.

So that's not selected.

Then I add one.

And there you have the third last item, which is also the first item.

Then if I add another element, of course, the third last item

is no longer also the first item, and so, you've run out of things.

So what's interesting there is that you've styled based on quantity, really,

because only when there's three can the third last item also be the first item.

And the code looks a little bit like this.

So we use nth-last-child(3) and we concatenate it so

there's not space between those two with first-child.

And then we're just making background green which in practical

terms isn't very useful, but it's just to demonstrate here.

And concatenation is indeed the name of a Meshuggah track, so

just showing their mathematical credentials once again.

So, how would I start all the items?

So, what if I wanted to start all the items in a set based

on the quantity of that set?

So, doing that, it would look like this.

There's three items there, and

all of the items are now green because there's three of them.

That's the condition.

And then when there's four, it's no longer the case.

So, that looks a little bit uglier, and

I've had people complaining to me that my CSS was ugly.

I don't think you can do it in any prettier way,

except that there have been some

folks doing some processor stuff to just make it look a bit better and using Sass.

But the logic that actually is behind it is here and

that's if the last child frees the first child.

So it styles that first one already, and then it says, also take this one and

style, if that one exists, style all of the ones which appear after it,

which is using the general sibling combinator there.

I don't know if you've used that before.

But it just says we've got our element here, just all the rest, and do that.

So you can also style by divisibility.

Similar principle, but instead of it being enumerating,

it's more to do with what the set is divided by.

So, I think of it a bit like this.

I think of it in terms of frogs either landing on their lily pads or

landing on the rocks and dying.

Maybe that's just the way my brain works.

But if you imagine using nth-last-child and

you're stepping backwards using multiples, if there's six items or

there's nine items or the number of items is divisible by three,

then as the frog jumps back, it will land on the first of those lily pads.

If there's five or there's seven or

it's not divisible by three, it won't ever land on the first one.

So, you can sort of use this to try and govern grids, I suppose.

CSS grids.

So that when the content changes, it actually reconfigures

itself intelligently so that it won't be uneven at the bottom.

There won't be any gaps.

So the first block at the top there, nth-last-child, 2n,

first-child blah, blah, blah.

So, you can see I'm using the multiples there in the argument for

the nth-last-child.

We'll make the cells in the grid 50% width, so they're two-by-two.

If the whole set is divisible by three, then we should divide it into three.

So we'll do them 33% width, and 25% for if the set is divisible by four.

So you start to get effects like this.

So there's 1, so that defaults to 100% width,

because block-level elements will always just fill the space.

There's two, there's three, there's four.

No problems so far.

Five is a prime number, so talking about primes again, but

primes are gonna fuck us over a bit this time.

They're gonna be a problem to solve,

rather than something which is a handy tool.

There's six.

So six is divisible by three so it goes hey, it's divisible by three.

It meets the second block in our CSS and

divides it by three, and it looks nice and neat.

Seven is another prime number, ergo, and then eight.

So eight's divisible by four, so two sets of four there.

Nine divisible by three, ten divisible by two.

11 is a prime number and I've screwed my slides up because of that.

Right, so how do we handle the primes?

We have to do something a little bit more intelligent.

What we really have to do is we have to take what we have and

divide them into further subsets.

So the way I would go about doing that is like this.

So, if it's divisible by five, we start out by saying well, hey,

let's make them three by three.

But then we're gonna have to handle the last two differently.

So the last two, we say we use the offset.

So we have the 5n plus 4, means the fourth of every five.

So, for every five in the set, the fourth will be styled 50% width.

And then we just use the adjacent sibling combinator there with the LI and

say, well the fifth one also should look like this and

the fifth one is the one next to the fourth one.

We've done a similar thing with seven items, so the next prime number.

And we've started off doing it 3 by 3, and then we just do 100%

width like the spare one, so 1, 2, 3, 1, 2, 3, 1.

So now, my grid system handles a few primes, so it takes longer to break,

I suppose.

So, one, two, three, four, five is divided into three and two, so

that's still neat there.

Six is divisible by three, like in the old version.

Seven, you've got the spare one sorted out.

Eight's divisible by four.

Nine, divisible by three.

Ten is now two sets of the already subsetted five, so three, two, three, two.

And 11, we still haven't handled.

So, the question is, how many prime numbers would I have to take

care of in order for my grid system to be infallible, for it to work in every case?

And a mathematician called Euclid in 300 BC when he

was working on the first ever CSS grid system, looked into this and

did some conjectural mathematics, and proved that the number of

primes that exist as you count up is, in fact, infinite.

You wouldn't think that it would be infinite,

because you'd think that the larger the number, the more chance there would be

that that number would be divisible by something, right?

But that's not the case.

You still get huge prime numbers, hence the RSA encryption thing working.

So, I would have to write an infinite amount of CSS in order to make

an infallible grid system, which would have some implications on performance.

So, as you can see, Euclid is, he's just, he's done, basically.

And I'm kind of done as well, actually.

I've covered all the maths I know, so I'm just gonna sort of finish up.

Just with one last thought, which is that maths doesn't govern the universe.

I hear people, sometimes even mathematicians,

say, maths governs the universe.

And they say, without maths, it doesn't work.

But the thing is, maths is a human construct.

Dinosaurs didn't have maths, and yet they were still subject to the mathematics

which expresses the natural physical laws.

The truth is that the universe isn't governed by maths or anything else.

It's just inherently boring and

easy to predict and sort of ordered and symmetrical.

But what maths is, is a language which helps us to exploit that commonality and

predictability and even possibly we might be able to make an infallible,

self-correcting grid system one day.

Thank you very much for listening.

>> [APPLAUSE]

[MUSIC]