Uploaded November 2022 | Updated September 2026, 2 weeks ago
We study 2D vectors by implementing an interactive tool in JavaScript. We learn about the cartesian representation and the polar representation. And vector operations like addition, subtraction, scaling, normalization and how to calculate the dot product. We use what we learn about vectors to draw vectors (an arrow) and visualize the different operations in an interactive way.
We practice these functions using JavaScript in a way that hopefully makes them more clear and useful. Check out more videos like this:
Trigonometry
youtu.be/xK3vKWMFVgw
Pythagorean Theorem
youtu.be/iqSlzYXdFzw
Interpolation (Lerp)
youtu.be/J_puRs40GhM
Segment intersection
youtu.be/fHOLQJo0FjQ
Arctangent documentation
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2
⭐GITHUB⭐
github.com/gniziemazity/2d-vectors
⭐SECTIONS⭐
00:00 Intro
00:58 Drawing Shapes
08:02 Magnitude
09:18 Interactivity
11:45 Direction
13:43 Polar Coordinates
17:27 Drawing Arrows
22:00 Vector Addition
30:55 Vector Subtraction
32:58 Vector Scaling and Normalization
38:02 Vector Dot Product
We study 2D vectors by implementing an interactive tool in JavaScript. We learn about the cartesian representation and the polar representation. And vector operations like addition, subtraction, scaling, normalization and how to calculate the dot product. We use what we learn about vectors to draw vectors (an arrow) and visualize the different operations in an interactive way.
We practice these functions using JavaScript in a way that hopefully makes them more clear and useful. Check out more videos like this:
Trigonometry
youtu.be/xK3vKWMFVgw
Pythagorean Theorem
youtu.be/iqSlzYXdFzw
Interpolation (Lerp)
youtu.be/J_puRs40GhM
Segment intersection
youtu.be/fHOLQJo0FjQ
Arctangent documentation
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2
⭐GITHUB⭐
github.com/gniziemazity/2d-vectors
⭐SECTIONS⭐
00:00 Intro
00:58 Drawing Shapes
08:02 Magnitude
09:18 Interactivity
11:45 Direction
13:43 Polar Coordinates
17:27 Drawing Arrows
22:00 Vector Addition
30:55 Vector Subtraction
32:58 Vector Scaling and Normalization
38:02 Vector Dot Product
![Camera Input for Racing Game in JavaScript [Understanding AI - Lesson 14 / 15]](https://i.ytimg.com/vi/odgKS32XS6Q/mqdefault.jpg "Camera Input for Racing Game in JavaScript [Understanding AI - Lesson 14 / 15]
PLAYLIST: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
In Lesson 12 of the Understanding AI course, join me in implementing camera controls for our racing game using the marker detector code we built in the previous tutorial. This innovative approach will elevate your gaming experience as we delve into using marker centroids to determine tilt, allowing for dynamic control within the game.
Picture this – pulling back with the marker activates the brake, and with a prolonged hold, it seamlessly switches to reverse. Ill guide you step-by-step through this process, demonstrating how to draw an augmented reality steering wheel that visually enhances the sensation of gripping and steering.
Its time to merge the worlds of AI, game development, and marker detection for an immersive racing experience. So, buckle up and get ready to accelerate – vroom! Like, share, and subscribe for more lessons on AI, game development, and cutting-edge programming techniques!
💻CODE 💻
https://github.com/gniziemazity/understanding_ai
Follow Along: 8. Phone Input AND 9. Marker Detector
Code After This Lesson: 10. Camera Input
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
#RacingGame #RacingGameJavaScript #CameraInput #ImageProcessing #JavaScriptWebcamGame #JavaScriptWebcamControls
⭐TIMESTAMPS⭐
00:00 Introduction
00:58 Camera Controls
14:22 Augmented Reality
24:28 Detect Closeness to Camera")
