Coding Challenge

In this challenge, I attempt to make my own version of Google’s Dinosaur Game (T-Rex run!) with a unique twist - controlling the dinosaur (unicorn, in this case) with a machine learning Speech Commands model! Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #146:...
🎥 Next video: • Coding Challenge #148:...
🎥 All videos: • Coding Challenges
References:
💻 ml5 soundClassifier: learn.ml5js.org/#/reference/s...
💻 p5.collide2D: github.com/bmoren/p5.collide2D
💻 jsDelivr: www.jsdelivr.com/
Videos:
🎥 ml5.js Sound Classification: • ml5.js: Sound Classifi...
🔴 Livestream Archive: • Coding Train Live 179:...
Related Coding Challenges:
🚂 #41 Clappy Bird: • Coding Challenge #41: ...
🚂 #31 Flappy Bird: • Coding Challenge #31: ...
🚂 #138 Angry Birds with Matter.js: • Coding Challenge #138:...
Timestamps:
0:00 Introduction
0:56 Unicorn class
3:05 Jump and move
4:14 Add gravity
6:30 Add images
8:05 Add train obstacles
13:24 Add collision detection
18:40 Add speech commands
20:45 soundClassifier.classify()
23:08 Change collision detection to circles
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: kzbin.infojoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#chromedinosaurgame #machinelearning #soundclassification #speechcommands #p5js #ml5js

[@TheCodingTrain]

Characters and backgrounds: drive.google.com/drive/folders/1BYFpEiw6lgxcuPug4EBjWMZzYs9iXWml?usp=sharing

[@abhishektyagi4428]

Sir Could you tell the resources you use to learn or enhance your programming skills

[@victoriadacostalamas]

Could you code this with Processing?

[@dannylucas1078]

Please Please can you make a video of a player jumping on a platform, platform collision detection and also how to stop a player jumping in the air when not on the ground (player.x+playerHeight >= height-playerHeight) works but not if the player is on the platform heres what i have now... I know the code is messy but just trying work out this problem editor.p5js.org/danny.lucas/sketches/pZlNsy5we

[@shahalam4403]

I am unable to use height as you are using "this.y = height - this.r;" when i debugged i found height is undefined please help to resolve it

[@Crazyclay78YT]

@@dannylucas1078 it works fine to me, but i can get stuck on the side of the platform, so you might want to fix that :)

[@khalidsakka8020]

i am addicted to this.channel , cannot stop watching your coding challenges.

[@redumptious2544]

Coding Train is so freaking good. This gravity thing has helped me a lot. Thanks.

[@TheRodrigo1506]

This is solid gold! i'll recommend your channel with my friends :)

[@roshanpawara8717]

Up! Up! Dan struggling due to the latency of the API reminds me of Harry Potter part 1 where they learn to fly for the first time and Ron struggles to get the broom😂😂😂 The scene is so funny. As always, great challenge. Fun to watch.

[@amogus7]

11:34 The Coding Train: fix a bug Unicorn: I AM INVINCIBLE! INVINCIBLE!

[@engboy69]

This was a fun project! I am going to try to incorporate this into my own game

[@maple5212]

gotta love that manic dad energy

[@thevoyageof67]

Big fan of your work man, I should start doing videos like these instead of the plain ones I do

[@yourteacher4353]

Me: I am going to learn but I am also going to just have fun. Somebody: Dude, watching multiple channels at the same time won't get you there. Me: Multiple? Pffff... (*Opens up The Coding Train*).

[@vornamenachname5267]

You should lower the confidence level to 0.75 or so. That should really help with the recognition.

[@quillaja]

For train spawning, I thought perhaps using the "peaks" of your favorite perlin noise would be appropriate, and also allow you to have deterministic spawning based on the seed. Also, are you ever removing trains from your train list, or will the game just get progressively more laggy the longer it's played until it's unplayable (or you use all the memory)? =) For collision detection, I would think using a box is fine, but simply use a smaller box. This was commonly done in older games.

[@prakashraj4519]

I am amazed to see how high level javascript is... You did not (apparently) call any function yet the code seems to be working, and the variable "key" is next level.

[@virus2646]

Fun Programming? you really the man! Thank you very much!!!

[@mubeensaiyed2819]

Nice..... sir I am learning lots from you.Really I am progressing very fast because of you....😁😁😍

