Coding Challenge 186: Wave Function Collapse

Channel:

The Coding Train

Subscribers:

1,740,000

Published on January 28, 2025 2:09:16 PM ● Video Link: https://www.youtube.com/watch?v=5iSAvzU2WYY

Duration: 0:00

69,175 views

2,541

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 Refactoredhttps://editor.p5js.org/codingtrain/sketches/2sV4KtcoD..
🕹 ️ WFC Overlapping Model: Shannon entrophttps://editor.p5js.org/codingtrain/sketches/PX0Hn6TF8...
🕹 ️ WFC Overlapping Model: More tilehttps://editor.p5js.org/codingtrain/sketches/z_N2TVjRHs...

🎥 Previous:    • Coding Challenge 185: Unfolding Fractals  
🎥 All:    • Coding Challenges  

References:
🗄 Wave Function Collapse GitHub Rehttps://github.com/mxgmn/WaveFunctionCollapsen...
🗄 Model Syntheshttps://paulmerrell.org/model-synthesis/sis/
🗄 Procedural Generation with Wave Function Collaphttps://www.gridbugs.org/wave-function-collapse/o...
🗄 Wave Function Collaphttps://github.com/CodingTrain/Wave-Function-CollapseF...
🔗 p5.js copyhttps://p5js.org/reference/p5/copy/opy/
🔗 p5.js web editor console log GitHub isshttps://github.com/processing/p5.js-web-editor/issues/3178w...
🔗 JavaScript concat() methhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concatd...
🔗 p5.js randomSeedhttps://p5js.org/reference/p5/randomSeed/S...

Videos:
🎥    • 11.3: The Pixel Array - p5.js Tutorial  
🎥    • Guest Tutorial #6: The Modulo Operato...  
🎥    • 16.8: Array Functions: filter() - Top...  
🎥    • 16.3: ES6 Arrow Function - Topics of ...  

Creative Works Featured:
🎨 Townscaphttps://www.townscapergame.com/com/
🎨 unity-wave-function-collaphttps://selfsame.itch.io/unitywfcywfc
🎨 Super Mario Whttps://observablehq.com/@makio135/super-mario-wfcu...
🎨 Zelda Whttps://observablehq.com/@makio135/zelda-wfce...
🎨 Infinite procedurally generated cihttps://marian42.de/article/wfc/wfc/

Related Coding Challenges:
🚂    • Coding Challenge #10.1: Maze Generato...  
🚂    • Coding Challenge 165: Slide Puzzle  
🚂    • Coding Challenge 171: Wave Function C...  

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

🚂 Websihttps://thecodingtrain.com/com/
👾 Share Your Creatihttps://thecodingtrain.com/guides/passenger-showcase-guides...
🚩 Suggest Topihttps://github.com/CodingTrain/Suggestion-Boxs...
💡 GitHhttps://github.com/CodingTrainrain
💬 Discohttps://thecodingtrain.com/discordcord
💖 Membershjoin
🛒 Storhttps://standard.tv/codingtrainain
🖋 ️ Twitthttps://twitter.com/thecodingtrainin  
📸 Instagrhttps://www.instagram.com/the.coding.train/in  

🎥    • Coding Challenges  
🎥    • Start learning here!  

🔗 p5.https://p5js.org/.org
🔗 p5.js Web Edithttps://editor.p5js.org/org/
🔗 Processihttps://processing.org/.org

📄 Code of Conduhttps://github.com/CodingTrain/Code-of-Conducto...

This description was auto-generated. If you see a problem, please open an isshttps://github.com/CodingTrain/thecodingtrain.com/issues/newd...

#wavefunctioncollapse #overlappingmodel #proceduralgeneration #p5js #javascript