Coding Challenge

[@donkeysausages]

You could also write a function that prevents the food from spawning inside the snake

[@TheCodingTrain]

Oh, good point!

[@KnakuanaRka]

The Coding Train Yeah, either just reroll the random point if it’s inside the snake, or write a list of valid points and pick one at random. Heck, use both, and switch from the first to the second once the snake gets too long (although I doubt anyone will be able to play long enough for the latter to be better).

[@MrCmon113]

@@KnakuanaRka Plenty of people do. The goal is to fill the screen with snake.

[@ai_zj]

give the snake a break

[@Nurutomo]

spawnFood() while (!this.tail.include(food)) { deleteFood() spawnFood() }

[@oliviaschneider7504]

"don't at me. somebody taught me that who's younger than me." lol this was by far the most entertaining js tutorial I've seen!! thank you!!

[@luispato9335]

i spent the video waiting for the moment you would start using redux!!! :P

[@TheCodingTrain]

😂😭

[@TylerDunphy]

I used your last coding challenge to make my own version, and I used an options array to make sure food spawned on available spaces :)

[@lizabeti3457]

Well I learnt my answer on the question “Where do you think we should start learning coding” hihi

[@ericrovell1970]

Thanks a lot for remaking this tutorial! It was the first "The Coding Challenge" I have completed from your series. After that I have been learning a lot (just two months). This time my code looks much more better, it is so pleasurable to revisit some of your code from time to time and see the progress you have made. For anyone who do this game: try to use getter in your snake class for getting the latest element in your body array: class Snake { constructor() { this.body = [createVector()]; // initializing head as the 1st element this.direction = createVector(0, 0); } get head() { return this.body[this.body.length - 1]; } } after that when you need the head => just call it like snake.head, no ( ) is needed. This will make your code compact.

[@rokerola6461]

i want learn to..where di you learn by yourself or?

[@CedLePingouin]

The p5js online editor is a nice idea. Even though it lacks some IDE features (such as code autocompletion), the direct integration of the canvas next to the editor, and especially the ability to share the result, are worth it.

[@polar111111]

Next snake needs two additions: preventing food to spawn on top of it and no possibilty to backtrack i.e. if you're going left pressing right arrow does nothing instead of killing you because you ran into yourself

[@sebastiansoto4168]

So sad you cant like a video more than once. Thanks for everything Dan.

[@parsonsmarcus]

I love making prototypes and one handy (yet simple) prototype I made up is the end() function: Array.prototype.end = Array.prototype.end || function () { return this[this.length - 1]; } And then you can call it with an array, let's say "this.body" in Dan's video, calling "this.body.end().x" will give you back the last element's x, which is the end of the array, instead of having to type "this.body[this.body.length -1].x" It is a little more handy than having to call the array multiple times in a statement. Saves some elbow grease lol

[@MuzicFreakNumberOne]

Still the best coding channel on youtube. So much positive energy and humor =)))

[@jeroenj7494]

You make coding fun :)

[@frederickgivens9261]

thanks to you, p5, weed, I can code pretty masterfully now

[@ARatQuiRit]

Can you make half life 3 ?

[@gcpezzi]

Hahahaha... best comment of today.

[@ViratKohli-jj3wj]

@EternalCoder half r/wooosh

[@tarloktarlok]

Half Life can be created only with Unity or UE4. It's impossible to make it with P5JS. Kinda reminds me of your MOM!

[@OG_CK2018]

@@tarloktarlok he is joking he knows that

[@sefdesef9969]

@@tarloktarlok half life was made in source not unity or UE4

[@elithecoder]

You should do a coding challenge where the program generates Hilbert Curve

[@chanasiegel2706]

Amazing. As usual.

[@hakimhamaili]

avengers: we need another name for our movie?? Coding train: 28:00 that's it !

[@nostalgia5031]

Nice.

[@TheLshallo]

Can you try to automate the game with a neural network?

[@Kaixo]

I have done that, is actually pretty simple when you're using a genetic algorithm!

[@TheCodingTrain]

Yes, I would like to do this! (see my flappy bird neural network example as a model.)

[@gilshahar7]

yes please! i would love to see a machine learning episode on this game!

[@TheLshallo]

Yes I've seen that. Great stuff!

[@real1cytv]

@@TheCodingTrain a machine learning approach to snake is really inefficient and most times doesn't work. See CodeBullet's video for reference...

[@cypictronic]

You are The Best!!

[@zoladkow]

this is an excellent example why talking and thinking at the same time is so difficult 🤷

[@thanosbouzinekis3812]

"aw i forgot how to do this already" 8:04 i died

