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)
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!
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
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.
@@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
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 !
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 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.
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
I know it’s probably a bit harder to do now, but discord used to have a really cool login animation. I wonder how it worked. Basically there was an animated gray blob in the upper left and when you logged in the background would become engulfed in the gray. If you search on RU-vid there’s a video of it.
tho you dont even need atan2, you can just normalize the direction and use `transform: translate()` easier to understand and ever more customizable later
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.
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
This is how I did it a few weeks ago on a project, funny this comes on my feed now. Mine doesn't just rotate the pupils, it moves them relative to the distance of the cursor so the pupil is in the center when you hover on the eye and the movement is much more natural. A little more trig, but that's what chatGPT is for: const face = document.querySelector('#face'); const pupils = document.querySelectorAll('.pupil'); const rect = face.getBoundingClientRect(); document.addEventListener('mousemove', function(e) { pupils.forEach(pupil => { const pupilRect = pupil.getBoundingClientRect(); const centerX = pupilRect.left + pupilRect.width / 2 - rect.left; const centerY = pupilRect.top + pupilRect.height / 2 - rect.top; const x = e.clientX - rect.left - centerX; const y = e.clientY - rect.top - centerY; const angle = Math.atan2(y, x); const maxDistance = rect.width * 0.018; const actualDistance = Math.sqrt(x * x + y * y); const distance = Math.min(maxDistance, maxDistance * (actualDistance / rect.width)); const pupilX = distance * Math.cos(angle); const pupilY = distance * Math.sin(angle); pupil.style.transform = `translate(${pupilX}px, ${pupilY}px)`; }); });
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.
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!
