Coding Challenge #147: Chrome Dinosaur Game (with Speech Commands machine learning model!)


(upbeat piano music) – Ah! Okay, hello and welcome
to a coding challenge, Google Chrome dinosaur game edition. Unfortunately I don’t
have my train whistle. I didn’t bring it with me today, so this is definitely not gonna go well. Not that any of my coding
challenges ever go well, but I’m gonna give this a try. I’m gonna attempt to program, quickly, the Google Chrome dinosaur game. I’m gonna use my own images and stuff, so it will be the unicorn game, of course. I’m gonna use p5.js, the
JavaScript library p5.js, and I’m going to interact
with it in a unique way that you have to stick around
for the end of the video. I’ll just tell you now. I’m gonna try to control it with my voice. (laughing) Okay, so you skip to the end,
maybe I’ll be doing it there. Okay, so here we go, let’s get started. So, what do I need to do? So, first I’m gonna make a, I’m gonna add, I’m in the p5 web editor,
and I’m gonna add a file, I’m gonna call it dino.js,
even though it’s not, no, let’s call it unicorn, unicorn.js. And that’s gonna be my unicorn. And what do I need? I also need to have, those
are like cactus thingies, those are gonna be
trains, so I’m gonna make a train.js, add file. So, let’s start by creating
the unicorn, class Unicorn. So, I’m gonna use object-oriented
programming because, you know, I do, this, by the way, is exactly the same as Flappy
Bird, so I’m really just doing the same thing over again, but whatever. This is a nice,
beginner-friendly challenge, and maybe using
object-oriented programming is a little bit overkill,
but let’s give the unicorn an x location at 50 and a y location, which will be height, ’cause it’s sitting at the bottom of the window,
but maybe I’ll say, like, height minus 50 right now, and then I’m going to create
a function called show, and I’m going to draw it,
I’m just gonna draw it as a rectangle right
now at this.x, this.y, and I’ll make it 50, 50. So, this is the Unicorn class. A Unicorn object has an x and a y, and when I draw it, it’s a rectangle at that x and y with a height of 50, and those’ll probably need
to be variables eventually. So, let me make a variable called unicorn. I’m gonna say unicorn is a new Unicorn, and I’m gonna say here, unicorn.show. And let’s run this, there we go. Oh, okay. So of course, I forgot
what I always forget, which is that I’ve added
some new JavaScript files, and I need to reference them in my HTML. Unicorn, and what was
the other thing called? Train. All right, so that’s a
unicorn, and what I want is, wait, let me play that game again. How does it work? It just sits there, so every time I press the space bar, it jumps. So, let’s get it to do that first, let’s get it to do that first. Okay, so what does it need
in order to be able to jump? It needs a velocity, a
speed along the y axis, so let’s call this vy,
and we’ll say that’s zero. And we’ll write a function called jump, which we will give it kind
of this instant force. So, we’re gonna, like, push it up. So, I’m gonna say this.vy
equals, let’s say negative five. That’s moving it up. And then I’m gonna write
a function called move, which says this.y +=this.vy. So, what we should see now is, if I say unicorn.move, and then if I add function keyPressed and say
if the key is the space bar, unicorn.jump, this really is basically the same as Flappy Bird so far, then we should see that velocity kick in. So, I’m always moving it based on whatever that velocity is, but the velocity is
zero, the speed is zero. But as soon as I say
jump, it sets the speed to negative five and we should
start to see it move up. Okay, here we go. Moving along here, I’m gonna
press space, there we go. Ah! Goodbye, unicorn, see you later! All right, so we need gravity, so we need some form of gravity, which probably makes sense
as a global variable, but I’m just gonna, since the gravity’s really only gonna affect the unicorn, I’m gonna put it in here. Let’s say it’s a 0.5. So, gravity is, in a way,
a counteracting force, so no matter what it’s
doing, the gravity is always adjusting the speed of the unicorn, the acceleration, basically. So, what I could do now, also in move, is say this.vy +=this.gravity, however, I don’t want to ever let,
because see, now it’s gone. I don’t wanna ever let the unicorn fall off the bottom. There should be basically a ground level. So, I’m gonna, to do that, let’s say, so let’s make this 50 a size. Let’s say r=50. So, we’re going to kind of use that for all the parts where we’re drawing. And then I’m also going to say, I’m gonna have a constraint. So, I’m gonna say this.y=constrain. Its current y value
between zero and, really, where it’s sitting at the bottom, which is also height – this.r. So, it’s stuck there,
and now if I press, oops, press space, you can see it jumps. Now, that’s a very measly little jump. We need to be able to jump much more, so let’s set this to, like,
25, and let’s see what happens. Okay, that’s too much. Let’s just set it to 10. Maybe I need to make the
gravity stronger too. So, there’s gonna be a lot
of fine tuning of this, but let’s just do that. And let’s set this to 25. Oops. Maybe let’s set the gravity to two. There we go, this feels a bit more like the dinosaur game. So, this is kind of sad. Let’s make our unicorn look
a little bit more exciting. Let’s load an image. So, I have on the desktop
here, I have some images. I have a background, which will be the background of the game. I have a unicorn. This’ll be the character with a little angry equal sign sitting on it. And then the train will be the thing it has to jump over. So, let’s, so what I’m gonna do here is I’m gonna add these
files, I’m gonna do add file, and I’m going to drag
them into the web editor. It uploaded all of them. And then, in here, I’m gonna add preload, and I’m gonna have let uImg,
let tImg, and let bImg, and let’s load all of those. uImg=loadImage unicorn.png,
and we’ll do the same for tImg and bImg. This is train and this is background. Let’s change the background to, ooh, what I’d get wrong here? Background is actually a jpg. So, let’s have the background
now be bImg, there we go, and let’s have the unicorn, where is it, be, I’m gonna say image,
uImg, there we go. Ooh, it’s so tiny! And it’s all pixelated, it so sad! Let’s change this to 150. Its x value shouldn’t
be, it should be here. There we go, so there’s
our jumping unicorn. This is not a lot of screen
real estate to work with, so let me actually load a background image that’s 800 pixels wide, which
I think will be a little more, which I think will be a
little better than 600. All right, my unicorn can jump and I’ve made the
background a little wider, which means now I need
obstacles for it to jump over, and those are going to
be little train things. So, I’m gonna make another
class, call it a Train. Choo-choo. I’m gonna give that a constructor. These will have also an x and a y, so the x will be, it’s
gonna start off the edge, and the y will be actually
also at the bottom. So, height minus, I’ll give it a size, and this.r will be 100, and then, so now I need a show function, and that, I’m going to draw as an image. (laughing) My fingers are in the wrong place. The train image at x and y, this.r, this.r, and let’s
also add a move function, and we’ll say this.x -=, and so, the train, so this is a weird thing. It’s supposed to be, oh,
this is gonna be a problem. (laughing) My fixed background is gonna
make this visually a problem, and people on the chat are saying paralaxed background, please. All right, so maybe I’m gonna get to that. This is gonna end up being a longer video if I implement that, but really, the unicorn is moving,
so the unicorn is moving, but the x stays fixed. The trains, well, the
trains could be moving if they’re trains, that’s weird, but they’re supposed
to be cactuses, cacti. They’re standing still and the unicorn’s just approaching them, but we’re seeing it from the unicorn’s point of view. Boy, I’ve really botched this. But what I’m gonna do
is just move them by, the whole scene is
scrolling by three pixels, and we’ll figure out if we can paralax the background maybe later. What do I even mean by paralax? To make it appear as if
the background is changing, but off in the distance, so it’s sort of moving at a different speed. But for now, let’s just do this. Let’s create an array called trains, and we’re going to say, in setup, well actually, you know
what we’re gonna do? In draw, we’re just going to randomly, we’re going to pick a random number between zero and one, and we’ll say, like, one percent of the
time, we’re going to say trains.push, we’re gonna add a new train, so it’s gonna be irregular. This is different than
the Flappy Bird I made, where I think the pipes,
maybe it was irregular. I think the pipes were
at regular intervals. Now there’s a random chance
of adding a new train, and then all the trains that exist, we’re gonna say for all of the trains, I’ll just say t in trains, I’m gonna say t.move, t.show. All right, let’s see what happens. Do we have a train? Maybe I’d better increase it. There we go, oh, look at that. All right, they’re moving. They’re kinda slow. I’m gonna jump over it, oops, okay. (laughing) Let’s make them move a little faster. So, we’ve got some
tweaking we’ve gotta do. Whoa, this is a, oh, this is a nice way. Oh, look, my unicorn can fly. So, I need to fix the fact, I need to, like, not allow
my unicorn to fly, right? It should only be able to
jump if I’m a the bottom, so let’s fix that. So, to do that, I need to go into Unicorn, and in jump function, I
should only be allowed to jump if I’m sitting at the bottom. So, in other words, if y is, oh well, if I’m at the bottom, so as long as y is equal to, is this really gonna work? I don’t like to use equal checks, but this is, by definition,
sitting at the bottom, so only if I’m sitting
at the bottom can I jump, so if y is equal to that spot. Let’s see if that works. So, jump, oops, jump. Oh, this.y. Come on, trains. Oh, yep, I can only jump
when I’m at the bottom. All right, so that works, so that’s fixed. I think I need to be able
to jump quite a bit higher. Let’s try 35. I should really use a slider or something. There we go, I think this
is gonna make the game more possible to win. There’s too many trains, too many trains! One thing that’s bothering me is the trains are going in
front of the unicorn. I know that doesn’t really matter so much, it certainly doesn’t matter, but I kind of would
prefer them to be behind, so I’m gonna move this here. I’m also gonna make the game
a little easier to play. I’m gonna reduce the number of trains, so there’s gonna be a
much lower probability of there being a train. Let’s see if I can actually play this game somewhat successfully,
even though I’m not doing the collision checking yet. (laughing) No! I think if the trains moved faster, it would actually make it easier, so let’s actually double
the speed of the trains. All right, this looks like this game is now possible to play. But I need to add collision detection. So, I’ve done this before in plenty of other coding challenges. There’s a pretty simple algorithm to just check if two rectangles are intersecting with each other or not. I can just check their x’s and y, basically all the edges,
the left, the right, the top, the bottom, against each other, but this is a nice opportunity for me to just explore a library that’s out there in the world, and this library is called p5.collide2D, and it actually has a function in it called collideRectRect, and it’ll give me a Boolean variable if I give it the x, y, width, height of one rectangle and the x, y, width, height
of another rectangle. So let’s actually just use this library. This is also a nice
excuse for me to show you that GitHub is now integrated with something called jsDelivr. This is an Open Source
content delivery network, meaning if a JavaScript
file is hosted on GitHub, I don’t have to download that file and then add it to my project, I can just link to it. So, I’m gonna go over here to GitHub. There’s lots of different ways here that I can reference a file on GitHub. I think the easiest way for
what I’m doing right now is just to reference its path, and here’s an example path, so I’m gonna go over here to index.html, I’m gonna add another script tag. I’m gonna say script src equals, I’m gonna paste that in, close script, but this is not the path that I want. I want the username, which is B-M-O-R-E-N, and then I want the path to, let’s get the minified
version of the library, and that would just be this right there in the root directory. So, now I’m just referencing that file. Let’s see if that works. This is actually not correct. I’m referencing the cdn URL, the username, but I also need the repo name, so that should be p5.collide2D slash this, so this should now work, okay, and I should be able to
use the collide function. So, I’m gonna use this collideRectRect. Let me just call this in
draw to see if that works and doesn’t give us an error. Great, no error. And so now, I can check,
when I’m going through all of the trains, if unicorn hits t, console.log game over, okay. So, console.log game over, and then I’m actually gonna say no loop, so I’m just gonna
actually stop the sketch, shut down the sketch completely, which isn’t a really thoughtful user experience design choice, but it’s what I’m gonna do for right now. And then, I just need
to add a function here called hits, and receives a train, and I can say, I can use this function, which I need this.x,
this.y, and this.r, this.r, and then I need exactly the same thing, but with that particular train. So, instead of this, I’m
checking this rectangle with this train’s rectangle, and I’m going to put this in
a variable called collide, and I’m gonna say, if,
I’m gonna return that. Actually, you know what,
I’m just returning this. Return that, so return
the true or false results of this collide function
from that library, and now let’s run the game. We’ll wait for our first train. Game over! Let’s see if I can play it now. Oh, there were so many trains a while ago. Oh, shoot! Let’s make the train a little bit smaller, and actually, let’s make
the unicorn smaller as well. Hopefully this will help. (laughing) All right, let’s draw the,
let’s debug this a little bit by drawing the box, like, very subtly. So, let’s draw a very slight rectangle. This is what we’re actually checking. There we go, woo-hoo! It helps to see the full box. Come on, trains. Spawning a train with a mouse
click would be a good idea. Okay, we lost. All right, so there’s obviously a lot of gameplay improvements that need to happen here. One is I could be more thoughtful about, and you can see how there’s
some wasted space here. I should crop the image
and the actual rectangle a little bit smaller. I could consider using a circle, I could use a more complex shape. But this is good enough for right now. Let’s actually make it, you know, I could also just click the mouse in order to start a train, that might actually help things. But let me comment out this, and what I wanna do, just before I go, before I finish it, and you’re gonna make a version of this with a score and all sorts of nicer things, and sounds, but I gotta finish this off,
I gotta finish this video. I want to control the train with my voice, so to do that, I’m gonna do this ml5.js, which has a speech commands
machine learning model built into this JavaScript library. So, I made a whole separate video about this particular pre-train
model and how it works, so I’m just going to add it
pretty quickly into this video. You can go watch the other
one for more details. But if you’re looking
for the documentation, if I click on reference
and go to soundClassifier, this is what I’m looking at doing. So, all I’m doing, first
thing I need to do is, well, actually, one thing I need to do is I need to go to get started, and I need to get a script tag to be able to reference the library. So, I wanna add the ml5
library, so I’m copying this, I’m going here to index.html, and in addition to p5.collide2D,
I’m now adding ml5, and I’m going to go here,
and I’m gonna, in preload, I’m gonna do let soundClassifier, I’m gonna create a variable. In preload, I’m gonna say soundClassifier equals ml5.soundClassifier, and the model I’m loading
is called SpeechCommands18w, because this is a model
that’s been trained to recognize 18 particular words, the digits zero through nine, up, down, left, right,
and a few other ones that are documented on this ml5 webpage. Let’s go look that up real quick. So, if I go back to soundClassifier, up, down, left, right, go, stop, yes, no. So, those are the words
it’s trained to recognize, and I actually also wanna get this probably threshold, so
I’m gonna add this in here, because I want it to be
really sure I’m saying jump, so I’m gonna make this 95. This means it’s gotta be 95% sure the confidence score that’s coming from that particular model,
and how that model was trained, and there’s a paper you can read, and I talk about that
more in the other video. Okay, so now that I have that, in setup, I can say
soundClassifier.classify. Then I can get a function. I’m just gonna call it
gotWord, so it’s got a word, gotCommand, let’s call it gotCommand. So, this is a callback function that is going to trigger
any time it gets a command. It gets an error first,
error first callbacks, and then the results. So, just say if there’s an error, console, I’m just gonna console.error the error. Otherwise, if results index zero.label. So, results is an array with
labels and confidence scores, and the labels are the words, and what I’m looking for is the word up. If that label is up, then unicorn.jump. So, this is a really quick way of me looking for a particular keyword from that library, and I’m also just gonna
console.log results[0].label, just to see if I’m
getting other words also. And we might as well log
the confidence score, just so we can see that. That might be good for debugging as well. So now that I’ve logged those two things, I’m gonna run this sketch. Up! (laughing) Up! Up! (laughing) Shoot! But you can see, it got up 95%. I’m gonna add the thing
where I click the mouse and I can give myself a train. And in fact, let’s comment
out the random trains. Also, I really should be more thoughtful about how I’m picking when
the trains should come. Like, maybe there’s a minimum
distance between them. If I’ve just added one,
can I have a longer train with other train cars? I don’t know what’s going on here. There’s a lot of narrative flaws in what’s going on here, but I’m just gonna add one myself. Up! (laughing) Up! Shoot. All right, everyone is making
the suggestion in the chat that I should change it to a circle, so that’ll actually kinda be like a round, it’ll give me a little
wiggle room along the edges and make the intersection
happen a little less often, so let’s actually go ahead and do that. So, I’m gonna go into,
where the only place where I’m doing this
collision detection is where? In the unicorn under hits. So, I’m gonna change this
to collideCircleCircle. collideCircleCircle, and circle to circle assumes ellipse mode center, so I’m gonna have to think of the circle as the center point of the object, which is not a big deal. So,
the way that I’m gonna do that, let’s make some separate variables. Let’s say x1=this.x + this.r * 0.5. So, this would be the middle. This is the middle, and then r is the diameter of the
circle, so that’s fine, and this is y. And then, x2, y2 is the train. Train.x, train.y, train.r, train.r. And so now, I want
collideCircleCircle, x1, y1, and then x2, y2. The question is, is r actually the radius or is it the diameter? Does it say? CircleDiameter,
circleDiameter, so I’m good. All right, so let’s try this, and then this should really be, oh, this is kind of unfortunate. This should now be an ellipse. Oh, you know what I can just do? I can say ellipseMode CORNER. Perfect, so let’s draw this hit circles, and under Train, let’s
do the same thing here and say ellipse, there. So this should now, we
should see, here we go. That’s what it’s gonna do. Okay, here we go! Oh, I have to click. Oh, whoa, what happened? (dinging) All right, I passed r in twice, which is very unnecessary. you just give it the
diameter, not the radius, even though I’m calling in r once. And let’s see what
happens, okay, here we go. Jump! Wait, why is my browser
really freaking out? Let’s comment out the debugging. We’re just gonna go for it now, we’re gonna play this game. Let me close this tab. Quit Chrome. We’re about to play this game! Oh, up, it’s up, I’m saying jump. (laughing) Oh, up, there we go, up! Up! Up! All right, you ready everyone? (upbeat piano music) Up! (laughing) Up! Oh, maybe, I guess I can’t use the music. Up! Up! Up! (laughing) Oh! All right, everyone, thus
ends this coding challenge. There are so many things that
need to be added to this. Number one, the narrative
just makes no sense. Why is there this unicorn standing still without any animation? The trains are coming at it. The background should be
sort of in paralax moving. So probably it should be jumping over, I should’ve just used cacti. That’s the plural of cactus, right? There’s no score, there’s no birds flying. You could add a flying asterisk. I’m gonna, when I upload this, I’m gonna include, when
this video publishes, with the code, I will include a lot of the Coding Train characters, which are designed by Jason Heglund, illustrated and designed by Jason Heglund, so I’m gonna include
a whole bunch of those if people wanna make
a version of this game that we can all play online
with speech commands. Let me try this. I’m gonna just say goodbye
by trying this one more, and yes, Alka is pointing out that speech detection API in the browser might be lower latency, but
let’s try this one more time. Up! Up! Up! Up! Up! Up! Up! Oh, okay, goodbye everyone! Thank you very much and see you later on a future coding challenge. (dinging) (upbeat techno music) (dinging)

