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.
@@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 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!
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
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)
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
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.
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!
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
@@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.
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
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
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!
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 !
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
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!
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
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.
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.
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.
"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.
tho you dont even need atan2, you can just normalize the direction and use `transform: translate()` easier to understand and ever more customizable later
"You dont have to be good at math to be a programmer" - fireship 2021
"If you dont know trig, leave" - beyond fireship 2022
sad
if you program in html!
There should be two explanations multiple personality disorder or just hypocrisy 🤔
@@imPrathamDev or, you know, it's a joke
*in your head
I'd love to see more UI reverse engineering!
up
Yes
++
Bro give suggestion then
UP
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.
canvas too hard 🥱
how did you do that?
@@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.
@@adissentingopinion848 and now this is why webpages are so slow nowadays
@@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!
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
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)
Wow, great explanation
Oh man I was waiting for this. Now I can continue watching the video.
Great man, you should be working in Tesla 👏
If they pull one of these in a coding interview 😵
Not a front Dev here, pretty happy to have glimpse of how you guys work! Thanks a lot !
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
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.
That's crazy stuff too, I could never do that 🤣
So the maths I learned in college wasn't all of garbage use... Noice
not the math but college professors 🙃.
Yay for math
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!
Trig is high school level
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
Reverse engineering is a rare skill! More videos about it please!
????
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
Thought so too but I think it could look a bit unnatural, and it would also be more expensive to calculate
@@Cypekeh well, if he does the calculation only once per frame, that could be improved.
@@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.
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
3:47, "thats where stackoverfl- I mean trigonometry comes in" Beyond Fireship 2022
After the previous video, we were all waiting for this.
I think another fun effect would be to make the eyes bigger as you move the mouse closer to the characters.
Make it happen and post it in the showcase channel in the new fireship discord!
I think you could’ve used the “rad” CSS angle unit to avoid conversion. Btw awesome video
Good catch!!
That's rad.
Seriously improving the quality of front end Devs. I won't lie I really appreciated you hoisting the vars, micro-optimisations add up =D
I really do appreciate all the humor you put into your videos! Makes it so much more engaging :D
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!
You also don't have to manually convert from radians to degrees, CSS transforms accept "rad" as a unit type.
Thanks bro finally someone who isn't posting malware or fake stuff, you deserve my subscribe!
I wanna see other UI elements reversed engineered like this
3:46 "That's where stack overfl---I mean, trigonometry comes in" LOL
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
100K subs barely a month in. Good for you, Jeff!
Questions can come in⬆️
Helpline📲
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!
I love that tip of using devtools to place absolute elements. That is a pro tip, I never thought of that!
The sheer number of times you fit eyeholes into this video filled my heart with joy.
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.
css support many rotation angle units, not only degree but also radian
so you can just use the atan2 result
Jeff. You have this UA-cam tutorial thing nailed. Brilliant script and editing. Funny and informative. Top notch 👏
This is such a fantastic idea for a series, keep it goin.
"If you can't do trigonometry in your head, you really have no business programming in HTML!"
Classic
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!
"this is where stack overflow- I mean trigonometry comes in"
no sir you were right on the first one
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 !
Oh damn this was so instructive to watch as a self searching skill to have ! Keep up the good work man :)
just finished making my first track! thanks bro for all the help with learning soft soft. much love
Questions can come in⬆️📲😊
Daim This is cool, Like how one uses mathematics to solve problems... Pretty cool
i LOVE how you make leaning web development exciting 🥳 I'd also like to see more UI reverse engineering
Good style and a fun effect to implement. Thanks for the inspiration Fireship!
- optimizes code
- keeps console.log() in the event listener
😂
That's where the StackOver.... I mean Trigonometry comes in 😂😂😂🙌
Thanks man this works flawlessly, I now have a cute moon png that follows my cursor around!
Really like those videos, and with your type of humor I could watch these forever. Would love to see more reverse engineering stuff!
Our helpline⬆️
Contact me ⬆️
I would absolutely love to see more reverse engineering! It's really helpful to see the thought process around creating these kinds of elements.
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!
Questions can come in⬆️
Helpline📲
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
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!
Our helpline⬆️
Contact me ⬆️
Awesome tutorial Jeff
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
3:47 Thats where Stackoverflow comes...*errs* Trigonometry comes in.
Lol that was a clean 🤣
That Stack Overflow joke was -so true- comedy gold
If you're a game developer, linear algebra and geometry is a must
def will love to see more of this. Please make a playlist of these.
Thanks
This was such a good video. Both super clever and hilarious. Came for the js, stayed for the Morty.
I really love this kind of videos.
Fireship!!!
i'm not ashamed to say i've sold most of my research time to your channels. Thanks for always cooking awesomeness ♥
Questions can come in⬆️..
3:47 I laughed so hard I lost my breath 😂
Being old makes in inevitable to witness history repeat itself. That was a very common effect in webpages 15 years ago.
Still timeless😁
That hue rotation 🤌
'Stack over- trigonometry comes in hand' Legend.
Thanks, will copy paste when needed :)
Nice video man, clear and concise explanation! Thanks a lot!
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.
This guy, love these videos
This worked incredibly well! I can finally play it thanks
More reverse engineering videos please 🔥
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.
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
God damn, your humor is so on point.
I love trigonometry. I mostly use it in my HTML5 Canvas with Javascript!
Nostalgia back to my ActionScript 2 days, used this technique so much :)
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.
"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.
All I got from this was: "If you don't know Trigonometry, get Rekt"
Love this kind of stuff man!
"Now that we have the _real_ programmers here..."
Sir I clicked on a _JavaScript_ video
my ass who didint even start doing trigonometry at school watching this video like
👁️👄👁️
More content like this please! thank you a lot!
With this video, you've gained a subscription from me! Kudos
i love when he tests it out for us
Your video on pocket base changed my life
that effect definitely sold you
a video diving into 'Browser Dev Tools 101' would be most excellent
I LOVE THE RICK AND MORTY REFERENCES 🙂
dude, I dont even undertand how u did that, but that so coollll, love u❤
Please for the love of everything that's holy *Reverse engineer the whole UI of the stripe homepage*
I just made this using Monkey D. Luffy's eyes and I feel fulfilled. Thanks Jeff
"that's where the stackoverflow- i mean trigonometry comes in" 💀
🤣🤣🤣
Love this kind of video. Only complaint is the rick and morty eye pupal should be the very iconic looking asterisk.
As always.. your content is the best
Thank you. May I have another? Subscribed.
"Now we will use stackove- i mean trigonometry to calculate the angle" had me 😂
tho you dont even need atan2, you can just normalize the direction and use `transform: translate()`
easier to understand and ever more customizable later
who? I didn't understand?
1:04 I freakin' love your videos.
That's the content that I enjoy using UA-cam with
This is pure gold 👀👁
these videos are great cause i can just copy your code and look genius
Thanks dude this really helped me a lot I did the steps that's you did thanks man!
"That were stackOver-- I mean trigonometry come in", this line got me falling off the chair🤣🤣🤣🤣🤣🤣
Super cool I’d love to see more simple clever animations
YES YES WE NEED MORE OF THIS
YES PLEASE! Make more videos like this.