AI for Everyone LESSON 8: Putting Text, Rectangles and Circles on Images in OpenCV

hello guys this is paul mccordle with toptechboy.com and we're here today with episode number eight in our incredible new tutorial series where you're gonna learn artificial intelligence or you're gonna die trying what i'm gonna need you to do is pour yourself a nice enormous glass of iced coffee that would be straight up black coffee poured over ice no sugar no sweeteners none needed that would take quite a bit of effort for you guys to reproduce this most excellent glass of iced coffee that i have because i secured the beans from the very tip top of the most famous mount elgon in africa i sourced the raw unroasted beans from the farmer who grew them i brought them home i have a roaster and i roasted them to perfection i ground them and then i made myself this coffee now if you're not able to make it to mount elgon and roast your own coffee you could try some nescafe okay but the key thing is no sugar and no sweeteners now while you're getting your coffee out as always i want to give a shout out to you guys who are helping me out over at patreon it is your support and your encouragement that keeps this great content coming you guys that are not helping out yet think about looking in the description down below there is a link over to my patreon account you can hop on over there and hook a brother up but enough of this shameless self-promotion let's jump in and let's talk about what we're going to do in this most excellent episode number eight i'm going to teach you how to begin to manipulate the frames that you are grabbing from your webcam and we are going to learn how to put text on those frames we're going to learn how to put squares on those frames and we're going to learn how to put circles on those frames because as we're doing artificial intelligence a lot of times we need to kind of decorate the frame or put additional information on the frame and so we've got to kind of get some of these basic fundamental skills out of the way before we move forward okay i apologize i am a little bit stuffy today no fear it is just the good old-fashioned head cold i don't have that most dreaded virus that everyone seems to be fighting these days i have the good old-fashioned head cold and it has left me a little bit stun a little bit stuffy but i'm going to power on through this lesson because i think it is that important okay what i will need you to do is go ahead and i will need you to fire up your most excellent visual studio code and once you're there what we're going to do is we're going to go to our python folder where we have been working and then i'm going to have you uh create a new python file we click on the little uh the little page with a plus and i believe this is if i'm not mistaken and i don't think i am it's going to be open cv program 8 so dash 8 dot p y n the dot p y is kind of important and man i just put that in the wrong folder i've got a it really kind of annoys me how this works but you've got to kind of click in a blank spot to make sure that it doesn't put it in one of these folders excuse me so we've got a click and a blank spot down here come back up to python and darn it click in a blank spot i fight with this all the time so now i click plus and now i'm where i need to be open see cv dash eight or i think we might actually be dash seven yeah dash sub dash seven dot p y to any of the rest of you guys struggle to get open cv to create the program where you want it to but here indeed we do have it dot p y we click enter and boom a fresh new python program just waiting to be written okay now we're going to start with our basic program where you go out and grab a frame and show a frame grab a frame and show a frame you probably already have that from one of the earlier lessons but in case you don't you can come over to the most excellent www.toptechboy.com and you can search on you have this happy little search bar right here and you can search on the lesson that is called faster launch of webcam and smoother videos something like that and i had better get my big noggin out of your way okay there you go faster launch of webcam and smoother video in opencv in opencv on windows and you'll get this kind of starter program that goes out and kind of configures your webcam and starts grabbing and showing frames if you click on these two happy little pages it will highlight the text right right mouse click and copy and then we come over here click in your window right mouse click and paste and boom [Music] now just to make sure that we didn't mess things up in the first three minutes we are going to go ahead and run this thing to make sure that we haven't broken anything and what we should just see is we should see a video window pop up from our webcam so we're going to come here and do that and we are going to hope yes there it is okay and that looks good that looks good and so i'm going to quit out of that and that was a little bit big no one wants to see my head that big so i'm going to turn the size down to 640 and then i'm going to turn the width down to 360. okay 640 by 360. that should be a more reasonable size and then also just a reminder if this doesn't work for you you've got to put your webcam number your webcam number here might be zero i've got several cameras going and so my camera number is one if one doesn't work for you try zero but it should be like zero one or two and just try it until you get something that works that is perhaps the best iced coffee i have ever had okay so we have that and we're just going to make sure that we didn't mess up the size it should be 640 by 360 now okay boom look at that and that looks really nice we're going to come in and we are going to quit out of that okay so now what did i promise we're going to do we're going to learn how to make rectangles we're going to learn to make circles and we're going to learn to put text over that image over that video and the first thing from our lesson number seven our most excellent number seven you could already figure out how to do a rectangle you could just come in and you could do the rectangle using numpy and we would probably uh do i even need to no i don't even think i would need to import numpy i could just do it just with a uh just by using slices on that array remember frame that image that we grab is just a matrix it's a two-dimensional matrix of a certain number of rows in a certain number of columns and the intersection of a row in a column is a pixel and again it's row by column and so we can slice that thing up so we take frame the array and let's just say i want something roughly in the middle i want a rectangle roughly in the middle of that frame well that would be again remember that this slice command wants rows first and then columns and since the number of rows that we have is the height that would be like 360. well if i wanted it in the middle it would be 360 divided by 2 would be 180 and then i want to kind of go above that and below that by let's say 40 pixels so i could say let's go from row 140 to row 2 20. and that would be sort of 40 on each side of the middle if that makes sense now that is the row the range of rows that we're going to manipulate now the range of columns i'm going to put comma and same type of thing that if i have 360 and i want the rectangle roughly in the middle what is half now we're now on 640 because it was rows columns we have 640 columns and so 640 divided by 2 is 320 and so if we kind of went on if we went on 320 let's say 40 less than that would be something like 280 and then 40 more than that would be 360. so this is saying that i am going to monkey with the frame and i'm going to go on rows between row 140 and 220 and i am going to monkey with columns 280 to 360. that should be a square of about 80 pixels by 80 pixels right square dab in the middle of the frame and what i'm going to do is i'm going to make that a new color so what i'm going to put in there is a new pixel i'm going to manipulate those pixels all those pixels are going to become 0 0 comma 0. if you have 0 blue 0 green 0 red you have my friend black so this should be a black box in the middle so let's come in and let's see if we can run that thing boom look at that black box you see i can hide behind the black box okay so that's pretty cool what if we wanted to make it red will we remember that this color scheme the pixels are in the format blue green red so we could turn red on here and these are eight bit numbers which means they go from 0 to 255 so if we wanted it full on red we could make it 0 0 comma 255 and and who's your huckleberry look at that red square okay and you could imagine what if we wanted to make it more rectangular we want it wider we'll remember the first range is rows the second range is columns so let's make it like 30 wider on each side so we would take this down to 250 and we would take this up to 390 and i have decided that i want it blue instead so 255.000 and of course you can mix and match the numbers as well so we're going to come in and hit play what did we do we broke it ah i see did you guys see me make that mistake we'll blame it on the head cold so i like really uh i really messed that up so let's see we were at 6 40 that would be 320 plus 70 i think this would be 250 if i uh we're just going to guess so let's see if that'll work i gave it a crazy number there boom okay blue like we wanted and we have a rectangle that we can hide behind okay so we're going to quit out of that now you see you can manipulate you can put shapes on there by directly manipulating the frame array and by doing slices but actually it's kind of lucky it's kind of lucky that opencv actually has some utilities that make it much easier than manipulating the raw data so let me show you an easier way to do rectangles so i'm going to come down here and i'm going to say cv2 and i want to do what i want to add a rectangle and where do i want to add the rectangle i think you guys can read that all right can't you okay i think you can read that all right i want to add the rectangle to frame okay and then the first thing i have to do is i have to tell it where it is i have to give it a i have to give it an x and a y value for the uh for the position of the rectangle the center of the rectangle and it wants it as a tuple so we've got to put it inside of parentheses in the x let's say we want it in the middle well that would be the width 640 divided by 2 would be 320 and then on the height where we want it we want it in the middle which would be 360 divided by 2 which would be 180. if i am thinking about this right am i thinking about this right i think i am thinking about this right okay i think i am thinking about that right so that is going to be uh no i actually am not thinking about that right at all i was thinking about it the other way what it wants is it wants a point of like the first point of like the upper left and then the second point of the lower right okay the upper left and the lower right so what would the upper left be well let's just make it like this this one was the row and this one was the column so the upper left would be the 250 so that would be the 250 for the uh for the x value okay and then for the y value the upper left would be the y value would be 140 so it would be like 250 comma 140 like that okay and now the point 2 is the lower right okay the upper left of the rectangle and the lower right of the rectangle and the lower right would be okay you we start with the x value and the bigger number the further to the right would be the 390 okay the 390 and then the lower number the y value would be the larger one which would be 220 like that okay guys i feel like i should explain this again that if you remember when we're manipulating a frame itself it goes row first and then column okay row first the up and down first and then the left and right second but in this opencv when it wants a point it wants the x value first and then the x value first and then the y value and then the lower right the x value first and then the y value and so it's kind of like backwards of when you're manipulating the frame itself and so that is probably one of the most confusing things about opencv numpy in dealing with the array itself it's row first and then column but when you're giving an opencv command like this and it wants a point the x value is first and then the y value if this doesn't make sense stop rewind watch it again play with these numbers yourself until it actually makes sense okay so now we have uh what do we want to put the rectangle on we want to put it on the frame what is the upper left well it is the point 250 over 140 down and then the next corner is 390 over and 220 down and so those are the two points now we got to give it a little more information we got to give it the color and so the color is pretty easy let's see let's make it green so i'm going to say zeros for blue green is going to be 255 and zero of course you can mix these things if you want and then what you got to give it is a thickness and the thickness kind of starts at one like one two three four and you can play with these but let's make our thickness two and now let's just run this and see what happens okay i hope it doesn't crash on me boom all right do you see i have a little box i can put myself in the box okay so what if we want to quit out of this i'll show you something else we could let's say what if we made the line width five here and then come back you'll see we'll get a much heavier line boom a much heavier line play around with colors and play around with position and play around with thickness okay and you can see that you got a lot of control i'll show you a little pro tip here if you want a solid box make your line thickness minus one and if you make your line thickness minus one you get a great big fat solid box like that okay let's go back and let's let's just turn on that one that we did with the frame the old-fashioned way okay and uh let's we're gonna draw two okay but they're on top of each other let me make this like a four line with line thickness of four and now they're different colors and so this time this is blue green i should see the blue solid behind the green frame this would be a blue solid behind a green frame if i am thinking about it right and it is a blue solid behind a green frame so you see can play around with both of these things all right so we can make a solid colors by just directly manipulating the pixels in the matrix in the actual data matrix frame we can manipulate those pixels like this or we can use our friendly helper tool the cv2 dot rectangle function call and you can imagine there is also acv2.cv2.circle call and what that circle wants is where you're going to put it you're going to put it on frame because that is your image and then what it wants is it wants to it wants to know where is the center of your circle well again i think it probably wants a tuple there so we need to give it an x and a y value and again it's x y this time it's not row column it's x y the sideways number is first and so if we want to put it in the nut in the middle if it's 640 wide that would be what 320 okay that would be 320 and then if we wanted to put it in the uh in the middle it would be 180 okay like that and so that is a nice tuple it's an open parenthesis an x comma y value and then a closed parenthesis then we've got to tell it a few more things we've got to give it a radius and so let's say we give it a radius of 25 pixels that ought to be pretty good a radius of 25 pixels and now we got to give it a color well let's just make it black so black is zero for blue zero for green and zero for red and that should be a black circle and if we want it solid let's make it a minus one okay and that will be a solid circle and let's take a look and see what happens boom okay you see i got a and i kept that other stuff that i already had i kept that other stuff that i already had okay and what i could also do is i could make this like a 2 instead right i could make my my line thickness a 2 and this time it should just be it should be an open circle but you should probably see that blue box back behind it and there you go you see you see the you see the black circle you see the blue showing through it and then you've got that green frame okay let's think of something else here that we could play around with that circle a little bit okay i want to show you another thing that's going to happen to you like remember how i was having to do this in my head well wouldn't it have been easier just to say uh the width divided by 2 and then the height divided by 2 and that way if i change width and height it's always going to stay in the middle right i mean that's what i've been trying to get you guys to do to think like engineers and to start using more parameters and so let's make that a parameter and then uh let's also let's let's make more parameters so let's call it my radius guys be careful about using the word radius because a lot of times radius is a reserved word it's it actually it's like a function caller has a specific meaning so don't use just radius equal because you might goof something up but let's say radius equal my radius is equal to 30 and then let's say my color is equal to uh let's see my color is going to be equal to let's just make it black still zero comma zero comma zero okay and then my thickness is going to be equal to two okay now we can come down here and we can start doing things with parameters so we wanted we want the position in width divided by two height divided by two and then we want this to be my radius and then we want this to be my color and then we want this to be my thickness do you see how much better this is if you come back later and look at your code and you've got this thing in there called my thickness what's what's it going to be it's going to be like my thickness all right if you just come in there it's a 2 you're going to forget what that means you're going to be completely confused on that and so again use parameters and you see how i kind of put the squiggly under my color and it's notifying me that that it doesn't recognize and that is much better because i had not put my color with the right capitalization that is the best iced coffee i have ever had okay now let's run this and we are going to be when we run it we are going to be denied denied and this if if i'm making this mistake deliberately because when it is happens to you it is so hard to figure it out it says uh over it's it's kind of a cryptic message it tells me that in line 17 so i know that it's in line 17 it says can't par center sequence item with index 0 has wrong type the only thing that is really a clue that is going on there is wrong type type of variable what it wants is it wants integers and if i take 640 divided by 2 is 320 but for some strange reason python makes 320 a floating point number not an integer now if it was 641 divided by 2 you would clearly see that that is a floating point number but the problem is it even makes 640 divided by 2 it makes that a a floating point number as well and so what we need to do is we need to come in and we need to take the int make an integer out of width divided by two and we need to make an integer out of height divided by two and then you're forcing the first number to be an integer you're forcing the second number to be an integer and you won't get that error and i think we might have talked about this in earlier lessons but man this has caused me such headache and such misery so i deliberately make that mistake for you so when you make it on your own independently you'll recognize it so let's see what happens now and we have boom look at that we have that circle and we have it done with parameters and so that is really cool okay moving right along the other thing that we might want to do is we might want to cv2 and we might want to wall we might want to put text notice the t is uppercase there this the the uh text t is uppercase and now where do we want to put our text we want to put it on our frame and now we got to tell it a few things we've got to tell it what is the text that we want to put on there well i'm going to say my text because i'm going to be i'm going to be good and use parameters and i can come up here and say my text is equal to paul is boss bios no paul is boss okay i like it when my programs call me boss okay so there i have uh my text that is going to go in now what i need to do is i need to give it the position okay and it's the position of kind of like the lower left corner of the text and so i don't want it and this again this is going to be this is going to be x comma y and so i'm i'm going to want it to kind of go over about a hundred and i'm going to want it to go down 90. so i'm going to say go over 100 and x and then go about 90 down okay let me make it bigger let me make it 120 and 60 just to make sure that i've got my x's and y's in the right order and that i am not misleading you okay now i've got to give it a font and you have to get to the font you say cv2 okay dot and then you've got to say font f o n t and then you can see pop up here all your different different fonts font hershey plain font hershey simplex you got all these different ones let's just go font hershey complex this always wants makes me want a chocolate bar when i do this i don't know if this is the same hershey that makes chocolate or not okay now what we're going to do is font size and i'm going to make the font size let's say two and then the next thing is going to be the color i'm going to put comma to be good the next thing it wants is the color again color is it a tuple let's make the color blue okay so i'm going to put 255 comma 0 comma 0 should be blue and now how heavy do you want the font the 2 is how tall it is and now how heavy well let's make it a 2 okay and i kind of gave up on being good using parameters you can go up there and make these parameters if you want okay so let's come in and let's run this thing and we are ah string object is not callable what is that nonsense uh i didn't put i didn't put a comma i hope you guys saw that boom okay so now let's try it again who's your huckleberry i'm your huckleberry look at that paul is boss now let's see if it went the right way yeah you see it's just 60 down it's not very far down and it's over 120 so it is over 120 and it's down 60 and so that kind of makes sense although i would really rather have that red i think such a dramatic statement like that should be red remember it is blue green red so we'll come over here and put 255 here and maybe it's a little bit big and so let's make the font let's make the font thinner i'll leave it the same size but make it thinner the weight is going to be one so you can see this will be a big font with a really fine line okay big font with a really fine line okay i like to i'm gonna make this smaller as well i think they kind of scale like a one goes with a one and a two goes with a two a little bit better okay paula's boss that is pretty good there that is not bad at all and so i can quit out of that okay guys look at that what have we figured out how to do we forget figured out how to manipulate the frame with an array command and directly manipulate those pixels if we want to change their color and create a shape you can imagine going through and creating a line by doing things by doing different things we can use our friendly cv2 dot rectangle call in order to call the rectangle function that will put a friendly little rectangle up there we can use the circle call to put a circle and we can use a put text call to put a text also i will say that you can it's probably a lot easier if you come up here and you say my font my font is equal to cv2 dot cv cv2 dot let's do font hershey duplex like that and then down here you can just come in and it makes a lot cleaner code if you say my font like that and then uh we could say font height and font thickness so now we got to go up and say font height font height is equal to 2 and then plot thickness is equal to two and then let's see if that will run okay that looks good and what i like about it well that's kind of a little bit nicer font too it's a little bit simpler and easier to uh and easier to read but do you see if i give a command like this okay let's look at my circle command versus my rectangle command now you just took this lesson you just took this lesson and the cv2 dot rectangle command you've already forgotten what all these numbers mean right you've already forgotten what all these numbers mean okay so if but look here oh i see in the circle command i see exactly what i was doing but you see you would be you would be a lot better off to come up here and say like uh what did i say it was upper left is equal to and then it's the upper left and then it is the lower right is equal to and so i have the upper left is going to be equal to this so i'll ctrl c and control v and then the upper and then the lower right is going to be this and now if i come in and i say this is upper left and then i come in and say this is lower right and it doesn't like that lower lowercase cell lower right right now when you look at this line of code it makes a lot more sense and then this i'm going to give as my line width and then up here i can say line width is equal to four okay because man these open cv calls for these things like this can get really confusing and you can learn it today and you can completely forget it tomorrow but when you write your code like this it's going to make it a whole lot easier let's see if it actually runs okay look at that it actually ran and so that looks pretty good and now when you look at that rectangle command what's he doing oh that must be the upper left point that must be the lower right point and then of course it'd be even better if i called that color my color okay in line with and that way your code becomes a lot more readable and a lot of times you can just pop open one of your old opencv programs and you can kind of remind yourself how you do these things it's very hard to just have at the top of your head every single one of these opencv functions all right guys i do need to give you a homework okay what your homework is you see this while loop you grab a frame you show a frame you grab a frame you do some manipulation you show a frame you grab a frame you do some manipulation and you show a frame now as we move on the manipulation that we're doing between grabbing a frame and showing a frame is going to get more and more and more complicated and it's going to get complicated to the point that it might start bogging your computer down especially if you're working on like an old laptop or something like that it's going to start slowing it down and your computer is going to be having trouble keeping up processing all of those frames and so what we need to do is we need to keep track of our frame rate our frames per second now what your assignment is is to calculate in this loop to calculate your frames per second okay you're going to calculate your frames per second and then you're going to display your frames per second on in a little box in the upper left of your co of of your image so here's your image and in the upper left you're going to say something like 23 fps for frames per second and then if we put a bunch of stuff in there to slow it down then you'll start seeing that frames per second slowing down and then if you get down like if you're writing a program and you get down to like three or four frames per second then it really starts getting uh jerky but what we want to be able to do is calculate the frames per second and then display the frames per second now how do you think about this okay i'll give you a little bit of a hint when you go through this for loop i mean this while loop one time you process how many frames you process one frame so the question is how many times per second can you go through this while loop that is your frames per second now you got to think about it a little bit okay you got to think about it maybe do a little bit of math don't just jump in and start coding maybe do a little bit of math before you try to do that so that's your homework and i will give the homework solution and kind of like the ai for everyone lesson 8 homework edition okay and that'll be coming out in the next couple of days but really try to do it on your own really really really try to do this on your own okay because you learn to code by struggling with something and struggling with it if you just come in and watch me do it it's going to look easy and you're going to think you understand it when in fact you don't okay so we like to give homework we also like to give a secret word every time and man i'll tell you can you tell how excited i'm about that coffee look at that crema just sticking to the side of this this is just you know there's no sugar in it but it's almost sweet and it's very full bodied and it's almost like an undertone of chocolate this my friend is the best uh this is the best uh coffee that i've ever had and this is the bag of 60 pounds of coffee beans that i got i guess they used a sugar bag a sugar bag to sell me my coffee in but it was just a little farmer who had grown this and dried it and then this is a picture of the unroasted beans themselves and then what i did is i went and i took these i roast about a cup and a half of beans at a time i took these beans and i went out and i roasted them in my deluxe so coffee roaster i actually have a little room just dedicated to roasting my coffees and i got that i got that roasted up most deliciously brought it in ground it and then made my coffee and then sat down to make this video for you so the secret word for today is mount elgon coffee roaster okay i am the mount elgon coffee roaster all right guys i hope you are having as much fun taking these lessons as i am making them what i would appreciate is if you guys would give me a thumbs up also make sure you leave a comment down below leave a comment of what the secret word is today also let me know whether you were able to do the homework or not if you were able to do the homework leave a comment down below i am legend if you are unable to do the homework you can leave the comment i fold it up like a cheap walmart lawn chair it's actually okay to fold up like a lawn chair it's better to try and fail and understand that you don't understand it and then watch me and then see ah now i really understand it i understand why i was thinking about it wrong i understand the right way to think about it so it's okay but be honest did you fold up like a cheap lawn chair or are you legend and then mount elgon coffee roaster will be your secret word for a day uh for uh for the day and then i'll see in a couple of days with the solutions to to this i will run out now and start working on the solution might actually go out and roast myself a little more coffee this is paul mcquarter from toptechboy.com i will talk to you guys later

Channel: Paul McWhorter

Views: 3,512

Keywords:

Id: 97HA3NeYjus

Length: 38min 45sec (2325 seconds)

Published: Tue Aug 24 2021