[@thevoyageof67]

I turned his snake game idea into what could possibly be the best snake game ever 😂 this guy is a legend though, my work and coding videos were inspired by him

[@dr_frankenmiller2607]

@@thevoyageof67 The snake game needs the same effect as maze generator, a line that reads {true, false, true, false} that connects squares of snake into a coherent contiguous "body" instead of meaningless pile of squares, were you able get that effect? I set the snake project aside but am planning on picking it up again once I am better more experienced coder... yesterday took me two and half hours troubleshoot p5JS just to let me put images on the screen (but actually succeeded)

[@paininmydroid4526]

If this guy is not the coolest instructor on KZbin, who is?

[@thevoyageof67]

Me...10 years from now 😂. I should start doing videos like this

[@deeeeeds]

Unfortunately I only really watch for the train whistle so I'm gonna have to go.

[@envischt9366]

I've just started learning programming and watching this is actually fun

[@thevoyageof67]

I started watching his videos when o was a beginner... He inspired me to create my own videos

[@TheCodingTrain]

I'm so glad to hear that TechniCollins, wishing you luck with your channel!

[@thevoyageof67]

@@TheCodingTrain Thank you, that means so much coming from you

[@zungnguyen5300]

Hi Dan, is there any prerequisite for the background image? I tried loading a random image but got this error instead: Uncaught Error: [object Arguments]is not a valid color representation.

[@Nekromant05]

Madame Hooch: Welcome to your first flying lesson. Hold your hand above your broom and say "up"! ... Wait, what are you doing? You can't control a Unicorn by saying "up"! The Coding Train: I can't?

[@mcol3]

dan: train, train, collide speech commands: three, three, five

[@irissupercoolsy]

Haha when the block flew away 😂😂😂😂

[@semnikobenaventehilario5894]

i will make it, thanks for teach us coding in p5

[@blinzi69]

i love the p5 editor

[@csdi4799]

4:07 Ok. Let's call it unicorn. Whatever you say!

[@josgielen8524]

Just wondering why some previous live stream parts were never made into separate coding challenges : - From Live stream #174 : Ray Marching - From Live stream #175 : Neuroevolution Steering Vehicles

[@jonatangall3715]

You are the best teacher that I ever seen! Thanks for coding be so funny!!!

[@juicepops7819]

Crush sents me a "Hi" text... Me: 22:45 Love your channel for the stuff you teach man

[@brunoseixas5012]

Hey there!! You could try to create a multiplayer battleship game using firebase that would be really awesome tho

[@Jousef9]

I followed u but in pygame and I had plenty of fun thanks man

[@harutya0784]

This dude can create everything

[@deniyasuhin9677]

u make coding fun srsly

[@thevoyageof67]

Coding has always been fun... He cranks the fun to the max though. I'll start making videos like this

[@abdullahmab6933]

What website did you use to test your recaman sequence because I wrote the code but don't know how to test it.

[@felix5463]

For a programming challenge try making particle life. Code parade made a good video about it :)

[@yashwanthd1998]

You really teach with so much fun and excitement..thats what i like u about

[@ihateevilbill]

You missed a trick. You shoulda had "this." sitting on the unicorn ;)

[@KernelMidris]

you used the 'push' function when creating the obstacles - is there an equivalent function in Processing 2? thanks

[@nubcops220]

For all the people who noticed how hard are these codes to execude you can do all this in unity easily without all this long/big amount of codes

[@user-yv7eh9xr9v]

This dude will be legend someday

[@deependrakumarrout4172]

Awesome it's just a huge favor to me

[@malekfarag5134]

How did you first learn about the built in functions like "constructor()"? I always seem to get stuck and these kinds of functions always seem to fill the holes😅

[@tranquility6358]

MDN (Mozilla Developer Network) is a great resource.

[@TheCodingTrain]

Maybe try this beginner / foundation playlist? kzbin.info/aero/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

[@anniquedehaas]