92 Comments

  1. Oon Han

    June 18, 2019 at 2:08 pm

    No Internet Connection

  2. Q A.

    June 18, 2019 at 2:11 pm

    What the MacBook do you have?

  3. Roei Ohayon

    June 18, 2019 at 2:18 pm

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

  4. Carter04

    June 18, 2019 at 2:24 pm

    If u wanna play the dino game online go to chrome://dino

    Edit: wow thx 4 likes

  5. Shrangi Soni

    June 18, 2019 at 2:30 pm

    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

  6. SwiftPotato

    June 18, 2019 at 2:32 pm

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

  7. Matheus Azevedo Oliveira

    June 18, 2019 at 2:47 pm

    Dan, where are you LiveStreamming?! Youtube?

  8. The Coding Train

    June 18, 2019 at 2:53 pm

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

  9. Jagbir Singh

    June 18, 2019 at 2:57 pm

    Please start using python

  10. ALL IN ONE

    June 18, 2019 at 3:16 pm

    Thanks for video why are you not make unity game development series

  11. ALL IN ONE

    June 18, 2019 at 3:27 pm

    What is constrain

  12. mubeen saiyed

    June 18, 2019 at 3:41 pm

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

  13. R S C

    June 18, 2019 at 4:00 pm

    You use software?

  14. Reza Indra

    June 18, 2019 at 5:04 pm

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

  15. Борка Borka

    June 18, 2019 at 5:49 pm

    Wow, it's nice

  16. Felix boi

    June 18, 2019 at 5:53 pm

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

  17. Sem Niko Benavente Hilario

    June 18, 2019 at 6:14 pm

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

  18. твой господин

    June 18, 2019 at 6:26 pm

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

  19. John

    June 18, 2019 at 6:45 pm

    That was cool ahahaha

  20. Abhishek Tyagi

    June 18, 2019 at 6:50 pm

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

  21. Malek Farag

    June 18, 2019 at 9:11 pm

    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😅

  22. Guri Guria

    June 18, 2019 at 11:23 pm

    Hi there, nice to meet you. I have a question. I already know how to program, but i was wondering if I need some specific knowledge to follow these challenges. So, I need know something beyond programming? And I need to know a specific tool?

  23. Malivoo

    June 18, 2019 at 11:29 pm

    You're so fun and confident! I wish I had your confidence 🙂

  24. Dave Briccetti

    June 19, 2019 at 12:57 am

    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 (https://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 (https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) as I do in Stupid Nonsense Spoken Sentences at https://davebsoft.com/software/. Programming to the Web Speech API directly is much more complicated, though.

    Dan, thanks for so many great ideas!

  25. Student Engineer

    June 19, 2019 at 2:08 am

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

  26. Offero 04

    June 19, 2019 at 2:43 am

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

  27. antraxzero

    June 19, 2019 at 4:54 am

    React native tutorial!

  28. Dave Briccetti

    June 19, 2019 at 6:25 am

    I played with some ideas in 3D. There’s no collision detection. https://editor.p5js.org/dcbriccetti/sketches/fAimx4Ahp

  29. Сафар Умаров

    June 19, 2019 at 8:25 am

    It is great 💗

  30. Deniyazu Hin

    June 19, 2019 at 9:39 am

    u make coding fun srsly

  31. mekacher anis

    June 19, 2019 at 3:04 pm

    at 2X Speed he looks like those hackers in the movies

  32. Matt Brown

    June 19, 2019 at 3:29 pm

    Why don't you like to use equal checks?

  33. Anshul vairagade

    June 19, 2019 at 5:48 pm

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

  34. mcol3

    June 19, 2019 at 8:21 pm

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

  35. Swooza

    June 19, 2019 at 10:47 pm

    what coding language is this im new to this channel

  36. SenoreQueso

    June 20, 2019 at 3:06 pm

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

  37. ROSHAN PAWARA

    June 20, 2019 at 5:11 pm

    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.

  38. CSdi

    June 20, 2019 at 5:45 pm

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

  39. Talal Zulfi

    June 20, 2019 at 10:15 pm

    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?

  40. Tintu Vlogger

    June 21, 2019 at 7:37 am

    Thanks dan , whether you looked it or not. Actually I have requested for this Dino Game in coding train challenge Github page.

  41. LeoSteam ï

    June 21, 2019 at 10:59 am

    Awesome tutorial! i made a game with this: https://editor.p5js.org/Cile_ed/sketches/VTuDI0bIo (a,d to move and space to shoot)

  42. Abdullah - BossMAB

    June 21, 2019 at 12:46 pm

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

  43. tjblackman08

    June 21, 2019 at 2:17 pm

    Why are there 10 downvotes? wtf?

  44. Your Teacher

    June 21, 2019 at 3:20 pm

    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*).

  45. Buddhika Bandara

    June 22, 2019 at 2:40 am

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

  46. Kuro Neko

    June 23, 2019 at 9:20 am

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

  47. Teri Beckham

    June 23, 2019 at 1:56 pm

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

  48. Inspiring Irisje

    June 24, 2019 at 5:18 am

    Haha when the block flew away 😂😂😂😂

  49. justin pony

    June 24, 2019 at 4:38 pm

    What coding language is this?

  50. • DESTROYR •

    June 25, 2019 at 3:27 pm

    what is he talking about?

  51. Revanth Kumar

    June 26, 2019 at 3:11 am

    Can i get ur contact sir like mail id

  52. sathish kumar

    June 26, 2019 at 12:31 pm

    I wanna be like you

    Will you guide

  53. Stefan

    June 27, 2019 at 8:38 am

    i love the p5 editor

  54. TechniCollins

    June 27, 2019 at 9:44 am

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

  55. Evandro Pastor

    June 27, 2019 at 9:27 pm

    So funny!

  56. Rizki Nur Ramdani

    June 29, 2019 at 3:09 am

    Chanel ginian yang bahasa indo ada gk sih?

  57. Chi Dung Nguyen Duy

    June 30, 2019 at 4:38 am

    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.

  58. JBV Plays

    June 30, 2019 at 1:36 pm

    What programming language are you using pls help

  59. Jos Gielen

    July 2, 2019 at 8:12 am

    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

  60. Villa Zenpai

    July 2, 2019 at 4:30 pm

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

  61. jay rewerts

    July 3, 2019 at 2:41 pm

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

  62. Maple Rock

    July 4, 2019 at 3:07 am

    gotta love that manic dad energy

  63. MoziKun

    July 4, 2019 at 5:57 am

    i love this video

  64. Vinayak Thakur

    July 5, 2019 at 3:30 pm

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

  65. 1024

    July 6, 2019 at 11:57 am

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

  66. Rutvik Rana

    July 7, 2019 at 1:37 pm

    Hey everyone…. I am not a programmer but l love coding. I have recently learnt python and made a little game in it. If you want to see:

    https://youtu.be/PAD4duV9-kQ

  67. Vorname Nachname

    July 13, 2019 at 10:09 pm

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

  68. Rodrigo Maulen

    July 21, 2019 at 5:33 am

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

  69. Shah Alam

    July 28, 2019 at 6:43 am

    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

  70. johnnie gilkerson

    August 11, 2019 at 1:02 pm

    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?

  71. Jousef Rawas

    August 12, 2019 at 4:41 am

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

  72. harutya 07

    August 14, 2019 at 11:26 am

    This dude can create everything

  73. Don Fritz

    August 14, 2019 at 8:04 pm

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

  74. HAFIZ Yusuf

    August 15, 2019 at 7:20 am

    Plisaa Indonesia subtitle

  75. Deependra rout

    August 16, 2019 at 7:16 am

    Awesome it's just a huge favor to me

  76. crn

    August 17, 2019 at 10:41 pm

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

  77. quillaja

    August 20, 2019 at 2:35 am

    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.

  78. Madona Chkoidze

    August 24, 2019 at 8:27 am

    you can make better games in unity with coding

  79. damijan kores

    August 31, 2019 at 1:46 pm

    https://editor.p5js.org/cryptopimp/sketches/x4m5cecFk Thank you verry much for teaching us. We learning to do our game from scratch. Please help if anyone have any idea and knowledge to help us? Thank you. https://crptopimp.fun

  80. Fuzzy D Pozzy

    September 2, 2019 at 10:45 am

    man do c# and imma subscribe 😛

  81. Charge Me . 20M views

    September 2, 2019 at 1:52 pm

    This is finished project.

  82. NightScream MV

    September 3, 2019 at 2:49 am

    Mate which platform

  83. Khalid sakka

    September 3, 2019 at 10:16 pm

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

  84. Konstantin Bode

    September 9, 2019 at 12:45 am

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

  85. ROMIT RAJPUT

    September 10, 2019 at 3:36 pm

    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 😂

  86. 27Animation Bdg

    September 11, 2019 at 5:13 pm

    This dude will be legend someday

  87. SumiTech

    September 13, 2019 at 5:01 pm

    Which language it is

  88. Nub Cops

    September 13, 2019 at 11:35 pm

    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

  89. Shreepati Behera

    September 20, 2019 at 12:14 pm

    Good explanation for beginners

  90. jonatan souza

    September 21, 2019 at 3:02 am

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

  91. Quân Hoàng

    October 5, 2019 at 3:12 am

    Thank you for making great series video for teaching people.
    I am a newbie on P5.js
    After 2 weeks following your many video. I make Kangman game. Get inspired by your game.
    Play here: https://hoangquan.github.io/games/kangman

    Thank you. I want too make js game but with physical.
    Anyone has any suggest?

Leave a Reply