Coding Challenge 180: Falling Sand

Channel:

The Coding Train

Subscribers:

1,750,000

Published on January 22, 2024 5:07:39 PM ● Video Link: https://www.youtube.com/watch?v=L4u7Zy_b868

Duration: 22:59

975,744 views

20,854

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: https://thecodingtrain.com/challenges/180-falling-sand

🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-coding-challenge-180-falling-sand

p5.js Web Editor Sketches:
🕹️ Falling Sand: https://editor.p5js.org/codingtrain/sketches/AoH40T6fV
🕹️ Falling Sand with Gravity: https://editor.p5js.org/codingtrain/sketches/Ij5i7a3w4

🎥 Previous: https://youtu.be/Ggxt06qSAe4?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🔗 Genuary: https://genuary.art/
🔗 Sandspiel by Max Bittker: https://sandspiel.club/
🔗 Making a falling sand simulator: https://jason.today/falling-sand
📕 The Nature of Code by Daniel Shiffman: https://natureofcode.com/

Videos:
🎥 Noita 1.0 Launch Trailer by Nolla Games: https://www.youtube.com/watch?v=0cDkmQ0F0Jw
🚂 Wolfram CA: https://youtu.be/Ggxt06qSAe4
🚂 The Game of Life: https://youtu.be/FWSR_7kZuYg

Related Coding Challenges:
🚂 179 Wolfram CA: https://youtu.be/Ggxt06qSAe4
🚂 85 The Game of Life: https://youtu.be/FWSR_7kZuYg
🚂 107 Sandpiles: https://youtu.be/diGjw5tghYU
🚂 132 Fluid Simulation: https://youtu.be/alhpH6ECFvQ
🚂 102 2D Water Ripple: https://youtu.be/BZUdGqeOD0w

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: https://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#pixels #simulation #fallingsand #fluidsimulation #sandpilemodel #generativeart #p5js #javascript