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