When I use the collide function I get a error that it is not defined. Is this something in the index? cause when I downloaded that file `i couldn't open it so I copied the whole thing from the video in index?

[@igordmitrow2815]

What the MacBook do you have?

[@talalzulfi4082]

I need some advice. I want to be able to earn some money by making apps for google play store this summer. I am experienced in javascript (processing js library), physics simulations and interaction. How can i make, publish and earn money by this method?

[@drewwolin3162]

Thank you for this great video!

[@RupertBruce]

@11:30 the bug that inspired flappy bird 🙂

[@abhishektyagi4428]

Sir Could you tell the resources you use to learn or enhance your programming skills

[@thevoyageof67]

Yes please, I'm upvoting this

[@IndianBoy77]

+1

[@onebelarusianguy]

do you think he asked the same way as you? No. If you can't even search, programming is not for you.

[@johnraisenostos4455]

5 years degree

[@abhishektyagi4428]

@@johnraisenostos4455 unfortunately in India colleges don't teach shit , therefore i would like a genuine answer to this

[@vkrenta]

nothing: you: up nothing: you: up.......up

[@kaizen9451]

MUSIC DOLBOEBA just like when I’m talking to my dog.

[@kr2_4]

If I copy this whole thing and run it it says "script error. ( : line 0) " What can I do to fix this?

[@missb2052]

I've gotten to 10:17 but once I try to start it up it won't work like yours. The jump only works for a sec and then freezes. I keep getting Uncaught SyntaxError: Identifier 'uImg' has already been declared (sketch: line 1) and Uncaught ReferenceError. Any Ideas what went wrong?

[@souravsarkar5724]

Great🥰 Will you make a 3d game ...

[@amuldogla4543]

Good explanation for beginners

[@emilyadamson3398]

How do I make it show a "game over" once there has been a collision?

[@swiftpotato6746]

Hey Dan! Could you please upload the coding train characters and background so I can use them in my version? Thanks!

[@TheCodingTrain]

Done! drive.google.com/drive/folders/1BYFpEiw6lgxcuPug4EBjWMZzYs9iXWml?usp=sharing

[@Violet-tb8xo]

@@TheCodingTrain woah you're really nice

[@johnniegilkerson4724]

I can't get p5.js to work on windows, so I use visual studio code, all out put goes to Microsoft edge by default, how can I change it?

[@minsin56]

do you use the live server extension and also go into you settings and settings and set your default browser to whatever browser you use

[@sepakbolatv8561]

What software do you use to make your body appear on the screen?

[@YitzharVered]

Basic green screen? Pretty much every editing software can do it.

[@alexandrelopes1446]

Wich program are u using for this??

[@DaveBriccetti]

This is a very cool idea, and the video is nice and tight and accurate. I like the idea of having a limited vocabulary of recognized words, which seems it should improve the recognition accuracy. Inspired by this video I thought I’d use the ml5 soundClassifier for speech commands to my elevator simulator (davebsoft.com/software/elevator-sim/). But I’m not finding it very accurate. Also, it often gives two responses for the same utterance. I may stick with using the Web Speech API (developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) as I do in Stupid Nonsense Spoken Sentences at davebsoft.com/software/. Programming to the Web Speech API directly is much more complicated, though. Dan, thanks for so many great ideas!

[@TintuVlogger]

Your elevator simulation project is simply awesome.

[@maciej12345678]

how to remove image flickering is there some sync? ITS SOOOO FUN Make almost a Mario game in 1h

[@itz_not_me4257]

everything went perfect until this appeared p5.js says: [unicorn.js, line 17] "collideRectRect" is not defined in the current scope. If you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive). i followed everything step by step any help?

[@belikebudd]

I cannot detect errors with local server. How r u having a console in web browser? Thanks. Anyway those tutorials are great :)

[@yanickpalmers]

Ctrl + shift + i

[@OggyDesiDog]

This is finished project.

[@vinayakthakur3155]

Browhat programming language you are using to make it. Also which program you are uding for it? Plzz tell me.

[@anirudhbhardwaj8373]

he's using javascript and using p5.js web editor but if you want you can download it too p5.js download- p5js.org/download/ p5.js web editor- editor.p5js.org/

[@MohanMishraAstroboy]

He is using JavaScript with p5.js Libraryp5js.org/ P5.js

[@TheCodingTrain]

This workflow video series might help also! kzbin.info/aero/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X

[@Hengki-ey7th]

Can anyone tell me When i open index.html file. Its only appear loading on screen

[@tashkings7995]

same issue

[@nikolskvarilova9684]

You have to run your own local web server. It solved the problem for me.

[@ripper_op5442]

Use the same p5js web editor and put your code there online and run

[@sidneyb2291]

Guys how come I can't load images into the p5.js web editor. It only allows me to add files but no drag and drop function. Why is this?

[@matheusazevedooliveira8222]

Dan, where are you LiveStreamming?! KZbin?

[@TheCodingTrain]

Yes, right here! Subscribe and click alarm bell and you will get notifications when I schedule one! In the fall I'll have a regular weekly timeslot but this summer is all over the place.

[@Benescoli]

Thanks sir, i'm learning a lot from you👌👌😊

[@jayrewerts]

What is height? I'm assuming it is brought in by the libraries, but how is height calculated?

[@majdsadi62]

it's the bottom of the canvas I guess

[@edibb3880]

Congrats 👏🏻👏🏻👌🏻👍

[@vuongtran2176]

i'm new to this coding, is he use c++?

[@anidea8012]

He use javascript library called p5 follow his video it will lead you

[@anshulvairagade1604]

Can we do this (Dino game ) using python language (using pygame) ???

[@Joychahal12339]

for the index.html its saying from nuber 4,5,6,7 and 10 for this sybole < its showing a red swigly line why is that.

[@OverFitter]

Wow, it's nice

[@KingJellyfishII]

Why can't I change resolution or 2x this video? Is it just me?

[@lucasmiller8286]

It is just you, it works for me

[@80feetjump]

Can someone with more knowledge help me? I added a second moving object and now the first objects start to speed up as the game progresses. Any guesses as to why this is happening?

[@dharmaeshmurugesu3058]

I cant insert the image please help me

[@roeiohayon4501]

I did something like that in assembly (really simple without images), it took forever to finish

[@bmzgaming]

i love this video

[@ARYXCustrin]

I think the game on my side is running at 144 fps, becouse the trains are faster

[@Damian-qj1jh]

The code link just takes me to the website where do I go to see the full code?

[@anjalisethi1929]

Hi !!!! When I code this it shows " Uncaught ReferenceError: collideRectRect is not defined (unicorn: line 17)" and "Error at line 89 in "Unicorn.hits" in about:srcdoc (about:srcdoc:89:5) " Please help

[@itz_not_me4257]

omg i have the same problem

[@swooza477]

what coding language is this im new to this channel

[@TintuVlogger]

It's javascript and he is using a library called p5 js.

[@swooza477]

@@TintuVlogger thank u

[@OonHan]

*No Internet Connection*

[@insitakaya1672]

The “No Internet Game” 😂

[@thedarkglovemusic]

Why don't you like to use equal checks?

[@DaveBriccetti]

Floating point inaccuracies, programmer error, incrementing by more than one.

[@ashishbhargava2385]

keypressed is not working and not showing bold outside the setup function

[@defaxed]

why did you skip this dot song when you forgot this. on 12:15 :(

[@tainman8507]

O my friend I was finding.

[@masazi_art7220]

Can i make this at blue j?

[@EvandroPastor]

So funny!

[@mufarrizz]

Hi

[@Huliuspulius]

Why cant i drag images theres nothing to drag those images

[@shrangisoni8758]

Pls tell us how can we make it more smooth and animate the small details that are used in actual games..like background ,clouds moving..crashing animation, jumping animation, legs moving animation

[@shahalam4403]

I am unable to use height as you are using "this.y = height - this.r;" when i debugged i found height is undefined please help to resolve it

[@mikastrae]

Height is the height of the canvas.

[@nabi-intimateapparel]

Not al my objects are showing and I don' know how to fix that. Can someone help?

[@abhaysinghania5374]

i did not understood which programming lang did u use.....someone please tell me

[@henriqueritter]

hes using Javascript with the P5JS lib.

[@marioattieh5080]

as soon as i loadImage() it just stops showing anything

[@anidea8012]

I is caps

[@dineshlingam8413]

bro plz do in vsc bro this game

[@shashidhara.g.m655]

Mate which platform

[@tjblackman08]

Why are there 10 downvotes? wtf?

[@romitrajput1950]

Which language do u use to make all those things.... Ur video have inspired me to learn codeing and xplore the world of programming.. I can't beat u but i will try my best to come to ur level 😅which is impossible 😂

[@TheCodingTrain]

This video uses JavaScript with the p5.js library, for more: p5js.org.