Coding Challenge 180: Falling Sand

[@MagicalMongoose]

I appreciate you showing your mistakes and your process for fixing errors

[@peek2much3]

Literally NONE does it better in YT. The modern iteration of Bob Ross for coding and teaching. Absolutely engaging let alone entertaining.

[@YourLocalGP8]

If we are now getting weekly/biweekly coding challenges, I will be so happy

[@TheCodingTrain]

biweekly is my goal!

[@scott1285]

Same ❤

[@garethwilliams2926]

@@TheCodingTrain2 a week? 👀😉

[@breakplays]

​@@garethwilliams2926or 1 in every 2 weeks? 👀

[@thebeastisback1996]

❤❤❤

[@Kazner0h]

I know you mentioned that this was unplanned, but it was super nice to watch you have the same "Wait, why isn't that working???" moments that I do 😂

[@TheCodingTrain]

I'm so happy to hear this feedback!

[@lukeb0030]

i mainly get "wait, it is working??" moments

[@divyankmalhan2154]

@@lukeb0030 Ikr! or when you are stuck somewhere and your brain is like what if I do this without knowing the logic behind it.

[@vektracaslermd743]

As an aspiring pythonista, I don't know much about JS... but you are still an absolute gem to watch. Absolutely the Bob Ross of coding. Stay awesome!

[@petervh1301]

If you are experienced with Python the only confusing code should be the for loop syntax.

[@f.a.383]

"the Bob Ross of coding" couldn't have said it better myself

[@Muthwill]

I've been programming for quite a few years now but never seemed to be able to have beautiful code. This was really helpful to watch, seeing your entire process of creating, refactoring and cleaning up and finally adding the comments

[@iogamesplayer]

Very cool! I loved those flash games about placing stuff, and setting everything on fire with those "falling pixels".

[@pie9994]

Thanks for bringing back coding challenges. I find all the topics you cover very interesting.

[@keppycs]

The animations are such a nice touch when trying to comprehend what you're explaining. You and the team are doing such an amazing job!

[@a1000joys]

Awesome. I'm so happy that Coding Challenge series still continues strong. I've been reading about sand simulators for the past few days and I thought this is an old video of yours that KZbin is suggesting. What a timing!

[@whirlwind2831]

Frequent coding challenges!! Couldn't have had any better start with 2024

[@daylen577]

You should have started your checking array from the bottom, that would have solved the sand separating like it does and instead just allow everything to drop as one big blob as it does IRL. Would probably not look as satisfying, but it would be a more accurate simulation as a real grain of sand does not wait for an already-falling grain of sand below it to be out of the way, it would instead add its own weight to the weight of the one below.

[@Astervista]

Checking the array from the bottom would not change anything if the next frame is calculated only looking at the previous state. To solve that, you would have to account for a pile in air so that it all falls simultaneously. The striping is caused by grains in the air moving left and right because they have the cell below that’s occupied but not the cell below right or below left, while in the air that would not happen

[@TheCodingTrain]

I've been thinking so much about this! I'm hoping to address these kinds of improvements on a future live stream.

[@KylaraKuhn]

@@Astervista thing is.. you don't have to calculate from a previous state. Adjust the bottom in the present state and then there is a gap on the place it previously was so you can put the grain on top of that immediately down too. Then if you calculate an entire row that way, it is way easier to calculate left and right on the next row above it too. That way you only need to have a single row in a previous state (or otherwise the grain of sand will always favour filling up the first new free position where in reality the next grain of sand might just as well go there.

[@Astervista]

@@KylaraKuhn yes, of course in this simulation it would not have made a difference, because the fall is in one direction. In principle though you could have wind or something else and cannot rely on the fact that modifying the array in place does not introduce weird feedbacks

[@Ledenses]

i think you can fix this while looking only at previous state still - check *all* tiles below and if any are 0, move the sand down.

[@mistakd3771]

my one small contribution: to make the sand look more grainy you can add a random number to the hue like this: grid[col][row] = hueValue + random(-13, 13);

[@Absalon_melon]

I love your content, whenever I felt coding as something tiresome and stressful looking at your videos made me fall in love with coding again, thanks!

[@iJackJP]

