Create An Avatar Generator In JavaScript (Beginner)

[Music] hello this is justin at the tech train here and in this video i'm going to show you how to create your own avatar generator that you can upload to a website and share online or share locally on a network and it allows you to generate millions even billions of different avatars this particular one here generates robots but i'll show you how you can create your own avatar generator using whatever images you like i'll also show you how you can download this avatar generator and all the files that go with it later on in the video let's have a look at how this works first of all so you see the webpage i've got i've got my little character in the middle there and a generate button and whenever i click this generate button you can see it redraws a new character how many different possible avatars are there well with this particular generator there are 37 trillion 238 billion 750 million now i use this for my students at school so they will perhaps for google classroom or whatever else create an avatar and they will click this until they like a particular robot that they like and then they simply right click on it and save that image and when they save that image it saves the avatar this whole square image here as a jpeg and they can then use that as an avatar or whatever so clearly with 37 trillion 238 billion 750 million different possible combinations each student is going to have their own robot avatar and i'm not going to have too many repeats so if we were to sit here and generating a new robot every single second for 24 hours a day it would actually take 1 million 180 833 years before you would see two robots the same i'll just tell you now i'm not going to do that in this video so i promise you i'm not going to sit here going through every single possible combination what i am going to do though is show you how to do this so let's get [Music] started [Music] so the first thing that we're going to need is a way of building a very simple web page and more importantly writing the code particularly the javascript code that we need now if you have your own program for doing this that's fine but if this is new for you here's my recommendation and this is what i'm going to be using in this video so this is visual studio code so it's a very simple uh editor that you can use for code uh it's available for both mac and windows and linux as well in fact so if you go to the website here i'll link this under the video so it's code.visualstudio.com and then you download this and this will open up the program and here you can see the code which i will be going through i'm not going to write all of this code in the video because some of it becomes fairly repeated uh but you can see this is the basic code for the web page i've just shown you um so it's quite clear to read and everything and we'll go through that in a moment that's the first thing you're going to need the second thing that you're going to need is some way of drawing the images now the images i've got here you can see i've got a various antenna i've got ears eyes heads necks mouths noses all these different bits and pieces these are all the components which i'm using this is for creating a robot of course so you can very easily use this method to create anything you like whether it be a random book cover or a random person so it's up to you how you use this method but i i'm sticking with robots largely because they're quite easy to draw boxes and shapes that are fairly straightforward i've used illustrator adobe illustrator to create these images but you might not have that program and i make sure that as far as possible everything that i use here or i show how to use is free so i'm going to show you a way that you can actually draw these vector images for free one thing that is important though is that these images are transparent in other words you can see that the the shape here the in this case the black the green area here that is the only part of the image the black part that you see here which of course doesn't show up in the thumbnails is transparent so these are all png files transparent png files and and that is important because of course we're layering those over one another so when you look at these different parts each of the eyes the ears and so forth you don't get the big white background of course in front of them so that's really important so you will need a way of doing that let's have a look at a possibility so again i'll put a link underneath but this is boxy hyphen svg.com so this is the website here we can click launch app opens up in a new tab and it's very very straightforward to use so for example on the left hand side i'm going to grab the rectangle and draw a rectangle out for the body like that and then we can color this however we like so by selecting it and then clicking on the paint brush on the right hand side we can start to fill that let's do that with a nice bright red you do have gradients and other things there as well and then what i'm going to do is i'm going to click on this quad bezier tool here which is a bit like the pen tool in illustrator i'm going to click on these two corners like that click part way across there um and then what i'm going to do is click on the select and color that slightly darker and that creates that sort of shadow effect that you can see that i was using in some of these so for example like that with a shadow effect um so it's as simple as that to create these images uh once you've created these images you can save them so we can uh save or export to disk you will need to sign in but when you do sign in it is free so there's no cost involved in this when you export it you will need to make sure that it is a png and the background you have that as transparent that simply means taking this slider and dragging it right to the end doesn't matter what color you have here as long as your transparency slider is slid right to the right hand side so png and transparent the same applies of course if you're using illustrator or any other program as well make sure that it's a png and a transparent background the other thing that's really important is to make sure the size of your image is always the same so for the example that i've used uh here i actually have this set at 400 pixels by 400 pixels now you could very easily have one that's much smaller than that obviously if we were to save this image that image is going to be saved as a 400 by 400 image like that uh but if you wanted it to be smaller so that you have you know little diddly ones it doesn't matter because they rescale anyway when you're using them as avatars but you could have smaller ones if you want or indeed you could have them much much bigger you could have them twice the size or whatever but it is important to be consistent so what i will do for all of mine as i did is set the image width and height here at 400. so whatever you decide to use make sure that you're always setting the width and the height in whatever program you're using the same every time and that will make it much much easier to make sure that you're layering all these different parts in the correct location so whenever i click generate you can see that the eyes the mouth the nose the ears the antenna the neck the body whatever they're all in the right place so you've not got any ears floating off somewhere we've got no antenna or neck that are detached from the rest of the body it all connects up nicely i will show you how to do that how to sort that out but that's something that is important so we've got that export there and then we can simply click the export button at the bottom and there we are we've exported that image and that image now is a 400 by 400 image it has a transparent background even though it looks black it is a transparent background and then what we really need to do is to make sure that these are saved so what you can see that i've done here is i've got let's look at the heads because they're probably a bit easier to see so i'll zoom in a little bit more so you can see these so what i've done is i've named them head one dot png then head two head three head four that's really important because our code will rely upon two things one that the first part of the name is the part of the body the identifier for that so we've got ears eyes head mouth and again obviously if you're using this generator to create something completely different like a book cover or whatever and then whatever part that is whether it be title spine uh background foreground you know whatever you have those named that's the first thing and the second thing our code will do is to randomly choose a number now in this case i've got eight heads and they're named one to eight so for the head code it will randomly choose a number between one and eight and it will take that number add it to the word head and then add png to the end of it and that tells it which of these images to grab so you can go to town making as many of these as you like and of course it's very easy if you want to in the future to add more parts and just simply make one small change to your code to tell it now how many more parts there are available so once you've downloaded your code and you've got your boxy.iphone svg or whatever you're using to create illustrator images with transparent backgrounds we are ready to begin so let's have a look now at the code that we need to create the basic web page [Music] so as i said earlier on if you don't want to be bothered with going through creating all of this code yourself you just want to download the resource and perhaps watch this video just so that you can understand how the code works allowing you to make changes and customize it more easily yourself that's absolutely fine some people will want to work along with me and see how it's built line by line and do it themselves um but if you just want to download the resource the link is underneath this video so you can go onto that uh page there and there's a modest amount of money i think it's about three pound fifty uh just to uh buy me a cup of coffee to say thank you very much so that's always really appreciated so um if you click the link down below you can download the resource for about three pound or so buy me a cup of coffee say thank you and there you are you've got it um so either do that or watch me build this code so first of all then we're in the visual studio code and what i've created there is a new file which i'm going to have as the web page so although the generator is written in a programming language called javascript which allows us to create this interactive content for a web page it is a web page and so we need to squash the javascript into a normal web page so this is the basic code that we need for a normal web page so this is going to be the the html code we call this so that we can see the different parts of the page we begin with the html code at the top which tells the computer this is a website this is a web page it's written in this language html and you can see at the bottom we have this slash html so in this programming language we use these we call tags so a tag that's in these angled brackets means we're beginning this section and a forward slash and that tag in the angle brackets means we've finished this section so the html and slash html simply tell the computer where the web page code begins and where the web page code ends so they wrap the whole thing we've then got two parts to a web page we have the head section and the body section and just like you assuming you're built reasonably normally we have the head at the top and the body underneath the head generally is all the stuff that the user doesn't see they're behind the scenes stuff so a lot of our code will be there for example the one thing that i've put in here is a title and that's the title which appears at the top of the webpage so you can see here on this example we've got avatar maker in the tab at the top and that's the title so if you want that to appear we can write that in here and of course again you can change that to whatever you want notice again how we have the title tag and the slash title tag to show us where that section begins and ends at the moment that's the only thing we've got in our head section so then we have a look at the body and at the moment there's nothing in there apart from this section and this is a div tag or a division tag it divides the page up into different sections and allows us to have a style for each section i actually only want one style and that's simply to make sure that everything is centered in the page you'll see here that my title the actual avatar itself and this button underneath are all centered no matter how big or small we make the page so to do that we just say okay let's have a section a division section in our web page and the alignment is going to be center notice how the word center there is spelled the american way the us way with the er rather than the british way of re and then that's the end of it so we do a slash div now we're going to put some of our code in the head section and that will be just after the title but before this slash head so some of our code is going to go in here and most of the rest of the code will go in the body either before this division section if it's just simply getting things ready or inside the division if it's stuff the user is going to see so if you want to open up your visual studio code or whatever program you're using and just create this basic web page but one thing that you'll need to do is to make sure you save this code as a web page so we don't just simply save this as a text file we have to save this as a web page how do we do that well once you've written this code out you'll need to go to file and then save as and what you're going to call it is i'm calling this step one because it is step one but you can obviously call this index or generator or avatar or whatever you want but what you'll notice there in the file name is i've written dot html so write the name if you're not sure just call it avatar or generator i'll stick with a single word to keep things simple with the final web address name but write that out but make sure you put dot a full stop and then html and then when you click save what you'll have is a web page like this so you can see that's what i've just saved there and if i double click this to open it you'll see that i have a web page it opens up in whatever your default browser is i'm using edge at the moment and you can see that there's nothing on it at the moment of course but at the top we have got this title avatar maker which i did choose and if we right click and view source you can see all the code there that we've just written so if you'd like to have a go at creating that bit of code there or simply skip ahead and see the next section if you wish and test out to make sure that your web page opens in your browser so now that we've got our web page created with our html tags our head section and our body section it's time to start putting in that code now we're going to put this code in the head section it doesn't really matter where but i tend to prefer to keep the title at the top and then make a little bit of space and we're going to start putting our code in between this title tag here but very importantly before this slash head don't forget that tag there means the end of the head section so we need to put our code somewhere inside here so the first thing that we need to do is to tell the computer that this is no longer going to be written in html this is going to be written in javascript so we use the opening tag there script again you can see how it's written in those angled brackets so start off with that and just as with all the other tags in html we will want to have a slash script just afterwards so you can see now we've got this script open script close and both of these appear before this head section so we're going to be putting quite a lot of code in between these two sections remember if you want to copy along with me that's absolutely fine however if you want to just say thanks for my time and buy me a cup of coffee you can click the link underneath the video and download all of the files here a fully working copy with all of the images everything that goes with it and and use it as you wish so let's start off then with the first thing what we need to do is to make sure that as soon as the web page is loaded the code runs so we run the code every time the web page either is loaded or is reloaded so we're going to create what we call a function now this function is called window.onload and that means that as soon as the window this web page is loaded it will then do whatever this code says so we have these open brackets here at the end and then what we call an open brace so this curly bracket here which you can get by holding down shift and the key just after the letter p on your keyboard and that allows us now to start adding in some code now for this code we need to understand what files we actually have in our folder now i'm not going to go drawing all these files i've shown you what program you can use i've shown you how to do those so i'm simply going to cheat and copy across some of the files i already have and move them across into the folder so here is the folder i've saved this step two as a separate web page here so i've got this as step2.html here but this is the folder that i'm using and it's really important that when you are building this the web page is in the same folder as the images so we're going to have one folder that contains the web page you've just saved and any images and what i'm going to do is i'm going to copy across three of the heads which i created before so i've got head one head two and head three and remember that the file names have to have two things the name of the part of the body or the avatar or image whatever it might be in this case head and then without a space the number so this is number one number two number three doesn't matter what the order is as long as they have those two parts and also remember that these have to be pngs because that supports transparency so anything that's outside of the actual image we want will be transparent so now that i've got the head what i'm going to do is i'm going to put in the code i need for that so to begin with i'm going to have a variable which is something that can contain a single bit of information so i use the word ver and i'm going to call this a robot head i'm not going to use the word head simply because head is obviously a code word you can see it in here it shouldn't cause a problem but i prefer to avoid using obvious code words like head or body simply because it could be a little bit confusing so i'm going to put the word robots before each of the parts of the body so robot head and i'm going to say this variable is simply going to be an image we say new image and we need brackets after it and a semicolon now we need to say right we've got this variable it's going to have a head in it but which one so we need now to be able to choose one of the heads now remember that we've got three heads here if you've got a different number then you'll need to use a different number in the next code that i write so we have to simply say how many there are to choose from so i'm going to say now we need another variable and this is going to be the robot head num so which number are we choosing and we use a built-in math function i use floors so we are rounding downs we have a whole number and we use the math.random function to be able to get a random number and this is where we say how many heads have we got in this case i've got three so i'm going to put the number three in there and then we close those brackets and one because otherwise it starts from zero and then end that with a semicolon so that line will tell the computer okay here's uh three possible numbers a one or two or three pick one and that number will be stored in a variable called robot head num um now we need to actually have the name of the file and the name of the file will of course be the word head plus the number that we've just chosen which will be stored in the variable robot head num and then plus the dot png so we need those three parts so we have another variable here and this is going to be the robot head name the name of the head and that's going to be the word head in speech marks plus the robot head numbs which number we having plus and then in speech marks dot p n g close our speech marks and end the line with a semicolon so now we've got the name of it we can finally tell the computer what is the final source of this so we say that this uh robot we've got this variable up here robot head um so we need to say okay we've got that robot head it knows it's going to be an image but now where is that image well now we know because robot head dot src is the source of that image is simply the robot head name which we've built using this line here again end the line with a semicolon and there we are so that block of code there will create a file name in robot head dot source a file name for an image which will have a random name of either head1.png head2.png head3.png and of course if you then add more heads after that the only thing you need to do is to change that number there if you want to put a little notes to remind yourself do two forward slashes at the end of the line and let's say change three to whatever number of heads head files you have not how many heads you have how many head files you have so that's the the first section there so now we've got the random file name now it's time to tell the computer right we know what image it is let's now draw it so what we need to do now is every time we randomly choose a file name we need to tell the computer okay go and get that file name and draw it or load it up and put it onto the web page so we need another function here so we're going to say robot head so we've just had that image dot on load in other words when the file has loaded when it's actually got that image it's probably not going to take that long to get that image from the server but of course if some of the images are fairly large we're doing this a lot there's a lot of demand on it it could take a fraction of a second and you don't want to say to the computer right put this picture of head 2 on the screen before it's actually got a copy of that image from the server because then you're going to get a blank space where the head should be so we say to the computer right once that particular image head2.png once that has loaded we need then to draw it so we don't try and draw it before it's loaded so in this function we open and close the braces the curly braces and we're going to use a robot sorry we're going to use a function that we haven't made yet we're actually going to make this function later on but it's a function called build robot and that will simply tell the computer basically which order to put all these objects in because of course some of these are going to have to come before others for example the head is clearly going to have to be drawn fairly earlier on although the neck is actually drawn first because that goes slightly behind the head you can't always tell but if you look you'll see some heads or some necks are taller or shorter than others and yet they always join and that's because the neck is a little bit taller than it sometimes needs to be i've just simply overlapped them but you can see that the nose is always in front of the mouth um that the antenna and the ears are always behind the head so that function will this function build robot will simply tell the computer what order to build them in so although we've called that function we're not going to use it just yet okay so the next thing we're going to do now is to create what we call a canvas now the canvas is simply this part of the screen here where we can draw a picture so that's what we call a canvas just like in art i suppose so we're going to use the canvas and what i'm going to do here now well let's let's build that build robot function so function uh build a robot open up the square br the rounded brackets and again whenever we create a function we always open up those curly braces so inside here then we're going to create a variable called canvas and that is going to be document dot get element by id and this element this part of the screen is called canvas close down brackets end the line with a semicolon so then we use their ctx this basically shows how we're going to ensure that the images are drawn on the canvas or how they are created so canvas dot don't worry too much about this bit uh context oops context um and this is a 2d image basically you can create 3d images we're not going to be doing that keep it nice and simple and then we have the size of the canvas so remember that i said that it's important to make sure you choose the size that you want in this case i'm using 400 pixels but if you want one that's smaller or bigger that's absolutely fine it doesn't even have to be square of course it could be any shape you want although avatars generally do use square proportions simply because then if like for example google classroom or google docs um the avatar is um in a it's in a circle basically so if it was a rectangular avatar then it could either get squashed or cropped and that wouldn't look so good if you do change these numbers here then obviously you're going to have to change them when you create your drawings so as i showed you earlier on if you're in box c or whatever for example these dimensions here would need to be the same as whatever number you choose your canvas size to be right so after we've created this build robot function and created the canvas it's time to now add each part of the robot to that canvas and make sure that it's centered and in the right place so i've only got one body part so far that's the head so we'll put the code in for this but this line of code that i'm going to write now will be repeated for every single body part apart from one little change and that will be how high the body part needs to go so if we look at the uh generator here you can see that everything is centered so the nose the eyes the mouth the neck the body the antenna the ear they're all centered that's one thing that this line of code will do but the second thing will it will do is say well how high will that need to be so for example the antenna there will need to be fairly close to the top the ears obviously further down the eye is further down mouth and nose further down still and the neck right at the bottom so and this will be to some extent trial and error more error than trial to begin with but you'll get the idea it's not too difficult so we're going to write is ctx which we've obviously that's the day with a variable we created up here so ctx is the canvas so it just saves us a bit of coding time here so ctx dot draw image so this is going to be the robot head that's the name of the file that we used and then to make sure it's centered what i'm going to do is open up two round brackets take 400 which is observe the width of the canvas subtract from that the robot head dot width so however wide that image is and then divide that by two so that will actually give us um make sure it's centered horizontally so by taking the width of whatever part of the image it is even if it's not 400 pixels whatever width it is it will then work out how much gap to put either side of the first thing um and then we need a comma and the number of pixels down from the top now this is a 400 by 400 canvas uh in terms of the vertical alignment we start at the top with zero and the bottom of course will be 400 so how far down from the top if i was to put zero in here then this image would be flush right up against the top of this canvas i don't want that i want a little bit of a gap so i'm going to put in 50 there and then don't forget at the end of that line we need our semicolon um so that then um has the code for producing it we've got our closing brace there for the function build robot make sure you have this other closing brace down here this one closes that function we opened right at the top of this script section called window dot unload so this open brace here says right when the window loads do all these things so set up the variables here have a function for each individual uh for the uh built in the robot and the main build robot function here so you can see each of these has open and close braces so this one closes the whole of the window.onload function and then just after that we have our slash script that end script section so make sure you save this i'm going to save that as step two obviously you'll just simply save that as whatever file you're doing and you might at this point think let's go and have a look see what happens then so if i was to open up this web page here step two nothing it's blank that's disappointing where's my random head well because the thing is at the moment we've put all our code in the head section of our web page not the head of the robot but the actual web page head section and nothing that we put in here really will get displayed so at the moment we've talked about in this line here saying right the canvas is going to be whatever part of this document has the identity of canvas well there is no part to the document called canvas we haven't made it yet because all those parts are made in the body section of our website the body section the website is where the things you normally see in a web page are included so whether it be text or images or whatever the things you actually see are generally included in the body section so interpret some code in here now in order to be able to make sure that our robot can be seen so let's have a go now at putting in the body code [Music] so there's only a couple of things we need there's not a lot of code here we've done most of the work so far but what we are going to do is to put all of this code in between these division tags here the div tags this is the open and this slash div close and anything we put in between these two tabs will be centered so they'll be appearing nicely mid in the middle of our web page so the first thing we're going to do is create the canvas which up here we said to the computer go and look for something called canvas so the reason of course we can't see our robot is we haven't made it so what we'll do is we'll open up a little tag here and we'll call this canvas and we'll say canvas id so the name of this canvas is canvas being really original and then i'm going to put a couple other bits in here as well so i'm going to say the style of it uh will equal a borders it'll have a border to it you don't have to include this but i think it looks a little bit nicer i'm going to have a five point border so five pixels i'll have this as a solid line and i'll choose black as the color so hash zero zero zero zero zero zero six zero is there for black if you want a different color then obviously this is just a hex color uh semicolon to finish that and close our speech marks and that's all we need for the canvas tags so we simply do the close the angled close bracket and what you'll see that i've got here in visual studio code it's automatically said all right and we can do the slash canvas tag for you if you're using visual studio code that will be put in automatically for you if not sorry you're gonna have to type that out so once you've got your canvas id line of code and you've closed that angle bracket there is another open angle bracket and slash canvas to close that canvas so that's the outline there i'll just close that up onto one line keep it neat now we've got the canvas but what you'll see that i did in the original one is i had the canvas here and then a bit of a gap underneath it and then this generate button which i can click and get all the different robots so i want to put this gap in here and then the generate so to do the gap i'm simply going to use a break tab which is br in these tags this is an unusual one we don't need a forward slash on this one um so i'm going to put two of these in here to do a double line break like that and then underneath that we'll have our button so we open another tag for this and a button so that creates a button uh what's it going to do so on click if i can spell click we're simply going to say equals window dot locations the name of the web page we're on now dot reload and then we open those brackets because that's actually a function and then semicolon to finish that and close our speech marks and then we'll close that tag we've got the forward slash button so that's in there for us i'll just put a space there so you can see those two parts there's our opening button there's our closing button but between these two tags are between the closing angle bracket of this half and the opening angle bracket of the n slash button we need to put in what word we want to appear on the button itself so i'm going to put in the word generate exclamation mark there we are but you can put in whatever you want of course right so i'm going to save this now so again you can just simply file save but i'm going to save this as step three and replace that and then loads open up that so step three open it up and right what have i forgotten i've missed something off let's just check what's missing uh robot head canvas all right yes id canvas um i prefer to put the equals in there canvas id equals it comes as a canvas id canvas canvas id is equal to the name canvas so there we are just pop that equals in there and then let's save that again and reload it so let's uh try that again and there we go so we've now got the canvas appearing here that's the border around the outside it's loaded up the pink uh head that was number two i believe and we're we'll add generate button and every time i click this generate we're going to get a random picture now with only two sorry three different heads of course we're not going to get very much variation you can see that i'm clicking it and sometimes i will get the same one two three four times in a row so the more of these images you've got the better now if i was to add some more of these into the folder so let's say that i'm going to go for heads four five and six and drop those in there so now i've got heads one two three four five six and i was to now refresh that page and reload it what you'll see is none of them will appear no matter how many times i click it won't appear why won't it appear well because if we go back up to the top here and we look at this line in the just after the windows.unload this is the one that says pick a random number for the robot head between one and three and uh and then add that number to the word head and then add png to the end of it and that gives us head to dot png or whatever it might be so if you do add more of that particular image in this case heads is a change this number i've put three more in this i've got six of them so far so i'm going to change that to six save that and now if we load that up we should see some of the other ones there we are so four five and six that's number four yellow was five although it was and six was purple let's see if we can get oh there is six was purple so we're getting six different heads so we've now got a random head generator because that just shows us one part of the body and what we need to do next is to include a second part of the body and have that also randomized loaded up and then put into the right location so let's add some eyes to this head now and see how we do that [Music] so if we're going to add another body part in this case we're going to add the eyes we need of course to draw them so whatever method you're using whether it be the boxy hyphen svg website i showed you earlier or illustrator or whatever other image editing program or package you're going to use you can create a variety of eyes again if you don't want to bother with drawing all these out you can click the link under this video and download all of the images that i've created there's about 71 different images different body parts for robots with all the antenna with the eyes the heads the neck the mouth the nose all that kind of stuff so you can download that by clicking the link under this video just for the price of a cup of coffee which is very much appreciated believe me um so i'm certainly going to copy across three pairs of eyes first of all that i drew earlier on so there we are i've got eyes one eyes two eyes three remember we must have two parts to each file name so the body part name in this case eyes and then the number one the number two then number three don't leave any gaps don't have one two and four because sometimes that will mean that you'll end up with a blank eye um so i'm gonna put three in to begin with and put them in the same folder as the heads and everything else right we need to do three things then now with our code so if we have a look at our code we can see that the three bits are here we have a section at the top in our head section after script that says pick a random number and use that number to create a file name for the head clearly we'll do the same thing for the eyes so we'll do that first after that if we come down here you can see that we have a robot head on load so once that file name has been chosen and it's been loaded once it's been loaded we've got to copy that picture from the server we can then say go and build the robot so we make sure it's drawn and then down here we need to then have another copy of this line that says right once we've loaded it we're building the robot where do we want it so you know we're going to center it again but how high clearly the eyes are going to be a lot lower down than the head but we'll play around with that so let's do those three bits then and there will be a lot of copying and pasting here so you don't need to do all of it and the first thing i'm going to do is just space this out a little bit here so we can see we've got four lines of code here for the robot head and what i really strongly recommend you do is to put some comments so i'm going to do two forward slashes you see it goes green in this this is a comment a comment is ignored by the computer but it's helpful for us and i'm going to write the word head and i'm going to copy those now five lines of code underneath and change that comment to eyes and i would suggest you keep on doing this so that you get it really really organized if you do buy a copy of this code if you download this from the link underneath what you will see is code that is beautifully commented all the way down you can see it's all structured like that with comments that make it really really easy to see everything that's going on um so where am i now step four oh that's where i want now this one there we are um so we've got the eyes section but clearly we need to change everything that says head so wherever we say head in this section we need to change that to eyes so we need a variable called robot eyes which will be a new image uh the robot eyes number so whatever number we choose here of course we have to make sure that we put the number in that corresponds to the number of pairs of eyes we have currently i just have three so i'll put three in there and then the robot head name will need to be changed to robot eyes name and of course the name of the file is eyes obviously again if you're doing something like a random book cover generator or whatever it might be and you would change all these to whatever file names or whatever parts are relevant to you uh plus robot head num will be changed to robot eyes num and then finally robot head source becomes robot eyes source equals robot head name will be changed to equals robot eyes name so we haven't changed the code originally we've still got the one up here for head we now have our copy of that changed to eyes so that creates the random number the random file name under here we have this little function which says once the robot head image is loaded build the robot we're going to take a copy of that again what i'm going to do is put a comment so we say head loaded and i'm going to copy that paste a copy of the whole thing underneath and then say eyes loaded now you might look at this and say well why do we have to keep on building the robot and i've found trianera and practiced in the past that if you don't build the robot each time an individual element is loaded you can sometimes end up with bits missing if the server's very busy or if images are a bit larger or whatever it might be sometimes i did find little bits and pieces would go missing so it's not a very big function it doesn't matter that you might call it six seven eight times uh so it just makes sure that everything is visible so i is loaded so again we need to change the word head to eyes in this case so robot eyes dot on load function build robot that's the same function so that's that bit done and then finally in the major function here build robot so we have the code that builds the canvas we're not going to touch that that stays the same it's this line here ctx dot draw image that will need to copy again what i'm going to do is just put a little comment so draw eyes oh draw a head that one um and here we need to think about the order that we're going to put the parts of the image so i want to draw the head first and then the eyes so that they appear in front of the head if i was to draw the eyes first and then the head would have the eyes appearing and then the head would appear in front of the eyes and of course we wouldn't see the eyes so here we have to simply make sure that these lines of code we write are in the order we want to see them from bottom to top so the first of these lines will be the item that's at the bottom at the back and the last one the one at the front so to draw the eyes let's change that to eyes there we go we're going to say draw image robot eyes um and it's going to be the width of the robot eyes file whatever that is divided by two and then this number 50 we're going to have to change i'm going to leave it at 50 at the moment so we can see what happens right let's save this file now so i'm going to save this i'll say this is step four just so that you can see the steps but you obviously keep that file name the same let's open up our folder where is it there we are and open up step four so there we are we can see that we've got the eyes and the face if i click generate you can see that each time we're getting a different um face and a different pair of eyes so we're getting some randomization the problem of course is that the eyes are too high up and you can see that we said plus 50 that's this gap from the top to the top of this image here that's 50 pixels the eyes we want to be further down i would say probably about the same gap again so if that's 50 pixels down if we have another 50 pixels that brings us to about here and that should be the top of the eyes so let's just um try that so let's go back to our code and change the height of the eyes the top of the eyes from 50 to 100. let's save that and then we'll reopen that and there you are i can see the eyes now are a little bit more in the right place and each time i click this generate button we're getting a different combination of eyes and head and if i wanted to add more eyes so i've already got three pairs of eyes there let's um add some more so i'm going to add eyes four five and six to this folder there we are i'll need to go back into my code back up to the top and where i've got this line saying the robotize num variable will be a random number not between one and three but now between one and six so if i now save that and i can load that up and i'm now going to get six different pairs of eyes so with six heads and six pairs of eyes six times six we've got 36 different possible combinations of um our robot at this point i don't really need to go back over anymore i'm sure you've got the idea if i just show you the final code that we'd need here for this robot the code that i used for the final avatar and the one that you would be able to buy and download if you want to you can see that i've got exactly the same code as i've just built there all i've got here is this block of code repeated for the neck then the head then the eyes it doesn't matter what order this goes in at all this is this is irrelevant as far as the order is concerned um ears and then antenna so i've got that then i've got this when each part is loaded go and build the robot so again i've got the build robot when the neck image is loaded when the head is images loaded go and build the robot when the eyes are loaded build the robot and so forth and then if i scroll down you haven't got the canvas being built here and then underneath that i've got this ctx line and these are from back to front so we build the neck first then the ears and antenna so they're all appearing behind the head then we draw the head in front of those and then on top of the head we do the eyes the mouth and the nose so it's important that it is that way around the other thing i've added is this bit of code here which adds a random background color so i've got here three variables one for red one for green one for blue and these variables um are between uh 100 and 255 so it's not completely black it's not too dark so we have three different possible colors there and then we are going to take those three numbers and put them into a variable called bg color and it'll be a hex number so we put the hash there and convert those to a string hex string and then we use the ctx dot fill style equal the background color so that's the canvas the canvas fill style or background color will be that background color there and that just gives us a random color behind the avatar so when i click generate now you can see that i get these random colors at the back not too dark but they just helped us stand out a little bit and it's that combination of parts that allow us to have the different parts of the robot appear and the background color which really creates unique little avatars and creates millions of them it is ridiculous how quickly you can actually build up a library of parts which allow you to have that many uh combinations quite startling um so there we are so that is how to create your own javascript avatar generator and of course you can use this method to create any kind of generator you want whether it be a castle generator a book cover generator a people generator um a shoe style generator i mean honestly whatever you can think of and that would generate random combinations of images and layer those one on top of the other that this method here will work it's quite simple it's quite straightforward and it's easy to adapt it's easy to edit it's easy to add to and then you're left with a simple folder which you can simply upload to a website and link to your html file whatever it might be and there you go it works no plugins no fancy stuff just simply upload link and go so i hope you enjoyed this video i hope you found that useful if you did find this useful please do give this video a like that would make a massive difference really appreciate that if you haven't subscribed to this channel already then do click the subscribe button before you go and don't forget to click that bell icon so you're notified when a new video goes live uh if you have any comments or any questions then do please leave a comment in the video section below and if you do create your own avatar generator so you make your own files you create your own version of this i would love it if you could put a link in the comment section below so we can have a look at your version of this avatar generator so i hope you enjoyed that thank you very much indeed for watching and i'll see you in a future video bye for now [Music]

Channel: The Tech Train

Views: 38,879

Rating: 4.9819241 out of 5

Keywords: avatar, generator, avatar generator, javascript, javascript image, javascript generator, image generator, random, random avatar, random image, javascript random, random generator, canvas, javascript canvas

Id: L1E_7FoTrik

Length: 55min 32sec (3332 seconds)

Published: Sun Nov 01 2020