Coding Challenge 180: Falling Sand
It's Genuary 2024! Watch as I attempt to build a falling sand simulation in p5.js using a grid of pixels and simple rules. Code: thecodingtrain.com/challenges...
🚀 Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-...
p5.js Web Editor Sketches:
🕹️ Falling Sand: editor.p5js.org/codingtrain/s...
🕹️ Falling Sand with Gravity: editor.p5js.org/codingtrain/s...
🎥 Previous: • Coding Challenge 179: ...
🎥 All: • Coding Challenges
References:
🔗 Genuary: genuary.art/
🔗 Sandspiel by Max Bittker: sandspiel.club/
🔗 Making a falling sand simulator: jason.today/falling-sand
📕 The Nature of Code by Daniel Shiffman: natureofcode.com/
Videos:
🎥 Noita 1.0 Launch Trailer by Nolla Games: • Noita 1.0 Launch Trailer
🚂 Wolfram CA: • Coding Challenge 179: ...
🚂 The Game of Life: • Coding Challenge #85: ...
Related Coding Challenges:
🚂 179 Wolfram CA: • Coding Challenge 179: ...
🚂 85 The Game of Life: • Coding Challenge #85: ...
🚂 107 Sandpiles: • Coding Challenge #107:...
🚂 132 Fluid Simulation: • Coding Challenge #132:...
🚂 102 2D Water Ripple: • Coding Challenge 102: ...
Timestamps:
0:00 Introduction and references
2:10 About cellular automata
2:47 The rules for a sand simulation
3:36 Code! Creating a grid
5:04 Animating a falling grain of sand
7:32 About matrix columns and rows
8:04 Let's account for the bottom edge
9:09 Adding mouse interaction
9:42 More sophisticated sand behavior
10:43 Oops! Some errors to fix
11:30 Adding randomness
12:26 Handling left and right edges
14:00 Checking if mouse is within the canvas
14:40 Making it more efficient
14:56 More space and more sand
16:55 Adding some color!
18:54 Challenge complete! Let's do some refactoring
20:58 How could we add gravity?
21:57 Wrapping up
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: thecodingtrain.com/discord
💖 Membership: kzhead.infojoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#pixels #simulation #fallingsand #fluidsimulation #sandpilemodel #generativeart #p5js #javascript
I appreciate you showing your mistakes and your process for fixing errors
If we are now getting weekly/biweekly coding challenges, I will be so happy
biweekly is my goal!
Same ❤
@@TheCodingTrain2 a week? 👀😉
@@garethwilliams2926or 1 in every 2 weeks? 👀
❤❤❤
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 😂
I'm so happy to hear this feedback!
i mainly get "wait, it is working??" moments
@@lukeb0030 Ikr! or when you are stuck somewhere and your brain is like what if I do this without knowing the logic behind it.
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 KZhead is suggesting. What a timing!
Very cool! I loved those flash games about placing stuff, and setting everything on fire with those "falling pixels".
Thanks for bringing back coding challenges. I find all the topics you cover very interesting.
I loved the 'popcorn guy', especially when it dropped you a popcorn. 😂 I like when someone can practise self-criticism in a funny way 😊
8:30 ;)
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!
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!
Dan all your teaching and tuts are great, one can see you are a very passionate/dedicated man! 🙏👍💯
Literally NONE does it better in YT. The modern iteration of Bob Ross for coding and teaching. Absolutely engaging let alone entertaining.
Frequent coding challenges!! Couldn't have had any better start with 2024
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
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
This was great to follow along - I love how you show your thought process when it comes to debugging!
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 :)
Great job I think the way you talk through debugging and show the troubleshooting process is incredible and will help lots of people learn!
Was trying to find motivation to do my coding homework today and got the KZhead 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!
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
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!
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);
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. ❤❤❤
This used to be my absolute favorite game...thanks Dan!!!!
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.
Thats a nice challenge! Ill be building that tomorrow!
Just adding the colour made its so beautiful.
Adding hue and seeing those rainbow layers was so much fun, I gonna make a version of mine taking inspiration from you. Thank you
Thank you for bringing more attention to falling-sand games! We're developing a browser-based one focused on chemistry and science education!! 💙
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.
I was going to check out your website, but then realized I already had. Sandboxels is really fun!
You were what I thought of when I saw this video!
Bro mentioned everything except the powder toy
you are the very reason javascript code is even slightly legible to my eyes. thank you so much!
Love that it wasn’t planned, got to see the actual thought process on how to work things out
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.
haven't watched any of your video in years. i love the new editing style😊
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!
If you are experienced with Python the only confusing code should be the for loop syntax.
"the Bob Ross of coding" couldn't have said it better myself
Amazing video! Seeing you code is really entertaining
Fantastic job Dan!
holy shit ive been waiting for this without even knowing it pls continue on this project
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
Thank you for making this video!
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.
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
I've been thinking so much about this! I'm hoping to address these kinds of improvements on a future live stream.
@@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.
@@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
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.
thanks for u piece of code that has given me an idea of writing up the gravity implementation in ur code
You make programming fun again with every coding challenge!
Never stop these coding challenges
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.
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 :)
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
Feel free to share in the passenger showcase! thecodingtrain.com/showcase
Nice video, and nice editing! Thanks for sharing!
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.
Yay, been waiting for this
Love this Video and the animations.So good!
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.
Awesome as always. Thanks
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 :)
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!!
Congratulacion for the google video, i was so happy and surprise to see you
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
I doubt I will ever code but your video inspired me and I subbed. Thank you!
These make me so incredibly happy I don't know why
You present coding in a very friendly way, thank you
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.
amazing content! keep it up bud!
Great editing!
You are a god. Thank you for what you are.
The universe spoke lol. I've been looking for a good video on coding a falling sand sim!
Yes omg this is exactly what I wanted
Love those coding challenges...thank you Dan!!!
When you set dir to -1 for random
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.
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!
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!
What a fun little challenge will give it go as well.
Your mood makes me happy
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.
Excellent!
Man this is dope asf~
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
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!
That turned out so cool! I don't really code in JS but will sure give it a try in Python.
Great video! Loved it
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.
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.
the Bob Ross of coding, thank you!
Just found your channel i normally dont comment but you are an absolute hero
the powder toy!
YES!!! this is exactly what i thought of! its something I STILL go back to. amazing lil game
I LOVE the toy!
re: Sandspiel (german for sand game) just fyi - Sand rhymes with hunt but props for getting the "spiel" part correct greetings from 🇩🇪
This comment made my day!
Very cool! Thanks 🙏
Amazing work with programming !
Nice challenge! Reminds me of one of the challenges in advent of code 2022. I miss the times where the writing of the code was not fast forwarded. That time is crucial to reflect over the code. It is much more overwhelming when you constantly are getting information, and not time to process the information.
I love these vids
We need to apply a check between previews a new position if we want to apply a gravety force. For example, if we have a great gravety value such that 5 increse spaces, all of this space are need a stop down check...
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.
As a newbie when it comes to coding and having no idea how I would even attenpt this,I enjoyed wayching it.
This video made me feel so much better about my slapdash approach to coding
Great video Dan, I love falling sand sims so much! I've been trying for a while to implement it using a shader, but it gets tricky because each action (eg swapping an air and sand tile) has to mutually done by both pixels in the swap, otherwise you start loosing/gaining sand! I'll get it eventually though
I'd love to see it if you get it working!
@@TheCodingTrain I'll keep you posted, thanks!
@@BarneyCodes So how's it going?
Once friends of mine wrote a small virus in assembler for dos. It spread itself, wroting itself in every exe file possible, checked for floppy disk and did same there. It did not really corrupt anything, except.... if one did not tip anything for several seconds all letters on a screen started to drop. Was quite a fun time :)
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.
that's cool simulation
@TheCodingTrain loved this coding challeng. I have a good challenge, see if you can change the direction of down and still make it behave relatively normal. so what I mean is imagine there is one big arrow you're able to change and according to that arrow is the way all the particles will fall, it would be fun on mobile devices to see the particles actually fall down according to how you orientate the phone, but since it's on PC I guess an arrow is good enough. I've been fumbling a bit over this problem and would like to see how you solve it😁
You're like vsauce Michael but for coding it's amazing
great video thank you
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)
WOW!
Instead of checking the whole grid? Would it be more efficient to track only the cells that have been created/moved to a new 1D array then check those positions?
I just watched a video the other day about Falling Sand via Cellular Automata.. What a coincidence. It was by a KZheadr named MARF. Glad to see the Coding Challenges make a return!