Dude there is a optical ilusion when you create the grid: 4:23, if you stop it and watch the grid. It seems to have diagonal black lines crossing the white squares vertices. The more you wathc the grid it get easier to watch whose diagonal lines.

[@wlockuz4467]

Just adding the colour made its so beautiful.

[@therockstar17]

Your coding challenges are thoroughly enjoyable! I for one, with a mind that can barely stop working on a problem until it’s solved, watching you go through the process and laughing at yourself along the way is captivating. It’s nice to know this is exactly how I think through my own personal projects, not being anywhere near a professional at all. Starting from absolute scratch, deciding how to approach a problem by breaking it up into parts and then adding little bits at a time until it’s a complete program is satisfying and delightful

[@jabrikolo]

I loved this! I tried doing this a few years ago and I just love how you explained it. It's also very cool to add more elements like water and stone

[@OddlingCore]

Was trying to find motivation to do my coding homework today and got the KZbin notification for this video got incredibly excited checked to make sure that this is the same coding language that I’m learning in my class, and I gasped and yelled “Yesssssssssss”, aloud in glee!

[@AustroPower]

Dan all your teaching and tuts are great, one can see you are a very passionate/dedicated man! 🙏👍💯

[@LuisCurrupaki]

Maaaan, this video was greatly inspirational! Your exictement about your coding is heartwarming! It really shows you're having fun, and kept me peeled to the reasoning with you. Marvelous job! Thanks for bringing us joy!

[@JackAllpikeMusic]

I'd love to see this expanded with the more complex behaviour of sand shooting out to the sides further based on it's velocity, creating less perfect-pyramid like shapes.

[@alexandermcclure6185]

I just encountered this series (this is my first episode that I watched) and I am already LOVING IT! I have been wanting to do a "falling sand" kind of project at some point (and give it custom rules!) so that everything would be so much easier! You just earned a subscriber :)

[@Sasham4]

Thanks!

[@R74n]

Thank you for bringing more attention to falling-sand games! We're developing a browser-based one focused on chemistry and science education!! 💙

[@justin.campbell]

Hello! I remember visiting your site a couple years ago! Absolutely love it, beautifully simple design. I just checked out "Sandboxels", very fun to mess around with.

[@NiceHyper01]

I was going to check out your website, but then realized I already had. Sandboxels is really fun!

[@sacul_6]

You were what I thought of when I saw this video!

[@minijimi]

Fantastic job Dan!

[@mattshu]

you are the very reason javascript code is even slightly legible to my eyes. thank you so much!

[@Soundole]

This was great to follow along - I love how you show your thought process when it comes to debugging!

[@endunry]

I stopped watching yt and thus also stopped watching your vids in the past years. But i just saw that you still create These amazing vids. You probably wont see this. But your videos where the first contact i had to computer science and it got me hooked on. Since the starfield challenge i Watched and Code every Challenge you posted and learned to Code. Because of this Joy now have a finished cs degree and a job as a software Developer. And i think withou your Videos and without the joy and passion you put into educating others i wont be where i am today... Im really grateful of what you do and i hope that you inspire a lot of people like me in the future. Thank you sir

[@TheCodingTrain]

This makes me so happy to hear thank you for sharing!

[@alexsandergutierrezgoncalves]

very cool, p5 js many possibilities, one thing I always do when I draw the value of a 1D matrix on the canvas that is 2D is to convert the 1D index of the matrix to 2D coordinates like this: let x = i % cols; let y = floor(i / cols) % rows; so I can use a 1D array and just a single for loop.

[@GiovanniCamellini]

This is the simplified version of what happens in the mobile videogame industry nowadays but without super expensive frameworks driven by even more expensive managers.

[@RicoGalassi]

This used to be my absolute favorite game...thanks Dan!!!!

[@nospecificity7690]

Great job I think the way you talk through debugging and show the troubleshooting process is incredible and will help lots of people learn!

[@orbyfied]

holy shit ive been waiting for this without even knowing it pls continue on this project

[@shanehebert396]

