Coding Challenge 180: Falling Sand
ฝัง
- เผยแพร่เมื่อ 6 มิ.ย. 2024
- 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: th-cam.com/users/thecodingtrainjoin
🛒 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
![[UNCUT]"เศรษฐา" โดนบีบให้ลาออก เผยดีลลับ "ทักษิณ" ต้องต่อโปร ไม่งั้นเจอจุดจบ! I คนดังนั่งเคลียร์](http://i.ytimg.com/vi/XlH3k81dxmE/mqdefault.jpg)
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 TH-cam is suggesting. What a timing!
Thanks for bringing back coding challenges. I find all the topics you cover very interesting.
Literally NONE does it better in YT. The modern iteration of Bob Ross for coding and teaching. Absolutely engaging let alone entertaining.
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!
Very cool! I loved those flash games about placing stuff, and setting everything on fire with those "falling pixels".
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
Dan all your teaching and tuts are great, one can see you are a very passionate/dedicated man! 🙏👍💯
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!
Frequent coding challenges!! Couldn't have had any better start with 2024
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
Was trying to find motivation to do my coding homework today and got the TH-cam 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!
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);
Great job I think the way you talk through debugging and show the troubleshooting process is incredible and will help lots of people learn!
This was great to follow along - I love how you show your thought process when it comes to debugging!
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 ;)
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
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 :)
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. ❤❤❤
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
This used to be my absolute favorite game...thanks Dan!!!!
Okay, okay, okay. This is the first video that I saw of this channel and I simply LOVE IT!
I'll still watching when I have some time.
Thanks for the lesson!!!
Dev from Brazil
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
Just adding the colour made its so beautiful.
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!
Fantastic job Dan!
Amazing video! Seeing you code is really entertaining
you are the very reason javascript code is even slightly legible to my eyes. thank you so much!
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!
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.
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.
Love that it wasn’t planned, got to see the actual thought process on how to work things out
haven't watched any of your video in years. i love the new editing style😊
holy shit ive been waiting for this without even knowing it
pls continue on this project
Thank you for making this video!
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
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 :)
You make programming fun again with every coding challenge!
Never stop these coding challenges
Adding hue and seeing those rainbow layers was so much fun, I gonna make a version of mine taking inspiration from you. Thank you
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.
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
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 :)
Awesome as always. Thanks
Love this Video and the animations.So good!
thanks for u piece of code that has given me an idea of writing up the gravity implementation in ur code
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!!
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
You present coding in a very friendly way, thank you
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
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.
Nice video, and nice editing! Thanks for sharing!
amazing content! keep it up bud!
Great video! Loved it
Congratulacion for the google video, i was so happy and surprise to see you
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.
These make me so incredibly happy I don't know why
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!
Great video man
the Bob Ross of coding, 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.
Great editing!
You are a god.
Thank you for what you are.
Just found your channel i normally dont comment but you are an absolute hero
I doubt I will ever code but your video inspired me and I subbed. Thank you!
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!
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.
Your mood makes me happy
Excellent!
Amazing work with programming !
Yes omg this is exactly what I wanted
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?
Very cool! Thanks 🙏
What a fun little challenge will give it go as well.
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!
Love those coding challenges...thank you Dan!!!
The universe spoke lol. I've been looking for a good video on coding a falling sand sim!
Man this is dope asf~
That turned out so cool! I don't really code in JS but will sure give it a try in Python.
great video thank you
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.
I love these vids
that's cool simulation
nice sand i should try that
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!
I just watched a video the other day about Falling Sand via Cellular Automata.. What a coincidence. It was by a TH-camr named MARF.
Glad to see the Coding Challenges make a return!
As a newbie when it comes to coding and having no idea how I would even attenpt this,I enjoyed wayching it.
I’m glad that Noita was mentioned here! My favourite game, it’s just incredible.
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 :)
Awesome
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!
Damn.. I just spend 4 hours doing this in c++... :D About half of the time was just stupid testing of colors and making sure it runs at a constant speed on every pc... and then went back to actually watch the video. Thanks for the inspiration!
This video made me feel so much better about my slapdash approach to coding
You are amazing
Awesome vid! Don't forget about the greatest falling pixel game: The Powder 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!