[@Yung_yayy]

THANK YOU SO MUCH BROOO

[@HamzaArslan]

I love your videos !

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@blackbird9854]

It's not really necessary but you should use a getter for snake's head, you repeat that code to get head way too much ;p (also .slice(-1) would return last element too)

[@EitanPeles]

yep, slice(-1) returns the last element without removing it from the array.

[@AlexDevero]

Thank you for this great tutorial Dan. How could one take this tutorial implement machine learning -> let the snake learn to avoid obstacles, and itself, and find food?

[@TheCodingTrain]

Coming soon!

[@AlexDevero]

Thank you very much Dan!

[@NicolaiWeitkemper]

D.shift()Man 24:34

[@sleep3017]

14:25 FoolLocation 😂😂😂😂😂😂

[@morphman86]

You CAN use a switch statement for the controls, but you really shouldn't. It's OK for smaller projects like this, but it's really easy to make it a habit, and the switch is a LOT less efficient to execute than a chained if statement. This is mostly due to a switch checking every possible outcome every time, while an if will skip an instruction that fails a check, meaning every statement in the rest of that chain will be skipped as well, saving you a TON of checks in the long run. ES6 is especially good at this, as if you have AND statements, if any check to the left of the AND fails, it won't even try the right, it'll break and move on. Imagine checking keyboard inputs for diagonal movements in a 30 frames per second game. That's 9 possible combinations (all button presses plus no button press) that will be checked 30 times per second. That's 270 checks per second in a switch, but only 8 in a chained if (because you don't need a check for the default in an if statement). Now add a shoot button or two, an action button, a jump button, a slide button, a few item buttons and some other interactions and you can see how quickly this adds up to a very resource heavy task for the code engine. And that's just the controls!

[@TheCodingTrain]

Thanks for the feedback!

[@audreymeyer5616]

I cannot control my snake and I followed your code carefully. I will get creative later, I'm just getting the basics first.

[@audreymeyer5616]

oh! dude I figured it out. There were these curly brackets that I thought didn't belong there and I was right. Wooh!!! now this is my moment.

[@thelavagod]

Him: *advanced coding Me: Print('hello world');

[@viis]

Also the godly speed at which he types 0 . 0

[@micky2be]

There is no advance coding here. Just basic

[@Tier15]

Coding Challenge: Make an Etch-A-Sketch Make sure to include a "Shake" Function to lighten all drawn material but not delete it this will allow for Shading. It would allow users to make legit art and probably stick with 1 pixel scale :)

[@TheCodingTrain]

Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues

[@pro-x2215]

When you code I feel that you are at mu home and teaching me for fun without taking any fees just like free coaching or free tuitions

[@pro-x2215]

Hey coding master i will tell you an action game to be code you can use any editor i don't mind it is free fire you can make it or make a similar action game doesn't matter but i will think you will try once to code.It doesn't matter that I am from other country or religion but at any condition I am your friend.Your coding student Adarsh from India

[@WokeTechFB]

Hi sir Dan, You're my inspiration. Thank you sharing your knowledge.

[@luismiguelgallegogomez8000]

That end game was too bloody for me

[@mrmeowbeats7842]

you should also make the snake not able to go backwards (for example if you're going right you should only be able to go up or down, not left.)

[@alisalman8448]

You teach so clearly.Could you upload a java course on any teaching website?Would be really helpfull to so many people.

[@4mathieuj]

Do you plan on using the Web Editor in all future p5 vids? Cause i think Atom is more comfortable to look at as a viewer

[@woutermissler5371]

You're totally right

[@taba1950]

The new workflow is VSCode

[@TheCodingTrain]

I haven't figured this out yet but my idea is to use all the things and show a variety. Thanks for the feedback, helpful for me to think about.

[@emilemil1]

You can open the web editor as a web app, which will hide the Chrome navigation bar at the top, giving the code more space and making the whole thing look more like regular p5.js. You do this by starting Chrome with the argument --app=editor.p5js.org (for example through a shortcut). You could also hide the console when it's not being used and resize the preview part so it's not taking up more space than necessary. Smaller details but I think it adds up.

[@raghavpandit6254]

34:00 "A bug or a feature?"

[@Scopie]

Can you do a video showing how to add a scoreboard? I cant find any tutorials on this...

[@Frederic_Chopin.]

"Why was i doing this again?" lmao

[@grainfrizz]

I would've created a class for the food and that the snake has a method eat(Food food){} and then just add the food to the array body of the snake

[@angladephil]

06:57 : didn't you say u would flip code and output for better visibility ? Thx for all your great videos!

[@krishnakumar-hm9ce]

i m new coder of 10 year old and sorry for watching this video very late . but i love your coding technique.

[@codecast8713]

You did the whole snake game again and still not fixed that going backwards problem. I don't know how I feel about that. XD

[@sh0ker]

Can someone help me and tell me how exactly the update function work? I don't really understand how all the body parts get updated and i've followed it frame by frame. There is must be something behind the scene with the shift function. Thanks

[@double__down]

the happy sound (2:11) sounded like the start of the Russian anthem, I like it

[@Kitulous]

not at all.

[@double__down]

kzbin.info/www/bejne/d4Ckpa1urbyAZtk

[@kupermen5567]

I don't want to know more about p5.js, I want to know more about how you do those crazy sound effects :D

[@sleep3017]

27:54 Please don't you're a legend!!

[@brainz80]

@shiffman you could define a getter for the head eg. like this: get head () [ return this.body[this.body.length - 1]; } Then you could replace all your other this.body[this.body.length - 1] calls with just this.head ;)