Some years ago, I wrote something similar, but more connected with our current time of year (here in the USA) -- a snowfall simulation. Instead of having a single drop point, a (parameter controlled) number of 'snowflakes' were spawned at random points on the topmost line of pixels and then 'drifted' down (didn't go straight down, they had a chance to perturb the path to the left or right each time). Each had a random velocity (also parameterized for max). I also put a parameter for wind so all the snowflakes would tend to drift with the wind. All the parameters were sliders so they could be changed while it was running. Snow would accumulate at the bottom and would fall down to the localize minimum point to the left or right. It was kind of fun to write and watch.

[@petervh1301]

Thats a nice challenge! Ill be building that tomorrow!

[@BotaTamas85]

I loved the 'popcorn guy', especially when it dropped you a popcorn. 😂 I like when someone can practise self-criticism in a funny way 😊

[@TymexComputing]

8:30 ;)

[@sirflimflam]

Man I wish youtube was a thing when I was a kid. Channels like this would have made self learning a lot easier than it was.

[@mudkip9894]

This guy is a great teacher. I got my current programming mindset from watching these videos and that has landed me working on my largest project so far, Open world Minesweeper in Minecraft. I might even try my hand at making a video on it, which is unfortunately late in because I already have a basis on it and am adding more feature to flesh it out some. Quick tip for those curious about Processing. It is a library and compiler that allows you to learn programming without major setup. I never touched the JavaScript, but the Java side is just as brilliant. What does this have to do with Minecraft? Both use Java as a base. I might explain more sometime, but you might as well try processing since it is free.

[@gauravrawat7175]

Never stop these coding challenges

[@imjojo9265]

Love that it wasn’t planned, got to see the actual thought process on how to work things out

[@jermz79]

The two projects I used to always do when learning graphics programming in different languages (Rapid Euphoria was fun, wonder if that's still around) were John Conway's life and a falling sand/snow/particle simulator with a graphic mask, like a cabin or something, for the sand to roll off of.

[@AdamRidley11]

To eliminate the striping you could loop from the bottom up, you need the lowest piece of sand to move out of the way so that sand above it can fall in the same update call.

[@flameofthephoenix8395]

Yes! And this would also eliminate the need for a next frame grid as the blocks would always be visited only once even if they fall.

[@Zac8668]

Amazing video! Seeing you code is really entertaining

[@tjspeirs75]

this was awesome! can't believe you got something this sophisticated in, what, less than 150 lines of code

[@jasondunken]

another great video dan! thanks as always! when you are randomly choosing to move a pixel left or right, you are allowing pixels to merge with each other. if two pixels are next to each other, one has a pixel under it and the other doesn't, both pixels could end up in the same position after the update. this happens not only when the pixels hit the bottom, but also when you are spawning them with the mouse, that's why the spawned pixels are striped. the rules should check if it can fall right or left or one at random, but only if the pixels underneath aren't also falling.

[@pete_thompson]

One smal timesaver - instead of a loop to fill the array with zeros, you can set it when you create it - arr[i] = new Array(rows).fill(0). The fill(0) will put a zero in every element. Great videos!!

[@TrosindelPascua-up6tm]

Your the reason i started programming, i like your personality and just listening to you makes me calm down. I hope you have a good life. ❤❤❤

[@anon_y_mousse]

You should make this into a game. You're a gardener with a water bucket trying to get every plant. The water absorbs in over time and you have to make sure nothing goes dry. Some plants could act like sponges and soak up a lot, while others would barely sip. To fit the color scheme, the plants could grow Skittles and you could be required to color coordinate the water you use on each plant to correctly handle each "flavor".

[@Lealwbs]

I recently discovered this channel and I think it's amazing!

[@replays4026]

Wow, impressive! I remember, when I used to do a random things on thoughts, but I don't do It now. Your video inspires me to back to these great days and make beautiful things on canvas

[@kudorgyozo]

You make programming fun again with every coding challenge!

[@flameofthephoenix8395]

5:30 Just before anything happens I'd like to point out that if you iterate on the grid as you traced your finger you'd get weird movement as each block of sand would look for the next to be air then when it sees that it is in fact not air it stays still but the last block will see air and so will move resulting in them separating, additionally, the last sand block due to its movement will fall all the way to the bottom in just one frame.

[@flameofthephoenix8395]

5:48 Ah, well you already fixed part of that problem; however, you'd still get them separating out as a result of only the last block moving.

[@flameofthephoenix8395]

15:20 Ah! I bet you're getting close to the problem as I described it. Indeed! Now, I wait in bated breath for you to fix this. Chop, chop!

[@jaitjacob]

Adding hue and seeing those rainbow layers was so much fun, I gonna make a version of mine taking inspiration from you. Thank you

[@beterbarker]

Loved the video! I've mostly done business programming, so I've never had to do anything like this. I'm definitely more interested in writing simulations in code. Comments in the code definitely made me wince.

[@breakplays]

9:40 he's definitely cooking

[@kieran.stafford]

Dan, it's always a treat to see a new video from the Shiffmeister and Mrs Pickle. Loving the new production values although I'm glad you keep the screw ups and comedy. Makes it so entertaining and human in a domain that can be very ego driven. Just occurred to me - a great name for a cop show on TV that - The Shiffmeister and Mrs Pickle :)

