Detecting Colored Markers with JavaScript [Understanding AI - Lesson 13 / 15]

PLAYLIST: • Self-driving Car :: Ph...
Remember those early mobile games where you could steer by tilting the phone? In this video, I'll guide you through using the device orientation sensor to capture tilt movements. It's a fantastic technique that opens up a world of possibilities for game control.
Let's explore the potential of this feature not just for games, but for other applications too. I'll share my friend's 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 you're interested, I have tutorials on those topics as well. Towards the end of the video, I'll 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 we'll be doing some nononooooo again? You won't 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: • Self-driving Car :: Ph...
My Videos with Markers: • JavaScript Marker Effects
Coding my Personal Avatar: • JavaScript Talking Ava...
Summary of the Avatar Project: • JavaScript Talking Ava...
#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

[@anand_dudi]

The most valuable thing he provide is he always start new project from scratch

[@AZHARakaGoat]

Yeah thats right ❤

[@MulatfSayani]

This is what Genius does. ❤

[@zlackbiro]

The only logical way to teach someone is to start from scratch.

[@Radu]

Glad you find value in these :-)

[@Radu]

Not really. I think genius-types like to develop themselves more than to share what they know... The things I teach are just basic image processing techniques. There are many more crazy things out there :-)

[@alemran4388]

You've explained a complex topic in such a clear and simple way.Thank you for making this tutorial🙂

[@Radu]

You're welcome!

[@kavemcdaniel6196]

You are teaching fishing, I already learned the proper use of debugger and classes before even noticing the main content, thanks for the dedication.

[@Radu]

I'm happy to hear you learned new ways to debug :-)

[@eric7758]

I like the way you start from scratch and implement stuffs in a simple understandable way

[@Radu]

Thank you :-)

[@Eternam]

When i have time i will do all the lessons 1 by 1. Thanks Radu, your videos are very enriching.

[@Radu]

Thank you :-)

[@owenizedd2830]

You're insane, I literally learn math from you and it's mind blowing

[@Radu]

Nice :-)

[@owenizedd2830]

@@Radu Can you tell us about what did you do at Microsoft?

[@Radu]

@@owenizedd2830 this: dl.acm.org/doi/10.1145/3474832 You can read it for free here: erepo.uef.fi/handle/123456789/26918

[@owenizedd2830]

@@Radu wow! Im extremely impressed its NP hard problem

[@Radu]

:-)

[@TVNostalgia]

Amazing. One another subscriber. Congratulations for the easy way you teach.

[@Radu]

Thank you :-)

[@ahmad-murery]

Vanilla JS is very performant, this is one of the things I like about it. Thanks Radu!

[@Radu]

Sure... but if performance is really what you're looking for, I'd look elsewhere :-)

[@ahmad-murery]

@@Radu I mean compared to using unnecessary libraries and if you can use Vanilla JS properly it can perform better, I think. anyways, I think you're referring to C++ or other languages in similar level right? Thanks Radu!

[@Radu]

Libraries can have code that is very well implemented (efficient). And good libraries stand the test of time... bugs are found, fixes are made and so on. But they can also come with a lot of 'extra' things that you don't need, making your app very bulky. That said, when I teach I often choose clarity instead of efficiency, so, likely you can find more performant code elsewhere :-)

[@ahmad-murery]

@@Radu I can't agree more

[@DanielJoseAutodesk]

Really cool. 😁👍 Although the focus of the program to be created is another, it can be clearly noted that using JS, we can very simply create a way to manipulate images. Creating very cool and interesting effects. Something that some programs have and are very expensive. But for home videos what you get with JS is already surprising. 👍

[@Radu]

Sure :-) JS may not be as fast as other languages, but it's OK for many things and you can make quick user interfaces that you can share online (that's why I use it).

[@CrackNimcet-uq9yj]

usually i don't comment on anyone video but we make me comment "implementing ai in the vanilla js absoulte legend"

[@Radu]

Thanks for commenting :-)

[@saeentist-hb]

God bless you brother,

[@Radu]

Thanks :-)

[@javifontalva7752]

WoW. Amazing! This only gets better.

[@Radu]

Thanks :-)

[@houbill5363]

Great course! Thanks a lot!!!

[@Radu]

You are welcome! :-)

[@AZHARakaGoat]

Thanks ❤

[@Radu]

You're welcome :-)

[@axonile836]

Is there a way to use instead of ? By the way Radu I'm an architect in Senegal and I never miss an opportuity to tell people how great your vids are.

[@Radu]

