Detecting Colored Markers with JavaScript [Understanding AI

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

Рет қаралды 4,106

Күн бұрын

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

Пікірлер: 81

@anand_dudi 2 ай бұрын

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

@AZHARakaGoat 2 ай бұрын

Yeah thats right ❤

@MulatfSayani 2 ай бұрын

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!

@eric7758 2 ай бұрын

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

@Radu Ай бұрын

Thank you :-)

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

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

@Eternam Ай бұрын

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

@Radu Ай бұрын

Thank you :-)

@saeentist-hb Ай бұрын

God bless you brother,

@Radu Ай бұрын

Thanks :-)

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

@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

@javifontalva7752 2 ай бұрын

WoW. Amazing! This only gets better.

@Radu 2 ай бұрын

Thanks :-)

@AZHARakaGoat 2 ай бұрын

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

@houbill5363 2 ай бұрын

Great course! Thanks a lot!!!

@Radu Ай бұрын

You are welcome! :-)

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

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

@nicolasdelpuerto3324 2 ай бұрын

Genial! 🎉

@Radu 2 ай бұрын

🙌

@danielchaves6265 2 ай бұрын

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.

@ivgadev 2 ай бұрын

Yes! 😁

@Radu 2 ай бұрын

:-)

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

:-)))

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

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

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

@Radu Ай бұрын

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

@keerthiseelanj1553 Ай бұрын

@@Radu Thanks bro

@eric7758 2 ай бұрын

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

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

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

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.