Coding Challenge 186: Wave Function Collapse

The Coding Train · Beginner ·⚡ Algorithms & Data Structures ·1y ago

About this lesson

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

Original Description

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

Watch on YouTube ↗ (saves to browser)

Sign in to unlock AI tutor explanation · ⚡30

Related AI Lessons

Bloom Filters, Explained Properly

Learn how Bloom filters work and their benefits, including tiny memory and blazing speed, in exchange for potential false positives.

Dev.to · Daksh Gargas

Prefix Sums: The Preprocessing Trick That Makes Range Queries Instant

Learn how prefix sums enable instant range queries in arrays, boosting performance in various applications

Medium · Programming

I Thought I Was Ready for the Interview — Then One Simple Math Question Destroyed Me

A simple math question can destroy a developer's interview, highlighting the importance of being prepared for unexpected questions

Medium · Programming

Week 2(Day 10): LeetCode Two Pointers(slow & fast): Remove Duplicates from Sorted Array (Brute…

Learn to remove duplicates from a sorted array using the two pointers technique, improving from brute force to optimized solutions

Medium · Python

Stump Grinder Carbide Wheel Grinds Hardwood To Chips

Innoforge Studio