Sure, for the output you could use SVG. But canvas is needed for the image processing, because the data we get from the camera is raster (pixels) not vectors.

[@Radu]

Oh, and thanks for sharing :-)

[@danielchaves6265]

Thank you for another teaching. Maybe I can apply this to read the barcode? XD

[@Radu]

Part of this code, yes. But there you want to recognize a light/dark dashed pattern instead of a single color.

[@Merilix2]

Great tutorial about how to use camera to create controls :) Regarding the group-swapping depending on y coordinate, that's because pixels are ordered by (y,x) in the raw image. Wouldn't it be better to sort the bluish points array by (x,y) before choosing the first and last one for grouping? That way, group swapping can only happen if you cross your arms holding the markers ;) PS: is there any way to permanently allow camera access for local files?

[@Radu]

Sure, you could do that :-) Traditional strategy is to use the farthest away colored pixels actually, but detecting those is more time consuming. Alternative strategy is to compute the center of mass, then the furthest colored pixel from that, let's call it p1, and then the furthest pixel from p1. It's almost the same as choosing the furthest away points, but better time complexity. I don't know of a way to allow camera access permanently like that...

[@zlackbiro]

Even as a senior it was mind blowing to me when you click on the refered file in html, vsc will create it for you if not exist! God damn, fuuuuccckkk meeeeee.. 😂

[@Radu]

:-)))

[@nicolasdelpuerto3324]

Genial! 🎉

[@Radu]

🙌

[@ivgadev]

Yes! 😁

[@Radu]

:-)

[@EzraSchroeder]

28:09 newbie [n00b] question -- how did he set the `temp1` global variable? using developer tools?

[@Radu]

Yeah... unfortunately the video recorder didn't pick up the right-click menu. You right click on the element in the DOM tree, and select 'Set as global variable'.

[@basepasandhai1906]

What is the name of the VSCode theme you're using? I'm not able to find it.

[@Radu]

Ice Contrast

[@basepasandhai1906]

​@@Radu Can you please provide a link for the theme? I'm unable to find it in the marketplace.

[@Radu]

marketplace.visualstudio.com/items?itemName=a5hk.ice

[@basepasandhai1906]

@@Radu Thanks :)

[@Radu]

@@basepasandhai1906 No Problem :-)

[@keerthiseelanj1553]

Hi can you make video related to drag and drop with some games

[@Radu]

I have... PuzzleCam, at least: kzbin.info/aero/PLB0Tybl0UNfadlXE6BSpPk6O1Rbfm9ITo Probably others as well, but don't remember where drag and drop would be such a focus.

[@keerthiseelanj1553]

@@Radu Thanks bro

[@eric7758]

Could you convert this to use HSV instead of RGB, I’m interested to know why you used RGB instead of hsv

[@Radu]

Sure... If you use HSV you'd need to set a base 'hue' value to look for. And a range, how far to go around that base value to tolerate more types of blue. That technique may work even better than why I teach here. But it has 2 parameters (2 sliders, basically...). And I found this one easier to use with just one slider and it's also easier to automate so it figures out the slider position automatically (I'll show that someday). I've taught how to do this same thing in other ways as well, over the years... I'm just playing, trying different approaches and teaching the logic behind them.

[@eric7758]

@@Radu we appreciate everything and thanks so much.

[@Radu]

Thanks for watching!

[@anand_dudi]

Hey radu one request do this with three.js js library would be best for view count and for doing innovation to achieve next level

[@Radu]

I have few older three.js projects and I like doing those, but there are so many things I should be teaching about WebGL like how rendering works, cameras, lighting, etc. I find those things boring, because it's just listing what parameters can be set to, not so much problem-solving like what I want to teach on the channel. Maybe someday I'll do that if I find a fun way to teach.

[@anand_dudi]

​@@Radu Sure

[@talkingtornedo3054]

Create a game mannn!! A high graphics game pleaseee please!!!

[@Radu]

I'm more interested in teaching techniques than polishing projects :-) but maybe someday I'll change my focus. Who knows :-)

[@69zwaan]

I like you coding 😏

[@Radu]

Thanks :-)

[@kingoftennis94]

is he close to the upper limit on coding skill, human intelligence?

[@Radu]

Coding skill? No :-D I don't consider myself an expert JavaScript developer (or any language, for that reason, because at work I teach so many of them...). And intelligence... no... I don't think it's that. I just know many techniques because I've used them many times over the years... It's like knowing many building blocks that you can combine in a bunch of ways to create something new. That's the 'intelligent' part... combining them, knowing them is just memorizing, basically... and years of practice.