diff --git a/content/pages/challenges/index.json b/content/pages/challenges/index.json index b127b3687..08213465a 100644 --- a/content/pages/challenges/index.json +++ b/content/pages/challenges/index.json @@ -2,5 +2,5 @@ "title": "Challenges", "description": "Ready to apply what you’ve learned in the Tracks? Try a Challenge! These one-off project videos build off concepts introduced in Tracks and may have prerequisites (listed on the challenge page itself).", "featuredText": "Featured Challenge:", - "featuredChallenge": "171-wave-function-collapse" + "featuredChallenge": "186-wfc-overlapping-model" } diff --git a/content/pages/homepage/index.json b/content/pages/homepage/index.json index 149562145..0ed0965b7 100644 --- a/content/pages/homepage/index.json +++ b/content/pages/homepage/index.json @@ -31,7 +31,7 @@ "title": "Challenges", "description": "Watch Dan take on Coding Challenges in p5.js and Processing. The challenge topics include algorithmic art, machine learning, simulation, generative poetry, and more.", "featured": [ - "4-purple-rain", + "186-wfc-overlapping-model", "152-rdp-algorithm", "171-wave-function-collapse", "178-climate-spiral", diff --git a/content/videos/challenges/171-wave-function-collapse/index.json b/content/videos/challenges/171-wave-function-collapse/index.json index da06288bf..24422d83c 100644 --- a/content/videos/challenges/171-wave-function-collapse/index.json +++ b/content/videos/challenges/171-wave-function-collapse/index.json @@ -8,7 +8,7 @@ "languages": ["p5.js", "JavaScript"], "topics": ["wave function collapse", "generative art"], "canContribute": true, - "relatedChallenges": ["10-dfs-maze-generator", "162-self-avoiding-walk", "165-slide-puzzle"], + "relatedChallenges": ["10-dfs-maze-generator", "162-self-avoiding-walk", "165-slide-puzzle", "186-wfc-overlapping-model"], "timestamps": [ { "time": "0:00", "title": "Day 1! Wave Function Collapse!" }, { "time": "2:00", "title": "Entropy in Sudoku." }, @@ -39,12 +39,13 @@ "description": "WFC PCB board generation pattern.", "image": "wfc.jpg", "urls": { - "p5": "https://editor.p5js.org/codingtrain/sketches/_kbz6Xq7l" + "p5": "https://editor.p5js.org/codingtrain/sketches/_kbz6Xq7l", + "processing": "https://github.com/CodingTrain/Wave-Function-Collapse/tree/main/Processing/WFC_Tiled_Model" } }, { - "title": "Wave Function Collapse - Expanded", - "description": "GitHub repo for expanded and corrected WFC PCB board example.", + "title": "Wave Function Collapse - More!", + "description": "GitHub repo for expanded and optimized Wave Function Collapse Code.", "image": "wfc.jpg", "urls": { "other": "https://github.com/CodingTrain/Wave-Function-Collapse" diff --git a/content/videos/challenges/186-wfc-overlapping-model/images/1.png b/content/videos/challenges/186-wfc-overlapping-model/images/1.png new file mode 100644 index 000000000..4aa5902b4 Binary files /dev/null and b/content/videos/challenges/186-wfc-overlapping-model/images/1.png differ diff --git a/content/videos/challenges/186-wfc-overlapping-model/images/wfc.png b/content/videos/challenges/186-wfc-overlapping-model/images/wfc.png new file mode 100644 index 000000000..713438842 Binary files /dev/null and b/content/videos/challenges/186-wfc-overlapping-model/images/wfc.png differ diff --git a/content/videos/challenges/186-wfc-overlapping-model/images/wfc_entropy.png b/content/videos/challenges/186-wfc-overlapping-model/images/wfc_entropy.png new file mode 100644 index 000000000..64b1fb2eb Binary files /dev/null and b/content/videos/challenges/186-wfc-overlapping-model/images/wfc_entropy.png differ diff --git a/content/videos/challenges/186-wfc-overlapping-model/images/wfc_refactored.png b/content/videos/challenges/186-wfc-overlapping-model/images/wfc_refactored.png new file mode 100644 index 000000000..28ac4db0f Binary files /dev/null and b/content/videos/challenges/186-wfc-overlapping-model/images/wfc_refactored.png differ diff --git a/content/videos/challenges/186-wfc-overlapping-model/images/wfc_rot_reflect.png b/content/videos/challenges/186-wfc-overlapping-model/images/wfc_rot_reflect.png new file mode 100644 index 000000000..1fccab902 Binary files /dev/null and b/content/videos/challenges/186-wfc-overlapping-model/images/wfc_rot_reflect.png differ diff --git a/content/videos/challenges/186-wfc-overlapping-model/index.json b/content/videos/challenges/186-wfc-overlapping-model/index.json new file mode 100644 index 000000000..376e6ee39 --- /dev/null +++ b/content/videos/challenges/186-wfc-overlapping-model/index.json @@ -0,0 +1,212 @@ +{ + "title": "Wave Function Collapse: Overlapping Model", + "videoNumber": "186", + "description": "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.", + "videoId": "5iSAvzU2WYY", + "nebulaSlug": "codingtrain-coding-challenge-186-wave-function-collapse", + "date": "2025-01-26", + "languages": ["p5.js", "JavaScript"], + "topics": ["wave function collapse", "overlapping model", "procedural generation"], + "canContribute": true, + "relatedChallenges": ["10-dfs-maze-generator", "165-slide-puzzle", "171-wave-function-collapse"], + "timestamps": [ + { "time": "0:00:00", "title": "Introduction" }, + { "time": "0:01:12", "title": "The Nature of Code book!" }, + { "time": "0:02:20", "title": "WFC Resources and References" }, + { "time": "0:08:19", "title": "Extracting tiles from a source image" }, + { "time": "0:21:30", "title": "Calculating adjacency rules for tiles" }, + { "time": "0:24:34", "title": "Checking for overlapping pixel colors" }, + { "time": "0:32:20", "title": "Debugging tile adjacencies" }, + { "time": "0:43:30", "title": "Creating a Cell class" }, + { "time": "0:46:21", "title": "Incorporate code from WFC tile model" }, + { "time": "0:50:50", "title": "Reduce entropy of neighboring tiles" }, + { "time": "0:55:56", "title": "Rendering the center pixel for each tile" }, + { "time": "0:58:05", "title": "Cross checking valid tile options" }, + { "time": "1:01:57", "title": "Recursive entropy reduction" }, + { "time": "1:05:32", "title": "Limit recursion depth" }, + { "time": "1:06:32", "title": "Challenge complete?" }, + { "time": "1:08:26", "title": "Bugs found between Day 1 and Day 2" }, + { "time": "1:09:13", "title": "Starting Day 2" }, + { "time": "1:10:02", "title": "Correcting pixel color if statement" }, + { "time": "1:11:16", "title": "Refactoring redundant code" }, + { "time": "1:17:26", "title": "Running out of tile options" }, + { "time": "1:21:24", "title": "Optimizing the code" }, + { "time": "1:23:47", "title": "Rendering average pixel color of remaining tile options" }, + { "time": "1:26:23", "title": "How to handle redundant tiles?" }, + { "time": "1:28:30", "title": "More tiles with rotations and reflections" }, + { "time": "1:29:39", "title": "Additional performance optimizations" }, + { "time": "1:31:40", "title": "Thanks for watching!" } + ], + "codeExamples": [ + { + "title": "Wave Function Collapse: Overlapping Model", + "description": "Raw code exactly matching the video.", + "image": "wfc.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/SI0c2D_tQ" + } + }, + { + "title": "WFC Overlapping Model Refactored", + "description": "Refactored code with optimizations.", + "image": "wfc_refactored.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/2sV4KtcoD" + } + }, + { + "title": "WFC Overlapping Model: Shannon entropy", + "description": "This sketch counts tile frequency and incorporates entropy formula.", + "image": "wfc_entropy.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/PX0Hn6TF8" + } + }, + { + "title": "WFC Overlapping Model: More tiles!", + "description": "This sketch adds tile rotations and reflections", + "image": "wfc_rot_reflect.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/z_N2TVjRH", + "processing": "https://github.com/CodingTrain/Wave-Function-Collapse/tree/main/Processing/WFC_Overlapping_Model" + } + }, + { + "title": "Wave Function Collapse - More!", + "description": "GitHub repo for expanded and optimized Wave Function Collapse Code.", + "image": "wfc.png", + "urls": { + "other": "https://github.com/CodingTrain/Wave-Function-Collapse" + } + } + ], + "groupLinks": [ + { + "title": "References", + "links": [ + { + "icon": "πŸ—„", + "title": "Wave Function Collapse GitHub Repo", + "url": "https://github.com/mxgmn/WaveFunctionCollapse", + "description": "Maxim Gumin's source code and documentation for Wave Function Collapse." + }, + { + "icon": "πŸ—„", + "title": "Model Synthesis", + "url": "https://paulmerrell.org/model-synthesis/", + "description": "Documentation of Paul Merrell's work on Model Synthesis." + }, + { + "icon": "πŸ—„", + "title": "Procedural Generation with Wave Function Collapse", + "url": "https://www.gridbugs.org/wave-function-collapse/", + "description": "Wave Function Collapse overlapping model algorithm walk through." + }, + { + "icon": "πŸ—„", + "title": "Wave Function Collapse", + "url": "https://github.com/CodingTrain/Wave-Function-Collapse", + "description": "Coding Train Github WFC repository." + }, + { + "icon": "πŸ”—", + "title": "p5.js copy()", + "url": "https://p5js.org/reference/p5/copy/", + "description": "p5.js reference page for copy() function" + }, + { + "icon": "πŸ”—", + "title": "p5.js web editor console log GitHub issue", + "url": "https://github.com/processing/p5.js-web-editor/issues/3178", + "description": "Issue discussing console.log and objects with circular references." + }, + { + "icon": "πŸ”—", + "title": "JavaScript concat() method", + "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat", + "description": "JavaScript documentation for array concat() method." + }, + { + "icon": "πŸ”—", + "title": "p5.js randomSeed()", + "url": "https://p5js.org/reference/p5/randomSeed/", + "description": "p5.js reference page for randomSeed() function" + } + ] + }, + { + "title": "Videos", + "links": [ + { + "icon": "πŸŽ₯", + "title": "Pixel Array", + "url": "/tracks/p5-tips-and-tricks/more-p5/pixel-array", + "description": "Video tutorial on how to work with pixel array in p5.js." + }, + { + "icon": "πŸŽ₯", + "title": "Modulo Operator", + "url": "https://www.youtube.com/watch?v=r5Iy3v1co0A", + "description": "Video tutorial with Golan Levin explaining modulo operator." + }, + { + "icon": "πŸŽ₯", + "title": "Array Functions: filter() - Topics of JavaScript/ES6", + "url": "/tracks/topics-in-native-javascript/js/array-filter", + "description": "Video tutorial on higher order array function filter()." + }, + { + "icon": "πŸŽ₯", + "title": "Arrow Function", + "url": "/tracks/topics-in-native-javascript/js/arrow-functions", + "description": "Video tutorial on JavaScript arrow notation." + } + ] + }, + { + "title": "Creative Works Featured", + "links": [ + { + "icon": "🎨", + "title": "Townscaper", + "url": "https://www.townscapergame.com/", + "description": "Created by Oskar StΓ₯lberg, 3D WFC system that creates cute little houses, arches, stairways, bridges and lush backyards." + }, + { + "icon": "🎨", + "title": "unity-wave-function-collapse", + "url": "https://selfsame.itch.io/unitywfc", + "description": "A fork of Wave Function Collapse with tools for the Unity Game engine by @ExUtumno." + }, + { + "icon": "🎨", + "title": "Super Mario WFC", + "url": "https://observablehq.com/@makio135/super-mario-wfc", + "description": "Generating variations of Super Mario Bros worlds with Wave Function Collapse." + }, + { + "icon": "🎨", + "title": "Zelda WFC", + "url": "https://observablehq.com/@makio135/zelda-wfc", + "description": "Generating variations of Zelda maps with Wave Function Collapse." + }, + { + "icon": "🎨", + "title": "Infinite procedurally generated city", + "url": "https://marian42.de/article/wfc/", + "description": "a game where you walk through an infinite city that is procedurally generated as you walk." + } + ] + } + ], + "credits": [ + { + "title": "Editing", + "name": "Mathieu Blanchette" + }, + { + "title": "Animations", + "name": "Jason Heglund" + } + ] +} diff --git a/content/videos/challenges/186-wfc-overlapping-model/index.png b/content/videos/challenges/186-wfc-overlapping-model/index.png new file mode 100644 index 000000000..fdc0a25eb Binary files /dev/null and b/content/videos/challenges/186-wfc-overlapping-model/index.png differ