 What? I don't get it. Maybe. Oh, the focus, I think your nose is still the focus. This is going to be a quick episode, because the instructions that I sent you for how to, you know, prepare a HB2 or free episode, I said, you know, try and aim for them to be about 10 minutes long, and then with discussion they end up a bit longer. Yeah. And what happened? We were recording for an hour on yours. So. Sorry. Sorry. So I'm going to try and show you how it's done. I'm going to. Lead away, Jake. Show me. I say this. I get, I said, I'm going to do a quick one and it ends up being 45 minutes long, but we've been told that there is only 17 minutes left on the cards. So this forces this one to be a quick one, right? So strap in. Go. Here we go. Yeah, go. This is a bit of a love letter to a couple of APIs that I don't think many people know about. It looks like JavaScript. It is JavaScript. Yeah. It is DOM matrix and DOM points. Yep. I'm going to trust Jamie or Lucas, whoever edits this, to add the appropriate sound effect to what we just saw there. Yeah. So these are APIs that let me dive straight in. Here's DOM point. Look at it. You give it an X and a Y. Yeah. Do you know what you can do with that? You can log them out. Wow. I know. Are you excited about DOM point? Crazy. Isn't it good? DOM matrix, a little bit more exciting. Yeah. You can just create a new DOM matrix, but you can also pass it in stuff. You can pass it in a CSS transform and it will pause it all and give you the matrix back. But you can also run commands on it, like rotate, scale, translate, all of that sort of stuff. So it will give you the actual matrix, like the one that we see in the mob books? Yes. Yeah. And you can log bits of the matrix out. Look at that. There's the two from the scale and it's amazing. It's exciting, isn't it? Probably one of the most useful bits of this, like genuinely, is that you can take this matrix and you can transform a point and you'll get another point back. So you would call transform point, you would give it a point, it will manipulate the point and give you a new point. Exactly. And I use this to do the math so that I can't do because I had, you know, did some of it at school, but it's gone. Whereas this stuff can do it for me. I used it recently to draw a star because I wanted to do that transition that you just saw there. I kind of noticed that. Yeah. This was a special transition. Exactly. Yeah, it's got the special effects going on. So when I decided I wanted to do this, I was like, I need a star. And I could just try and get one from the internet, the SVG one, but because of that transform animation, I need the star to be, well, I need to make sure the center is in the dead center because nothing annoys me more than like a rotate animation that's slightly off. It's horrible, isn't it? So I need to create this mathematically perfect star. I don't know the maths for that. So I'm going to let Don Matrix do it all for me. So here's a method. I'm going to take a number of points, five point stars, pretty much your basic one, X and Y for a position of it and a size. And so I'm going to create an array with twice the number of points. Because when we think of a five point star, it's actually got 10 points. It always goes back to the center. Yeah. So it's those inner points. We'll make it up to 10 in this case. And here we go. I'm going to create a Don Matrix. And I'm going to transform a point. I'm passing in X0, Y0. That's the default. I didn't have to pass that in, but it makes, it reads better, I think. So. So now you have 10 points. And there they are? 10 points. All in the same place. Completely useless. But I can now say, I'm going to translate them all by negative one on the Y axis. So whoop, off they all go. If that was cool. Cool. Yeah. There we go. Yeah. Still a bit useless. But here we go. I'm going to rotate each one by a fraction of 360 degrees. Will it rotate around itself or around the center? It works in the same way CSS transforms work. So it's around the center of where it started. So because we've translated it up, we've moved it away from the transform origin. So yes, the first point's going to be 0 tenths of the way around. One tenth, two tenths, like this. Cool. There we go. Look at that. And so we now have created a decadon, which sounds like a monster from Stranger Things. But not a star. That's the important thing. Yeah, you need to move some points inwards. Exactly. Well, I'm going to do the opposite. I'm going to move some of them outwards. But yeah, same thing. All the even points, move them outwards. I just made it. I don't know the maths for this. I don't know the maths for this. And now I've drawn a star. It's pretty good. And now I can add in like the translate and the scale there. And yeah, that's the hard part done. For the rest, it's like, well, I wanted that kind of transition. I'm going to use a clip path. Yeah, like this clip path, you know, you can use SVG paths, but there's this nice polygon thing, if you don't need curves, which I don't. So I'm just going to take a set of points and convert it into this format. It's pretty easy. I'm just going to map those points to, you know, X pixels, Y pixels, join them with a comma, you know, between each slap polygon around the outside of it. There we go. And now I'm ready to start my animation. I'm going to animate L in elements, get its box, get its midpoint, which is half the width, half the height. I'm going to get the distance to the corner from the midpoint, a bit of Pythagoras there. And now I'm ready to do the animation. Just using the web animation API, animate the clip path, create my star, size zero, convert it to the CSS format using the methods we've just seen. And the end position is same X, same Y, but the end size out to the corner. And just like that. Magic. That's it. Cool. And this is something I couldn't have done without DomPoint and Dom Matrix. These APIs very few people know about, but they are well supported across all browsers. And it means you don't need to do maths. Wonderful. So it's also a call forward to another episode where I'm going to talk more about them later on. Looking forward to that. There we go. Cool. Brilliant. So five minutes episode, 12 minutes of thumbnails.