Uploaded September 2023 | Updated September 2026, 2 weeks ago
To try everything Brilliant has to offer—free—for a full 30 days, visit brilliant.org/Radu. The first 200 of you will get 20% off Brilliant’s annual premium subscription.
FOLLOW ALONG HERE: codepen.io/gniziemazity/pen/xxQoaQw
In this JavaScript tutorial, we'll dive into the world of geometric algorithms as I show you how to calculate the distance between a point and a segment. Whether you're a beginner or an experienced coder, I'll break down the math behind this essential calculation and guide you through the process of implementing it in JavaScript step by step.
To figure out this formula we use concepts like 2D vectors and linear interpolation. If you have trouble with those, please watch these videos first:
2D Vectors: youtu.be/nzyOCd9FcCA
Interpolation: youtu.be/J_puRs40GhM
Self-driving Car Course:
youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
If you're interested in improving your math and coding skills, don't forget to like, subscribe, and share this video with others who might find it helpful. Let's get started on this fascinating journey of math and JavaScript coding!
This video was sponsored by Brilliant.
To try everything Brilliant has to offer—free—for a full 30 days, visit brilliant.org/Radu. The first 200 of you will get 20% off Brilliant’s annual premium subscription.
FOLLOW ALONG HERE: codepen.io/gniziemazity/pen/xxQoaQw
In this JavaScript tutorial, we'll dive into the world of geometric algorithms as I show you how to calculate the distance between a point and a segment. Whether you're a beginner or an experienced coder, I'll break down the math behind this essential calculation and guide you through the process of implementing it in JavaScript step by step.
To figure out this formula we use concepts like 2D vectors and linear interpolation. If you have trouble with those, please watch these videos first:
2D Vectors: youtu.be/nzyOCd9FcCA
Interpolation: youtu.be/J_puRs40GhM
Self-driving Car Course:
youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
If you're interested in improving your math and coding skills, don't forget to like, subscribe, and share this video with others who might find it helpful. Let's get started on this fascinating journey of math and JavaScript coding!
This video was sponsored by Brilliant.
![Detecting Colored Markers with JavaScript [Understanding AI - Lesson 13 / 15]](https://i.ytimg.com/vi/jy-Mxbt0zww/mqdefault.jpg "Detecting Colored Markers with JavaScript [Understanding AI - Lesson 13 / 15]
PLAYLIST: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
Remember those early mobile games where you could steer by tilting the phone? In this video, Ill guide you through using the device orientation sensor to capture tilt movements. Its a fantastic technique that opens up a world of possibilities for game control.
Lets explore the potential of this feature not just for games, but for other applications too. Ill share my friends creation, Jazzman vs. Metalheadz, which showcases the versatility of tilt controls.
The applications extend beyond gaming – think about measuring tree heights or distances to distant objects. If youre interested, I have tutorials on those topics as well. Towards the end of the video, Ill demonstrate how to integrate tilt controls into our racing game, tying it back to the Understanding AI course.
So, let me steer you in the right direction for implementing device orientation in your projects. And by the way, did I mention well be doing some nononooooo again? You wont want to miss it! Like, share, and subscribe for more exciting tutorials on AI, game development, and innovative programming techniques!
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
My Videos with Markers: https://www.youtube.com/playlist?list=PLB0Tybl0UNfb2mpLdkgVNRHC1VCMGthq_
Coding my Personal Avatar: https://youtu.be/U88NM8ScsPY
Summary of the Avatar Project: https://youtu.be/JFMTudIJLH0
#ImageProcessing #JavaScriptImageProcessing #JavaScriptMarkerDetector #JavaScriptMarkers
⭐TIMESTAMPS⭐
00:00 Introduction
01:21 Basic Project Setup
02:43 Accessing the Camera
04:45 Image Processing
08:10 Getting the ImageData
13:38 Measuring Blueness of Pixels
21:43 Visualizing Pixel Properties
26:30 Thresholding
28:41 Marker Location and Size
32:49 Two Markers")
![A Virtual World - JavaScript Course: Lesson 7 / 11 [Road Marking Editor with JavaScript]](https://i.ytimg.com/vi/kS4zDKC7LLs/mqdefault.jpg "A Virtual World - JavaScript Course: Lesson 7 / 11 [Road Marking Editor with JavaScript]
Welcome to the course where we build a self-driving car simulation in a virtual world using HTML, CSS and JavaScript. Now, its time to introduce road markings to enforce traffic rules. These rules are not just about creating realistic road behavior; they are the key to unlocking the full potential of phase 3, where we dive into more advanced AI techniques.
Given that our world remains predominantly 2D, well implement these rules as markings on the road. These markings will snap to the road and always maintain the correct orientation. The philosophy is simple: users should have to do as little as possible to create something nice. This user-centric approach is a guiding principle in all UI development.
Have Fun! :-) 🚗🛣️
⭐PLAYLIST⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
💻CODE💻
https://github.com/gniziemazity/virtual-world
6. Fake3D = follow along
7. Markings = code after this lesson (including the part for channel members)
⭐ALL PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
⭐Emojis I used in the video⭐
🌐🛑🚶🚙🅿️🚦⚠️🎯
☕Buy me a Coffee?☕
https://www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
https://youtube.com/@radu/join
⭐Timestamps⭐
00:00:00 Introduction
00:01:09 Preparing for 2 Editors
00:08:44 Bind in JavaScript
00:14:53 Implementing the Stop Editor
00:40:10 Implementing the Crossing Editor
00:48:51 Refactoring using Inheritance
01:01:13 Implementing the Start Editor
01:04:26 Four more Markings")