[@andreykanishchev1724]

Great work, thanks! Noticed that the amount of falling sand is greater than the amount of sand on the ground. This is due to the fact that there may be two granules in one place. It worth to add analysis of the grains on the left and right on same level, so that a grain of sand that has a void underneath will fall first compared to a grain of sand that should hit the same pixel on the left or right.

[@mews75]

I fucking love your channel, you basically got me back into coding back in 2020 and now I'm going to college for computer science

[@zandrew8648]

great for you! i had decided to major in comp sci before i started watching Coding Train, but these videos do open up my eyes to some of the fun problem solving bits I hadn't thought about for some scenarios. very fun!

[@abdessadekelaasri8862]

It's actually great that this video was unplanned, It is better to watch you go throught the proccesing of fixing the errors. thank you! do more of there :)

[@unoriginalpun]

Line 111 When you use the random to decide if the sand will fall left or right you negate that by making the belowB subtract dir. (line 117) It would be cool to add in a topple function similar to the sand piles program you made a long time ago. So that once a pile reaches a certain instability it topples left and right.

[@amirThePiper]

Man, I was looking for a movie or a blooper to watch. But damn, this is interesting and fun ❤🙏

[@metalheadmaniac8686]

You can make it even more efficient by not having the computer go through the entire 2D array to find sand; instead, you can have an array that has the x positions of every piece of sand and another array that has the y positions of every piece of sand and use the numbers stored in those arrays to find a piece of sand that is in the grid. What if the grid was 1 million by 1 million and you had the computer go through the entire 2D array to find one piece of sand? I would not be surprised if the computer started the robot uprising just to get you.

[@Baekstrom]

You also left another exercise for the viewers: Remove the stripey pattern. It's easy to realize that it happens because the sand grains are processed one after the other, and if one grain has another grain under it, it won't be moved this pass, even though the grain under it should itself me moved and leave room for the one above it. It is also easy to come up with the idea that maybe if you process the grid from the bottom and up, then you could maybe "fix" that issue. However, that solution is not very satisfying, because it depends on the knowledge that sand always falls down. What if you had a mix of particles with different properties, like sand and hot "air" that rises?

[@flameofthephoenix8395]

15:02 You could probably keep the grid lines by just drawing larger lines from side to side. This would be more efficient than before while still having the grid lines.

[@sebastineodeh8612]

Thank you so much for this coding challenge. I decided to implement it with flutter, taught me quite a lot as regards drawing pixels on the screen

[@TheCodingTrain]

Feel free to share in the passenger showcase! thecodingtrain.com/showcase

[@MarcGauch]

haven't watched any of your video in years. i love the new editing style😊

[@Mali.97]

Just found your channel i normally dont comment but you are an absolute hero

[@TodePond]

nice sand i should try that

[@mihneagogu1389]

damn I remember watching coing train videos as a 15yo kid and thinking that was so cool. Time passes and now I'm 22, have a master in cs and am working fulltime in this field. Time really flies. Never thought looking a these random videos so many years ago would lead to this one way or the other. Great to see Daniel is as great as ever!

[@stighenningjohansen]

The most mindblowing demo I have ever seen was written in Euphoria, from 1993. Was an .exe someone contributed, and showed an eternal trip floating forwards way up in the clouds. It was simple, but very complicated and I cannot forget it.

[@realElzie]

You present coding in a very friendly way, thank you

