Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Start a free Basic trial
to watch this video
Complex Design With Simple Mathematics
36:56 with Heydon PickeringWhat can Swedish Death Metal, cicadas and Whack-a-mole teach us about Web Design? The answer is, astonishingly, 'more than nothing.' This session will explore how simple number theory can produce deceptively complex animations, self-correcting grid patterns and compelling but highly economical sound design.
-
0:00
[MUSIC]
-
0:12
Thank you very much.
-
0:13
Higher, higher, higher.
-
0:15
I should also mention, that because Steve Faulkner, my friend,
-
0:19
couldn't make it, I stole his identity at the start of the conference.
-
0:23
So, I'm also Steve Faulkner.
-
0:25
So, I work for the W3C and I edit HTML and ensure that HTML is more accessible.
-
0:32
So if we can get a big hand for me, Steve Faulkner, as well.
-
0:35
>> [APPLAUSE] >> I was just gonna say,
-
0:39
I'm Steve Faulkner,
-
0:40
I'm a poo head or something like that which would be a bit unfair.
-
0:44
So, I just need to do a little sound test here.
-
0:46
This is a little something that I've been working on for the Kelloggs company.
-
0:49
[MUSIC]
-
0:52
Just trying to get me get the levels right.
-
0:53
Can you hear me over the sound?
-
0:54
>> Hello, and welcome to today's program.
-
0:57
[SOUND] Corn flakes.
-
0:58
[SOUND] Rice Krispies.
-
1:00
[SOUND] [LAUGH] Only joking.
-
1:03
>> Right, okay, that seems to be normal, well for
-
1:06
certain versions of the web, normal.
-
1:09
My name is Heydon.
-
1:10
I'm not Steve Faulkner.
-
1:11
I am called Heydon.
-
1:12
>> It's quite a good name actually because,
-
1:14
it means that I can sometimes have a username which is just my name, Heyden,
-
1:19
because that's a slightly weird spelling.
-
1:20
So I'm @Heyden on Code Pen.
-
1:22
Don't follow me on Code Pen.
-
1:24
It's just a load of crap on there.
-
1:27
There is some disambiguation to take care of though, naming things is hard.
-
1:31
They do say that in programming, the two hardest things are naming things and
-
1:35
cache invalidation.
-
1:35
I don't even know what cache invalidation is, so that's gonna be even harder for me.
-
1:39
But, I'm not Hayden Panettiere, who's pictured on the left there.
-
1:45
Who, if you don't already know is a famous node hacker from Cornwall.
-
1:50
I'm also not Hayden Christensen, who, well, he started out as a UX designer, and
-
1:58
then he turned to the dark side and became a social media marketing strategist.
-
2:04
So I'm not. There's only three Heydons.
-
2:05
I'm not those two.
-
2:06
So, that's just process of elimination.
-
2:09
But I do have one thing in common with those other Heydons,
-
2:11
and that is that none of us are really known for our mathematics.
-
2:15
None of us are really known for either talking about
-
2:19
mathematics theoretically or applying mathematics to anything.
-
2:23
And so, it would be easy for
-
2:27
me to feel really nervous today standing in front of you for About 40 minutes
-
2:31
talking about mathematics, which is mostly what this talk is about.
-
2:35
Bu then I think of one man, who's a great inspiration.
-
2:38
I say a man, he's more of a being.
-
2:40
And I channel him, and he comes down into me, and into my heart, and makes
-
2:45
me feel peaceful, and confident, because this man has really made it his own.
-
2:48
He's really set the standard for
-
2:50
talking about things he knows fuck all about in public places.
-
2:54
And this man is Michael Gove, our former Education Secretary, who famously,
-
3:00
was asked during a public consultation, to justify a remark in which he said
-
3:06
that all schools in the country should be able to perform better than average.
-
3:10
Better than average.
-
3:12
Just to be specific, in case no one's got that yet, better than average for
-
3:15
all schools in the country.
-
3:18
So, and of course he tries to solve that by introducing other variable times.
-
3:24
Clutching at straws there.
-
3:26
But, if he's able to get up and talk about that in television interviews and
-
3:30
all sorts, then I feel quite comfortable talking about it today, in front of you.
-
3:35
And, you know, I don't set policy for millions of children, so that's good.
-
3:42
So, it's gonna be pretty basic mathematics.
-
3:44
It's enumeration, which is simply getting more than one thing which
-
3:49
is like other things and putting them in the same place and going there is some.
-
3:54
Divisibility, which is small sets of things and putting them in larger sets and
-
3:58
seeing how many small sets fit in the larger sets which is also pretty simple.
-
4:03
And prime numbers which is any numbers divisible by only one and themself.
-
4:10
And they have some odd properties.
-
4:12
I'm gonna apply that to sound design, cuz I do a bit of sound design, and
-
4:16
some animation.
-
4:18
So, I'm gonna be covering that as well, and
-
4:22
CSS layout too.
-
4:26
But first, I'm going to talk to you about Swedish death metal,
-
4:30
which is a bit tenuous, it seems, I think.
-
4:33
I just did a talk in Sweden.
-
4:34
I didn't do this slide and I didn't talk about Swedish death metal there,
-
4:38
which where it obviously comes from.
-
4:42
It's a much maligned musical genre, death metal.
-
4:45
I think a lot of people who aren't familiar with the ins and
-
4:49
outs of it see it as just sort of bluster.
-
4:51
It's just sort of Satan and that's it, and
-
4:54
it doesn't take a hell of a lot of talent or poise.
-
4:58
But that couldn't be further from the truth.
-
5:00
Whether or not you like the brutal aesthetic of death metal music,
-
5:04
it's actually very precise and complex in its construction.
-
5:09
And it takes a lot of dexterity to play, as well.
-
5:13
And Michaga took this one step further, or did something more interesting with
-
5:17
developing the complexity in their sound, in that they employed some mathematics.
-
5:22
And the reason they're called Michaga is it's from the Yiddish for crazy.
-
5:27
And when you listen to them, it's a bit like listening to sort of a fractal.
-
5:32
It's like being sucked into a vortex.
-
5:34
Because the things sort of overlap in unexpected ways.
-
5:36
There's a sort of a sense to it, but there isn't a sense to it.
-
5:39
It's sort of mind bending.
-
5:41
But you didn't have to understand mathematics or
-
5:43
even kind of get it cognitively that you're being sort of fucked with by this
-
5:48
band, because it affects you physically.
-
5:50
It's sort of somatic.
-
5:52
Basically, if you try and dance to it, you look like a drunk dad at a wedding.
-
5:58
And I'm gonna demonstrate that for you now.
-
5:59
I'm gonna really really regret this, I think.
-
6:04
And my microphone will probably come off and then the whole thing will be.
-
6:08
So, if you just imagine I'm at a wedding.
-
6:11
I'm having a sort of chat with some people.
-
6:13
I've had a few gin and tonics or whatever.
-
6:15
My daughter's just got married.
-
6:16
And then someone, the DJ naturally, after they've put on I don't know
-
6:20
Ride Sally Ride or something they put on a bit of Michaga, so.
-
6:23
[MUSIC]
-
6:25
[INAUDIBLE] And if you just listen to how everything's sort of flowing over
-
6:30
itself in a very strange, I don't know.
-
6:33
I can't dance anyway, so this is.
-
6:36
[INAUDIBLE] Anyway, good.
-
6:40
I did regret that, I did regret that.
-
6:42
So what was going on there?
-
6:45
Which would be the next question.
-
6:46
What they've employed is some polymetric syncopation.
-
6:51
Polymetric literally means of multiple lengths.
-
6:54
So what they're doing is the different instruments are playing parts,
-
6:58
which with different lengths, but they're playing them at the same tempo.
-
7:01
So they're sort of syncing up in terms of time, but then they're sort of
-
7:05
overlapping and they're ending and finishing at different times.
-
7:11
I've just made a simple version of this.
-
7:15
This is just using a four beat pattern and
-
7:17
a three beat pattern to make a composite polymetric pattern.
-
7:21
And that works a little bit like this.
-
7:25
So, this is the 4 beat pattern just played on it's own.
-
7:27
[MUSIC]
-
7:28
So I just made this in a sequencer on my computer.
-
7:36
So it's just one, two, three, four, one, two, three, four, etc. Most Pop music,
-
7:37
Blues, or whatever is sort of made around that.
-
7:39
And this is a three beat pattern, but it's the same tempo.
-
7:41
[MUSIC]
-
7:43
It's one, two, three, one, two, three, one, two, three, and so on.
-
7:47
And now I'm gonna bring in the four beat pattern behind it.
-
7:51
Now, I'll probably screw this up the first two or three times because of the lag.
-
7:55
There's a bit of latency in sort of sound engineer terms.
-
7:58
Cuz I'm doing this with JavaScript.
-
7:59
[MUSIC]
-
8:04
Not quite there.
-
8:09
So, you can here the composite pattern that that's made.
-
8:12
Now, I'm not changing either the three beat pattern or the four beat pattern, but
-
8:16
together, they create something more complex.
-
8:18
So, from something simple, we have something more complex.
-
8:21
And there's an axiom that governs this.
-
8:24
In mathematics, we have axioms, and
-
8:27
they're true statements based on certain conditions.
-
8:30
In this case, the length of a polymetric pattern is the lowest number,
-
8:35
the lowest integer, divisible by the length of each of its parts.
-
8:39
And so, when it's four, repeated patterns of four,
-
8:44
over repeated patterns of three, then the length of the combined pattern will be
-
8:48
twelve, because twelve is the first number divisible by both four and three.
-
8:54
So from that point onwards it will repeat itself in twelve beat intervals.
-
8:58
And that's pretty easy to sort of cover if you've only got two parts and two numbers.
-
9:06
If it's more complex,
-
9:07
you might wanna use some programming to sort of extrapolate it.
-
9:11
So, I wrote a bit of JavaScript here, and it's quite simple JavaScript.
-
9:16
The lengths, the constituent lengths, I've put into an array.
-
9:19
So, in this case, in the example four, six and nine.
-
9:21
Then there's a denominator,
-
9:23
like an incrementor, like when you do a plus, plus.
-
9:27
And then I increment that number.
-
9:29
And each time, I run a function which tests to see
-
9:33
if it's divisible by all three of those numbers.
-
9:36
And if it is, it then stops.
-
9:37
And then the output would be the length of my polymetric pattern.
-
9:42
And so then I created something graphical to express this.
-
9:45
So, I believe I did four, six, and nine, so I just enter them here.
-
9:50
And it sort of looks like a sequencer, like in Q-base or something like that.
-
9:54
And there's two things I noticed about this, one of which was unexpected to me,
-
9:58
and that's that it was symmetrical.
-
10:00
So, if I put in any numbers, it doesn't matter what the parts are.
-
10:04
Or how long they are, or how many there are.
-
10:06
This pattern, the visual pattern that I've created, which represents how the music
-
10:11
interacts, the relationships in the music, will always sort of fall back on itself.
-
10:17
And that's just one of those innate, weird,
-
10:19
beautiful things about mathematics I think.
-
10:21
The other thing I noticed is that if I used prime numbers,
-
10:24
then the overall length is much,
-
10:29
much greater, even though I can just use numbers of a similar magnitude.
-
10:33
So, if I use three,five, and seven and do the same thing,
-
10:38
I've actually got a scroll here, and show you the whole pattern.
-
10:45
So, at 120 bpm, this piece of music is unrepetitive for
-
10:50
its entire duration, because the relationships between the different parts
-
10:53
are constantly changing, until the very end, where they finally link up.
-
10:57
And that's nearly a minute long.
-
11:00
If I add another prime number in there,
-
11:02
I've now created a piece of music which is essentially prog rock.
-
11:06
It's nine minutes long, and it doesn't actually at any point repeat itself
-
11:12
because it's constantly shifting until it finally reaches that 9.65 minute mark.
-
11:19
Prime numbers are used in other areas of where the development and security.
-
11:25
I don't really understand RSA encryption very well, so
-
11:28
anyone can correct me at the end.
-
11:29
But, I gather that the idea is basically about the fact that encrypting is easy and
-
11:34
decrypting is hard.
-
11:35
Because, when you encrypt something, you're just taking two prime numbers and
-
11:38
multiplying them together.
-
11:40
And that's no harder than taking any other number and multiplying it together.
-
11:45
But when you're factoring the result,
-
11:46
that's finding the two numbers which were used to encrypt, it's much harder.
-
11:51
It's much more computationally heavy, which means it's more of an eyesite for
-
11:56
the people who are trying to hack.
-
11:58
That's RSA encryption in a nutshell, I guess.
-
12:02
Even Cicadas know more math's than Michael Gough, for instants, and myself.
-
12:08
They appear to actually do their gestational periods,
-
12:12
their life cycles, around prime numbers.
-
12:14
So biologist observe in different parts of the world.
-
12:19
You'd have one brood of cicadas, or cicadas,
-
12:23
depending on how you pronounce it.
-
12:24
Which did their life cycle in 11 year periods.
-
12:29
1 in 7, 1 in 13, I think.
-
12:33
And it makes perfect sense.
-
12:34
And just with the music, it's all about the fact that they don't sync up
-
12:37
with the rest of their environment so much.
-
12:39
So, with other animals having their cycles around normal numbers, even numbers, or
-
12:44
normal odd numbers, not prime numbers.
-
12:46
There's less convergence.
-
12:49
So, it's less likely that they'll emerge, which they do on mass.
-
12:52
Which is a very noisy and spectacular thing.
-
12:55
When predators are at large, which are more likely to eat them in large numbers.
-
13:01
So, a bit more music now.
-
13:03
I've done the sort of death metal bit of
-
13:06
divisibility of prime numbers through the [INAUDIBLE], and what I wanted
-
13:09
to demonstrate now is how you can actually create an entire piece of music,
-
13:12
just through simple sounds being triggered at certain beats.
-
13:17
So I created three chords.
-
13:19
They're simple chords just of two notes, and when they're played together,
-
13:23
they do harmonize.
-
13:25
So six notes together makes a chord, which works.
-
13:28
And either of the two, so
-
13:30
it would be a set of four in each case that would also work.
-
13:33
So the first one sounds like this.
-
13:34
[SOUND] And that's played every three beats.
-
13:41
The second like that and that's played every five.
-
13:44
And the third which is played every seven beats sounds like this.
-
13:49
And when you play them all together and just set them off like that, and
-
13:53
I did this just in Q-base to start with, but I'll show you how to do that later
-
13:57
just in HTML and JavaScript, it creates something like this.
-
14:01
[SOUND] So [SOUND] not only is this a piece of music which,
-
14:08
at no point, repeats itself.
-
14:12
It doesn't become repetitive like a piece of [INAUDIBLE].
-
14:15
I see a piece of music as more like a soundscape or something like that.
-
14:20
Bet there are also peaks and troughs in terms of amperage.
-
14:22
[MUSIC]
-
14:23
Because sometimes two of the chords will play simultaneously, and
-
14:26
because they're playing simultaneously, that's more sound.
-
14:29
Though you could think that perhaps playing two sounds with the same amplitude
-
14:32
together would double the volume, but that's not true.
-
14:34
It has to be orders of magnitude.
-
14:36
So you'd have to play the same sounds, you'd have to play 10 of
-
14:41
the same sound simultaneously for it to be double the volume.
-
14:45
Now this awkward, because this is generative, and
-
14:48
I don't know how long this is gonna last.
-
14:50
I think I'm just gonna quickly go and get a coffee I think, and then I'll come back.
-
14:54
[LAUGH] [SOUND]
-
14:58
Is it still on?
-
15:04
Oh, fucking hell.
-
15:04
[MUSIC]
-
15:12
This is awful now, isn't it?
-
15:13
[MUSIC]
-
15:17
I'm sorry I sort of left you in the room alone.
-
15:21
[MUSIC]
-
15:31
I think it's about 2 minutes altogether.
-
15:33
It's 2 minutes of music,
-
15:35
which is very, very easy to generate because I've just set things off.
-
15:38
That's what people mean by generative music.
-
15:40
You get a computer to do it for you or mathematical algorithm to do it for
-
15:44
you, instead of you actually sitting there with a guitar and
-
15:47
going, that's how I'd like to play it.
-
15:49
Okay, so bye-bye Gove.
-
15:52
Right, so there's a sort of inherent performance thing here.
-
15:56
And as I was experimenting with this for the talk I felt well, hey,
-
16:01
what I've got there is, because I'm repeating individual sounds, rather than
-
16:06
it being a whole sound, like the duration of that song, isn't a two minute file.
-
16:10
There's an inherent performance thing there, which I could try an exploit.
-
16:14
So, for the 15 seconds of actual sound that I might download.
-
16:17
Or a client might download in their browser.
-
16:20
I can actually create ten times, almost, that amount of music.
-
16:25
So, it's sort of a form of making music or
-
16:27
making sounds that's it's own compression algorithm.
-
16:32
So, how would I go about doing that?
-
16:35
With a little bit of HTML5 and JavaScript basically.
-
16:39
I'd have audio elements.
-
16:41
Give them ID's so I can reference them in the JavaScript and
-
16:45
obviously a path to the actual sound file.
-
16:47
In this case, ogg, but
-
16:48
you probably want to support other formats because browsers are a bit inconsistent.
-
16:53
Name that, and then just use the setInterval function.
-
16:58
So, you can see that window.setInterval there, and then, every three seconds, or
-
17:02
every 3,000 milliseconds, it would play that one sound.
-
17:05
But of course, once it's downloaded the sound,
-
17:07
it's then repeating it, so you're not actually
-
17:10
front loading it with lots of information that the client has to download.
-
17:14
I've commented out the sound in dot play, just above there.
-
17:17
You could get all the sounds in your polymetric music to play
-
17:22
simultaneously first, and then get them to repeat at their different intervals.
-
17:26
But then you get a sort of a loud sound at the beginning, which isn't so hot.
-
17:29
And then stopping further repetition of the sounds,
-
17:33
you just call clear interval function in JavaScript and to supply the name
-
17:39
of the repeater that you'd set off in motion before.
-
17:43
In that case, the one which is every three seconds.
-
17:45
And the cool thing about that is you get these sort of clean diminishes as well.
-
17:49
You're not just stopping the sound dead.
-
17:51
You're letting each individual sound play out in its own time,
-
17:55
and then they will end at different times.
-
17:58
And then it just doesn't start again.
-
18:01
So all of this simplicity gives you something which sounds quite rich.
-
18:08
I'd like to think, anyway.
-
18:11
So how would I apply this visually.
-
18:12
So the same sort of underlying mathematics now but
-
18:15
I'm going to apply it in to a sort of a visual context.
-
18:19
And of course you could do some CSS animation.
-
18:23
And there's the animation duration property
-
18:26
which allows you to set how long each animation lasts.
-
18:30
So I've just used nth-of-type, but I'm gonna talk a bit more about nth-of-type
-
18:33
and things like that in the CSS layout section of the talk.
-
18:36
And what I've done is I've said, take these objects which
-
18:41
are alike and make each one their animation last at different length.
-
18:47
And it took me a long time to think of something compelling
-
18:50
to show you how you could apply that.
-
18:52
So what to animate and I thought of clouds and things like that.
-
18:56
And eventually and inevitably I landed upon Whack-a-Mole.
-
19:00
So I drew a little mole here and if you've ever played Whack-a-Mole,
-
19:03
you have moles which comes in and out of holes like that.
-
19:06
And you have to hit them with a hammer.
-
19:08
[SOUND] And then you win the game I guess.
-
19:12
I guess you've got to hit as many as you can.
-
19:14
So exactly the same JavaScript behind what I did for the sequencer.
-
19:19
But in this case I'm gonna put a few moles in it.
-
19:21
i'm gonna just start with one which goes every two seconds, one every eight.
-
19:26
So this would be really easy for someone who's playing Whack-a-Mole to work out.
-
19:29
So that one always goes that amount of time but
-
19:32
that one the relationship is repetitive much quicker.
-
19:36
Where as, if I was to use prime numbers again, the overall.
-
19:45
Okay, I have to zoom out I think.
-
19:49
Three, five and seven. Why is that not working?
-
19:54
Oh, he's underneath.
-
19:56
Okay, because this screen's a bit different.
-
19:57
I didn't anticipate that.
-
19:58
So basically if you're using three, five, and seven intervals,
-
20:03
then the overall game like the piece of music that I played will be much longer.
-
20:08
Before it starts to repeat.
-
20:10
So for that whole duration of that time,
-
20:12
it takes ages to really kind of work out what the pattern is.
-
20:16
It's constantly, you have to second guess it I suppose.
-
20:20
And then I just added one more variable,
-
20:22
I'm just gonna show you that here actually, which is a difficulty variable.
-
20:26
So when I start the game again,
-
20:27
now you can see that it's much more difficult to catch the moles.
-
20:31
Oh, that helps if I do that [LAUGH].
-
20:34
But now I can't click on them.
-
20:36
I've got a dilemma now.
-
20:38
I think I'll move it on.
-
20:39
Anyway, you can see they're moving faster, and what I've done,
-
20:41
if I've applied the same, changed the same variable across all the moles, and
-
20:46
it's a really simple thing to do.
-
20:48
All I've done is change the distance that they have to cover.
-
20:52
So, the first example the easy mode is on your left there and
-
20:56
on the right is the difficult mode.
-
20:58
And this is really simple sort of primary school,
-
21:01
possibly middle school mathematics.
-
21:03
They're traveling the same distance in the same time but because they have to
-
21:06
travel a further distance they have to go faster to cover it.
-
21:09
Which means that the moles spend less time above ground proportionately.
-
21:15
So it's just speed equals distance over time.
-
21:18
In this case if you're interested in the code I just changed
-
21:22
the translate y property for all the mods.
-
21:25
So, Design vs Aesthetic.
-
21:27
Now when I built the whack a mole game, I was thinking to myself,
-
21:32
well this is really fun but the design of it is really the mathematics underneath.
-
21:36
That's sort of the algorithm which governs it.
-
21:42
And that to me is what design's about and that, so that's the important part.
-
21:46
But there's a lot to be said for aesthetic as well.
-
21:49
There's a guy called Tim Hunkin who's an engineer.
-
21:52
He actually took an old whack-a-mole game and he gutted it and
-
21:54
he took the mechanism out.
-
21:55
And the mechanism works exactly the way that it would have done originally, but
-
22:00
he just changed the theme.
-
22:01
He made it political.
-
22:02
He turned it into Whack-a-banker.
-
22:04
And the thing that I really like about this game is that instead of it now saying
-
22:09
insert 40p, it says minimum investment 40p on the game.
-
22:12
So I thought that was quite a cool joke.
-
22:14
I've done a similar thing here.
-
22:16
In that I have made a predictably, whack-a-Gove game here.
-
22:24
So you can see me whacking Gove on the head.
-
22:28
And I think that says something about aesthetic because I'm not really that
-
22:33
inclined to hit a small, innocent, wouldn't hurt anyone rodent over the head.
-
22:38
But I really fucking like hitting Gove over the head.
-
22:41
So I'm better at this game despite that it works in exactly the same way and
-
22:44
everything happens in exactly the same sequence as you've decided it.
-
22:48
I am actually better at this game because I'm more inclined to use it.
-
22:52
So, I'm going to put together some of the ideas I've talked about so
-
22:55
far, with the animation and the sound.
-
22:59
I'm going to do a demo now on my laptop.
-
23:01
Which, hopefully won't burn out.
-
23:03
Which, combines those ideas.
-
23:06
And, when I was making this, I was thinking about a game called
-
23:11
Monkey Island, which if you're as old as me, you may remember playing.
-
23:15
It's this sort of problem solving game where you go from scene to scene and
-
23:19
you sort of try and solve puzzles as you go along.
-
23:23
And I spent a lot of it, cuz I'm quite slow,
-
23:25
I spent a lot of this game standing around trying to workout what the puzzles were.
-
23:28
And just sort of just looking at the screen.
-
23:31
And what was nice is there was always little animations going on,
-
23:35
to keep it looking alive.
-
23:36
So you'd have someone blinking, or a fire flickering,
-
23:41
or blades of grass waving, or whatever.
-
23:44
And it occurred to me that the clever thing that was going on here, although I'm
-
23:49
not entirely sure they actually did this, but they could have done.
-
23:52
Is that if it was one set animation where the grass and
-
23:57
the blinking and the people twitching their leg or
-
24:00
whatever was all happening as part of one animation which then repeated,
-
24:06
you'd start to see that it was repetitive.
-
24:10
Whereas, if you did all of these, governed all of these animations independently,
-
24:15
it would work a bit like a combination lock.
-
24:17
So, on a combination lock, if you just had one wheel,
-
24:21
then it would just take ten attempts to work it out.
-
24:25
Or, you wouldn't even have to work it out, you just go for
-
24:27
the motions until you opened it, right?
-
24:29
Then if you had another one it doesn't make it twice as complex it makes it
-
24:33
ten times as complex.
-
24:35
And with four it would take
-
24:37
potentially 10,000 attempts to work out how to open that lock.
-
24:41
And it's the same thing with using concurrent animations which aren't
-
24:44
actually connected to each other.
-
24:46
Cause they're moving independently.
-
24:47
You're multiplying rather than just adding complexity.
-
24:51
And to demonstrate this, I have created a sort of a scene where the music
-
24:56
now in my browser is going to be playing and
-
24:59
repeating in the way that I described using a set interval.
-
25:03
And there's gonna be a number of CSS animations which all
-
25:06
happen in the same space, but independent in of each other as well.
-
25:09
It's just going to take a couple of minutes to come in.
-
25:13
This is a different sort of theme to the whack-a-mole theme.
-
25:20
It's a little bit more dark and disturbing, I suppose.
-
25:24
You can see flickers happening on the screen.
-
25:26
Those flickers are happening independent of each other.
-
25:28
It's not a flickery animation.
-
25:30
It's not a video of an underground car park camera.
-
25:36
It's a living thing with lots of different things happening independently.
-
25:40
Because there's so many, like the record button, the shutter, the different
-
25:44
flickers, the lights flashing and everything, the length, the overall length
-
25:48
of this animation, despite the fact that there's only a few parts.
-
25:51
Could be days or weeks or even years before it actually repeats itself.
-
25:58
This was inspired by the way by a film The Grudge.
-
26:02
And there's a bit in there,
-
26:03
I don't know, hands up anyone whose seen the film The Grudge.
-
26:05
The Japanese horror films, yeah, and
-
26:08
there's a bit where the ghost character sort of approaches the character.
-
26:14
You know with the eheh thing like that.
-
26:15
Comes up to the camera and it's really, really frightening.
-
26:18
So I've tried to incorporate something similar and
-
26:20
that only happens every so often.
-
26:22
So I'm going to do another poll here.
-
26:23
Who has a heart condition?
-
26:29
Okay, [LAUGH] could you put your fingers in your ears or close your eyes?
-
26:34
Actually, to be honest with you, that happens so infrequently,
-
26:37
the chances are I would run out of time before it even appeared, so just.
-
26:41
[SOUND] Of course, Gove sticks his fucking
-
26:45
face in where it's not wanted as usual.
-
26:49
So that's that.
-
26:51
So there's another great takeaway.
-
26:55
So, maths and CSS Layout.
-
26:56
I've been writing lots of articles for a List Apart recently
-
27:01
about some weird CSS techniques, and the last one was called Quantity Queries.
-
27:05
And it's all about combining different selectors in ways that you can achieve
-
27:09
strange effects.
-
27:10
So I'm gonna talk a little bit about that now, and
-
27:12
particularly employing the divisibility idea that I've used in the animation and
-
27:17
also previously in all of the Gove stuff, basically.
-
27:22
And the nth-child selector family, or nth
-
27:27
of type as well, and nth last child, etc., they're sort of inherently mathematical,
-
27:32
because they take an argument which is arithmetical or sort of algebraic.
-
27:37
The very simple example, which I'm sure a lot of you may have used to do CSS is just
-
27:41
putting a number in there.
-
27:43
So if a set of elements, of sibling elements, nth-child three would mean
-
27:47
just select the third of that set, the third from the beginning.
-
27:49
Nth-child n plus three is sort of an offset.
-
27:53
So it's saying all of the elements but starting from the third so
-
27:57
it's all invert but we're gonna start at this point third one.
-
28:00
So we'd select the third one and then the fourth and add in for an item.
-
28:04
Then you can do sort of multiples.
-
28:05
So three n would be like the three times table.
-
28:10
So 0, 3, 6, 9, 12 etc.
-
28:14
And then you can combine some of these ideas.
-
28:16
So you can do three n plus one, which would mean the three times table.
-
28:21
But starting at one rather than not.
-
28:23
So you'd actually have one, four, seven, ten etc.
-
28:27
And you can combine these together, you can concatenate them.
-
28:31
So, by doing that, you can actually achieve some really strange things,
-
28:35
like Styling by Quality.
-
28:39
So, I'm gonna just use two conditions in this first example, and
-
28:43
I'm gonna add elements and remove elements.
-
28:44
But I'm not adding any JavaScript to anything or adding any classes in there,
-
28:48
which determine how the elements look.
-
28:51
It's just the CSS logic.
-
28:54
So if it's the third last item and it's the first item,
-
28:57
what would we expect if I add that element, there's no match there.
-
29:00
It doesn't meet any of those conditions.
-
29:02
Oh, it does actually meet the first item condition, but
-
29:05
it doesn't meet the third last item condition.
-
29:07
So that's not selected.
-
29:08
Then I add one.
-
29:10
And there you have the third last item, which is also the first item.
-
29:15
Then if I add another element, of course, the third last item
-
29:17
is no longer also the first item, and so, you've run out of things.
-
29:22
So what's interesting there is that you've styled based on quantity, really,
-
29:26
because only when there's three can the third last item also be the first item.
-
29:34
And the code looks a little bit like this.
-
29:36
So we use nth-last-child(3) and we concatenate it so
-
29:39
there's not space between those two with first-child.
-
29:43
And then we're just making background green which in practical
-
29:46
terms isn't very useful, but it's just to demonstrate here.
-
29:49
And concatenation is indeed the name of a Meshuggah track, so
-
29:51
just showing their mathematical credentials once again.
-
29:56
So, how would I start all the items?
-
29:57
So, what if I wanted to start all the items in a set based
-
30:00
on the quantity of that set?
-
30:02
So, doing that, it would look like this.
-
30:06
There's three items there, and
-
30:08
all of the items are now green because there's three of them.
-
30:12
That's the condition.
-
30:14
And then when there's four, it's no longer the case.
-
30:16
So, that looks a little bit uglier, and
-
30:18
I've had people complaining to me that my CSS was ugly.
-
30:22
I don't think you can do it in any prettier way,
-
30:24
except that there have been some
-
30:26
folks doing some processor stuff to just make it look a bit better and using Sass.
-
30:31
But the logic that actually is behind it is here and
-
30:34
that's if the last child frees the first child.
-
30:36
So it styles that first one already, and then it says, also take this one and
-
30:42
style, if that one exists, style all of the ones which appear after it,
-
30:46
which is using the general sibling combinator there.
-
30:48
I don't know if you've used that before.
-
30:50
But it just says we've got our element here, just all the rest, and do that.
-
30:55
So you can also style by divisibility.
-
30:57
Similar principle, but instead of it being enumerating,
-
31:01
it's more to do with what the set is divided by.
-
31:04
So, I think of it a bit like this.
-
31:06
I think of it in terms of frogs either landing on their lily pads or
-
31:11
landing on the rocks and dying.
-
31:14
Maybe that's just the way my brain works.
-
31:15
But if you imagine using nth-last-child and
-
31:18
you're stepping backwards using multiples, if there's six items or
-
31:22
there's nine items or the number of items is divisible by three,
-
31:27
then as the frog jumps back, it will land on the first of those lily pads.
-
31:32
If there's five or there's seven or
-
31:34
it's not divisible by three, it won't ever land on the first one.
-
31:38
So, you can sort of use this to try and govern grids, I suppose.
-
31:43
CSS grids.
-
31:46
So that when the content changes, it actually reconfigures
-
31:50
itself intelligently so that it won't be uneven at the bottom.
-
31:55
There won't be any gaps.
-
31:57
So the first block at the top there, nth-last-child, 2n,
-
32:00
first-child blah, blah, blah.
-
32:02
So, you can see I'm using the multiples there in the argument for
-
32:05
the nth-last-child.
-
32:06
We'll make the cells in the grid 50% width, so they're two-by-two.
-
32:11
If the whole set is divisible by three, then we should divide it into three.
-
32:14
So we'll do them 33% width, and 25% for if the set is divisible by four.
-
32:21
So you start to get effects like this.
-
32:23
So there's 1, so that defaults to 100% width,
-
32:26
because block-level elements will always just fill the space.
-
32:31
There's two, there's three, there's four.
-
32:34
No problems so far.
-
32:35
Five is a prime number, so talking about primes again, but
-
32:38
primes are gonna fuck us over a bit this time.
-
32:40
They're gonna be a problem to solve,
-
32:42
rather than something which is a handy tool.
-
32:46
There's six.
-
32:46
So six is divisible by three so it goes hey, it's divisible by three.
-
32:49
It meets the second block in our CSS and
-
32:52
divides it by three, and it looks nice and neat.
-
32:56
Seven is another prime number, ergo, and then eight.
-
33:00
So eight's divisible by four, so two sets of four there.
-
33:04
Nine divisible by three, ten divisible by two.
-
33:08
11 is a prime number and I've screwed my slides up because of that.
-
33:11
Right, so how do we handle the primes?
-
33:13
We have to do something a little bit more intelligent.
-
33:15
What we really have to do is we have to take what we have and
-
33:20
divide them into further subsets.
-
33:22
So the way I would go about doing that is like this.
-
33:25
So, if it's divisible by five, we start out by saying well, hey,
-
33:29
let's make them three by three.
-
33:31
But then we're gonna have to handle the last two differently.
-
33:35
So the last two, we say we use the offset.
-
33:40
So we have the 5n plus 4, means the fourth of every five.
-
33:46
So, for every five in the set, the fourth will be styled 50% width.
-
33:51
And then we just use the adjacent sibling combinator there with the LI and
-
33:56
say, well the fifth one also should look like this and
-
33:59
the fifth one is the one next to the fourth one.
-
34:03
We've done a similar thing with seven items, so the next prime number.
-
34:08
And we've started off doing it 3 by 3, and then we just do 100%
-
34:13
width like the spare one, so 1, 2, 3, 1, 2, 3, 1.
-
34:18
So now, my grid system handles a few primes, so it takes longer to break,
-
34:23
I suppose.
-
34:24
So, one, two, three, four, five is divided into three and two, so
-
34:28
that's still neat there.
-
34:30
Six is divisible by three, like in the old version.
-
34:33
Seven, you've got the spare one sorted out.
-
34:36
Eight's divisible by four.
-
34:38
Nine, divisible by three.
-
34:39
Ten is now two sets of the already subsetted five, so three, two, three, two.
-
34:46
And 11, we still haven't handled.
-
34:50
So, the question is, how many prime numbers would I have to take
-
34:54
care of in order for my grid system to be infallible, for it to work in every case?
-
34:59
And a mathematician called Euclid in 300 BC when he
-
35:04
was working on the first ever CSS grid system, looked into this and
-
35:10
did some conjectural mathematics, and proved that the number of
-
35:16
primes that exist as you count up is, in fact, infinite.
-
35:21
You wouldn't think that it would be infinite,
-
35:23
because you'd think that the larger the number, the more chance there would be
-
35:28
that that number would be divisible by something, right?
-
35:30
But that's not the case.
-
35:32
You still get huge prime numbers, hence the RSA encryption thing working.
-
35:37
So, I would have to write an infinite amount of CSS in order to make
-
35:41
an infallible grid system, which would have some implications on performance.
-
35:45
So, as you can see, Euclid is, he's just, he's done, basically.
-
35:51
And I'm kind of done as well, actually.
-
35:52
I've covered all the maths I know, so I'm just gonna sort of finish up.
-
35:57
Just with one last thought, which is that maths doesn't govern the universe.
-
36:01
I hear people, sometimes even mathematicians,
-
36:03
say, maths governs the universe.
-
36:06
And they say, without maths, it doesn't work.
-
36:10
But the thing is, maths is a human construct.
-
36:12
Dinosaurs didn't have maths, and yet they were still subject to the mathematics
-
36:17
which expresses the natural physical laws.
-
36:20
The truth is that the universe isn't governed by maths or anything else.
-
36:24
It's just inherently boring and
-
36:28
easy to predict and sort of ordered and symmetrical.
-
36:32
But what maths is, is a language which helps us to exploit that commonality and
-
36:37
predictability and even possibly we might be able to make an infallible,
-
36:42
self-correcting grid system one day.
-
36:44
Thank you very much for listening.
-
36:46
>> [APPLAUSE]
-
36:49
[MUSIC]
You need to sign up for Treehouse in order to download course files.
Sign up