Create An Avatar Generator In JavaScript (Beginner)
In this longer video tutorial I show you step by step how to create your own avatar generator using JavaScript. This video is suitable for beginners to advanced, as I don't assume any prior knowledge, and go through absolutely everything you need. All tools & software is free. The demo avatar generator shown in the video can create over 37 trillion different avatar images!
LINKS USED IN THE VIDEO
======================
Visual Studio Code: code.visualstudio.com/nodejs
Boxy SVG Image Editor: boxy-svg.com/
** DOWNLOAD MY COMPLETE AVATAR GENERATOR, ALL IMAGES & FULL EDITABLY CODE FOR THE PRICE OF A CUP OF COFFEE (AND SLICE OF CAKE!) **
►► Download Link: thetechtrain.fetchapp.com/sell... ◄◄
Пікірлер: 307
** DOWNLOAD MY COMPLETE AVATAR GENERATOR, ALL IMAGES & FULL EDITABLY CODE FOR THE PRICE OF A CUP OF COFFEE (AND SLICE OF CAKE!) ** ►► Download Link: thetechtrain.fetchapp.com/sell/f93b2d1c/ppc ◄◄
@mayvisionmultimedia
3 жыл бұрын
how do you send the Generator to me after i paid..?
@mayvisionmultimedia
3 жыл бұрын
where do i download it? if i pay by creadit or debit card?
@TheTechTrain
3 жыл бұрын
You'll automatically receive an email with a download link immediately after payment.
@TheTechTrain
3 жыл бұрын
You'll automatically receive an email with a download link immediately after payment.
@ChodotelBoyz
2 жыл бұрын
@@TheTechTrain Thank you for the video! Im curious, instead of just generating one variation at a time, is there a way to generate all the variations automatically and save the images to an output folder?maybe not 30+ trillion but maybe if it was like 2000-3000 variations?
I been wanting to learn generative art and I found my answers in your tutorial! You made it so easy. I downloaded your codes, watched the video and I am ready to create my own generators. Looking forward to more videos from you. Thank you!
You are an amazing instructor. Providing detailed description of the steps is very helpful for a newbie looking to understand rather than just copy & paste. Thank you!!!
Thanks! Why can't every video be this easy to understand? Great job!
honestly better than a lot of over hyped PFPs on opensea, nice teaching, very specific!
All I can say is Amazing, Boy do I need to learn this
Hi thank you so much, you obviously have a lot of teaching experience it was very easy to understand. I have subscribed and bought the code. It's my first time coding and I'm working slowly following along, i keep just getting my block with a random colour but no robot, I cant find my problem but ill keep trying till I figure it out. Cant wait for your follow up video wishing you a wonderful Sunday
I bet this guy doesn't buy cups of coffee after making this killer tutorial! Nice job.
Thank you will definitely buy the script but I gotta built it as well looks fun to do. Can't thank you enough
Well worth the price of a Starbucks, even just to play around with, thanks so much for the awesome tutorial
That was a very good, great tutorial and got it working, thanks a million.
Awesome clear explanation. Thank you sooo much.
Love this tutorial !
@TheTechTrain
3 жыл бұрын
I'm so glad!
BRO THANK YOU! FEEL LIKE IMMA HAVE MAJOR SUCESS BCUS OF THIS VIDEO!!! ENJOY THE COFFEE SIR
Thank you for this delightful romp through algorithmic creation! xoxox
Thanks for the video!
Thank you Sir❤️ this video was so helpful to me 🥰
What a programmer. :) Good stuff
Wow. What a fantastically taught tutorial. It's really inspired me and I want to say a huge thankyou for this!!
hi, may i ask is there anyway to avoid the same color to match in one ? as in the robot color and canvas color to be different.
How would you go about making sure no duplicates came up? Anyone have any info..
Thanks so much for creating and sharing this.it is extremely helpful and informative. Are all of the images 72dpi? Is it possible to make this at a 300 dpi resolution?
Arigato sensei 🔥
Nice video sir ,Thank you!
Best tutorial thank you very much
@TheTechTrain
3 жыл бұрын
I'm so glad you like it
Great video
Hello. You explain things very well. I downloaded your code and I couldn’t get it to run correctly. It’s a little different than the tutorial. Do you have any tips? Thanks
I appreciate that👍🏻🙏🏼
Truly appreciate your time and energy, Thank you for creating and sharing.
Thank you!
That was great! Thank you. Subbed
@TheTechTrain
2 жыл бұрын
Awesome, thank you!
@robertkustos2931
2 жыл бұрын
@@TheTechTrain good evening sir . Do you do private work for non computer literate Individuals ?
I'm new about this but just bought your avatar generator. Hope I can make it work.
@TheTechTrain
2 жыл бұрын
Many thanks for the coffee! I hope you enjoy using the code.
Is there a way to tell the code that if a particular asset is loaded, let's say a hat, then NOT to load a hair asset?
I have just purchased how can i set the random background colour to images so a different background image would display instead or to use both image or colour selected at random. Thanks
Is there an online demo of the script in action? Thanks
This is great. Is there a way you can do a tutorial how to create the same but people will select the traits, instead of being automatically generated. Thank you in advance!
Do we have to do those code for use the the app you made? or just purchasing and having files enough? Thank you
awsome thankyou very much
Did you ever do a follow up video with more options? Just bought you coffee!! Thanks
all the images should be size of 400x400 ? thanks and great tutorial
Hello. I loved your tutorial. I need help with coding. What if I am adding custom background which is also .PNG image and same size as that of canvas. How can I do that and align it? Appreciate your help
@TheTechTrain
3 жыл бұрын
Yes, just simply treat it as another canvas layer, but without any variable changing the filename. And make sure you add it at the beginning of the list so it appears at the back.
Great video!, is there a way to make the generator but to have all the images in a separate subfolder ? As every-time i try this it breaks the code
great video keep it up :)
@TheTechTrain
3 жыл бұрын
Thank you very much Jack! 👍
good lesson thanks, can you tell us how to save all this generated PNG file in one folder using script?
Thank you so much for this tutorial, I'm interested in this way to generate images. I would do all the robot elements the same heigh and width (400x400) even the eyes, antennas, etc to avoid elements special position. If am planning to do this in a human character Is there a way to put conditionals to use elements the same color? for example: different parts of the hair being consistently the same color?
@nakoruru666
2 жыл бұрын
I have to note that I don't know anything about programming but if you point me the right way i can research about it, thank you so much again.
Might it save a lot of time, if each asset was already placed where it needed to be in its own PNG the same size as the canvas? So when you export a nose, for example, the export is 400x400 but the nose is already in the correct position on the PNG?
@ryanhagerty8145
2 жыл бұрын
exactly how I did it. If you break it down into layers in photoshop, you can single out the layers, make variations of the layer, group the variations, and save them as individual pngs. no positioning math needed!
cheers mate☕☕☕☕and thank you as well
hi, im trying to make an NFT project. I have my art and all attributes ready, but the size seem different when i saved it. For example, the body part is 60x50 pixels, I made the attributes based on the body as a new layer, then I delete the body, leave only the layer and then save it. The problem is the size of the new layer is 20xx25 px, and with x: 6, y:3 px. I dont know how to fix this. Please help me
@JayStansfield
2 жыл бұрын
I think you need to make sure you're exporting the entire artboard, including the whitespace, so you don't need to worry about the placement.
Can this be done from Dropbox files?
can you do tutorial how to make register php and login php with the avatars?
May God bless you
It’s possible to add gif files? I purchased your products.can you tell me the code for gif file?
can I run this on python to generate the avatars automatically and save them to a database? Instead of doing it manually? one by one?
@chrispzzz
2 жыл бұрын
Yes.
@chakrip9288
2 жыл бұрын
@@chrispzzz bro please explain how to save all the images at once .
@chakrip9288
2 жыл бұрын
@@chrispzzz bro, please help how to save all avatars at once, please share code if you have. 👍
Hi, Great tut. I just bought you some coffee! Is there a line you can add to save the generated PNG to a folder?
@TheTechTrain
2 жыл бұрын
Thank you so much for the coffee! ☕😃👍. Look out for a follow up video I'm working on at the moment which should address the saving part.
@Ndriana
2 жыл бұрын
@@TheTechTrain Hi great tutorial indeed. Just so you know, a lot, I mean A LOT of people are going to watch this video and the following one you are working on because NFTs. So just in case, even though I believe you got it already and if I may, I'd ask you to tailor the next video for NFT collctibles full UX. What I mean by that: - explain people how to generate 5k to 10k+ variations of a base artpiece. - explain how to define traits rarities and track that in metadata - explain how to batch mint the 10k+ images on a NFT market along with each images metadata. You could charge that for a glass of champagne instead of coffee. People will buy.
@chakrip9288
2 жыл бұрын
@@TheTechTrain sir, please post part 2 video or message me I will pay for the part 2 code(saving code).
Great….. hmmmm Can I use SVG for elements? Not PNG?
Hi, I downloaded your code. But how can I edit code for move left-right object bro? Can you tell me?
@TheTechTrain
2 жыл бұрын
To edit the code you can do what I did in the video and use Microsoft Visual Studio, which is free. To change the left/right position of an image just change the 'x' coordinate in the last section of the JavaScript code.
Love the video! How would one go about doing a weighted randomization of any element, i.e. if I wanted head1 to be present 2% of the generated values would this be possible using this format?
@fcilpino
3 жыл бұрын
ur making a nft arent u
@frederikfalck88
3 жыл бұрын
@@fcilpino hehe shhh
@fcilpino
3 жыл бұрын
@@frederikfalck88 msg me bro
@monthermahmod3738
3 жыл бұрын
@@fcilpino hi can you message me on Twitter please!
@samantharaye2700
3 жыл бұрын
Did you ever get answers? Im losing my mind trying to do this as well.
Anyone here have any resources or tips on how to programmatically generate PNG file combinations from a folder with collection of assets ?
@TheTechTrain
2 жыл бұрын
Look out for my follow up video on this, with a focus on the current NFT interest.
Can I run this on python to generate these automatically and save the images to an output folder?
@gizemvural9216
3 жыл бұрын
hi, were you able to manage it? i just need the images.
@fengsho2991
3 жыл бұрын
How did you get on with this?
@gokulhbk
2 жыл бұрын
Anyone here have any resources or tips on how to programmatically generate PNG file combinations from a folder with collection of assets ?
@umguriqualquer1255
2 жыл бұрын
Up
Big thanks to the author, guild me from 0 to having my own character generator (coffee money is donated)
we need a line to automatically generate and save the images please :)
@umguriqualquer1255
2 жыл бұрын
Up
brilliant tutorial, as a non coder, if I buy your software - will it run on a mac? many thanks!
@TheTechTrain
2 жыл бұрын
Glad you like it, and yes, as the code runs in a web browser it will work on any computer, including Macs.
awesome tutorial! is there a way to apply a different percentage for each element? For example Head4 has a 1% chance?
@samantharaye2700
3 жыл бұрын
same question.
@dt6677
2 жыл бұрын
@@samantharaye2700 I figured this out. Please let me know if you need information. Thinking about making a video of my own on this topic.
@nahgeee
2 жыл бұрын
@@dt6677 what did you do?
@TitoPopoy
2 жыл бұрын
@@dt6677 hey Man! am interested :)
@SamuelHeins
2 жыл бұрын
@@dt6677 also interested. You can message. Me about it
Is there a way to make it work with images 3000px wide? I don't think the images load quickly enough and it causes assets to go missing. Does it need a wait command between each line? How do I do this? xx
@JayStansfield
2 жыл бұрын
Found it. Add the delay variable and then the rest to each DRAW section e.g.: var delayInMilliseconds = 1000; setTimeout(function() { //DRAW EYES ctx.drawImage(roboteyes,((0)),0); }, delayInMilliseconds);
Hi! I bought your code and got it working very well with a complete different theme than avatar. My background is python, but I got around. Thank you very much! I want to loop over the possible images and save them in a file. Any follow up how I can do that?
@CaitlinTeTai
2 жыл бұрын
Any luck. ? NFTs? :p same here
@nigeldupaigel
2 жыл бұрын
@@CaitlinTeTai Yh, I created a Python and html version off of it. I can make infinite amount of NFT's now.
@sydchinobarrett2526
2 жыл бұрын
@@nigeldupaigel Ho Nigel. Could you share this?
Nice tutorial I send you some money for coffe and slice of cake :) But i got a problem with open the page ! If i click on index the page is not able to loud the pictures .. is it possible that i need a extra software for it like node.js or something else i forgot ? I just can see a big GENERATE! button and a little broken picture ikon over the canva. Please help me..
@TheTechTrain
2 жыл бұрын
Many thanks for the coffee and cake! 😊 Always much appreciated. As for your issue, my best guess is that you haven't extracted the files from the zipped folder you downloaded. Make sure you extract everything in the zipped file to a folder somewhere, then you should be fine.
Thank you, all ok
Is the code you can purchase only set to work with the images you already have or can you add your own without altering it?
@TheTechTrain
3 жыл бұрын
You can use the code with any images you want. You can add more features too. The only thing you'll need to change would be the category name (e.g. head, ears, nose etc). The video above should help clarify that.
@gamerganguk5846
3 жыл бұрын
@@TheTechTrain that’s good to know thanks. Great video btw very helpful. 👍🏻
@blackphilip5216
2 жыл бұрын
@@TheTechTrain hello sir I’ve bought the package but the images seems not working and the website page looks corrupted I’ve no idea what’s happening
@TheTechTrain
2 жыл бұрын
It's a zipped folder. Make sure you unzip everything, and make sure you keep the folder structure the same - don't start moving things out of the folder.
I learned a lot from this video and inspired to create some images now. One question! Is it possible to code creating images without duplication?
@TheTechTrain
2 жыл бұрын
Indeed it is... look out for my new video in the next few days!
@UndergroundLiving
2 жыл бұрын
@@TheTechTrain pins and needles. I sent some coffee your way and got the first version. I can’t wait to see your new video.
@UndergroundLiving
2 жыл бұрын
Seriously I can’t wait. Where is it? 😜
@AL-of7wu
2 жыл бұрын
Can you please write that code in the description field under this video to avoid duplication so we don't need to wait for a new video to come out. Thank you
Having some issues with the images I have inside the folder displaying inside the canvas. I've double triple checked my code and typos but still cant figure out why they aren't displaying. Has anyone else had this same issue if so please help with how you solved/figured it out.
@apieceremoved937
2 жыл бұрын
I had this issue. The images I had saved were not the same size as the canvas. Once I adjusted the image size it corrected the issue.
@sykah2837
2 жыл бұрын
@@apieceremoved937 im having the same issue but all of my images are the same size as my canvas
@TheTechTrain
2 жыл бұрын
Make sure the file path is correct, and the image file names match the code, and the file type extension matches the code.
@alojadascompras839
2 жыл бұрын
on mine it didn't work I wrote all the identical code, image sizes 400x400 everything is exactly the same and the images do not appear did you manage to solve it?
Cool nicc
I am interested. But the noses, ears etc who designed them and can we use the avatar commercially?What is the license?FREE to use.So if i buy i will receive a html file like I see in the video and then click generate button, correct?
@TheTechTrain
3 жыл бұрын
I designed and made all of the images. You are free to use the code to create your own generator and sell the results. Please don't resell, share or distribute my code though. A link back to my video would always be appreciated but isn't necessary.
@blockchaingaming619
3 жыл бұрын
@@TheTechTrain Yes, I understand I can't resell the code but I am allowed to commercially use/sell the robot avatars that is generated by your code?If yes then i am interested. thank you
Hello is there any way that we could get in contact? I have some quick questions for you. Thank you
@TheTechTrain
3 жыл бұрын
You can find my email address in the 'About' page on my channel.
Hope you liked the coffee man! Thanks for the hard work! :)
@TheTechTrain
2 жыл бұрын
Many thanks for the coffee! ☕ Glad you like the avatar generator, I hope you have fun with it. 👍
@TitoPopoy
2 жыл бұрын
@@TheTechTrain :) No prob! playing with the generator now. ha ha. Thanks again :)
@TitoPopoy
2 жыл бұрын
@@TheTechTrain hi Man. Will you be making a tutorial on the Autosave function? :)
@TheTechTrain
2 жыл бұрын
Autosave?
@TitoPopoy
2 жыл бұрын
@@TheTechTrain Yep. Or more of a save function...
nice
@TheTechTrain
3 жыл бұрын
Glad you like it
Is there a way to make this run automatically and save each image a it goes maybe even checking for duplicates?
@UndergroundLiving
2 жыл бұрын
I’d love to know this too
@TheTechTrain
2 жыл бұрын
Yes, and the video and code for this is coming out in a few days. Watch this channel!
@UndergroundLiving
2 жыл бұрын
@@TheTechTrain will the new video be using python or php and nodejs or still JavaScript?
@theguy8733
2 жыл бұрын
@@TheTechTrain Thank you, Keeping a close eye out! :)
@andrewpierson4627
2 жыл бұрын
@@TheTechTrain I am super interested in seeing this next video if that is still something you are planning on doing.
Please make video on how to export the pictures sir . Thank you!
@TheTechTrain
2 жыл бұрын
It's on the way!
@dukemarius8691
2 жыл бұрын
@@TheTechTrain much appreciated sir
I bought it aswell but the internet page isnt working, what do I do?
@TheTechTrain
2 жыл бұрын
The web page does work, but as I've said before, you need to unzip the zipped folder you downloaded, as well as keeping the file structure the same (i.e. one folder that contains all images and the web page).
Nothing is showing up in my canvas when I click generate :/ No errors in code and have double checked 3 times now. Is there something I might be missing?
@CalvinHeath
3 жыл бұрын
Feel like it has something to do with the ".src" file. I'm noobish to pure java script 😅
@CalvinHeath
3 жыл бұрын
fixed it, didn't capitalize Math both times oops
@syr3472
3 жыл бұрын
Lmao tell me what I did wrong... Everything was working perfect until I added that RGB background code xD now it doesn't show up unless I delete that code
I have copied this to the t and have double checked for any mistakes and it will not load the pngs for the life of me... what could I be doing wrong? sizes and everything are exact. Thanks in advnace!
@yumyab256
2 жыл бұрын
same thing happening to me idk what is going on,did you figure out what the problem was?
Can't wait for the updated video for the save feature and the amount! Do you know when that will be?
@TheTechTrain
2 жыл бұрын
Hopefully this week!
@fengsho2991
2 жыл бұрын
@@TheTechTrain we gon need that right now my boy!
@fengsho2991
2 жыл бұрын
@@TheTechTrain dinner & coffee, we ready
@zbush
2 жыл бұрын
@@TheTechTrain That's awesome, and if there was another video tutorial that showed how to link them to your open seas accont as an nft automatically that would be awesome! :)
@UndergroundLiving
2 жыл бұрын
@@TheTechTrain can’t wait. Subscribed
Hello I purchased the download link and I was assuming it would have the code that I could copy and paste. It seems to be just the assets... I don't mind supporting you but I'm curious am I missing something with the download link? Thanks :)
@TheTechTrain
2 жыл бұрын
Thank you very much for your purchase! The code is definitely in the file you've downloaded. As shown in the video the code is in JavaScript, which runs within a web page. In the file you downloaded is the web page called 'index.html'. In the video I show how to edit this using the free software Microsoft Visual Studio. Just open the file 'index.html' in this, or in any code editing took you have (even Notepad!)
@KyleJosephBuckley
2 жыл бұрын
@@TheTechTrain thank you! I found it :)
I wrote all the identical code, image sizes 400x400 everything is exactly the same and the images do not appear I don't know what could be wrong
@TheTechTrain
2 жыл бұрын
Unfortunately you will probably have made either an error with your code, put your images in the wrong place, or named them incorrectly.
Hi. Any idea why my images are not loaded? Do I need to install java?
@TheTechTrain
3 жыл бұрын
No, Java and JavaScript are quite different. You don't need to install anything to run JavaScript. If your images aren't loading then it is likely that your code file ('index.html') may not be in the same folder as your images, or your image names don't match what your code is looking for.
@TitoPopoy
2 жыл бұрын
@@TheTechTrain Man! thank you so much Sir for responding. :) I appreciate it. Will try to do this later. Btw, am gonna buy you some coffee ;) Do you have any socials where we can connect? :) thanks again.
@TheTechTrain
2 жыл бұрын
Many thanks for the coffee! I don't really tend to be Active on social media, but I do try to read every comment on here, and reply to as many as I can.
@TitoPopoy
2 жыл бұрын
@@TheTechTrain Copy Sir. I cant seem to send the coffee. haha. Having problems using paypal.
Hi... i just buy this course but unfortunately download link expire plz help me...
@TheTechTrain
2 жыл бұрын
As it says in the email, the download link is valid for three downloads. It will expire once you have downloaded the files three times. If you have already downloaded all of the files three times you shouldn't need the download link any more. I recommend making a backup copy of one of the three downloads if you're needing more than three copies.
@Ramchandravanahi
2 жыл бұрын
@@TheTechTrain tq for your reply... zip file i found in recycle bin and working fine....
@TheTechTrain
2 жыл бұрын
I'd make a backup copy to be safe.
Hi Man, I've just bought your download. It's good but I really need to automatically save all my outputs to PNG. Can you drop the code lines for this? Is your video ready with this information? I really need it. Thanks !
@TheTechTrain
2 жыл бұрын
I have the code all ready to go, and am literally producing the video right now. Keep your eye out for my new video very, very soon!
@ledzeppelin62
2 жыл бұрын
@@TheTechTrain great thanks! I look forward to it.
@cryptosaga9645
2 жыл бұрын
don't have the option to buy from Pakistan. do you give me any favor? buy it for me and send me or send me if you already have? thanks a lot in advance. I will pay you through any suitable way which will work. waiting for your reply. actually, I tried manually many times but it doesn't work for me.
@chakrip9288
2 жыл бұрын
@@ledzeppelin62 bro do you know how to save png images at once
@chakrip9288
2 жыл бұрын
@@TheTechTrain sir, please share the part 2 video or code (saving code), I will pay for it.
Where can I download the javascript code to play with it?
@TheTechTrain
2 жыл бұрын
The download link is in the description. 👍
@ezequiaslayata6068
2 жыл бұрын
Download it thanks
am i missing something i bought your code but only see the images?
@TheTechTrain
2 жыл бұрын
The code is provided in the same zipped folder as the images. Please remember that, as shown in the video, the code is written in JavaScript, which is inside the HTML code of a web page. The web page is called 'index.html'.
All I got after payment where the avatar images and no code. Can you send me the link to download the code? Thanks
@TheTechTrain
2 жыл бұрын
You did get the code. Remember that it's JavaScript written inside a web page. The web page is called 'index.html' and is in the folder you downloaded.
on mine, i’m unable to save the avatar I generated. Did I miss something?
@TheTechTrain
3 жыл бұрын
You need to right-click the image to save it.
@michaeldombek8853
3 жыл бұрын
@@TheTechTrain yes, I only get two options when I right click save page and print page.
@michaeldombek8853
3 жыл бұрын
ahhh, figured it out. just had to switch from safari to chrome. thank you!
background code isn't working.
Thank you do you have a polygon / eth address i'll tip ya ?
@sob3ygrime
2 жыл бұрын
I'm building something really cool so will try and remember to link it here. with some free give aways :)
@TheTechTrain
2 жыл бұрын
I'm very glad you like it! I don't have an crypto account I'm afraid, but any tips are always extremely valued if PayPal is an option: paypal.me/thetechtrain
Hello again I don’t know what im doing wrong can you please help me
@thismakesnosense4815
2 жыл бұрын
I'm not this guy, but I've got some background with coding. I'll try and help if you specify what the problem is
My button won't work. I'm getting this weird error where my programme is asking for a semicolon where one doesn't belong. Does anyone know why?
@TheTechTrain
2 жыл бұрын
Without seeing your code it's impossible to tell where you've gone wrong I'm afraid. Go back through the video and check each line of code against yours carefully.
@JourneyLT
2 жыл бұрын
@@TheTechTrain Alright, I'm going to copy your code line for line verbatim, and then change small parts. I know for certain yours works.
who else is here for nft creation?
@pierofasulli1076
2 жыл бұрын
me bro
@onyemaechibosah5003
2 жыл бұрын
👍
@williamownsyou
2 жыл бұрын
Guilty
@arpit12tha3
2 жыл бұрын
😂😂😂 thats me boy
@theycallmeken
2 жыл бұрын
Salute
Do you know of anyone who is familiar with the code that wants to do some paid design-development work to develop a cartoon F1 racing avatar generator?
@TheTechTrain
2 жыл бұрын
I'm quite familiar with the code - I wrote it!
tried doing this with gif`s yet they wont play?
@TheTechTrain
3 жыл бұрын
No, this uses the JavaScript canvas, which only supports still images.
@thechargedone4225
3 жыл бұрын
How to do it in loop.with getting unique random avatar evertime and save them
i bought the download and the code isnt there, only the images for the robot parts.
@TheTechTrain
3 жыл бұрын
As I mentioned in my reply to your email, the code IS included in the download. If you open the zipped folder you downloaded you'll find the 'index.html' web page that contains a fully working copy and all the code. You just need to open it using a code editor - or even just Notepad.
@samantharaye2700
3 жыл бұрын
@@TheTechTrain my mistake. i sent you another email. im having issues with just a white screen coming up.
@TheTechTrain
3 жыл бұрын
You told me in your email you only copied part of my code into your new file. You will need all of the code included in the HTML file sent to you for it to work properly. If you're not sure, perhaps the video might help you understand what the code does, so you're able to make whatever changes you're wanting to do with it?
@TheTechTrain
3 жыл бұрын
If you're copying every line of code I wrote and pasting it into a new document, you must make sure the new document is saved as an HTML file, and then opened with a browser.
@TheTechTrain
3 жыл бұрын
If you open the HTML file I included in the zipped folder you downloaded, does that display correctly?
the real question is , how can you do this with animated gifs as layers
@Ndriana
2 жыл бұрын
Oh yes please! that's what I am looking for as well
@jiyoungkim2336
2 жыл бұрын
I would love see the tutorial of generating animated images too. So please !!
@squiddymute
2 жыл бұрын
made it , not that hard with all the libs that exist
@squiddymute
2 жыл бұрын
@Christopher Casey i'm a beginner in javascript and nodejs as well. If you follow the example here and try to use libraries like gif-to-png you will able to do it fairly easy. You need to be able to produce your own gif files and then use the nodejs script to combine them. In order to combine the gifs first you need to break them down in frames, then use a similar method to drawLayers mentioned in the video and start building the final result. Once you have all the png frames you need to merge them to a new gif file. My code at the moment is for my project and is a bit of a mess. If i finish i will try to come up with a more generic and clean approach and post it on github.
@squiddymute
2 жыл бұрын
@Christopher Casey if you break them you can use the same logic as in this tutorial to merge the different layers of your broken gifs to new pngs. You just have to use for loops. Then you use something like imagemagick to glue the newly produced pngs to a new gif.
i spent a whole afternoon following step by step after the video, the canvas was set as 700X700, but on the web page the canvas is neither a square nor any image showed up, very frustrated, did you sir miss any step in the video?
@TheTechTrain
2 жыл бұрын
No, I didn't, and I know of many hundreds of people who have done it successfully and got in touch with me to let me know. I'm afraid you must have made a small error somewhere. The trouble with code is that a missing semicolon or the wrong speech mark or bracket can cause the whole thing to not work. Perhaps you might want to share your code in case someone can spot the issue?
@ClubRebelScum
2 жыл бұрын
I got the same when I put the canvas at 600x600 :S