How to make Eyeballs that Follow You Around

[@artrix909]

"You dont have to be good at math to be a programmer" - fireship 2021 "If you dont know trig, leave" - beyond fireship 2022

[@zNermal]

sad

[@fanzypantz]

if you program in html!

[@imPrathamDev]

There should be two explanations multiple personality disorder or just hypocrisy 🤔

[@maskettaman1488]

@@imPrathamDev or, you know, it's a joke

[@atharvparlikar8765]

*in your head

[@2231puppy]

I'd love to see more UI reverse engineering!

[@BrunoGomes-su1bk]

up

[@vladostema]

Yes

[@sarcasticdna]

++

[@kartikyadav571]

Bro give suggestion then

[@erickazevedosousa9909]

UP

[@pewds337]

For people who don't know math. To find the slope or inclination of a line from x-axis or horizontal axis you need to y2-y1/x2-x1 here (x1, y1) are the coordinates of first point in this case origin(0, 0) and (x2, y2) are coordinates of cursor. Slope of a line is also the tan of the angle between x-axis and the line. So after finding the slope you basically use a reverse trigonometric function or atan to find the angle. Like tan(45°) = 1 and atan(1) = 45°. You can also convert degrees into radian. 180° = πradian. So 1° = π/180 radian. For x degree radian value is xπ/180 I didn't knew my high school math would be this useful

[@killerdroid99]

this was simple, atan2(1st-argument, 2nd-arguement), where 1st arg is y2 - y1 and 2nd arg is x2 - x1, ( y = mx + c where m is the slope described as y2 - y1/x2 -x1 if (x1, y1) are origin then m = y2/x2)

[@igbagboolaleye6047]

Wow, great explanation

[@deathofsuper8835]

Oh man I was waiting for this. Now I can continue watching the video.

[@abdultheseekerofknowledge4453]

Great man, you should be working in Tesla 👏

[@joshpetit]

If they pull one of these in a coding interview 😵‍

[@ThatTrueCJ201]

This effect looks even better when one offsets the eye-holes from the centre of the eye according to the distance from the eye to the cursor (linear and normalized scale). That way, if your cursor is directly on top of the eye, the eye will look straight ahead at the cursor.

[@minnow1337]

canvas too hard 🥱

[@adhochero6619]

how did you do that?

[@adissentingopinion848]

@@adhochero6619 remove the pupils from the eyes. set the image to be only the pupil. set the base of the eye to be straight center of the eye ball. Calculate dX and dY like he did. Here's the tricky part: normalize the dX and dY by *1/sqrt(dX**2 +dY**2) and scale to radius of eyeball. Two ways to do this now: find the absmin(dX,normalized_scaled_dX) and for dY and apply, or use another bounding function that approaches a limit defined by your normalized value. Think a/(1-e**(-0.5dX)) - a/2, a good ol logistic curve. Just make sure the value is below f(x) = x at all times or else the pupil will look beyond the cursor.

[@Henrix1998]

@@adissentingopinion848 and now this is why webpages are so slow nowadays

[@adissentingopinion848]

@@Henrix1998 What do you mean? That's like 2 add/subs, 30 mults, and say 100 ops for the logistic curve. Are you suggesting, that your ALU can't run all of this on your Intel Celeron 1.2 GHz? No? Because if you don't decide to load 10.2 MB images every 10 seconds for ads, you computer is actually very fast!

[@martinc.7424]

Not a front Dev here, pretty happy to have glimpse of how you guys work! Thanks a lot !

[@gg-gn3re]

not really how they work. There's a reason so many are freaking out adobe is buying figma... front enders are generally complete morons and use those drag and drop tools and that's about the end of their capability. 10% of them know code, and maybe 1% of those 10% are able to do basic reverse engineering or do this kind of math.. Lots of "busy work" to be done by others

[@OFfic3R1K]

Do you mean the part where we steal someone's idea, code and rehash it into an even worse monstrosity? Yeah, that's front-end for ya. The only part that was left out is when you npm 25GBs worth of frameworks and dependencies to host this bad boy of a web page.

[@Niksorus]

That's crazy stuff too, I could never do that 🤣

[@phatakom]

So the maths I learned in college wasn't all of garbage use... Noice

[@pixiedev]

not the math but college professors 🙃.

[@KevinArellano]

Yay for math

[@Skyflairl2p]

My brain used to shut down the second anyone even mentions algebra (or any math jargon beyond the basics). But hey, In changing my perspective of maths and thinking of it as a coding language it just suddenly makes a lot more sense!

[@alireda640]

Trig is high school level

[@solastrr]

Wdym college? Trigonometry is highschool level. Algebra and Calculus are college level stuff. I think your situation is beyond them being garbage, they don't even exist on you LMAO

[@FieldSpot]

After the previous video, we were all waiting for this.

[@BiteYt69]

3:47, "thats where stackoverfl- I mean trigonometry comes in" Beyond Fireship 2022

[@Secreto31126]

It would have been funny if you calculated the angles per eye, not from the rectangle, so they could watch your mouse even if it's in their nose

