Learn Trigonometry with JavaScript

[@georgecrisan9499]

Thanks For guys with magic mouse on macos or a trackpad, replace onwheel with onscroll. (It should work for everyone actually.) Note toRad function is not needed with this approach. let pos = 0; document.onscroll = (event) => { const scrollY = window.scrollY.toFixed(0); // Make - 0.02 and 0.02 whatever you like (higher is faster) theta -= scrollY > pos ? - 0.02 : 0.02; pos = scrollY; if (scrollY < 5 || scrollY > 15000) { scrollTo(0, 5000); } update(); }; // On document load set page down to 5000 so we have a bit of play zone scrollTo(0, 5000); also make the body very large in height and the canvas a position of fixed. Why? Because now you are looking at the scroll position against the window and not at the event (you don't have onwheel with magic mouse, remember?) It works excellent. Here is the CSS. .canvasStyle { background-color: honeydew; position: fixed; } body { background-color: teal; margin: 0; height: 20000px; padding: 0; } My implementation can be found at github [dot] com / GeorgeCrisan / math-trigo. Credit to Radu.

[@Radu]

Wow, awesome :-) It even works when I press the mouse wheel and move the mouse up and down. Would have been really easy to do that and control the speed when testing / animating things for the video. Thanks, and also thanks for donating, but I feel I should be paying you :-D [btw: radian(s), not radiant]

[@Radu]

I gave you a shoutout in my new ML video (description has the timestamp).

[@engincandinc9328]

I usually don't comment much but couldn't help myself but to drop this here: I've recently discovered your channel and OMG feels like I found treasure, never seen smt like this on youtube before. Your ability to teach complex subjects in a simple way is unreal. Thanks a lot for sharing your wisdom, appreciated. Keep up the great work!

[@Radu]

Thank you for the nice comment :-)

[@Android-17]

How do you always find something interesting to do with the simplest things! Just amazing.

[@Radu]

Glad to hear you found it interesting :-)

[@Colaholiker]

Awesome explanation for someone who totally failed in everything math related. But now I crave for the most geometric food there is: Pizza. A circle, made out of triangles, packed in a square box. (fade out and "no, no no" moment...)

[@Radu]

:-))) good one!

[@zohaibqurban7386]

Sir, you are best teacher in the world.

[@Radu]

Don't know about that, but good if you learn :-)

[@vasudev16180]

You always blew my mind, Radu! You are one of my Top 10 KZbinrs. Thank you for being awesome. Please continue doing great videos.

[@Radu]

Thanks for the nice comment. I'll try :-)

[@sharmarahul384]

I love trigonometry. I started loving it when I knew sin and cos is used to make a circle motion in javascript!

[@Radu]

Yeah :-) kind of same experience with me as well!

[@tristangibbs8488]

This is wonderful!! Something like this for Vectors would be great too. Great job, I love the channel.

[@Radu]

Next week ;-)

[@despot979]

Thank you for the amazing job. I've managed to code along and finish and got very inspired to continue with next lessons.

[@Radu]

Really happy to hear :-) Thanks for watching!

[@2difficult2do]

Thank you for such a good lesson ☝️😼👍You explained almost every line of your code and it made everything clearer...

[@Radu]

Glad to hear it was clear :-)

[@ssikarim]

I love this man. thanks Radu. Your videos are tresors.

[@Radu]

Glad you like them! :-)

[@pesterenan]

This is awesome! I'm still watching but I had to comment at the use of the XOR operator at 28:30. That is genius! Allows for a more concise writing, and I believe I've never used it before! Hahaha Incredible Radu! Keep up the good work!

[@Radu]

Still wondering if it's the best way to do that part. I avoided talking about it because it would have taken too much 'attention'.

[@negaaa5080]

This is exactly what I needed

[@Radu]

Really hope it helps!

[@Azorman534]

Always brilliant, thanks for your efforts. I've made a few changes to recreate the normal anticlockwise sense in positive angles and and corresponding functions sin, cos and tan. But due to how the coordinates are measured (from Top and Left corner canvas) I'm with you that your way is more natural. No one would make a video to create doubts in your public. Best stuff in KZbin!!! Thanks and keep on teaching us, waiting for the next KZbin session and code to analyze. ;D

[@Radu]

