How to build a Spinning Pacman - Talk.CSS #50

[Music]

okay we're gonna shut up no wait okay

hear me now yes

I just realized that my mind was muted

by my kid Aaliyah so that's why you

don't hear me until now okay anyway

since you can hear me my toe is gonna be

but be about this how to build this

spinning Pegman shit but what this

exactly is this inning pac-man shit so

one day I was just trying to find

something the beautiful my JavaScript

cost and then someone came away an idea

that is that looks something like this

which is pretty cool so I was thinking

okay I want to do the mouth thing and

then they did the picture stuff and I

didn't really want to work with like

pictures on inside my JavaScript course

so I decided to build spinning pac-man

so I talked Pegman and then I mean it

spins it follows the mouse and I add it

yeah so we just gonna add a music to it

to make it more fun yeah can I help it

so that's what this is for by the way by

the way interesting thing this just this

phone that I'm using here for this

spinning 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 was

kind of nice introduction to fonts okay

so anyway to build this spinning pacman

shit right first of all I need to build

a pacman so the pen where's my mouth you

can't have a mouth on key so anyway on

the left side you see the pac-man which

is built with SVG combination of layers

not too hot so going on a circle and

probably a triangle you build a pacman

but the first thing to do is to know add

some shadows to it so this is why I used

dropped at all so instead of boxer load

we can stop shadow allows you to rep you

as Ouija 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 want to point

this out before I continue no the thing

about this spinning Pac 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 I mean the the browser

1 & Co cuz moving around looking very

confused okay you know I think I said

the wrong thing so let me share the

entire thing so cuz I need to switch

okay so you see this this this spinning

thing so basically we're trying to be

I'm showing how to build a 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 and or go here go here

depends on where you want the mouse to

go so basically I specialize into it

directions the I just saying

north-northwest is software soft

yourself blah blah blah blah all the way

so this iterations the default by

default if you put everything on a

normal horizontal plane is facing to the

right or rather fitting to the east and

that is rotation of 0 degrees if you

wanna rotate downwards its rotation of

you know 45 degrees to the middle and

then 90 degrees to the bottom if you

rotate upwards it so flow easy it goes

like minus 45 degrees at minus 90

degrees but that's where the easy part

ends so you have this 5 now we need the

other three what happens 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 magnet right so what you can

do is to first flip the penguin with

scale X or still Y depending on what you

want

and 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 ski or its cure

they rotate the answer changes according

to - - how you write it

so pay attention to this one when you if

you want to make something like this

then are you gonna hit and going

calculate all the different possible

values of like if you if you still X if

you see Y so this is the the range of

values will come back to this one in a

bit because we need this info to carry

on building this thing then the second

thing we know is if you know if you want

something to follow the mouse you need

to go to the hips you need to like put

okay this is that 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 really need we need

trigonometry what is it real

I think it's got triggers remember you

need two 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 where D so just you've got to

follow along you can know go to this

copán celebre KH pants yes da all Y and

V X okay I'm just gonna leave it aside

it's too small so forget it okay and

then I am going to move to here close my

keynote sorry I need that slight later

okay so basically we're back here with

this spinning pac-man thing I'm going to

comment out so Nicole

[Music]

all right we are at a 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 the payment is easy you

see for each here because eventually I'm

gonna do like nine eight pac-man sent in

a robot right now I only have one and

Dom I comment out the rest it's here

like I just deleted the rest but if you

if we do this that we have more okay

so there's only one tech man in the Dom

now so this just reduces this books for

one so first we want to get the middle

so and we can use the gap on inclined

rect which gave if 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

why center by doing the top and the

bottom average then if you want to get

the mounds location like this this the

most heap location right is Mouse X and

mouse why 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 we

can handle both Mouse and touch events

at the same time no idea why I'm playing

JavaScript here in this in the CSS thing

but I thought it would be interesting

cuz pointer movers are 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 locate the Y to be

opposite value and then the Delta X to

be the adjacent value so to find this

value I just - Mouse X with the center

and you know Mouse wife who's 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 Tata X okay yeah so we can see

we can see the the positive the x and y

values that we'll be using for this

calculation of the thing an order of the

angle now what happened next was we need

to calculate the angle and when I was

googling around on NBN I realized that

no there are two different functions we

can use this called 1s got meth a 10 and

one's got meth a 10 - and they both give

different results so it was quite

interesting I chose I the 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 been by this

formula over here on mdn and i just

plugged it in and we can calculate the

angle so that's that's the CSS spot

there we want to show the angle thing

right so here we have the angle you can

see here we here with zero degrees which

is exactly what we want

moving down 45 to 90 and if you move

past you see 1 and 35 they move a little

bit further it goes to 180 then it goes

in the negative 180 so noticing these

values will help us decide which

transforms we are use

math a 10-2 I think goes to my math 810

without the tool 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 1 3 5 8 then there's a

therefore values rotate 45 - 45 - 135 or

you know this yes so I decided to use

what they want 3 5 in ski - KY - one

step as it feels like the easiest thing

then I'm just going to do this so let's

not do the math absolute lymphocyte this

is what yes 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 swap

over because 90 degrees 91 this is kind

of like - hundred 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 there's one an ID we flip it over

with scare Y then there's the the part

where we do work on this 3 this this few

faces before 90 degrees

oh yeah here it's 90 degrees is here

once they go past 90 we need to flip so

we can work on this this view before

night degrees we want to use the normal

unfit Pegman then after - 90 degrees we

also want to flip which is why we need a

mess not absolute thinking and that's

how I built this Pegman thing and then

we just need to know copy/paste more of

this if you want more payments and it's

it ok just having fun with the headers

and stuff mMmmm okay music music the

music is not here eyes

screen ah okay but I can't I can go back

to the sighs mm was it this one this one

really you know fear not check out here

yeah okay I'm not keen on fear I just

don't have the time wait fine

next time when you can come on a night

we can talk about phones oh my god

that's so many opinions okay okay ready

[Music]

[Music]

anyone have any questions like when I do

this line or you're either a question so

I just think I do online

I feel anything without coupling the

message yeah you I think that's how he

was soon as but I don't even have a pair

counting the free accounts freeloading

off my car um anyway