Add WFC-overlapping video

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"
 }

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",

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"

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"
+    }
+  ]
+}