[@justsmile3172]

I’ve currently been learning JS!

[@TheCodingTrain]

Great! How is it going?

[@justsmile3172]

The Coding Train it’s going good! I keep forgetting stuff though 😂 so I write stuff that I forget down and before I go to the new stuff I re learn the stuff I forgot

[@zethlanghoff7632]

Can you make a part 2 about point scoring and a endgame text on screen maybe? and if you want to add textures (if that is possible) that you drew yourself, how is that possible?

[@eboubaker3722]

27:22 : If you declared some variable in the constructor to be the head it would be better than typing *this.body[this.body.length-1]* everytime like: this.head = this.body[this.body.length-1]; and then use *this.head.x* or *this.head.y* or whatever you want from it ... i think this would be better if it works ?

[@martijnvankekem]

This wouldn't work, because every time your tail increases in size, your head element changes, but the head variable would still have the old head saved.

[@eboubaker3722]

humm yeah ... i tested it and i didn't knew why :p

[@CodeSketched]

1 question, why was there a gap between the body parts of the snake the last time and why does the body look like a single entity this time around? Can anyone please explain?

[@sleep3017]

12:48 Left food😂😂

[@Fotosinteze69]

Can you do the same in Java or Python. Which one do you prefer and why?

[@Gabriel-uv7ni]

Why don't you keep the head to index 0 and then add the body to 1, 2, etc...

[@codeforest9027]

you could have added some resistance (if the last key pressed was right, we can't press left, only up or down and so on)

[@frederickgivens9261]

don't you want to unshift the section and splice the last one at the location defined by the vector?

[@nomadcrossfire]

You should do a video on voronoi diagrams

[@sudaravanm379]

He predicted Endgame

[@melzarts]

I'm 4:20 into the video but keep getting the error "Cannot find a class or type named “let” "

[@TheLshallo]

You probably have a line that's like "let let varName;"

[@jordanfry2899]

Finally, after so much searching and being confused, this seems to have a good way to scale up graphics. Does anyone know if this would be ideal for making a game with retro-style art with big pixels? I'm really new to professional languages.

[@redhen]

Great idea. Yes -- you could either code your own rendering system in p5 to simulate retro pixels, or, a simpler method, just use images of pixel art you already like. :)

[@jordanfry2899]

@@redhen The issue is making pixel art move across the screen and being placed in different locations in a way that the distance between things aren't/can't be divided into any more or less pixels than the retro pixel size. For example, sprites made up of 4 real pixels per retro pixel shouldn't be able to be any distance from eachother that isn't a multiple of 4. Always struggled thinking of an elegant system for implementing this. It's confusing because there are so many pixel-art style games yet I can't find consistent information online about how to achieve it. The best solution I thought up was making the game on a small canvas where each retro pixel is the same as a real pixel, then scaling the entire canvas up by a whole number, like this video seems to demonstrate. I might be talking nonsense, I'm completely new to real programming languages. Sorry for the wall of text lol I just wanted to express my issue to someone.

[@redhen]

@@jordanfry2899 Really clear. This would be a great issue for Dan to treat in a video. Really interesting -- and not something he's done before, I believe. I'll look into it myself too, based on what you've said; thanks for the info, buddy.

[@TheCodingTrain]

Yes, this would be great to explore!

[@1369Samil]

pop() is deliting and returning the last element of an array

[@Bot28111]

its not letting me create a snake.js file it says it can not contain extension meaning i can't use .js

[@ac2italy]

you could change the shape of the snake, differentiate the head and the tail with different shapes/images...

