 Okay we're going to shut up now. Wait can you hear me now? Yes. I just realized that my mic was muted by my kid earlier so that's why you don't hear me until now. Okay anyway since you can hear me my thought is going to be about this how to build this spinning pack mansion but what is exactly is this spinning pack mansion. So one day I was just trying to find something to build for my JavaScript course and then someone came up with an idea that is that looks something like this which is pretty cool. So I was thinking I want to do the mouse thing and then they did the picture stuff and I didn't really want to work with like pictures on in some of my JavaScript course so I decided to build spinning pack man so I took pack man and then I made it spin it follows the mouse and I added yeah so basically I added a music to it to make it more fun yeah cannot help it so that's what this is for by the way by the way interesting thing this this this font that I'm using here for this spinning pack man thingy it's called Caesar dressing I have no idea how I found it but I found it and it it's kind of funny so I think it looks kind of nice introduction to fonts okay so anyway to build this spinning pack man shit right first of all I need to build a pack man so the pack where's my mouse can you can't have a mouse on keynote so anyway on the left side you see the pack man which is built with SVG combination of layers not too hard so go another circle and probably a triangle you build a pack man but the first thing to do is to you know add some shadows to it so this is why I used drop shadow filter instead of box shadow because drop shadow allows you to wrap to SVG elements as you like to it makes it looks nicer you can see the drop shadow in the eyes as well so that kind of looks nice just wanted to point this out before I continue now the thing about this spinning pack man thing like if you I don't think you saw it here but let's see if I go am I sharing can you see my screen now like I mean the browser one and see your cursor moving around looking very confused okay no I think I shared the wrong thing so let me share the entire thing so because I need to switch welcome to the magic of zoom okay so you see this this this spinning thing so basically we are trying to build I'm showing how to build this spinning thingy right so it follows the mouse the first thing then is to be able to write the CSS you know to go here or go here or go here you know or go here or go here depends on where you want the mouse to go so basically I split the mouse into eight directions the I'll just say in north north west east south west south east south blah blah blah blah all the way so this eight directions the default by default if you put everything on a normal horizontal plane is facing to the right or rather facing to the east and that is rotation of zero degrees if you want to rotate downwards it's rotation of you know 45 degrees to the middle and then 90 degrees to the bottom if you rotate upwards it's also easy it goes like minus 45 degrees and minus 90 degrees but that's where the easy part ends so we have this five now we need the other three what happens if you want to say like the bottom left corner if you cannot just do like rotate 135 degrees because you'll get the upside down pigment right so what you can do is to first flip the pigment with scale x or scale y depending on what you want then you apply a rotation then again the the way transform works is if depending on what you do first it follows in order so if you rotate then scale or you scale then rotate the answer changes according to to how you write it so pay attention to this one when you if you want to make something like this then i went ahead and go and calculated all the different possible values of like if you if you scale x if you scale y so this is the the range of values we'll come back to this one in a bit because we need this info to carry on building this thing then the second thing we don't know is if you want to if you want something to follow the mouse you need to go to the i-hits you need to like put okay this is a center point for this object and then you want it to follow the mouse so you go from the center point and then calculate where the mouse is and to get the angle which you which we need we need trigonometry was it trigal i think it's quite it's called trigonometry i can't remember you need the opposite distance and the adjacent distance so this is these are the two values we need to be able to make this thing then the rest is no javascript already so just if you want to follow along you can know go to this code pen so wk slash pens yes b a o y n v x okay i'm just going to leave it aside it's too small so forget it okay and then i am going to move to here nobody close my keynote sorry i need that slide later okay so basically we're back here with this spinning pac-man thing i'm going to comment out on the code all right we are at the stage where there's nothing nothing is being written so the first thing we need to do is to find this middle of the pac-man to find the middle of a pac-man is easy you see for each year because eventually i'm going to do like nine eight pac-mans in a row but right now i only have one in dorm i comment out the rest yeah it's here oh wait i just deleted the rest but if we do this then we have more okay so there's only one pac-man in the dorm now so this just treat us as this looks for one so first we want to get the middle so and we can use the get bonding client right which gives you top left bottom right and then the width and height so you can get the center by doing the average of the left and the right and the y center by doing the top and the bottom average then if you want to get the mouse location like this this the mouse tip location right is mouse x and mouse y it comes from the event and notice i'm using pointer move event so initially you can also do this with mouse move right but mouse move it doesn't work with touch devices pointer move is a event that builds on top of mouse move and also touch events so you can handle both mouse and touch events at the same time no idea why i'm playing javascript here in this in this css thing but i thought it would be interesting because pointer move also requires certain css stuff which i will go into in a bit i want to talk about the rotation thing first now to get the difference in you know we have this opposite and adjacent thing that we need we can allocate either in this case i allocated the y to be the opposite value and then the delta x to be the adjacent value so to find this value i just minus mouse x with the center and you know mouse y with the center so i get positive and negative values i think i can do debug and show you just to whoa okay this cannot be ocd ocd okay so delta x okay so we can see we can see the positive the x and y values that we'll be using for this calculation of the thing of the of the angle then what happened next was we need to calculate the angle and when i was googling around on mdn i realized that no there are two different functions we can use this called one is called math a 10 and one is called math a 10 2 and they both give different results so it was quite interesting i chose i the key is choose either one of them it doesn't really matter it then it calculates radians and then you have to convert the radians back into degrees which is burned by this formula over here on mdn and then i just plugged it in and we can calculate the angle so that's that's the css part that we want to show the angle thing right so here we have the angle you can see here we're here with zero degrees which is exactly what we want moving down 45 to 90 and if you move past you see 135 then you move a little bit further it goes to 180 then it goes into negative 180 so uh noticing these values will help us decide which transforms we are going to use math 8 10 2 i think it goes to 9 math 8 10 without the 2 goes to 90 degrees so that would have to change we have to change our formula if we want to use that one so going back to here we see that hey we use 135 degrees so where's 135 there's a there are four values rotate 45 minus 45 minus 135 or you know this yes so i decided to use rotate 135 and scale scale y minus one step because it feels like the easiest thing then i'm just going to do this so let's not do the math absolute thing first and with that this is what we have if you don't do the absolute it goes into a negative value it goes the other way around which basically at 90 degrees at 90 degrees we want to sort over because at 90 degrees at 91 this is kind of like minus 100 and plus degrees or something i can't remember what the exact formula was thinking through my head but it's some we have to check whether the angle value is more than 90 if it's more than 90 we flip it over with scale y then that's the part where we do work on this three uh this this field faces before 90 degrees oh yeah here it's 90 degrees it's here once we go past 90 we need to flip so we can work on this this field before 90 degrees we want to use the normal unflipped um pac-man then after minus 90 degrees we also want to flip which is why we need the math dot absolute thing and that's how i built this pac-man thing and then we just need to no copy paste more of this if you want more pac-mans and that's it okay just having fun with the haters and stuff okay play the music the music is not here la it's not on this screen okay but i can i can go back to the slides where's it this one this one play the music you keynote fan not actually cannot hear okay i'm not keynote fan i just don't have the time right fine fine and next time when you can come on and like we can talk about fonts oh my god i have so many opinions okay can you hear already yeah man yeah i don't want i wear here this i always want to laugh um anyway uh does anyone have any questions like when i do this live or you already don't have questions so i don't think i do online or have any questions but i feel that there's a method of cumbersome to ask then you type in the message that i unmute you uh i think that's how it works you know i'm not a zoom expert uh i don't even have a paid account it's a free account free loading off my girl um anyway i'm ready