Uploaded July 2022 | Updated September 2026, 1 week ago
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: thecodingtrain.com/challenges/171-wave-function-collapse
🚀 Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-coding-challenge-171-wave-function-collapse
💻 Github Repo: github.com/CodingTrain/Wave-Function-Collapse
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/sketches/_kbz6Xq7l
🎥 Previous: youtu.be/0zac-cDzJwA?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next: youtu.be/FfCBNL6lWK0?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
💡 WFC Challenge Suggestion: github.com/CodingTrain/Suggestion-Box/issues/287
🗄 Wave Function Collapse Algorithm: github.com/mxgmn/WaveFunctionCollapse
🗄 Model Synthesis: paulmerrell.org/model-synthesis
📣 Wave Collapse Function algorithm in Processing: discourse.processing.org/t/wave-collapse-function-algorithm-in-processing/12983
🗄 Array.prototype.filter(): developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
🐞 Encoding tiles symmetry and rotation #14: github.com/CodingTrain/Wave-Function-Collapse/issues/14
🐞 The issue with asymmetric tiles and an easy solution #16: github.com/CodingTrain/Wave-Function-Collapse/issues/16
🗄 Array.prototype.reverse(): developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
Creative Works Featured:
🎨 Oisín: Wave Function Collapse for poetry: github.com/mewo2/oisin
🎨 Townscaper: townscapergame.com
🎨 unity-wave-function-collapse: selfsame.itch.io/unitywfc
🎨 Zelda WFC: observablehq.com/@makio135/zelda-wfc
🎨 Wave Function Collapse Demonstration: oskarstalberg.com/game/wave/wave.html
🎨 Infinite procedurally generated city: marian42.de/article/wfc
🎨 Generating stairy scenes: twitter.com/exutumno/status/895683455299723265?lang=eu
Live Stream Archives:
🔴 Day 1: youtu.be/6Vag7NJUjJo
🔴 Day 2: youtu.be/FGmB5ZHhhiA
🔴 Day 3: youtu.be/QvoTSl60Y88
Videos:
🎥 Solving Wordle with Information Theory: youtu.be/v68zYyaEmEA
🎥 Pixel Array: youtu.be/nMUMZ5YRxHI
🎥 Arrow Function: youtu.be/mrYMzpbFz18
🎥 Higher Order Array Functions: youtu.be/H4awPsyugS0
🚂 Matrix Transformations: thecodingtrain.com/tracks/transformations-in-p5
🎥 Oskar Stalberg - Wave Function Collapse in Bad North: youtu.be/0bcZb-SsnrA
Related Coding Challenges:
🚂 10 Maze Generator: youtu.be/HyK_Q5rrcr4
🚂 162 Self Avoiding Walk: youtu.be/m6-cm6GZ1iw
🚂 165 Slide Puzzle: youtu.be/uQZLzhrzEs4
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 asymmetry
1:12:06 First asymmetric 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: thecodingtrain.com
👾 Share Your Creation! thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: github.com/CodingTrain/Suggestion-Box
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: youtube.com/thecodingtrain/join
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: twitter.com/thecodingtrain
📸 Instagram: instagram.com/the.coding.train
🎥 Coding Challenges: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecodingtrain.com/issues/new
#wavefunctioncollapse #generativeart #p5js #javascript
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: thecodingtrain.com/challenges/171-wave-function-collapse
🚀 Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-coding-challenge-171-wave-function-collapse
💻 Github Repo: github.com/CodingTrain/Wave-Function-Collapse
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/sketches/_kbz6Xq7l
🎥 Previous: youtu.be/0zac-cDzJwA?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next: youtu.be/FfCBNL6lWK0?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
💡 WFC Challenge Suggestion: github.com/CodingTrain/Suggestion-Box/issues/287
🗄 Wave Function Collapse Algorithm: github.com/mxgmn/WaveFunctionCollapse
🗄 Model Synthesis: paulmerrell.org/model-synthesis
📣 Wave Collapse Function algorithm in Processing: discourse.processing.org/t/wave-collapse-function-algorithm-in-processing/12983
🗄 Array.prototype.filter(): developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
🐞 Encoding tiles symmetry and rotation #14: github.com/CodingTrain/Wave-Function-Collapse/issues/14
🐞 The issue with asymmetric tiles and an easy solution #16: github.com/CodingTrain/Wave-Function-Collapse/issues/16
🗄 Array.prototype.reverse(): developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
Creative Works Featured:
🎨 Oisín: Wave Function Collapse for poetry: github.com/mewo2/oisin
🎨 Townscaper: townscapergame.com
🎨 unity-wave-function-collapse: selfsame.itch.io/unitywfc
🎨 Zelda WFC: observablehq.com/@makio135/zelda-wfc
🎨 Wave Function Collapse Demonstration: oskarstalberg.com/game/wave/wave.html
🎨 Infinite procedurally generated city: marian42.de/article/wfc
🎨 Generating stairy scenes: twitter.com/exutumno/status/895683455299723265?lang=eu
Live Stream Archives:
🔴 Day 1: youtu.be/6Vag7NJUjJo
🔴 Day 2: youtu.be/FGmB5ZHhhiA
🔴 Day 3: youtu.be/QvoTSl60Y88
Videos:
🎥 Solving Wordle with Information Theory: youtu.be/v68zYyaEmEA
🎥 Pixel Array: youtu.be/nMUMZ5YRxHI
🎥 Arrow Function: youtu.be/mrYMzpbFz18
🎥 Higher Order Array Functions: youtu.be/H4awPsyugS0
🚂 Matrix Transformations: thecodingtrain.com/tracks/transformations-in-p5
🎥 Oskar Stalberg - Wave Function Collapse in Bad North: youtu.be/0bcZb-SsnrA
Related Coding Challenges:
🚂 10 Maze Generator: youtu.be/HyK_Q5rrcr4
🚂 162 Self Avoiding Walk: youtu.be/m6-cm6GZ1iw
🚂 165 Slide Puzzle: youtu.be/uQZLzhrzEs4
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 asymmetry
1:12:06 First asymmetric 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: thecodingtrain.com
👾 Share Your Creation! thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: github.com/CodingTrain/Suggestion-Box
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: youtube.com/thecodingtrain/join
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: twitter.com/thecodingtrain
📸 Instagram: instagram.com/the.coding.train
🎥 Coding Challenges: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecodingtrain.com/issues/new
#wavefunctioncollapse #generativeart #p5js #javascript