Of course, when you know how to code you can change things and make it even clearer like that. Good job :-)

[@julienverkest3623]

26:05 I love this moment

[@Radu]

:-)

[@benedictlutab2370]

Awesome. More maths like Linear Algebra and Calculus series in the future with Javascript maybe?

[@Radu]

Yes. Next week, 2D vectors :-)

[@NoName-lu5tg]

@@Radu wow that will be super cool, as I am currently learning linear algebra. Btw what will be your approach, like it will be for machine learning or for using it in game physics.

[@Radu]

I think I missed your comment. I probably will end up using vectors for both.

[@joshuabyrd2629]

I have not watched this yet. But a whole math for game dev course would be awesome from you.

[@Radu]

Maybe someday :-)

[@skylerengland4707]

Just so you know, your song made me subscribe ... 😂 Now, I'll watch the video 🤣🤣🤣🤣

[@Radu]

Note to self: sing more, code less :-D

[@___d3p1]

Very creative development and explanation as always! :)

[@Radu]

Thank you!

[@osamaabozahra]

Thanks Radu, great video as always 👍 👌

[@Radu]

Thanks! :-)

[@sergeys5270]

Thank you! Amazing!

[@Radu]

Glad you liked it!

[@comoyun]

That's a very useful tutorial

[@Radu]

Glad to hear :-)

[@NoName-lu5tg]

Great video, thanks. I really needed this

[@Radu]

Good. Happy I made it :-D

[@shakedrosenblat1925]

Thank you Radu

[@Radu]

You're welcome! Thanks for watching :-)

[@edgaremmanuel3197]

awesome content

[@Radu]

Thank you!

[@MikkelGissel]

Great stuff again, Radu! As a Danish educator, I really appreciate the many layers and levels of learning you reach with these things, incredible! Did you do something on svg's yet? Also guide to make and maintain npm package for math utils (not completely vanilla, but hey =)

[@Radu]

Thank you Mikkel :-) I didn't do SVG yet... I might someday. I will use node soon, in the machine learning course I'm currently planning (to be out in January)!

[@abdelrahmanmohamed-xo4bf]

Hey can you recommend books for js Cuz i love learning from books and thanks for your awesome videos

[@Radu]

Don't really know of good books... Things change so quickly, that books become old quickly. Staying up to date with online documentation / tutorials is the way to go.

[@javifontalva7752]

Could you make nore vida where you teach Maths through Javascript? I think this is a very cool way to learn Maths.

[@Radu]

I might, let's see :-)

[@vladyslav-py-js-cs]

wow it's really cool😁

[@Radu]

Glad you liked it :-)

[@ahmadkhudai]

amazing video. thanks :)

[@Radu]

No problem :-)

[@vivekp9206]

Hi.Why are you using Math.hypot to calculate the distance between two points?

[@Radu]

I often use different ways to calculate the distance, just so people know they exist. Hypot is objectively better if dealing with large values, but here it's not really the case. If you want to learn more about distances I have these videos: kzbin.info/www/bejne/n6K2na2Pjcl5sNk kzbin.info/www/bejne/aaOzqJmjp6iqjNk

[@sean_reyes]

just like the brilliant app...

[@Radu]

Is it? I haven't used it, but I know they have nice things :-)

[@sanjivjadhav7789]

this is great but it doesn't work in my vs code and browser?

[@Radu]

It should... could I see the code?

[@alnajafyprogrammer3460]

you are prof thaaaaaaaaaaaaaank you radu may alla save you

[@Radu]

:-)

[@jengkhaw15]

Nice thumbnail :D

[@Radu]

Thanks ;-)

[@soussousalahiddine5933]

you are awesome

[@Radu]

Thank you :-)

[@ashokd1998]

Where it creates

[@Radu]

Not sure what you mean...

[@NoName-tj8dm]

Just 🙏🙏

[@Radu]

:-)

[@oneseventwonine4342]

coding with radu sir

[@Radu]

:-)

[@lionelgibaudan3592]

Fantastic tuts !!! Tell me, at @9:00 when you draw the coordinates axis you use ctx.lineTo(ctx.canvas.width-offset.x, 0); to draw the 'x' axis, but it works too with the simpler line ctx.lineTo(offset.x, 0); does it matter?

[@Radu]

No, it doesn't matter. You're right :-) you found a simpler way!