Skip to content

Commit 837e6ca

Browse files
kfahn22shiffman
kfahn22
and
shiffman
authored
Add WFC-overlapping video (#1802)
* Add json file for overlapping model * fix typo * Minor edits, add link to WFC repo * fix link and add preliminary descriptions * adapting description, links, examples * setting date to today for tests * adding index image * add more related challenges * update featured challenge * Update index.json add new video to homepage * adding Processing ports * Update index.json --------- Co-authored-by: Daniel Shiffman <[email protected]>
1 parent eca734e commit 837e6ca

File tree

10 files changed

+219
-6
lines changed

10 files changed

+219
-6
lines changed

‎content/pages/challenges/index.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
"title": "Challenges",
33
"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).",
44
"featuredText": "Featured Challenge:",
5-
"featuredChallenge": "171-wave-function-collapse"
5+
"featuredChallenge": "186-wfc-overlapping-model"
66
}

‎content/pages/homepage/index.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"title": "Challenges",
3232
"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.",
3333
"featured": [
34-
"4-purple-rain",
34+
"186-wfc-overlapping-model",
3535
"152-rdp-algorithm",
3636
"171-wave-function-collapse",
3737
"178-climate-spiral",

‎content/videos/challenges/171-wave-function-collapse/index.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"languages": ["p5.js", "JavaScript"],
99
"topics": ["wave function collapse", "generative art"],
1010
"canContribute": true,
11-
"relatedChallenges": ["10-dfs-maze-generator", "162-self-avoiding-walk", "165-slide-puzzle"],
11+
"relatedChallenges": ["10-dfs-maze-generator", "162-self-avoiding-walk", "165-slide-puzzle", "186-wfc-overlapping-model"],
1212
"timestamps": [
1313
{ "time": "0:00", "title": "Day 1! Wave Function Collapse!" },
1414
{ "time": "2:00", "title": "Entropy in Sudoku." },
@@ -39,12 +39,13 @@
3939
"description": "WFC PCB board generation pattern.",
4040
"image": "wfc.jpg",
4141
"urls": {
42-
"p5": "https://editor.p5js.org/codingtrain/sketches/_kbz6Xq7l"
42+
"p5": "https://editor.p5js.org/codingtrain/sketches/_kbz6Xq7l",
43+
"processing": "https://github.com/CodingTrain/Wave-Function-Collapse/tree/main/Processing/WFC_Tiled_Model"
4344
}
4445
},
4546
{
46-
"title": "Wave Function Collapse - Expanded",
47-
"description": "GitHub repo for expanded and corrected WFC PCB board example.",
47+
"title": "Wave Function Collapse - More!",
48+
"description": "GitHub repo for expanded and optimized Wave Function Collapse Code.",
4849
"image": "wfc.jpg",
4950
"urls": {
5051
"other": "https://github.com/CodingTrain/Wave-Function-Collapse"

‎content/videos/challenges/186-wfc-overlapping-model/images/1.png

43.6 KB
Loading

‎content/videos/challenges/186-wfc-overlapping-model/images/wfc.png

26.8 KB
Loading

‎content/videos/challenges/186-wfc-overlapping-model/images/wfc_entropy.png

28.9 KB
Loading

‎content/videos/challenges/186-wfc-overlapping-model/images/wfc_refactored.png

15.8 KB
Loading

‎content/videos/challenges/186-wfc-overlapping-model/images/wfc_rot_reflect.png

43.6 KB
Loading

‎content/videos/challenges/186-wfc-overlapping-model/index.json

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
{
2+
"title": "Wave Function Collapse: Overlapping Model",
3+
"videoNumber": "186",
4+
"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.",
5+
"videoId": "5iSAvzU2WYY",
6+
"nebulaSlug": "codingtrain-coding-challenge-186-wave-function-collapse",
7+
"date": "2025-01-26",
8+
"languages": ["p5.js", "JavaScript"],
9+
"topics": ["wave function collapse", "overlapping model", "procedural generation"],
10+
"canContribute": true,
11+
"relatedChallenges": ["10-dfs-maze-generator", "165-slide-puzzle", "171-wave-function-collapse"],
12+
"timestamps": [
13+
{ "time": "0:00:00", "title": "Introduction" },
14+
{ "time": "0:01:12", "title": "The Nature of Code book!" },
15+
{ "time": "0:02:20", "title": "WFC Resources and References" },
16+
{ "time": "0:08:19", "title": "Extracting tiles from a source image" },
17+
{ "time": "0:21:30", "title": "Calculating adjacency rules for tiles" },
18+
{ "time": "0:24:34", "title": "Checking for overlapping pixel colors" },
19+
{ "time": "0:32:20", "title": "Debugging tile adjacencies" },
20+
{ "time": "0:43:30", "title": "Creating a Cell class" },
21+
{ "time": "0:46:21", "title": "Incorporate code from WFC tile model" },
22+
{ "time": "0:50:50", "title": "Reduce entropy of neighboring tiles" },
23+
{ "time": "0:55:56", "title": "Rendering the center pixel for each tile" },
24+
{ "time": "0:58:05", "title": "Cross checking valid tile options" },
25+
{ "time": "1:01:57", "title": "Recursive entropy reduction" },
26+
{ "time": "1:05:32", "title": "Limit recursion depth" },
27+
{ "time": "1:06:32", "title": "Challenge complete?" },
28+
{ "time": "1:08:26", "title": "Bugs found between Day 1 and Day 2" },
29+
{ "time": "1:09:13", "title": "Starting Day 2" },
30+
{ "time": "1:10:02", "title": "Correcting pixel color if statement" },
31+
{ "time": "1:11:16", "title": "Refactoring redundant code" },
32+
{ "time": "1:17:26", "title": "Running out of tile options" },
33+
{ "time": "1:21:24", "title": "Optimizing the code" },
34+
{ "time": "1:23:47", "title": "Rendering average pixel color of remaining tile options" },
35+
{ "time": "1:26:23", "title": "How to handle redundant tiles?" },
36+
{ "time": "1:28:30", "title": "More tiles with rotations and reflections" },
37+
{ "time": "1:29:39", "title": "Additional performance optimizations" },
38+
{ "time": "1:31:40", "title": "Thanks for watching!" }
39+
],
40+
"codeExamples": [
41+
{
42+
"title": "Wave Function Collapse: Overlapping Model",
43+
"description": "Raw code exactly matching the video.",
44+
"image": "wfc.png",
45+
"urls": {
46+
"p5": "https://editor.p5js.org/codingtrain/sketches/SI0c2D_tQ"
47+
}
48+
},
49+
{
50+
"title": "WFC Overlapping Model Refactored",
51+
"description": "Refactored code with optimizations.",
52+
"image": "wfc_refactored.png",
53+
"urls": {
54+
"p5": "https://editor.p5js.org/codingtrain/sketches/2sV4KtcoD"
55+
}
56+
},
57+
{
58+
"title": "WFC Overlapping Model: Shannon entropy",
59+
"description": "This sketch counts tile frequency and incorporates entropy formula.",
60+
"image": "wfc_entropy.png",
61+
"urls": {
62+
"p5": "https://editor.p5js.org/codingtrain/sketches/PX0Hn6TF8"
63+
}
64+
},
65+
{
66+
"title": "WFC Overlapping Model: More tiles!",
67+
"description": "This sketch adds tile rotations and reflections",
68+
"image": "wfc_rot_reflect.png",
69+
"urls": {
70+
"p5": "https://editor.p5js.org/codingtrain/sketches/z_N2TVjRH",
71+
"processing": "https://github.com/CodingTrain/Wave-Function-Collapse/tree/main/Processing/WFC_Overlapping_Model"
72+
}
73+
},
74+
{
75+
"title": "Wave Function Collapse - More!",
76+
"description": "GitHub repo for expanded and optimized Wave Function Collapse Code.",
77+
"image": "wfc.png",
78+
"urls": {
79+
"other": "https://github.com/CodingTrain/Wave-Function-Collapse"
80+
}
81+
}
82+
],
83+
"groupLinks": [
84+
{
85+
"title": "References",
86+
"links": [
87+
{
88+
"icon": "🗄",
89+
"title": "Wave Function Collapse GitHub Repo",
90+
"url": "https://github.com/mxgmn/WaveFunctionCollapse",
91+
"description": "Maxim Gumin's source code and documentation for Wave Function Collapse."
92+
},
93+
{
94+
"icon": "🗄",
95+
"title": "Model Synthesis",
96+
"url": "https://paulmerrell.org/model-synthesis/",
97+
"description": "Documentation of Paul Merrell's work on Model Synthesis."
98+
},
99+
{
100+
"icon": "🗄",
101+
"title": "Procedural Generation with Wave Function Collapse",
102+
"url": "https://www.gridbugs.org/wave-function-collapse/",
103+
"description": "Wave Function Collapse overlapping model algorithm walk through."
104+
},
105+
{
106+
"icon": "🗄",
107+
"title": "Wave Function Collapse",
108+
"url": "https://github.com/CodingTrain/Wave-Function-Collapse",
109+
"description": "Coding Train Github WFC repository."
110+
},
111+
{
112+
"icon": "🔗",
113+
"title": "p5.js copy()",
114+
"url": "https://p5js.org/reference/p5/copy/",
115+
"description": "p5.js reference page for copy() function"
116+
},
117+
{
118+
"icon": "🔗",
119+
"title": "p5.js web editor console log GitHub issue",
120+
"url": "https://github.com/processing/p5.js-web-editor/issues/3178",
121+
"description": "Issue discussing console.log and objects with circular references."
122+
},
123+
{
124+
"icon": "🔗",
125+
"title": "JavaScript concat() method",
126+
"url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat",
127+
"description": "JavaScript documentation for array concat() method."
128+
},
129+
{
130+
"icon": "🔗",
131+
"title": "p5.js randomSeed()",
132+
"url": "https://p5js.org/reference/p5/randomSeed/",
133+
"description": "p5.js reference page for randomSeed() function"
134+
}
135+
]
136+
},
137+
{
138+
"title": "Videos",
139+
"links": [
140+
{
141+
"icon": "🎥",
142+
"title": "Pixel Array",
143+
"url": "/tracks/p5-tips-and-tricks/more-p5/pixel-array",
144+
"description": "Video tutorial on how to work with pixel array in p5.js."
145+
},
146+
{
147+
"icon": "🎥",
148+
"title": "Modulo Operator",
149+
"url": "https://www.youtube.com/watch?v=r5Iy3v1co0A",
150+
"description": "Video tutorial with Golan Levin explaining modulo operator."
151+
},
152+
{
153+
"icon": "🎥",
154+
"title": "Array Functions: filter() - Topics of JavaScript/ES6",
155+
"url": "/tracks/topics-in-native-javascript/js/array-filter",
156+
"description": "Video tutorial on higher order array function filter()."
157+
},
158+
{
159+
"icon": "🎥",
160+
"title": "Arrow Function",
161+
"url": "/tracks/topics-in-native-javascript/js/arrow-functions",
162+
"description": "Video tutorial on JavaScript arrow notation."
163+
}
164+
]
165+
},
166+
{
167+
"title": "Creative Works Featured",
168+
"links": [
169+
{
170+
"icon": "🎨",
171+
"title": "Townscaper",
172+
"url": "https://www.townscapergame.com/",
173+
"description": "Created by Oskar Stålberg, 3D WFC system that creates cute little houses, arches, stairways, bridges and lush backyards."
174+
},
175+
{
176+
"icon": "🎨",
177+
"title": "unity-wave-function-collapse",
178+
"url": "https://selfsame.itch.io/unitywfc",
179+
"description": "A fork of Wave Function Collapse with tools for the Unity Game engine by @ExUtumno."
180+
},
181+
{
182+
"icon": "🎨",
183+
"title": "Super Mario WFC",
184+
"url": "https://observablehq.com/@makio135/super-mario-wfc",
185+
"description": "Generating variations of Super Mario Bros worlds with Wave Function Collapse."
186+
},
187+
{
188+
"icon": "🎨",
189+
"title": "Zelda WFC",
190+
"url": "https://observablehq.com/@makio135/zelda-wfc",
191+
"description": "Generating variations of Zelda maps with Wave Function Collapse."
192+
},
193+
{
194+
"icon": "🎨",
195+
"title": "Infinite procedurally generated city",
196+
"url": "https://marian42.de/article/wfc/",
197+
"description": "a game where you walk through an infinite city that is procedurally generated as you walk."
198+
}
199+
]
200+
}
201+
],
202+
"credits": [
203+
{
204+
"title": "Editing",
205+
"name": "Mathieu Blanchette"
206+
},
207+
{
208+
"title": "Animations",
209+
"name": "Jason Heglund"
210+
}
211+
]
212+
}

‎content/videos/challenges/186-wfc-overlapping-model/index.png

56.1 KB
Loading

0 commit comments

Comments
 (0)