[@Cypekeh]

Thought so too but I think it could look a bit unnatural, and it would also be more expensive to calculate

[@thekwoka4707]

@@Cypekeh well, if he does the calculation only once per frame, that could be improved.

[@Secreto31126]

@@Cypekeh obviously it will be more expensive, but really that much expensive? Even the simplest notebooks have at least 4/6GB of ram and Celeron CPUs are long gone. I bet it's not that hard to compute 4 atan() every few milliseconds.

[@xtunasil0]

Also, I think the current implementation will bug if you pass the the mouse between Rick and Morty because of the fact it's not calculated for each eye

[@_the_one_1]

Reverse engineering is a rare skill! More videos about it please!

[@scriptkid4561]

????

[@wlockuz4467]

I think another fun effect would be to make the eyes bigger as you move the mouse closer to the characters.

[@klutch4198]

Make it happen and post it in the showcase channel in the new fireship discord!

[@giancarl021]

I think you could’ve used the “rad” CSS angle unit to avoid conversion. Btw awesome video

[@modolief]

Good catch!!

[@StephenGillie]

That's rad.

[@Semtx552]

I wanna see other UI elements reversed engineered like this

[@Dude29]

It's fun to see unorthodox things like this that only show up once in a while and especially fun to see how they are implemented!

[@beinyourguard]

3:46 "That's where stack overfl---I mean, trigonometry comes in" LOL

[@bassjio]

You also don't have to manually convert from radians to degrees, CSS transforms accept "rad" as a unit type.

[@davidarnold1881]

Seriously improving the quality of front end Devs. I won't lie I really appreciated you hoisting the vars, micro-optimisations add up =D

[@DonaldRecord]

That Stack Overflow joke was -so true- comedy gold

[@dhmgroup]

Awesome tutorial Jeff

[@kaydennguyen2168]

I really do appreciate all the humor you put into your videos! Makes it so much more engaging :D

[@hojdog]

I love that tip of using devtools to place absolute elements. That is a pro tip, I never thought of that!

[@corbulo87]

The sheer number of times you fit eyeholes into this video filled my heart with joy.

[@jobsunday833]

Thanks bro finally someone who isn't posting malware or fake stuff, you deserve my subscribe!

[@MerkieAE]

This is one of the best videos on front-end engineering I've seen holy shit there's so many great pieces of information in here. thank you Mr. fireship

[@Mawsdtheking]

Thank you for these videos! I’m just starting my web dev journey but I plan on going back and rewatching your videos for great ideas and tips when the time comes!

[@MoodyDood]

"this is where stack overflow- I mean trigonometry comes in" no sir you were right on the first one

[@andrewwashburn9357]

Good style and a fun effect to implement. Thanks for the inspiration Fireship!

[@anasrin]

css support many rotation angle units, not only degree but also radian so you can just use the atan2 result

[@CaliburPANDAs]

100K subs barely a month in. Good for you, Jeff!

[@user-gm3eo1dp1y]

Questions can come in⬆️ Helpline📲

[@andrebotha5270]

Jeff. You have this KZbin tutorial thing nailed. Brilliant script and editing. Funny and informative. Top notch 👏

[@jaymehta7681]

More reverse engineering videos please 🔥

[@gwerneckpaiva]

'Stack over- trigonometry comes in hand' Legend.

[@avishkarhande]

That's where the StackOver.... I mean Trigonometry comes in 😂😂😂🙌

[@DampeS8N]

If you did it per eye box you wouldn't have to awkwardly stay around the edges of the image and you could make them go cross-eyed. Easy change.

[@gergoradeczki]

- optimizes code - keeps console.log() in the event listener

[@DesiMatrixXD]

😂

[@jakewolf079]

Thanks man this works flawlessly, I now have a cute moon png that follows my cursor around!

[@sharmarahul384]

I love trigonometry. I mostly use it in my HTML5 Canvas with Javascript!

[@wlockuz4467]

3:47 I laughed so hard I lost my breath 😂

[@devincheca9605]

This was such a good video. Both super clever and hilarious. Came for the js, stayed for the Morty.

[@alexbinenstock5480]

This is such a fantastic idea for a series, keep it goin.

[@portal2walkthroughpc]

def will love to see more of this. Please make a playlist of these. Thanks

[@MrBrax]

Nostalgia back to my ActionScript 2 days, used this technique so much :)

[@ahmedthebest]

I really love this kind of videos.

[@fvbixn]

Really like those videos, and with your type of humor I could watch these forever. Would love to see more reverse engineering stuff!

[@user-gm3eo1dp1y]

Our helpline⬆️ Contact me ⬆️

[@radofa610]

just finished making my first track! thanks bro for all the help with learning soft soft. much love

[@user-gm3eo1dp1y]

Questions can come in⬆️📲😊

[@creatorsremose]

Being old makes in inevitable to witness history repeat itself. That was a very common effect in webpages 15 years ago.

[@Sasha32659]

Still timeless😁

[@ChrisHaupt]

That hue rotation 🤌

[@abdiwadudhaji5800]

