Straight out of quantum mechanics, Wave Function Collapse is an algorithm for procedural generation of images. In this video (recorded over 3 live streams) I attempt the tiled model and explore a variety of solutions to the algorithm in JavaScript with p5.js. Also, check out WFC's predecessor: Model Synthesis (more info below). Code: https://thecodingtrain.com/challenges...

🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-...

💻 Github Repo: https://github.com/CodingTrain/Wave-F...
🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/s...

🎥 Previous:    • Coding Challenge 170: The Monty Hall ...  
🎥 Next:    • Coding Challenge 172: Horizontal Dire...  
🎥 All:    • Coding Challenges  

References:
💡 WFC Challenge Suggestion: https://github.com/CodingTrain/Sugges...
🗄 Wave Function Collapse Algorithm: https://github.com/mxgmn/WaveFunction...
🗄 Model Synthesis: https://paulmerrell.org/model-synthesis/
📣 ​Wave Collapse Function algorithm in Processing: https://discourse.processing.org/t/wa...
🗄 Array.prototype.filter(): https://developer.mozilla.org/en-US/d...
🐞 Encoding tiles symmetry and rotation #14: https://github.com/CodingTrain/Wave-F...
🐞 The issue with asymmetric tiles and an easy solution #16: https://github.com/CodingTrain/Wave-F...
🗄 Array.prototype.reverse(): https://developer.mozilla.org/en-US/d...

Creative Works Featured:
🎨 Oisín: Wave Function Collapse for poetry: https://github.com/mewo2/oisin
🎨 Townscaper: https://www.townscapergame.com/
🎨 unity-wave-function-collapse: https://selfsame.itch.io/unitywfc
🎨 Zelda WFC: https://observablehq.com/@makio135/ze...
🎨 Wave Function Collapse Demonstration: https://oskarstalberg.com/game/wave/w...
🎨 Infinite procedurally generated city: https://marian42.de/article/wfc/
🎨 Generating stairy scenes: https://twitter.com/exutumno/status/8...

Live Stream Archives:
🔴 Day 1:    • Wave Function Collapse Take 2  
🔴 Day 2:    • Wave Function Collapse Take 3  
🔴 Day 3:    • Wave Function Collapse the Final Coun...  

Videos:
🎥 Solving Wordle with Information Theory:    • Solving Wordle using information theory  
🎥 Pixel Array:    • 11.3: The Pixel Array - p5.js Tutorial  
🎥 Arrow Function:    • 16.3: ES6 Arrow Function - Topics of ...  
🎥 Higher Order Array Functions:    • 16.5: Higher Order Functions in JavaS...  
🚂 Matrix Transformations: https://thecodingtrain.com/tracks/tra...
🎥 Oskar Stalberg - Wave Function Collapse in Bad North:    • EPC2018 - Oskar Stalberg - Wave Funct...  

Related Coding Challenges:
🚂 10 Maze Generator:    • Coding Challenge #10.1: Maze Generato...  
🚂 162 Self Avoiding Walk:    • Coding Challenge 162: Self-Avoiding Walk  
🚂 165 Slide Puzzle:    • Coding Challenge 165: Slide Puzzle  

Timestamps:
0:00 Day 1! Wave Function Collapse!
2:00 Entropy in Sudoku.
5:41 Comparing Sudoku to WFC
9:24 Starting to code.
11:05 Collapsing cells.
13:30 Evaluating entropy.
18:47 Updating entropy after collapse.
22:45 Data structure for rules.
24:50 Implementing rules for next collapse.
36:28 Explaining the rules.
38:45 Day 2! Refactoring the code.
39:26 Create a Tile class
44:57 Generate the rules from Tile objects.
55:40 Using new circuit board tileset.
1:00:40 Day 3! Dealing with asymmetrical tiles
1:01:56 Assigning index values to edges.
1:06:53 Incorporating edges into code.
1:10:05 Change adjacency for assymetry
1:12:06 First assymetric WFC image!
1:12:40 Restart if no valid cell found.
1:15:48 Next steps!
1:18:05 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/pas...
🚩 Suggest Topics: https://github.com/CodingTrain/Sugges...
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter:   / thecodingtrain  
📸 Instagram:   / the.coding.train  

🎥 Coding Challenges:    • Coding Challenges  
🎥 Intro to Programming:    • Start learning here!  

🔗 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-o...

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecod...

#wavefunctioncollapse #generativeart #p5js #javascript