Coding the Overlapping Model (Wave Function Collapse)

Wave Function Collapse is an algorithm for procedural image generation. In this long overdue follow-up to my tiled model video, I dive into the overlapping model, coding it step by step (complete with struggles and messy debugging interludes) in JavaScript with p5.js. Code: https://thecodingtrain.com/challenges/186-wfc-overlapping-model 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-coding-challenge-186-wave-function-collapse 💻 Github Repo: https://github.com/CodingTrain/Wave-Function-Collapse p5.js Web Editor Sketches: 🕹️ Wave Function Collapse: Overlapping Model: https://editor.p5js.org/codingtrain/sketches/SI0c2D_tQ 🕹️ WFC Overlapping Model Refactored: https://editor.p5js.org/codingtrain/sketches/2sV4KtcoD 🕹️ WFC Overlapping Model: Shannon entropy: https://editor.p5js.org/codingtrain/sketches/PX0Hn6TF8 🕹️ WFC Overlapping Model: More tiles!: https://editor.p5js.org/codingtrain/sketches/z_N2TVjRH 🎥 Previous: https://youtu.be/MazpwQNdJYQ?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 🗄 Wave Function Collapse GitHub Repo: https://github.com/mxgmn/WaveFunctionCollapse 🗄 Model Synthesis: https://paulmerrell.org/model-synthesis/ 🗄 Procedural Generation with Wave Function Collapse: https://www.gridbugs.org/wave-function-collapse/ 🗄 Wave Function Collapse: https://github.com/CodingTrain/Wave-Function-Collapse 🔗 p5.js copy(): https://p5js.org/reference/p5/copy/ 🔗 p5.js web editor console log GitHub issue: https://github.com/processing/p5.js-web-editor/issues/3178 🔗 JavaScript concat() method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat 🔗 p5.js randomSeed(): https://p5js.org/reference/p5/randomSeed/ Videos: 🎥 https://youtu.be/nMUMZ5YRxHI 🎥 https://www.youtube.com/watch?v=r5Iy3v1co0A 🎥 https://youtu.be/qmnH5MT_luk 🎥 https://youtu.be/mrYMzpbFz18 Creative Works Featured: 🎨 Townscaper: https://www.townscapergame.com/ 🎨 unity-wave-function-collapse: https://selfsame.itch.io/unitywfc 🎨 Super Mario WFC: https://observablehq.com/@makio135/super-mario-wfc 🎨 Zelda WFC: https://observablehq.com/@makio135/zelda-wfc 🎨 Infinite procedurally generated city: https://marian42.de/article/wfc/ Related Coding Challenges: 🚂 https://youtu.be/HyK_Q5rrcr4 🚂 https://youtu.be/uQZLzhrzEs4 🚂 https://youtu.be/rI_y2GAlQFM Timestamps: 0:00:00 Introduction 0:01:12 The Nature of Code book! 0:02:20 WFC Resources and References 0:08:19 Extracting tiles from a source image 0:21:30 Calculating adjacency rules for tiles 0:24:34 Checking for overlapping pixel colors 0:32:20 Debugging tile adjacencies 0:43:30 Creating a Cell class 0:46:21 Incorporate code from WFC tile model 0:50:50 Reduce entropy of neighboring tiles 0:55:56 Rendering the center pixel for each tile 0:58:05 Cross checking valid tile options 1:01:57 Recursive entropy reduction 1:05:32 Limit recursion depth 1:06:32 Challenge complete? 1:08:26 Bugs found between Day 1 and Day 2 1:09:13 Starting Day 2 1:10:02 Correcting pixel color if statement 1:11:16 Refactoring redundant code 1:17:26 Running out of tile options 1:21:24 Optimizing the code 1:23:47 Rendering average pixel color of remaining tile options 1:26:23 How to handle redundant tiles? 1:28:30 More tiles with rotations and reflections 1:29:39 Additional performance optimizations 1:31:40 Thanks for watching! 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 #wavefunctioncollapse #overlappingmodel #proceduralgeneration #p5js #javascript