Coding Challenge

Подписаться 1,7 млн

Просмотров 218 тыс.

50% 1

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: ru-vid.comjoin
🛒 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

Опубликовано:

26 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 205

@TheCodingTrain 5 лет назад

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

@abhishektyagi4428 5 лет назад

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

@victoriadacostalamas 5 лет назад

Could you code this with Processing?

@dannylucas1078 5 лет назад

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 4 года назад

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 4 года назад

@@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 4 года назад

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

@redumptious2544 4 года назад

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

@TheRodrigo1506 5 лет назад

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

@roshanpawara8717 5 лет назад

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 3 года назад

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

@maple5212 5 лет назад

gotta love that manic dad energy

@engboy69 5 лет назад

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

@zungnguyen5300 5 лет назад

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.

@quillaja 4 года назад

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.

@thevoyageof67 5 лет назад

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

@prakashraj4519 2 года назад

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.

@yourteacher4353 5 лет назад

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 5 лет назад

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

@virus2646 5 лет назад

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

@paininmydroid4526 5 лет назад

If this guy is not the coolest instructor on RU-vid, who is?

@thevoyageof67 5 лет назад

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

@abdullahmab6933 5 лет назад

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

@semnikobenaventehilario5894 5 лет назад

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

@envischt9366 5 лет назад

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

@thevoyageof67 5 лет назад

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

@TheCodingTrain 5 лет назад

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

@thevoyageof67 5 лет назад

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

@mcol3 5 лет назад

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

@deeeeeds 5 лет назад

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

@mubeensaiyed2819 5 лет назад

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

@thevoyageof67 5 лет назад

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 2 года назад

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

@josgielen8524 5 лет назад

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

@csdi4799 5 лет назад

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

@KernelMidris 4 года назад

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

@Nekromant05 3 года назад

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?

@blinzi69 5 лет назад

i love the p5 editor

@irissupercoolsy 5 лет назад

Haha when the block flew away 😂😂😂😂

@jonatangall3715 4 года назад

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

@Jousef9 4 года назад

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

@brunoseixas5012 4 года назад

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

@harutya0784 4 года назад

This dude can create everything

@anniquedehaas 4 года назад

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?

@missb2052 3 года назад

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?

@ihateevilbill 5 лет назад

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

@nubcops220 4 года назад

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

@yashwanthd1998 4 года назад

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

@juicepops7819 4 года назад

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

@malekfarag5134 5 лет назад

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 5 лет назад

MDN (Mozilla Developer Network) is a great resource.

@TheCodingTrain 5 лет назад

Maybe try this beginner / foundation playlist? ru-vid.com/group/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

@igordmitrow2815 5 лет назад

What the MacBook do you have?

@felix5463 5 лет назад

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

@deniyasuhin9677 5 лет назад

u make coding fun srsly

@thevoyageof67 5 лет назад

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

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

@emilyadamson3398 4 года назад

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

@user-yv7eh9xr9v 4 года назад

This dude will be legend someday

@RupertBruce 2 года назад

@11:30 the bug that inspired flappy bird 🙂

@deependrakumarrout4172 4 года назад

Awesome it's just a huge favor to me

@kr2_4 3 года назад

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

@sepakbolatv8561 5 лет назад

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

@YitzharVered 5 лет назад

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

@johnniegilkerson4724 4 года назад

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 4 года назад

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

@talalzulfi4082 5 лет назад

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 3 года назад

Thank you for this great video!

@sidneyb2291 3 года назад

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?

@alexandrelopes1446 3 года назад

Wich program are u using for this??

@abhishektyagi4428 5 лет назад

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

@thevoyageof67 5 лет назад

Yes please, I'm upvoting this

@IndianBoy77 5 лет назад

@onebelarusianguy 5 лет назад

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

@johnraisenostos4455 5 лет назад

5 years degree

@abhishektyagi4428 5 лет назад

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

@Joychahal12339 3 года назад

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.

