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/180-falling-sand
???? Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-coding-challenge-180-falling-sand
p5.js Web Editor Sketches:
????️ Falling Sand: editor.p5js.org/codingtrain/sketches/AoH40T6fV
????️ Falling Sand with Gravity: editor.p5js.org/codingtrain/sketches/Ij5i7a3w4
???? Previous: youtu.be/Ggxt06qSAe4?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
???? All: www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
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: www.youtube.com/watch?v=0cDkmQ0F0Jw
???? Wolfram CA: youtu.be/Ggxt06qSAe4
???? The Game of Life: youtu.be/FWSR_7kZuYg
Related Coding Challenges:
???? 179 Wolfram CA: youtu.be/Ggxt06qSAe4
???? 85 The Game of Life: youtu.be/FWSR_7kZuYg
???? 107 Sandpiles: youtu.be/diGjw5tghYU
???? 132 Fluid Simulation: youtu.be/alhpH6ECFvQ
???? 102 2D Water Ripple: 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: thecodingtrain.com/
???? Share Your Creation! thecodingtrain.com/guides/passenger-showcase-guide
???? Suggest Topics: github.com/CodingTrain/Suggestion-Box
???? GitHub: github.com/CodingTrain
???? Discord: thecodingtrain.com/discord
???? Membership: youtube.com/thecodingtrain/join
???? Store: standard.tv/codingtrain
????️ Twitter: twitter.com/thecodingtrain
???? Instagram: www.instagram.com/the.coding.train/
???? Coding Challenges: www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
???? Intro to Programming: www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
???? p5.js: p5js.org
???? p5.js Web Editor: editor.p5js.org/
???? Processing: processing.org
???? Code of Conduct: github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecodingtrain.com/issues/new
#pixels #simulation #fallingsand #fluidsimulation #sandpilemodel #generativeart #p5js #javascript

Category :

#coding#challenge#180#falling#sand