Learn Trigonometry with JavaScript

Рет қаралды 13,224

Күн бұрын

We study trigonometry by implementing an interactive tool in JavaScript. We learn several trigonometrical functions like the sine, cosine and tangent (sin, cos, tan) and their inverse functions: the arcsine, arccosine and arctangent (asin, acos, atan). We define these functions using a right angle triangle at first and then extend the definitions using the unit circle.
We practice these functions using JavaScript in a way that hopefully makes them more clear and useful. Check out more videos like this:
Pythagorean Theorem
• Pythagorean Theorem: P...
Interpolation (Lerp)
• Linear Interpolation (...
Segment intersection
• Segment intersection f...
⭐GITHUB⭐
github.com/gniziemazity/trigo...
⭐SECTIONS⭐
00:00 Intro
01:00 Drawing Shapes
10:50 Interactivity
20:13 The sine function
22:45 The arcsine function
23:50 Degrees and Radians
28:54 Cosine, Tangent and their inverses
34:58 Implementing a chart
40:46 Working with respect to theta
51:01 Visualizing the tangent

Пікірлер: 81

@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).

@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 :-)

@engincandinc9328 5 ай бұрын

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 5 ай бұрын

Thank you for the nice comment :-)

@Colaholiker 7 ай бұрын

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 7 ай бұрын

:-))) good one!

@vasudev16180 Жыл бұрын

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

@Radu Жыл бұрын

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

@zohaibqurban7386 Жыл бұрын

Sir, you are best teacher in the world.

@Radu Жыл бұрын

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

@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'.

@ssikarim 6 ай бұрын

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

@Radu 6 ай бұрын

Glad you like them! :-)

@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!

@2difficult2do 4 ай бұрын

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

@Radu 4 ай бұрын

Glad to hear it was clear :-)

@tristangibbs8488 Жыл бұрын

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

@Radu Жыл бұрын

Next week ;-)

@skylerengland4707 7 ай бұрын

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

@Radu 7 ай бұрын

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

@negaaa5080 Жыл бұрын

This is exactly what I needed

@Radu Жыл бұрын

Really hope it helps!

@despot979 6 ай бұрын

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

@Radu 6 ай бұрын

Really happy to hear :-) Thanks for watching!

@NoName-lu5tg Жыл бұрын

Great video, thanks. I really needed this

@Radu Жыл бұрын

Good. Happy I made it :-D

@julienverkest3623 8 ай бұрын

26:05 I love this moment

@Radu 8 ай бұрын

:-)

@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.

@Azorman534 9 ай бұрын

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 KZfaq!!! Thanks and keep on teaching us, waiting for the next KZfaq session and code to analyze. ;D

@Radu 8 ай бұрын

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

@___d3p1 Жыл бұрын

Very creative development and explanation as always! :)

@Radu Жыл бұрын

Thank you!

@sergeys5270 Жыл бұрын

Thank you! Amazing!

@Radu Жыл бұрын

Glad you liked it!

@comoyun Жыл бұрын

That's a very useful tutorial

@Radu Жыл бұрын

Glad to hear :-)

@joshuabyrd2629 Жыл бұрын

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

@Radu Жыл бұрын

Maybe someday :-)

@osamaabozahra Жыл бұрын

Thanks Radu, great video as always 👍 👌

@Radu Жыл бұрын

Thanks! :-)

@ahmadkhudai Жыл бұрын

amazing video. thanks :)

@Radu Жыл бұрын

No problem :-)

@volodyslove 4 ай бұрын

wow it's really cool😁

@Radu 4 ай бұрын

Glad you liked it :-)

@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)!

@edgaremmanuel3197 10 ай бұрын

awesome content

@Radu 10 ай бұрын

Thank you!

@shakedrosenblat1925 6 ай бұрын

Thank you Radu

@Radu 6 ай бұрын

You're welcome! Thanks for watching :-)

@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 :-)

@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.

@alnajafyprogrammer3460 6 ай бұрын

you are prof thaaaaaaaaaaaaaank you radu may alla save you

@Radu 6 ай бұрын

:-)

@sean_reyes Жыл бұрын

just like the brilliant app...

@Radu Жыл бұрын

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

@vivekp9206 7 ай бұрын

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

@Radu 7 ай бұрын

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: kzfaq.info/get/bejne/n9eDn92Kvcqqqqs.html kzfaq.info/get/bejne/adiAqsme16nbhqs.html

@soussousalahiddine5933 Жыл бұрын

you are awesome

@Radu Жыл бұрын

Thank you :-)

@jengkhaw15 Жыл бұрын

Nice thumbnail :D

@Radu Жыл бұрын

Thanks ;-)

@sanjivjadhav7789 Ай бұрын

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

@Radu Ай бұрын

It should... could I see the code?

@NoName-tj8dm Жыл бұрын

Just 🙏🙏

@Radu Жыл бұрын

:-)

@oneseventwonine9584 Жыл бұрын

coding with radu sir

@Radu Жыл бұрын

:-)

@lionelgibaudan3592 6 ай бұрын

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 6 ай бұрын

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