@Damian-qj1jh 4 года назад

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

@belikebudd 5 лет назад

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

@yanickpalmers 5 лет назад

Ctrl + shift + i

@maciej12345678 2 года назад

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

@swiftpotato6746 5 лет назад

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

@TheCodingTrain 5 лет назад

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

@Violet-tb8xo 5 лет назад

@@TheCodingTrain woah you're really nice

@anjalisethi1929 3 года назад

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

@jayrewerts 5 лет назад

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

@majdsadi62 4 года назад

it's the bottom of the canvas I guess

@80feetjump 2 года назад

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?

@vkrenta 5 лет назад

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

@kaizen9451 5 лет назад

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

@vinayakthakur3155 5 лет назад

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

@anirudhbhardwaj8373 5 лет назад

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 5 лет назад

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

@TheCodingTrain 5 лет назад

This workflow video series might help also! ru-vid.com/group/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X

@DaveBriccetti 5 лет назад

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 5 лет назад

Your elevator simulation project is simply awesome.

@Hengki-ey7th 4 года назад

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

@tashkings7995 4 года назад

same issue

@nikolskvarilova9684 4 года назад

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

@ripper_op5442 3 года назад

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

@OverFitter 5 лет назад

Wow, it's nice

@amuldogla4543 4 года назад

Good explanation for beginners

@anshulvairagade1604 5 лет назад

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

@souravsarkar5724 4 года назад

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

@matheusazevedooliveira8222 5 лет назад

Dan, where are you LiveStreamming?! RU-vid?

@TheCodingTrain 5 лет назад

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.

@shahalam4403 4 года назад

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 4 года назад

Height is the height of the canvas.

@edibb3880 4 года назад

Congrats 👏🏻👏🏻👌🏻👍

@ashishbhargava2385 3 года назад

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

@nabi-intimateapparel 3 года назад

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

@vuongtran2176 4 года назад

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

@anidea8012 4 года назад

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

@OggyDesiDog 4 года назад

This is finished project.

@Huliuspulius 4 года назад

Why cant i drag images theres nothing to drag those images

@dharmaeshmurugesu3058 4 года назад

I cant insert the image please help me

@shrangisoni8758 5 лет назад

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

@defaxed 4 года назад

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

@marioattieh5080 4 года назад

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

@anidea8012 4 года назад

I is caps

@EvandroPastor 5 лет назад

So funny!

@swooza477 5 лет назад

what coding language is this im new to this channel

@TintuVlogger 5 лет назад

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

@swooza477 5 лет назад

@@TintuVlogger thank u

@ARYXCustrin 4 года назад

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

@bmzgaming 5 лет назад

i love this video

@KingJellyfishII 5 лет назад

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

@lucasmiller8286 5 лет назад

It is just you, it works for me

@abhaysinghania5374 3 года назад

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

@henriqueritter 3 года назад

hes using Javascript with the P5JS lib.

@roeiohayon4501 5 лет назад

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

@Benescoli 4 года назад

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

@masazi_art7220 3 года назад

Can i make this at blue j?

@thedarkglovemusic 5 лет назад

Why don't you like to use equal checks?

@DaveBriccetti 5 лет назад

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

@sathyacierto2734 4 года назад

How to label score or framecount

@tainman8507 2 года назад

O my friend I was finding.

@shashidhara.g.m655 4 года назад

Mate which platform

@safara_umarov 5 лет назад

It is great 💗

@OonHan 5 лет назад

*No Internet Connection*

@insitakaya1672 5 лет назад

The “No Internet Game” 😂

@8xnnr 5 лет назад

What coding language is this?

@yanickpalmers 5 лет назад

JavaScript, using the p5 library

@tessagray6954 3 года назад

Hello thank you sono much for this video buuuut can someone can help me pls? I’m trying to make this videogame but with a cat. The problemi seri that i’m following this video step by step but i always slip into the error “ghost.push si not a function” can someone help me pls? I need it for an exam and i’m really desperate.