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: kzitem.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
Негізгі бет Coding Challenge 180: Falling Sand
Пікірлер: 395