How to make Eyeballs that Follow You Around
HTML-код
- Опубликовано: 7 июн 2024
- Learn how to implement a proximity hover effect that animates based on the relative position of the mouser cursor with HTML, CSS, JavaScript, and a little bit of trigonometry. We build a demo with makes they eyes of Rick and Morty appear to follow you around the screen.
#javascript #trigonometry #webdevelopment
"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
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
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 😵
3:47, "thats where stackoverfl- I mean trigonometry comes in" Beyond Fireship 2022
After the previous video, we were all waiting for this.
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
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 🤣
- optimizes code
- keeps console.log() in the event listener
😂
I think you could’ve used the “rad” CSS angle unit to avoid conversion. Btw awesome video
Good catch!!
That's rad.
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 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 really do appreciate all the humor you put into your videos! Makes it so much more engaging :D
3:46 "That's where stack overfl---I mean, trigonometry comes in" LOL
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!
Jeff. You have this RUclips tutorial thing nailed. Brilliant script and editing. Funny and informative. Top notch 👏
Seriously improving the quality of front end Devs. I won't lie I really appreciated you hoisting the vars, micro-optimisations add up =D
Reverse engineering is a rare skill! More videos about it please!
????
This is such a fantastic idea for a series, keep it goin.
def will love to see more of this. Please make a playlist of these.
Thanks
3:47 I laughed so hard I lost my breath 😂
Good style and a fun effect to implement. Thanks for the inspiration Fireship!
Love this kind of stuff man!
Nice video man, clear and concise explanation! Thanks a lot!
Oh damn this was so instructive to watch as a self searching skill to have ! Keep up the good work man :)
Thanks bro finally someone who isn't posting malware or fake stuff, you deserve my subscribe!
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
Awesome tutorial Jeff
You also don't have to manually convert from radians to degrees, CSS transforms accept "rad" as a unit type.
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 !
Great breakdown of this effect.
I wanna see other UI elements reversed engineered like this
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.
Bro I like your videos so much. Best tech channel on RUclips. You deserve every subscriber you have and more.
This guy, love these videos
So thankful for this
That was awesome!
Super cool I’d love to see more simple clever animations
More content like this please! thank you a lot!
This worked incredibly well! I can finally play it thanks
I really love this kind of videos.
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 was such a good video. Both super clever and hilarious. Came for the js, stayed for the Morty.
100K subs barely a month in. Good for you, Jeff!
Questions can come in⬆️
Helpline📲
Love this kind of video man. Keep them coming 😊 Tks
Awesome as always! More UI tricks vids please!!!
Thanks dude this really helped me a lot I did the steps that's you did thanks man!
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 ⬆️
That's pretty cool. ty
That was cool. I'd like to see more videos like that.
absolutely awesome tutorial
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
YES PLEASE! Make more videos like this.
This is so cool!
This helped a lot thank you
I was really looking for this thank you 🤠
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 ⬆️
God damn, your humor is so on point.
Thanks man this works flawlessly, I now have a cute moon png that follows my cursor around!
I would absolutely love to see more reverse engineering! It's really helpful to see the thought process around creating these kinds of elements.
just finished making my first track! thanks bro for all the help with learning soft soft. much love
Questions can come in⬆️📲😊
Yes would love to see more
love this!
As always.. your content is the best
Thank you for sharing this tutorial
i love when he tests it out for us
Pretty cool, i actually really like this 😁
css support many rotation angle units, not only degree but also radian
so you can just use the atan2 result
With this video, you've gained a subscription from me! Kudos
Great video! been trying to get the the transform effect with particles and webgl
YES YES WE NEED MORE OF THIS
That was a fun idea!
Please , more of these.
Nostalgia back to my ActionScript 2 days, used this technique so much :)
i LOVE how you make leaning web development exciting 🥳 I'd also like to see more UI reverse engineering
That Stack Overflow joke was -so true- comedy gold
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.
Yes, more of this please!
This is pretty dope
Thanks, will copy paste when needed :)
More reverse engineering videos please 🔥
Loved this, as always cracked my ribs
This is pure gold 👀👁
Thank you. May I have another? Subscribed.
Awesome!
dude, I dont even undertand how u did that, but that so coollll, love u❤
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⬆️..
I love trigonometry. I mostly use it in my HTML5 Canvas with Javascript!
Worthy video ❤
Daim This is cool, Like how one uses mathematics to solve problems... Pretty cool
works, chock-full thanks!
Questions can come in⬆️📲😊
Awesome Stuff
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.
This is gold :D
Need More Of This🔥
Thank you.
That hue rotation 🤌
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.