Coding Challenge 180: Falling Sand

The Coding Train · Beginner ·🌐 Frontend Engineering ·2y ago

About this lesson

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

Original Description

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
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Related AI Lessons

Chapters (19)

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
Up next
The masks we wear | Zora Krstić | TEDxLuxembourgCity
TEDx Talks
Watch →