Скачать с ютуб Coding Challenge 186: Wave Function Collapse в хорошем качестве

Coding Challenge 186: Wave Function Collapse

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... 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-... 💻 Github Repo: https://github.com/CodingTrain/Wave-F... p5.js Web Editor Sketches: 🕹️ Wave Function Collapse: Overlapping Model: https://editor.p5js.org/codingtrain/s... 🕹️ WFC Overlapping Model Refactored: https://editor.p5js.org/codingtrain/s... 🕹️ WFC Overlapping Model: Shannon entropy: https://editor.p5js.org/codingtrain/s... 🕹️ WFC Overlapping Model: More tiles!: https://editor.p5js.org/codingtrain/s... 🎥 Previous:    • Coding Challenge 185: Unfolding Fractals   🎥 All:    • Coding Challenges   References: 🗄 Wave Function Collapse GitHub Repo: https://github.com/mxgmn/WaveFunction... 🗄 Model Synthesis: https://paulmerrell.org/model-synthesis/ 🗄 Procedural Generation with Wave Function Collapse: https://www.gridbugs.org/wave-functio... 🗄 Wave Function Collapse: https://github.com/CodingTrain/Wave-F... 🔗 p5.js copy(): https://p5js.org/reference/p5/copy/ 🔗 p5.js web editor console log GitHub issue: https://github.com/processing/p5.js-w... 🔗 JavaScript concat() method: https://developer.mozilla.org/en-US/d... 🔗 p5.js randomSeed(): https://p5js.org/reference/p5/randomS... 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: 🎨 Townscaper: https://www.townscapergame.com/ 🎨 unity-wave-function-collapse: https://selfsame.itch.io/unitywfc 🎨 Super Mario WFC: https://observablehq.com/@makio135/su... 🎨 Zelda WFC: https://observablehq.com/@makio135/ze... 🎨 Infinite procedurally generated city: https://marian42.de/article/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 🚂 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   🎥    • 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 #overlappingmodel #proceduralgeneration #p5js #javascript