"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
@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
@solastrr1795
Жыл бұрын
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
@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 🤣
@BiteYt69
Жыл бұрын
3:47, "thats where stackoverfl- I mean trigonometry comes in" Beyond Fireship 2022
@FieldSpot
Жыл бұрын
After the previous video, we were all waiting for this.
@_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
@beinyourguard
Жыл бұрын
3:46 "That's where stack overfl---I mean, trigonometry comes in" LOL
@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.
@wlockuz4467
Жыл бұрын
3:47 I laughed so hard I lost my breath 😂
@Semtx552
Жыл бұрын
I wanna see other UI elements reversed engineered like this
@patric_forreal
Жыл бұрын
Daim This is cool, Like how one uses mathematics to solve problems... Pretty cool
@bassjio
Жыл бұрын
You also don't have to manually convert from radians to degrees, CSS transforms accept "rad" as a unit type.
@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!
@CaliburPANDAs
Жыл бұрын
100K subs barely a month in. Good for you, Jeff!
@user-gm3eo1dp1y
Жыл бұрын
Questions can come in⬆️ Helpline📲
@MoodyDood
Жыл бұрын
"this is where stack overflow- I mean trigonometry comes in" no sir you were right on the first one
@jaymehta7681
Жыл бұрын
More reverse engineering videos please 🔥
@DonaldRecord
Жыл бұрын
That Stack Overflow joke was -so true- comedy gold
@charbelboughazale3994
Жыл бұрын
"That were stackOver-- I mean trigonometry come in", this line got me falling off the chair🤣🤣🤣🤣🤣🤣
@gergoradeczki
Жыл бұрын
- optimizes code - keeps console.log() in the event listener
@DesiMatrixXD
Жыл бұрын
😂
@gwerneckpaiva
Жыл бұрын
'Stack over- trigonometry comes in hand' Legend.
@penis4worlddominatio
Жыл бұрын
Bro I like your videos so much. Best tech channel on KZitem. You deserve every subscriber you have and more.
@eboatwright_
Жыл бұрын
"Now that we have the _real_ programmers here..." Sir I clicked on a _JavaScript_ video
@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
@AndrewErwin73
Жыл бұрын
"If you can't do trigonometry in your head, you really have no business programming in HTML!" Classic
@jakewolf079
Жыл бұрын
Thanks man this works flawlessly, I now have a cute moon png that follows my cursor around!
@jobsunday833
Жыл бұрын
Thanks bro finally someone who isn't posting malware or fake stuff, you deserve my subscribe!
@kaydennguyen2168
Жыл бұрын
I really do appreciate all the humor you put into your videos! Makes it so much more engaging :D
@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.
@avishkarhande
Жыл бұрын
That's where the StackOver.... I mean Trigonometry comes in 😂😂😂🙌
@quincy6199
Жыл бұрын
I just made this using Monkey D. Luffy's eyes and I feel fulfilled. Thanks Jeff
@ZyncInteractive
Жыл бұрын
All I got from this was: "If you don't know Trigonometry, get Rekt"
@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
@mythacker4365
Жыл бұрын
3:47 Thats where Stackoverflow comes...*errs* Trigonometry comes in. Lol that was a clean 🤣
@anasrin
Жыл бұрын
css support many rotation angle units, not only degree but also radian so you can just use the atan2 result
@jakethis3355
Жыл бұрын
God damn, your humor is so on point.
@notreallyhaarsh
Жыл бұрын
"Now we will use stackove- i mean trigonometry to calculate the angle" had me 😂
@dhmgroup
Жыл бұрын
Awesome tutorial Jeff
@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📲
@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😁
@corbulo87
Жыл бұрын
The sheer number of times you fit eyeholes into this video filled my heart with joy.
@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 ⬆️
@ChrisHaupt
Жыл бұрын
That hue rotation 🤌
@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.
@andrebotha5270
Жыл бұрын
Jeff. You have this KZitem tutorial thing nailed. Brilliant script and editing. Funny and informative. Top notch 👏
@hojdog
Жыл бұрын
I love that tip of using devtools to place absolute elements. That is a pro tip, I never thought of that!
@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.
@ahmadsofwan4069
Жыл бұрын
Do more content like this!!!
@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 !
@sharmarahul384
Жыл бұрын
I love trigonometry. I mostly use it in my HTML5 Canvas with Javascript!
@ConspicuousPumpkin
Жыл бұрын
Using JavaScript and Math to help RICKROLL his eyes. Nice.
@devincheca9605
Жыл бұрын
This was such a good video. Both super clever and hilarious. Came for the js, stayed for the Morty.
@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!
@abdiwadudhaji5800
8 ай бұрын
i LOVE how you make leaning web development exciting 🥳 I'd also like to see more UI reverse engineering
@great_tech
Жыл бұрын
I am giving you a thumbs up just for the scene
@GGdevelopment
Жыл бұрын
I LOVE THE RICK AND MORTY REFERENCES 🙂
@pilotkid2011
Жыл бұрын
My alarm every morning is that eye holes snippet from Rick and Morty
@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!
@SupreethBS
Жыл бұрын
Please for the love of everything that's holy *Reverse engineer the whole UI of the stripe homepage*
@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.
@ThomPorter74
Жыл бұрын
1:04 I freakin' love your videos.
@nomadshiba
Жыл бұрын
tho you dont even need atan2, you can just normalize the direction and use `transform: translate()` easier to understand and ever more customizable later
@alireda640
Жыл бұрын
who? I didn't understand?
@alexbinenstock5480
Жыл бұрын
This is such a fantastic idea for a series, keep it goin.
@adjaydev
Жыл бұрын
=> "That's where StackOver../I mean trigonometry come in"
@andrewwashburn9357
Жыл бұрын
Good style and a fun effect to implement. Thanks for the inspiration Fireship!
@birdpump
Жыл бұрын
that effect definitely sold you
@taufiqsept
Жыл бұрын
If you're a game developer, linear algebra and geometry is a must
@karimnassar7706
Жыл бұрын
This guy, love these videos
@wchorski
Жыл бұрын
a video diving into 'Browser Dev Tools 101' would be most excellent
@Jayxus
Жыл бұрын
Oh damn this was so instructive to watch as a self searching skill to have ! Keep up the good work man :)
@saalimmohammed1599
Жыл бұрын
I'm a simple man. I hear trigonometry. I stop watching the video
@JamShady
Жыл бұрын
+1 for HTML gate-keeping, lol
@thebarnold7234
Жыл бұрын
the stack overflow joke caught me off guard im not gonna lie
@kasvith
Жыл бұрын
Nice Rick and Morty reference
@FrazerKirkman
Жыл бұрын
Thanks for showing us Style.filter = 'hue-rotate(..' Pretty cool
@hydra4370
Жыл бұрын
Ahh, my gamedev days if trying to make a projectile shoot towards the cursor :)
@Torbikini
Жыл бұрын
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 KZitem there’s a video of it.
@MrBrax
Жыл бұрын
Nostalgia back to my ActionScript 2 days, used this technique so much :)
@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⬆️..
@olufemiolufade3325
Жыл бұрын
So thankful for this
@etcode
Жыл бұрын
This is pure gold 👀👁
@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⬆️📲😊
@bmehder
Жыл бұрын
Thank you. May I have another? Subscribed.
@portal2walkthroughpc
Жыл бұрын
def will love to see more of this. Please make a playlist of these. Thanks
@bunsbof
Жыл бұрын
dude, I dont even undertand how u did that, but that so coollll, love u❤
@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
@lucaletsplayt
Жыл бұрын
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
@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.
@jackbotman
Жыл бұрын
That eyehole insert, absolutely dead 🤣
@zamba2238
Жыл бұрын
This worked incredibly well! I can finally play it thanks
@sum1179
Жыл бұрын
Now wait to see every page with these darn eyes. God damnit Jeff.
@AlimamiHD
Жыл бұрын
My boss in meetings: how did you design this feature? Me in meetings: that's where stackoverf.. my brain comes in picture 😄
@jaopredoramires
Жыл бұрын
Ok I'll admit it, I giggled on the "get rect"
@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
@DigitalKnight
Жыл бұрын
That's where Stack Overflow 😱 trigonometry comes in hehe
Пікірлер: 793