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 🤣

[@FieldSpot]

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

[@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

[@BiteYt69]

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

[@_the_one_1]

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

[@scriptkid4561]

????

[@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

[@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.

[@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!

[@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!

[@kaydennguyen2168]

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

[@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

[@jobsunday833]

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

[@bassjio]

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

[@beinyourguard]

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

[@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

[@patric_forreal]

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

[@hojdog]

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

[@dhmgroup]

Awesome tutorial Jeff

[@CaliburPANDAs]

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

[@user-gm3eo1dp1y]

Questions can come in⬆️ Helpline📲

[@andrewwashburn9357]

Good style and a fun effect to implement. Thanks for the inspiration 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!

[@corbulo87]

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

[@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 !

[@alexbinenstock5480]

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

[@AndrewErwin73]

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

[@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 ⬆️

[@abdiwadudhaji5800]

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

[@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⬆️📲😊

[@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.

[@andrebotha5270]

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

[@wlockuz4467]

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

[@mythacker4365]

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

[@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.

[@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!

[@devincheca9605]

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

[@gergoradeczki]

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

[@DesiMatrixXD]

😂

[@jayxus]

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

[@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📲

[@sharmarahul384]

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

[@jaymehta7681]

More reverse engineering videos please 🔥

[@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

[@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😁

[@MoodyDood]

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

[@portal2walkthroughpc]

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

[@jakewolf079]

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

[@Arcaz96]

I would like to see more reverse engineering videos like this. You videos both in Fireship and Beyond Fireship always motivates me to be a better developer.

[@DonaldRecord]

That Stack Overflow joke was -so true- comedy gold

[@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

[@logiclb]

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

[@yousafsabir7]

Jeff asking on Twitter what topic to make a video on and then makes one out of his own liking. Still very nice stuff... Thanks

[@anasrin]

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

[@egecangurdek4982]

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

[@avishkarhande]

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

[@bmehder]

Thank you. May I have another? Subscribed.

[@zamba2238]

This worked incredibly well! I can finally play it thanks

[@AdityaTripathi]

Thanks, will copy paste when needed :)

[@xan3xx443]

Reverse engineer three js. The would be complex but I think would be a very interesting topic under the the hood. Plus your style of commentary goes really well with large amount of information.

[@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 ⬆️

[@ahmedthebest]

I really love this kind of videos.

[@quincy6199]

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

[@wchorski]

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

[@gwerneckpaiva]

'Stack over- trigonometry comes in hand' Legend.

[@matiasask3774]

More content like this please! thank you a lot!

[@MrBrax]

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

[@GGdevelopment]

I LOVE THE RICK AND MORTY REFERENCES 🙂

[@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.

[@deadmancli6567]

With this video, you've gained a subscription from me! Kudos

[@grahamjoss4643]

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

[@samsonorode6568]

Fireship!!! i'm not ashamed to say i've sold most of my research time to your channels. Thanks for always cooking awesomeness ♥

[@user-gm3eo1dp1y]

Questions can come in⬆️..

[@taufiqsept]

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

[@bunsbof]

dude, I dont even undertand how u did that, but that so coollll, love u❤

[@karimnassar7706]

This guy, love these videos

[@edathegreat]

Your video on pocket base changed my life

[@stims344]

Love this kind of stuff man!

[@brndto]

I literally missed out on trigonometry at school because I was in hospital for a few months and the school didn't even make an attempt to catch me up on any of the work I had missed. Safe to say I successfully failed the trigonometry test when I first got back to school.

[@SupreethBS]

Please for the love of everything that's holy *Reverse engineer the whole UI of the stripe homepage*

[@itmecube]

Great breakdown of this effect.

[@svg8x]

YES PLEASE! Make more videos like this.

[@jakethis3355]

God damn, your humor is so on point.

[@VeeHeeOfficial]

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

[@Rotem_shwartz]

As always.. your content is the best

[@anasammor3408]

i love when he tests it out for us

[@great_tech]

I am giving you a thumbs up just for the scene

[@ThomPorter74]

1:04 I freakin' love your videos.

[@Truzian]

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

[@mo_fakhri]

That's the content that I enjoy using KZbin with

[@eboatwright_]

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

[@YoARnaldo]

Loving the reverse engineering videos! Would love to see more

[@ahmadsofwan4069]

Do more content like this!!!

[@FrazerKirkman]

Thanks for showing us Style.filter = 'hue-rotate(..' Pretty cool

[@etcode]

This is pure gold 👀👁

[@shalimgill7966]

Thanks dude this really helped me a lot I did the steps that's you did thanks man!

[@kamalmachani]

This is exactly what I did few days back… after I saw your pocketbase video 😁😁😁

[@michaeledwardharris]

That was cool. I'd like to see more videos like that.

[@murilomaestro7672]

Amazing! You should do some technical stuff like a video player. Or reverse engineer a friends website