[@vdygdb]

a bit late to the party but I have a question. I want to use this code for a game, but need to change a few things. I've changed most of them but I need help on one thing. Upon pressing each arrow key, I want it to only move once, not continuously and when the key is held, it moves continuously until released

[@TheCodingTrain]

Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.

[@Lep_19]

Hey Vsauce, Michael here! 27:54 ?

[@tapitlabs5495]

Hi is there a way to use p5.js in a react native app? If its possible, could you please show us an example?

[@Voltaire321]

Hey Daniel, how about doing a simple version of a falling-sand game (there's a wikipedia article that describes what they are.) Note that this is different from sandpiles, which you've already done.

[@TheCodingTrain]

Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues

[@Nurutomo]

This is better!

[@eboubaker3722]

30:56 *eeyaaaaa* XD what you was gonna say ?

[@goddersgaming2186]

You could have done it much quicker if you used an online tutorial, I like the Coding Train's tutorial most. Love you Dan, keep it up!

[@rlasc84]

You can make a flag that blocks xdir when the snake moves on x axis and viceversa with ydir

[@nikhileshmarella2687]

what is the use of shift in update function what is happening there can anyone explain

[@roshanpawara8717]

When is your new course on open source coming online?

[@TheCodingTrain]

Hi, this course is more of a "seminar" style class so there's not a lot of video stuff I'll be making for it. But when there is content that makes sense in video I will post!

[@roshanpawara8717]

@@TheCodingTrain Cool!

[@frederickgivens9261]

the code is not found page on the site

[@WokeTechFB]

Hi sir, Can you do a Closest Pair Algorithm Challenge?

[@mrfreezerule]

Make a Paper.io 2 coding Challenge Or in multiple videos. It would be fantastic

[@yashchaudhari3113]

Hey Daniel, when I write a while loop in the p5.js web editor, it crashes.

[@Dman27315]

i couldnt seem to find your shirt anywhere, can you tell me please where you got it from? c:

[@TheCodingTrain]

Here you go! taeyoonchoi.com/products/care-shirt/

[@Dman27315]

thank you c:

[@Scopie]

How can I make a "game over text"

[@chronotium3733]

Is this javascript or another type of javascript cuz I don't feel like it's javascript.

[@Morszczux]

Daniel ShiftMan ;)

[@firephoenix5556]

11:15 how do you spell resolution

[@goldenfire6421]

Rezzolushin!

[@MattRose30000]

I can't see the code in the first link. Is it also on github or somewhere else?

[@durchschnittlich]

And I thought he'd actually use Redux...

[@TheCodingTrain]

Ooops.

[@juanluisclaure6485]

yeaa mee too, but you always are a good company :) nice to watch to the end

[@luispato9702]

yeah, i also thought that!!! :P

[@yahya245]

LMAO YEAH

[@dd-oe8zv]

bamboozled

[@the9tailsupersaiyan]

When are you gonna do python?

[@mr_hexo]

I'm 3 years too late but what the heck! You should of only had 1 function to move (the update function), but have a boolean value parameter shows if the head is colliding with the food. if not eating food, then body.shift() if eating food, don't shift. All this does is just deletes the tail if your not eating the food (moving), and keeps the tail if you are eating (growing).

[@jantheil9239]

Will this new background be available as download?

[@TheCodingTrain]

Here you go! github.com/CodingTrain/website/tree/master/assets/wallpaper

[@jantheil9239]

@@TheCodingTrain thanks

[@samuelgunter]

How do that zoom in thing?

[@ShranjaniShukla]

I am 6th!😂😂😂(you get the joke). Why don't you make a generative algorithm ai for this game. This might be one of the easy ones.

[@joshk2181]

How do I do a lava lamp in javascript - webgl or d3 or anything?

[@shubhankurkumar]

28:03 - Coincidence!!! I think not!!!!

[@sps014]

Lol it contains some serious spoilers. :)

[@beaverjoe9171]

Hey Dan, what about Ps??

[@Twitchi]

so.. why is a switch statement so much better than if? EDIT: I get that it is probably more efficient, but why?

[@qcdiamond8292]

What do you study/teach at school?

[@TheCodingTrain]

I teach at itp.nyu.edu!

[@juangalvan8727]

I almost unsubscribe, but i love this video. Great work!!

[@MijeshDeuja]

Hey Dan where can I get that wallpaper?

[@TheCodingTrain]

github.com/CodingTrain/website/tree/master/assets/wallpaper

[@MijeshDeuja]

@@TheCodingTrain Thanks 🤗

[@Codeonces]

Why #Redux in the title ?