Coding Challenge 180: Falling Sand @TheCodingTrain

Uploaded January 2024 | Updated September 2026, 1 week ago

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: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

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

Videos:
🎥 Noita 1.0 Launch Trailer by Nolla Games: 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: instagram.com/the.coding.train

🎥 Coding Challenges: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: 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

Marbling Ink Simulation #javascript #fluidsimulation

$Coding Challenge 185: Unfolding Fractals 25% off The Nature of Code book with code CHOOCHOO at https://natureofcode.com (comes with exclusive sticker+bookmark). The Dragon Curve fractal is created by repeatedly folding a strip of paper in half, then unfolding it to form a curve. In this challenge, I attempt to code an animation of the Dragon Curve forming with p5.js in JavaScript. Code: https://thecodingtrain.com/challenges/185-dragon-curve 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-coding-challenge-184-dragon-curve p5.js Web Editor Sketches: 🕹️ Dragon curve animation: https://editor.p5js.org/codingtrain/sketches/LXDsoCSZs 🕹️ Dragon curve color variation: https://editor.p5js.org/codingtrain/sketches/7nNd-f7iY 🕹️ Dragon curve noise variation: https://editor.p5js.org/codingtrain/sketches/7r7ZIE4dc 🎥 Previous: https://youtu.be/dJNFPv9Mj-Y?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 📕 The Nature of Code: https://natureofcode.com/ 🛒 Nature of Code shop: https://store.natureofcode.com/products/the-nature-of-code 🔗 Dragon Curve: https://en.wikipedia.org/wiki/Dragon_curve 🔗 concat() function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat Videos: 🎥 https://youtu.be/UBuPWdSbyf8 🎥 https://www.youtube.com/watch?v=wCyC-K_PnRY Related Coding Challenges: 🚂 https://youtu.be/0jjeOYMjmDU 🚂 https://youtu.be/E1B4UoSQMFw 🚂 https://youtu.be/jPsZwrV9ld0 🚂 https://youtu.be/i-k04yzfMpw 🚂 https://youtu.be/dSK-MW-zuAc Timestamps: 00:00 Introduction 00:36 The Nature of Code book 01:43 Explain algorithm 03:38 Start coding 05:05 Write rotate function 07:05 Rotate all the segments 11:30 We have the dragon curve! 12:00 Add animation 16:31 Add the starting positions for a and b 21:43 Scale the lines 24:08 Add a nextGeneration() function 25:16 The reduction ratio 26:44 Target zoom 28:57 Challenge complete! 29:57 What can you do? 30:25 Outro 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/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 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 #fractals #dragoncurve #natureofcode #p5js #javascript$

16.17: Inheritance in JavaScript - Topics of JavaScript/ES6

Coding Challenge #159: Simple Pendulum Simulation

$Coding Challenge 168: MandelBulb 3D Fractal Its the Mandelbulb! What happens when you take the original fractal (The Mandelbrot Set) and extend it into 3D space? And how do you visualize it in Processing (Java) as a point cloud? https://thecodingtrain.com/challenges/168-the-mandelbulb 🎥 Previous video: https://youtu.be/a35KWEjRvc0?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH Links discussed in this video: 🔗 The Unraveling of the Real 3D Mandelbulb 1: https://www.skytopia.com/project/fractal/mandelbulb.html 🔗 The Unraveling of the Real 3D Mandelbulb 2: https://www.skytopia.com/project/fractal/2mandelbulb.html 🔗 Processing: https://processing.org 🔗 MandelBulb wikipedia: https://en.wikipedia.org/wiki/Mandelbulb 🔗 PeasyCam: https://mrfeinberg.com/peasycam/ 🔗 Inigo Quilez website: https://iquilezles.org/ Other videos mentioned in this video: 🎥 Mandelbulb (raymarched SDF): https://youtu.be/eKUh4nkmQbc 🎥 Mandelbrot Set with p5.js: https://youtu.be/6z7GQewK-Ks 🎥 Spherical Geometry: https://youtu.be/RkuBWEkBrZA Timestamps: 0:00 Introducing Today’s Topic 1:31 The MandelBrot set explained 4:31 Triplex numbers 5:11 Voxels in Processing 6:36 Adding PeasyCam 7:19 Spherical coordinates 9:18 The power of triplex numbers 10:51 Implementing power formulas 15:26 Converting cartesian to Spherical 19:26 Setting up the MandelBulb 22:00 First MandelBulb 22:23 Optimising visualisation 24:47 Pointcloud MandelBulb 25:47 Variation ideas 27:04 The MandelBulb returns 27:31 See you next time! 🚂 Website: http://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/Guides/community-contribution-guide.html 🚩 Suggest Topics: https://github.com/CodingTrain/Rainbow-Topics 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://discord.gg/hPuGy2g 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 📚 Books: https://www.amazon.com/shop/thecodingtrain 🖋️ 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/website/issues/new$

3.4 Polar Coordinates - The Nature of Code

5.4 Arrive Steering Behavior - The Nature of Code