i LOVE how you make leaning web development exciting 🥳 I'd also like to see more UI reverse engineering

[@zamba2238]

This worked incredibly well! I can finally play it thanks

[@jakethis3355]

God damn, your humor is so on point.

[@patric_forreal]

Daim This is cool, Like how one uses mathematics to solve problems... Pretty cool

[@AndrewErwin73]

"If you can't do trigonometry in your head, you really have no business programming in HTML!" Classic

[@selvamuthukumarmarimuthu258]

This is cool, Jeff!! I would love to see popular sites from awwwards with unique designs or something similar, reverse engineered like this. It would make for a good series. Keep them coming !

[@anasammor3408]

i love when he tests it out for us

[@notemployedatfaang8483]

I would absolutely love to see more reverse engineering! It's really helpful to see the thought process around creating these kinds of elements.

[@Exilum]

"That's when stack overflo-" Most relatable moment of the entire video. Have to say, whenever we know exactly what we want, how we want it and just need a bit of math, we all know where to go.

[@egecangurdek4982]

Nice video man, clear and concise explanation! Thanks a lot!

[@mtnwildernessfamily]

As soon as I saw your video on PocketBook DB I knew your next video was going to be an eyeball CSS video :)- Love your channel!

[@itmecube]

Great breakdown of this effect.

[@karimnassar7706]

This guy, love these videos

[@GGdevelopment]

I LOVE THE RICK AND MORTY REFERENCES 🙂

[@olufemiolufade3325]

So thankful for this

[@bmehder]

Thank you. May I have another? Subscribed.

[@matiasask3774]

More content like this please! thank you a lot!

[@stims344]

Love this kind of stuff man!

[@great_tech]

I am giving you a thumbs up just for the scene

[@jason.ola_official]

Oh damn this was so instructive to watch as a self searching skill to have ! Keep up the good work man :)

[@grahamjoss4643]

Super cool I’d love to see more simple clever animations

[@mo_fakhri]

That's the content that I enjoy using KZbin with

[@logiclb]

Love this kind of video. Only complaint is the rick and morty eye pupal should be the very iconic looking asterisk.

[@mythacker4365]

3:47 Thats where Stackoverflow comes...*errs* Trigonometry comes in. Lol that was a clean 🤣

[@svg8x]

YES PLEASE! Make more videos like this.

[@QCAlpha-212]

Since you asked, Apples Marketing pages are just beautiful. There's so many interesting moving parts that you could probably find something to showcase and reverse engineer

[@jijgalib3247]

reverse engineering a code is a banner for a developer but its so cool and educating to know. we are looking forward to more of it!

[@user-gm3eo1dp1y]

Questions can come in⬆️ Helpline📲

[@etcode]

This is pure gold 👀👁

[@dhansb883]

YES YES WE NEED MORE OF THIS

[@BeshoyAtef]

Yes would love to see more

[@pilotkid2011]

My alarm every morning is that eye holes snippet from Rick and Morty

[@VeeHeeOfficial]

Awesome as always! More UI tricks vids please!!!

[@sangletech]

Love this kind of video man. Keep them coming 😊 Tks

[@saalimmohammed1599]

I'm a simple man. I hear trigonometry. I stop watching the video

[@edathegreat]

Your video on pocket base changed my life

[@rvmsrineu3076]

Thank you for sharing this tutorial

[@taufiqsept]

If you're a game developer, linear algebra and geometry is a must

[@ahmadsofwan4069]

Do more content like this!!!

[@dhrubajitbhattacharjee9850]

"that's where the stackoverflow- i mean trigonometry comes in" 💀

[@vikaskumarsingh7667]

🤣🤣🤣

[@Truzian]

these videos are great cause i can just copy your code and look genius

[@Rotem_shwartz]

As always.. your content is the best

[@eboatwright_]

"Now that we have the _real_ programmers here..." Sir I clicked on a _JavaScript_ video

[@birdpump]

that effect definitely sold you

[@lucamx428]

I wanted to see the easiest ways of making a cool button animation for submitting forms. all of my ideas where inconvenient. Love your content btw. Also thanks for introducing me to js webframeworks :p

[@tesingleton4422]

Please , more of these.

[@oskarlaskowski3173]

absolutely awesome tutorial

[@quincy6199]

I just made this using Monkey D. Luffy's eyes and I feel fulfilled. Thanks Jeff

[@notreallyhaarsh]

"Now we will use stackove- i mean trigonometry to calculate the angle" had me 😂

[@wchorski]

a video diving into 'Browser Dev Tools 101' would be most excellent

[@AdityaTripathi]

Thanks, will copy paste when needed :)

[@ConspicuousPumpkin]

Using JavaScript and Math to help RICKROLL his eyes. Nice.

[@enescagrbayraktutan6329]

That was awesome!

[@Bhanukamax]

oh man this is a good one!, I couldln't stop laughing for few moments since the "stackoverflow" thing, and turns out I'm not a real programmer lol best programming youtube channel, I love the blend of really good content + humor, keep it up!

[@user-gm3eo1dp1y]

Our helpline⬆️ Contact me ⬆️