[@jareddominiccaraan1988]

You're like the Bob Ross of programming 💕. Makes me want to solve coding exercises again.

[@geoffwagner4935]

Wow this one is very pretty,... fun relaxing and easy going on this one. Really like the colors and artwork in this one. nice seeing new stuff

[@Bolli1983]

the Bob Ross of coding, thank you!

[@theclockworkcadaver7025]

14:00 why not use optional chaining, like grid[i+dir]?.[j+1] - then it doesn't matter if grid[i+dir] is undefined

[@maartenofbelgium]

FYI, the line pattern appears because the grid is checked columnwise from top to bottom. Changing it to row-wise bottom-to-top makes them disappear. You also get a fun delayed sand shape effect due the left-right randomness. Nice video!

[@CodeNascher_]

re: Sandspiel (german for sand game) just fyi - Sand rhymes with hunt but props for getting the "spiel" part correct greetings from 🇩🇪

[@TheCodingTrain]

This comment made my day!

[@ApexGameStudios]

thanks for u piece of code that has given me an idea of writing up the gravity implementation in ur code

[@eeerrrrzzz]

Teşekkürler.

[@TheCodingTrain]

Thank you for the generous support!

[@didi_cy0528]

master of content creation

[@CocoaBeans660]

These make me so incredibly happy I don't know why

[@basspuppy133]

You're like vsauce Michael but for coding it's amazing

[@kernv0llig]

I love minute 8:30 because EVERY programmer goes through this pain almost everyday of work... My life there...

[@DinoDragon6]

This is the true coding experience

[@florianschmoldt8659]

As a german, I like to point out that your "Sandspiel" sounds flawless

[@sonik382]

Love those coding challenges...thank you Dan!!!

[@ohmynoun]

In JavaScript, you can use "switch (true)" instead of a big chain of else-ifs. This can help with readability when alternative refactors aren't viable for one reason or another.

[@jorgen7974]

Bro mentioned everything except the powder toy

[@TyPh11]

That one is just a masterpiece!! Cannot recommend enough!

[@CharlieBravo157]

The Powder Toy is the goat

[@fg786]

Here's another idea. Give a bias for the left and right movement to traverse fruther than 1 cell, so that it can move 2 or 3 cells to the left or right. This would give you shallower angles on one side and make the dune look windswept. And with every start of a drag movement of the mouse a new bias is calculated.

[@requestfx5585]

People before functions were used to keep the code organized and easy to read

[@Galmok18]

As a final touch, you should really update the pixels from they bottom up. Doing it like you did makes a piece of sand right above another that is free falling pause until the piece below has been dropped down away.

[@Gilbe2003]

Congratulacion for the google video, i was so happy and surprise to see you

[@NoVIcE_Source]

the powder toy!

[@pvic6959]

YES!!! this is exactly what i thought of! its something I STILL go back to. amazing lil game

[@Z0ctB0x]

I LOVE the toy!

[@GlassImpressions]

I doubt I will ever code but your video inspired me and I subbed. Thank you!

[@zeyusdotcom]

I've been coding since forever, I'm not even sure why I started watching this, but I'm so happy I did! What a great video, you're an engaging and entertaining teacher, and I think (it's hard to say) you present it in a way that's accessible for people of all levels. Awesome work. 💗

[@LetiziaMondo]

Your mood makes me happy

[@jayjasespud]

I just watched a video the other day about Falling Sand via Cellular Automata.. What a coincidence. It was by a KZbinr named MARF. Glad to see the Coding Challenges make a return!

[@thomaswhyte5107]

As a newbie when it comes to coding and having no idea how I would even attenpt this,I enjoyed wayching it.

[@guillermocasalcaro270]

You had those horizontal patterns in the falling sand because when vertically aligned grains of sand fall, the top one checks to see if there is another grain below it, if there is it will move diagonally to one side of the bottom grain. That's why you can't have vertically aligned grains of sand falling at the same time. I think this is easily fixed by looping through the state from the bottom up and using the new board state (instead of the previous) to check the positions below the actual one.

[@imactuallyasheep]

No way! I've had the nature of code book for years and I didn't know it was written by you. I just got it because I saw it and it looked interesting (loved it btw)

[@BunglayTV]

WOW!