title
Coding Challenge 171: Wave Function Collapse

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

detail
{'title': 'Coding Challenge 171: Wave Function Collapse', 'heatmap': [{'end': 805.126, 'start': 749.813, 'weight': 0.708}, {'end': 1135.551, 'start': 1078.779, 'weight': 0.823}, {'end': 2218.976, 'start': 2169.327, 'weight': 0.771}, {'end': 2841.592, 'start': 2735.178, 'weight': 0.719}, {'end': 3685.732, 'start': 3631.885, 'weight': 0.757}, {'end': 4579.004, 'start': 4526.503, 'weight': 1}, {'end': 4699.546, 'start': 4669.221, 'weight': 0.892}], 'summary': 'Explores the wave function collapse algorithm for generating images, discussing its implementation and understanding, reducing tile entropy, debugging, image rotation, tile object design, interactive tile selection, and tile edge comparison, with a call to action for audience participation and showcasing potential 3d applications.', 'chapters': [{'end': 97.001, 'segs': [{'end': 63.18, 'src': 'embed', 'start': 1.052, 'weight': 0, 'content': [{'end': 4.453, 'text': "Hello and welcome to today's Coding Challenge, Wave Function Collapse.", 'start': 1.052, 'duration': 3.401}, {'end': 11.015, 'text': "This was originally suggested in 2017 on the Coding Train's GitHub suggestion box.", 'start': 4.693, 'duration': 6.322}, {'end': 20.798, 'text': 'The algorithm itself was originally pioneered by MXGMN on GitHub in this wonderful repository with lots of sample imagery and explanation.', 'start': 11.195, 'duration': 9.603}, {'end': 27.264, 'text': 'The core idea of the wave function collapse algorithm is to take an input image and generate an output image.', 'start': 21.238, 'duration': 6.026}, {'end': 32.569, 'text': 'Many output images that all mimic the style, the pattern of that original image.', 'start': 27.584, 'duration': 4.985}, {'end': 37.874, 'text': "Now you might be thinking, aha, don't we have giant deep neural networks that can do this? Yes.", 'start': 32.609, 'duration': 5.265}, {'end': 41.579, 'text': 'But this algorithm is incredible because it uses none of that.', 'start': 38.675, 'duration': 2.904}, {'end': 43.522, 'text': 'And it is just a joy to watch.', 'start': 41.699, 'duration': 1.823}, {'end': 51.973, 'text': "I should say if you're here thinking oh goody, here comes a step-by-step tutorial on how to implement the wave function collapse algorithm,", 'start': 43.722, 'duration': 8.251}, {'end': 53.355, 'text': "it's probably not what you're going to get.", 'start': 51.973, 'duration': 1.382}, {'end': 57.737, 'text': "I have not done it before other than a brief failed attempt that didn't get very far.", 'start': 53.655, 'duration': 4.082}, {'end': 59.678, 'text': "So I'm here to try it again.", 'start': 58.057, 'duration': 1.621}, {'end': 63.18, 'text': "What you're seeing to the left and right of me is hopefully the end result of this video.", 'start': 59.818, 'duration': 3.362}], 'summary': 'Wave function collapse algorithm generates output images mimicking original image style without using deep neural networks.', 'duration': 62.128, 'max_score': 1.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM1052.jpg'}, {'end': 101.404, 'src': 'embed', 'start': 77.728, 'weight': 2, 'content': [{'end': 84.553, 'text': 'as well as a full explanation of the algorithm, as well as many, many, many links to forks and spinoffs and variations of it.', 'start': 77.728, 'duration': 6.825}, {'end': 92.298, 'text': 'the other resource that I am following closely for this challenge is the wave function collapse post on the processing forum itself.', 'start': 84.553, 'duration': 7.745}, {'end': 95.48, 'text': 'Thank you very much to Solib, who started this thread.', 'start': 92.878, 'duration': 2.602}, {'end': 97.001, 'text': 'Tons of great information there.', 'start': 95.74, 'duration': 1.261}, {'end': 101.404, 'text': 'I highly recommend you take a look at all the explanations and diagrams and source code as well.', 'start': 97.101, 'duration': 4.303}], 'summary': 'The transcript discusses algorithm explanation and resources for wave function collapse challenge.', 'duration': 23.676, 'max_score': 77.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM77728.jpg'}], 'start': 1.052, 'title': 'Wave function collapse', 'summary': 'Discusses the wave function collapse algorithm, introduced in 2017, for generating images in the style of the original image without deep neural networks, with the presenter attempting its implementation.', 'chapters': [{'end': 97.001, 'start': 1.052, 'title': 'Wave function collapse', 'summary': 'Discusses the wave function collapse algorithm, originally suggested in 2017, which generates multiple output images mimicking the style of the original image without using deep neural networks, with the presenter attempting its implementation.', 'duration': 95.949, 'highlights': ['The wave function collapse algorithm aims to generate multiple output images resembling the style of the original image, using none of the giant deep neural networks commonly used for similar tasks.', "The algorithm was originally suggested in 2017 on the Coding Train's GitHub suggestion box and was pioneered by MXGMN on GitHub, with a repository containing sample imagery and explanations.", 'The presenter is attempting to implement the wave function collapse algorithm, aiming to showcase the end result during the video.', 'The presenter acknowledges that the video may not provide a step-by-step tutorial on implementing the wave function collapse algorithm, as their previous attempt was a brief failed one.', 'The presenter is closely following a wave function collapse post on the processing forum, along with a GitHub repository that contains the source code and a full explanation of the algorithm, as well as links to forks and variations of it.']}], 'duration': 95.949, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM1052.jpg', 'highlights': ['The wave function collapse algorithm aims to generate multiple output images resembling the style of the original image, using none of the giant deep neural networks commonly used for similar tasks.', "The algorithm was originally suggested in 2017 on the Coding Train's GitHub suggestion box and was pioneered by MXGMN on GitHub, with a repository containing sample imagery and explanations.", 'The presenter is closely following a wave function collapse post on the processing forum, along with a GitHub repository that contains the source code and a full explanation of the algorithm, as well as links to forks and variations of it.', 'The presenter is attempting to implement the wave function collapse algorithm, aiming to showcase the end result during the video.', 'The presenter acknowledges that the video may not provide a step-by-step tutorial on implementing the wave function collapse algorithm, as their previous attempt was a brief failed one.']}, {'end': 1124.021, 'segs': [{'end': 126.458, 'src': 'embed', 'start': 97.101, 'weight': 0, 'content': [{'end': 101.404, 'text': 'I highly recommend you take a look at all the explanations and diagrams and source code as well.', 'start': 97.101, 'duration': 4.303}, {'end': 107.047, 'text': "Let's begin by answering the question why is it called wave function, collapse??", 'start': 101.784, 'duration': 5.263}, {'end': 115.152, 'text': 'While this is an algorithm for procedural generative images which could be applied to art and games and so many different kinds of creative things that you might try,', 'start': 107.467, 'duration': 7.685}, {'end': 118.133, 'text': 'the term itself comes from quantum mechanics.', 'start': 115.152, 'duration': 2.981}, {'end': 126.458, 'text': "What does it mean to collapse a wave function? To answer this question, let's talk about another term, entropy.", 'start': 118.554, 'duration': 7.904}], 'summary': 'Algorithm for generative images derived from quantum mechanics, explaining wave function collapse and entropy.', 'duration': 29.357, 'max_score': 97.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM97101.jpg'}, {'end': 203.32, 'src': 'embed', 'start': 172.543, 'weight': 1, 'content': [{'end': 176.745, 'text': 'The average entropy of this system we could think of as nine.', 'start': 172.543, 'duration': 4.202}, {'end': 186.488, 'text': "What's exciting about the concept of entropy as applied to games like Wordle or Sudoku, is when we know some additional information like aha,", 'start': 178.001, 'duration': 8.487}, {'end': 192.594, 'text': 'we see the board comes with one number already filled in, like the number nine here.', 'start': 186.488, 'duration': 6.106}, {'end': 195.596, 'text': 'then suddenly the entropy is reduced for.', 'start': 192.594, 'duration': 3.002}, {'end': 203.32, 'text': 'These two cells, all of these cells, all of these cells and all of these cells here right?', 'start': 196.577, 'duration': 6.743}], 'summary': 'The average entropy of the system is nine, and knowing additional information reduces the entropy.', 'duration': 30.777, 'max_score': 172.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM172543.jpg'}, {'end': 272.371, 'src': 'embed', 'start': 220.789, 'weight': 3, 'content': [{'end': 228.373, 'text': 'The idea of collapse in the context of entropy is to collapse all the possible states down into one.', 'start': 220.789, 'duration': 7.584}, {'end': 232.316, 'text': 'remove all the entropy from a single variable of the system.', 'start': 228.373, 'duration': 3.943}, {'end': 235.998, 'text': 'So this cell in Sudoku is collapsed to nine.', 'start': 232.636, 'duration': 3.362}, {'end': 237.899, 'text': 'This cell is collapsed to two.', 'start': 236.378, 'duration': 1.521}, {'end': 243.002, 'text': 'As certain cells collapse and their state is revealed to be a single option,', 'start': 238.359, 'duration': 4.643}, {'end': 252.387, 'text': "the entropy is reduced for its neighbors and we can start to make guesses there and further collapse and further collapse and further collapse until we've solved the Sudoku board.", 'start': 243.542, 'duration': 8.845}, {'end': 256.91, 'text': "I'm going to start over with an example Sudoku board that I got off the Internet.", 'start': 252.547, 'duration': 4.363}, {'end': 272.371, 'text': 'The process of solving a Sudoku puzzle is exactly the same process that lives inside the wave function collapse algorithm.', 'start': 264.585, 'duration': 7.786}], 'summary': 'Entropy collapse reduces possible states, solving sudoku with wave function collapse.', 'duration': 51.582, 'max_score': 220.789, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM220789.jpg'}, {'end': 370.498, 'src': 'embed', 'start': 339.229, 'weight': 6, 'content': [{'end': 352.178, 'text': "Now that I've finally solved this Sudoku puzzle, we can look at a P5 canvas and try to understand how does the process for solving a Sudoku puzzle,", 'start': 339.229, 'duration': 12.949}, {'end': 357.142, 'text': 'map to the process for generating an image through wave function, collapse?', 'start': 352.178, 'duration': 4.964}, {'end': 363.126, 'text': 'Now, there are two ways to approach wave function collapse.', 'start': 359.503, 'duration': 3.623}, {'end': 367.129, 'text': "There's the tile model and the overlapping model.", 'start': 363.326, 'duration': 3.803}, {'end': 370.498, 'text': "I'm going to start with the tile model.", 'start': 368.795, 'duration': 1.703}], 'summary': 'Solved sudoku puzzle, exploring process of wave function collapse for image generation.', 'duration': 31.269, 'max_score': 339.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM339229.jpg'}, {'end': 590.532, 'src': 'embed', 'start': 563.59, 'weight': 7, 'content': [{'end': 568.314, 'text': 'And voila, I generated this image with wave function collapse.', 'start': 563.59, 'duration': 4.724}, {'end': 575.259, 'text': 'I could run this again, roll the different dice again, and get another image and another and another and another.', 'start': 568.654, 'duration': 6.605}, {'end': 579.383, 'text': 'It took me quite a long time to work this out with my brain and draw it.', 'start': 575.68, 'duration': 3.703}, {'end': 590.532, 'text': 'Hopefully, if we can write the code to load these tiles, to know which tiles go next to which tiles, we can generate these images lickety split.', 'start': 580.043, 'duration': 10.489}], 'summary': 'Image generated with wave function collapse, can be generated quickly with code.', 'duration': 26.942, 'max_score': 563.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM563590.jpg'}, {'end': 805.126, 'src': 'heatmap', 'start': 749.813, 'weight': 0.708, 'content': [{'end': 756.238, 'text': "Then I'm going to count through every row and every column, find the index into that one-dimensional grid array.", 'start': 749.813, 'duration': 6.425}, {'end': 760.361, 'text': 'This is the same thing I do in all of my videos about the pixel array.', 'start': 756.438, 'duration': 3.923}, {'end': 764.504, 'text': "And then if it's been collapsed, there's only one option left.", 'start': 760.682, 'duration': 3.822}, {'end': 767.787, 'text': 'So find the correct image and draw it.', 'start': 764.925, 'duration': 2.862}, {'end': 770.009, 'text': 'Otherwise, just draw a black rectangle.', 'start': 767.947, 'duration': 2.062}, {'end': 776.394, 'text': "So if I'm doing my job correctly, if I were to refresh the page, I should see all black rectangles.", 'start': 770.309, 'duration': 6.085}, {'end': 780.856, 'text': "And let's actually give them a white stroke so we kind of see this grid.", 'start': 776.954, 'duration': 3.902}, {'end': 783.677, 'text': 'Great No cells have been collapsed.', 'start': 781.456, 'duration': 2.221}, {'end': 789.319, 'text': "Let's collapse one of the cells manually just by hard coding it and see if we get the proper result.", 'start': 784.337, 'duration': 4.982}, {'end': 795.162, 'text': "It's collapsed, and we should see the up tile in it.", 'start': 792.16, 'duration': 3.002}, {'end': 798.903, 'text': 'Options is not defined.', 'start': 797.403, 'duration': 1.5}, {'end': 801.024, 'text': 'Oh, cell.options.', 'start': 799.804, 'duration': 1.22}, {'end': 805.126, 'text': 'And we need to make sure we draw the image the right side.', 'start': 802.925, 'duration': 2.201}], 'summary': 'Count through grid, collapse cells, draw image or black rectangle.', 'duration': 55.313, 'max_score': 749.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM749813.jpg'}, {'end': 875.894, 'src': 'embed', 'start': 830.081, 'weight': 8, 'content': [{'end': 834.865, 'text': "It'll be out of order, but I could sort a copy of the array because I have objects in it.", 'start': 830.081, 'duration': 4.784}, {'end': 839.609, 'text': 'Oh, this was a good thing that I put objects in there because the arrays just point to the object.', 'start': 835.005, 'duration': 4.604}, {'end': 843.412, 'text': 'So I can multiple arrays with the same object, the same data in them, but in different orders.', 'start': 839.629, 'duration': 3.783}, {'end': 844.072, 'text': 'Oh, this is great.', 'start': 843.512, 'duration': 0.56}, {'end': 849.877, 'text': 'And in JavaScript, the slice function will just make a copy of the array.', 'start': 846.674, 'duration': 3.203}, {'end': 852.973, 'text': 'Then I can call the sort function.', 'start': 851.371, 'duration': 1.602}, {'end': 858.782, 'text': 'If I were just sorting an array of words, it would be easy to do alphabetical order or ascending or descending order.', 'start': 853.314, 'duration': 5.468}, {'end': 864.45, 'text': "But here, I've got to define my own compare function in order to say how I'm going to sort them.", 'start': 859.102, 'duration': 5.348}, {'end': 875.894, 'text': 'If this strange arrow syntax is unfamiliar to you, might I refer you to some video I made 100 years ago about the arrow function?', 'start': 868.246, 'duration': 7.648}], 'summary': 'Objects in array allow multiple copies with same data, but in different orders. sort function requires custom compare function.', 'duration': 45.813, 'max_score': 830.081, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM830081.jpg'}, {'end': 1057.168, 'src': 'embed', 'start': 1009.999, 'weight': 10, 'content': [{'end': 1013.621, 'text': 'I have now sorted the array according to the entropy of each cell.', 'start': 1009.999, 'duration': 3.622}, {'end': 1019.022, 'text': 'And I have a new array with just the elements that have the least entropy.', 'start': 1014.101, 'duration': 4.921}, {'end': 1020.883, 'text': 'So now I can pick one randomly.', 'start': 1019.262, 'duration': 1.621}, {'end': 1026.744, 'text': "So I'm going to pick one randomly from the copy of that array.", 'start': 1023.184, 'duration': 3.56}, {'end': 1028.244, 'text': 'And then I need to collapse that one.', 'start': 1026.964, 'duration': 1.28}, {'end': 1031.506, 'text': "Let's call this cell.", 'start': 1029.945, 'duration': 1.561}, {'end': 1036.028, 'text': 'And then this is the pick is.', 'start': 1033.767, 'duration': 2.261}, {'end': 1044.238, 'text': 'Now, as is always true on the coding train, this could all be refactored in many more elegant ways.', 'start': 1039.454, 'duration': 4.784}, {'end': 1047.64, 'text': "And I look forward to hearing all about it in the comments about how you're doing it.", 'start': 1044.318, 'duration': 3.322}, {'end': 1054.205, 'text': "But basically, I want to pick the cell, collapse it, pick from its available options, and then I'm just overwriting the array.", 'start': 1048.04, 'duration': 6.165}, {'end': 1057.168, 'text': 'What should be left over is an array with one thing left in it.', 'start': 1054.706, 'duration': 2.462}], 'summary': 'Array sorted by entropy, pick one randomly, and collapse it to leave one element.', 'duration': 47.169, 'max_score': 1009.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM1009999.jpg'}], 'start': 97.101, 'title': 'Understanding wave function collapse', 'summary': 'Explains wave function collapse in generative images, drawing parallels to quantum mechanics, entropy, and information theory, referencing 3blue1brown video. it also explores entropy in games like sudoku and its relation to wave function collapse, focusing on puzzle-solving processes. furthermore, the chapter discusses generating images using wave function collapse, p5 sketch, pre-made tiles, and collapsing cells based on entropy to efficiently generate images. additionally, it discusses sorting arrays with objects in javascript, defining compare functions, and using slice and splice functions to sort the array based on cell entropy, resulting in an array with only one element left.', 'chapters': [{'end': 146.333, 'start': 97.101, 'title': 'Understanding wave function collapse in art and games', 'summary': 'Explains the concept of wave function collapse in the context of procedural generative images, drawing a parallel to quantum mechanics, and also delves into the connection between entropy and information theory, referencing a relevant 3blue1brown video.', 'duration': 49.232, 'highlights': ["The term 'wave function collapse' originates from quantum mechanics and is utilized in the context of procedural generative images for art and games.", 'The chapter draws a connection between entropy and information theory, referencing a 3Blue1Brown video on optimizing solutions for Wordle using these concepts.', 'The explanation provides insights into the application of wave function collapse in various creative endeavors, highlighting its versatility.']}, {'end': 557.735, 'start': 146.714, 'title': 'Entropy in games: sudoku and wave function collapse', 'summary': 'Explores the concept of entropy as applied to games like wordle or sudoku, and its relation to wave function collapse in the context of reducing entropy to solve puzzles, with a focus on the process of solving a sudoku puzzle and its mapping to the wave function collapse algorithm.', 'duration': 411.021, 'highlights': ['The process of solving a Sudoku puzzle is exactly the same process that lives inside the wave function collapse algorithm. The process of solving a Sudoku puzzle is directly linked to the wave function collapse algorithm, showcasing the practical application of reducing entropy to solve puzzles.', 'The idea of collapse in the context of entropy is to collapse all the possible states down into one, remove all the entropy from a single variable of the system. Explains the concept of collapse in the context of entropy, emphasizing the reduction of entropy to a single state, demonstrating the practical application of entropy reduction in solving puzzles.', 'The average entropy of this system we could think of as nine. Discusses the average entropy of the Sudoku system, providing a quantifiable measure of entropy in the context of the game.']}, {'end': 830.061, 'start': 563.59, 'title': 'Wave function collapse', 'summary': 'Discusses the process of generating images using wave function collapse, the use of p5 sketch and pre-made tiles to create a grid, and the algorithm for collapsing cells based on entropy to generate images efficiently.', 'duration': 266.471, 'highlights': ['The chapter discusses the process of generating images using wave function collapse, the use of P5 sketch and pre-made tiles to create a grid, and the algorithm for collapsing cells based on entropy to generate images efficiently.', 'The speaker generated an image with wave function collapse and can generate multiple images quickly by rerunning the process.', 'The speaker aims to write the code to load tiles, determine neighboring tiles, and efficiently generate images.', 'The algorithm for collapsing cells based on entropy is considered simple, but the complexity lies in determining the data structures needed to hold grid information and tile neighbor relationships.', 'The speaker plans to start with a 2 by 2 grid and use an object for every spot, along with variables to keep track of index values.', 'The speaker explains the process of calculating the width and height of each cell on the grid and drawing the appropriate image based on collapse status.', 'An attempt to manually collapse a cell and display the proper result led to the realization of the need to evaluate and measure entropy for efficient cell collapsing.', 'The speaker contemplates sorting the array for entropy evaluation and measures to be taken for efficient cell collapsing.']}, {'end': 1124.021, 'start': 830.081, 'title': 'Sorting arrays and defining compare functions in javascript', 'summary': 'Discusses sorting arrays with objects in javascript, defining compare functions, and using the slice and splice functions, aiming to sort the array based on the entropy of each cell and pick one randomly, ultimately resulting in an array with only one element left.', 'duration': 293.94, 'highlights': ['The chapter discusses sorting arrays with objects in JavaScript The speaker mentions sorting arrays with objects in JavaScript and how putting objects in the array allows multiple arrays to have the same data in different orders.', 'Defining compare functions and using the slice and splice functions The speaker explains the need to define a compare function when sorting arrays, and the use of the slice function to make a copy of the array and the splice function to remove elements from the array.', 'Sorting the array based on the entropy of each cell and picking one randomly The speaker describes sorting the array based on the entropy of each cell and then picking one randomly from the sorted array.', 'Resulting in an array with only one element left The chapter concludes with the aim to have an array with only one element left after the sorting and picking process.']}], 'duration': 1026.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM97101.jpg', 'highlights': ["The term 'wave function collapse' originates from quantum mechanics and is utilized in the context of procedural generative images for art and games.", 'The chapter draws a connection between entropy and information theory, referencing a 3Blue1Brown video on optimizing solutions for Wordle using these concepts.', 'The explanation provides insights into the application of wave function collapse in various creative endeavors, highlighting its versatility.', 'The process of solving a Sudoku puzzle is exactly the same process that lives inside the wave function collapse algorithm.', 'The idea of collapse in the context of entropy is to collapse all the possible states down into one, remove all the entropy from a single variable of the system.', 'The average entropy of this system we could think of as nine.', 'The chapter discusses the process of generating images using wave function collapse, the use of P5 sketch and pre-made tiles to create a grid, and the algorithm for collapsing cells based on entropy to generate images efficiently.', 'The speaker generated an image with wave function collapse and can generate multiple images quickly by rerunning the process.', 'The chapter discusses sorting arrays with objects in JavaScript.', 'Defining compare functions and using the slice and splice functions.', 'Sorting the array based on the entropy of each cell and picking one randomly.', 'Resulting in an array with only one element left.']}, {'end': 1755.555, 'segs': [{'end': 1153.702, 'src': 'embed', 'start': 1124.041, 'weight': 0, 'content': [{'end': 1125.224, 'text': 'OK There we go.', 'start': 1124.041, 'duration': 1.183}, {'end': 1128.106, 'text': 'So now this is its random first pick happening here.', 'start': 1125.484, 'duration': 2.622}, {'end': 1135.551, 'text': 'The next step is to reevaluate all the tiles and reduce their entropy where necessary.', 'start': 1128.626, 'duration': 6.925}, {'end': 1141.514, 'text': 'So, for example, this tile right here, same entropy but the one up top and the one to the right.', 'start': 1135.851, 'duration': 5.663}, {'end': 1148.819, 'text': 'the entropy changes because by picking that tile in the top right, it reduces the number of options that go to the left and underneath.', 'start': 1141.514, 'duration': 7.305}, {'end': 1153.702, 'text': 'I need to create a new array, which is the sort of next generation of tiles.', 'start': 1149.399, 'duration': 4.303}], 'summary': 'Random pick reduces entropy, creating new array of tiles.', 'duration': 29.661, 'max_score': 1124.041, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM1124041.jpg'}, {'end': 1220.585, 'src': 'embed', 'start': 1191.429, 'weight': 1, 'content': [{'end': 1194.831, 'text': 'Here is where I need yet another data structure.', 'start': 1191.429, 'duration': 3.402}, {'end': 1196.813, 'text': 'I have five tiles.', 'start': 1195.532, 'duration': 1.281}, {'end': 1205.139, 'text': 'What if I had an array where every element of the array stored a list of valid neighbors?', 'start': 1197.273, 'duration': 7.866}, {'end': 1208.001, 'text': 'So what are the valid neighbors for a blank tile?', 'start': 1205.499, 'duration': 2.502}, {'end': 1210.303, 'text': 'Oh wait, wait, wait, wait, wait, wait.', 'start': 1208.021, 'duration': 2.282}, {'end': 1211.284, 'text': 'Oh my goodness.', 'start': 1210.703, 'duration': 0.581}, {'end': 1218.783, 'text': 'Each element of the array needs to also be an array.', 'start': 1213.399, 'duration': 5.384}, {'end': 1220.585, 'text': 'I could really think of this as a lookup table.', 'start': 1218.823, 'duration': 1.762}], 'summary': 'Using an array to store valid neighbors for five tiles as a lookup table.', 'duration': 29.156, 'max_score': 1191.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM1191429.jpg'}, {'end': 1337.343, 'src': 'embed', 'start': 1306.984, 'weight': 3, 'content': [{'end': 1311.668, 'text': 'Tiles that could go to the right are another one, three, or four.', 'start': 1306.984, 'duration': 4.684}, {'end': 1315.156, 'text': 'That could connect below.', 'start': 1313.615, 'duration': 1.541}, {'end': 1321.302, 'text': 'Below is blank, so it could only be a 0 or a 3.', 'start': 1315.817, 'duration': 5.485}, {'end': 1324.244, 'text': 'And then to the left what tile can go here??', 'start': 1321.302, 'duration': 2.942}, {'end': 1328.339, 'text': '2, can, 3, can or another 1?', 'start': 1324.264, 'duration': 4.075}, {'end': 1337.343, 'text': "The good news here is I've assigned variable names to each of these tiles so that it'll be easier for me now that I start to write this out in code.", 'start': 1328.339, 'duration': 9.004}], 'summary': 'Tiles 1, 3, and 4 can go to the right, with options for 0 or 3 below. variable names assigned for easier coding.', 'duration': 30.359, 'max_score': 1306.984, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM1306984.jpg'}, {'end': 1480.683, 'src': 'embed', 'start': 1451.816, 'weight': 2, 'content': [{'end': 1460.458, 'text': 'This tile that is pointing up, I could say connect to any tile that has a connector, a one, or that is blank, a zero.', 'start': 1451.816, 'duration': 8.642}, {'end': 1468.901, 'text': 'So really, for each of these, I only need to store four numbers, and then zeros need to connect with zeros, and ones need to connect with ones.', 'start': 1460.778, 'duration': 8.123}, {'end': 1471.802, 'text': "I'm not going to double back and redo mine this way.", 'start': 1469.181, 'duration': 2.621}, {'end': 1472.982, 'text': 'Yes, I will.', 'start': 1472.202, 'duration': 0.78}, {'end': 1480.683, 'text': "I'm just going to categorize the edges as A or B or zero or one.", 'start': 1476.4, 'duration': 4.283}], 'summary': 'Tiles can connect based on four numbers; zeros connect with zeros, ones with ones. categorizing edges as a or b, zero or one.', 'duration': 28.867, 'max_score': 1451.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM1451816.jpg'}, {'end': 1660.179, 'src': 'embed', 'start': 1626.857, 'weight': 4, 'content': [{'end': 1635.862, 'text': "these are the existing options and I'm going to pass them into a function to check if any of those options are included as valid.", 'start': 1626.857, 'duration': 9.005}, {'end': 1643.491, 'text': 'So somewhere else in my code right here This is the array, and these are the valid options.', 'start': 1636.142, 'duration': 7.349}, {'end': 1648.734, 'text': "Is that the order I put them in? The array is options and what's valid.", 'start': 1643.572, 'duration': 5.162}, {'end': 1657.398, 'text': 'If valid includes array index i, great.', 'start': 1651.615, 'duration': 5.783}, {'end': 1660.179, 'text': "So I want to check, or I'll say not.", 'start': 1657.878, 'duration': 2.301}], 'summary': 'Pass existing options into a function to check for validity.', 'duration': 33.322, 'max_score': 1626.857, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM1626857.jpg'}, {'end': 1721.143, 'src': 'embed', 'start': 1693.382, 'weight': 5, 'content': [{'end': 1696.705, 'text': "If when I get to up, it's not valid, let me remove it out of there.", 'start': 1693.382, 'duration': 3.323}, {'end': 1698.107, 'text': 'This would result.', 'start': 1697.106, 'duration': 1.001}, {'end': 1701.799, 'text': 'So hopefully that helps you make sense of it.', 'start': 1700.199, 'duration': 1.6}, {'end': 1708.141, 'text': "I don't love, maybe I should, I'll just say like current equals array index i.", 'start': 1702.059, 'duration': 6.082}, {'end': 1708.981, 'text': 'Maybe just element.', 'start': 1708.141, 'duration': 0.84}, {'end': 1712.421, 'text': 'So this helps, maybe helps you read it a little bit.', 'start': 1710.321, 'duration': 2.1}, {'end': 1714.782, 'text': "Let's look at every element in the array.", 'start': 1712.661, 'duration': 2.121}, {'end': 1718.083, 'text': "If it's included, if it's not invalid, get rid of it.", 'start': 1715.142, 'duration': 2.941}, {'end': 1721.143, 'text': 'So now I think I could just do the same thing for all of these.', 'start': 1718.543, 'duration': 2.6}], 'summary': 'Removing invalid elements from the array to improve readability and functionality.', 'duration': 27.761, 'max_score': 1693.382, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM1693382.jpg'}], 'start': 1124.041, 'title': 'Reducing tile entropy and validating options', 'summary': 'Discusses reducing entropy in a tile grid by evaluating and updating neighbor options, using a lookup table data structure, creating rules for tile connections, and developing a function to check and remove invalid options, with a focus on improving code efficiency.', 'chapters': [{'end': 1306.603, 'start': 1124.041, 'title': 'Tile entropy reduction process', 'summary': 'Discusses the process of reducing entropy in a grid of tiles by evaluating and updating valid neighbor options, using a lookup table data structure to store valid connections, and considering an optimal approach for determining valid neighbors.', 'duration': 182.562, 'highlights': ['The process involves reevaluating tiles and reducing their entropy based on the number of valid options, with examples showing changes in entropy based on neighboring tiles.', 'Creating a new array for the next generation of tiles, taking into account collapsed tiles and determining valid options based on neighboring tiles.', 'Introduction of a data structure storing a list of valid neighbors for each tile, resembling a lookup table, and using numbers to represent tiles and their connections.', 'Discussion on the method of storing information in a clockwise direction for tiles and their valid connections, considering optimal approaches for determining valid neighbors.']}, {'end': 1603.3, 'start': 1306.984, 'title': 'Tile connection rules', 'summary': 'Discusses creating rules for tile connections in a code, simplifying the data structure and categorizing edges as a or b, with a focus on building remaining options and valid tiles for each tile based on its neighbors.', 'duration': 296.316, 'highlights': ['Simplifying the data structure and categorizing edges as A or B, with a focus on building remaining options and valid tiles for each tile based on its neighbors. The speaker discusses simplifying the data structure for tile connections and categorizing edges as A or B, emphasizing building remaining options and valid tiles for each tile based on its neighbors.', 'Creating rules for tile connections in a code and assigning variable names to each tile for easier implementation. The speaker explains the process of creating rules for tile connections in a code and assigning variable names to each tile for easier implementation.', 'Discussing the process of determining valid tiles for each tile based on its neighbors and the original array representation. The speaker discusses the process of determining valid tiles for each tile based on its neighbors and the original array representation.']}, {'end': 1755.555, 'start': 1603.74, 'title': 'Valid options check function', 'summary': 'Discusses creating a function to check the validity of options within an array and removing invalid elements, iterating through each element to validate and potentially remove it, aiming to streamline the process and improve code efficiency.', 'duration': 151.815, 'highlights': ['Creating a function to check if any of those options are included as valid The speaker plans to create a function to validate options, aiming to streamline the process.', 'Iterating through every element of the array to check its validity The process involves iterating through every element of the array to check its validity.', 'Removing invalid elements from the array The goal is to remove invalid elements from the array to enhance efficiency.']}], 'duration': 631.514, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM1124041.jpg', 'highlights': ['The process involves reevaluating tiles and reducing their entropy based on the number of valid options, with examples showing changes in entropy based on neighboring tiles.', 'Introduction of a data structure storing a list of valid neighbors for each tile, resembling a lookup table, and using numbers to represent tiles and their connections.', 'Simplifying the data structure and categorizing edges as A or B, with a focus on building remaining options and valid tiles for each tile based on its neighbors.', 'Creating rules for tile connections in a code and assigning variable names to each tile for easier implementation.', 'Creating a function to check if any of those options are included as valid The speaker plans to create a function to validate options, aiming to streamline the process.', 'Removing invalid elements from the array The goal is to remove invalid elements from the array to enhance efficiency.']}, {'end': 2608.554, 'segs': [{'end': 2218.976, 'src': 'heatmap', 'start': 2152.191, 'weight': 3, 'content': [{'end': 2153.812, 'text': 'I was so close for a second there.', 'start': 2152.191, 'duration': 1.621}, {'end': 2155.234, 'text': 'Oh, no, no, no.', 'start': 2154.613, 'duration': 0.621}, {'end': 2158.517, 'text': 'I still want to check valid individually in each one.', 'start': 2155.254, 'duration': 3.263}, {'end': 2160.999, 'text': 'I want to concatenate all the, I was right.', 'start': 2158.537, 'duration': 2.462}, {'end': 2162.16, 'text': 'I was right.', 'start': 2161.56, 'duration': 0.6}, {'end': 2169.307, 'text': 'I just, I did it across everything, but I need to concatenate for each individual possibility.', 'start': 2162.28, 'duration': 7.027}, {'end': 2170.248, 'text': 'Hold on, hold on, hold on.', 'start': 2169.327, 'duration': 0.921}, {'end': 2172.73, 'text': "I'm going to double back and explain this.", 'start': 2170.648, 'duration': 2.082}, {'end': 2181.335, 'text': 'There you go.', 'start': 2180.574, 'duration': 0.761}, {'end': 2183.157, 'text': "That's the correct answer.", 'start': 2181.796, 'duration': 1.361}, {'end': 2184.919, 'text': 'There you go.', 'start': 2184.319, 'duration': 0.6}, {'end': 2186.341, 'text': 'Wave function collapsed.', 'start': 2185.039, 'duration': 1.302}, {'end': 2187.042, 'text': 'Okay, hold on.', 'start': 2186.581, 'duration': 0.461}, {'end': 2192.088, 'text': "It appeared in my head, and I don't know if it appeared in your head also while watching this.", 'start': 2188.023, 'duration': 4.065}, {'end': 2194.13, 'text': 'So let me see if I can go back and explain that.', 'start': 2192.348, 'duration': 1.782}, {'end': 2196.113, 'text': 'This is me.', 'start': 2195.412, 'duration': 0.701}, {'end': 2197.574, 'text': 'I am a tile.', 'start': 2196.433, 'duration': 1.141}, {'end': 2198.616, 'text': "That's what it's become.", 'start': 2197.675, 'duration': 0.941}, {'end': 2204.389, 'text': "Let's say the tile above me can only possibly be left or right.", 'start': 2199.707, 'duration': 4.682}, {'end': 2209.291, 'text': 'For whatever reason, it only has two possibilities.', 'start': 2205.009, 'duration': 4.282}, {'end': 2218.976, 'text': 'So what I need to do is look at all of the valid things that can be below a left tile and a right tile, concatenate those together.', 'start': 2210.272, 'duration': 8.704}], 'summary': 'Explaining the process of concatenating valid possibilities for left and right tiles.', 'duration': 32.728, 'max_score': 2152.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM2152191.jpg'}, {'end': 2355.859, 'src': 'embed', 'start': 2327.853, 'weight': 2, 'content': [{'end': 2333.519, 'text': "I'm back a few days later, and I know you've been watching what is already like a very long video about wave function collapse.", 'start': 2327.853, 'duration': 5.666}, {'end': 2337.244, 'text': 'And I did get to a point where I made something, which is pretty great.', 'start': 2333.78, 'duration': 3.464}, {'end': 2343.07, 'text': "I'm looking at this example of this printed circuit board, seeing that there are 14 tiles there.", 'start': 2337.884, 'duration': 5.186}, {'end': 2347.115, 'text': 'Some of those tiles represent four possible rotations.', 'start': 2343.651, 'duration': 3.464}, {'end': 2355.859, 'text': "Looking at the way that I've implemented this code with an element of an array for every tile with all of the possible adjacencies,", 'start': 2347.375, 'duration': 8.484}], 'summary': 'Discussed implementation of code for printed circuit board with 14 tiles and 4 rotations.', 'duration': 28.006, 'max_score': 2327.853, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM2327853.jpg'}, {'end': 2449.756, 'src': 'embed', 'start': 2393.195, 'weight': 0, 'content': [{'end': 2400.223, 'text': 'and I could automate the rotation of this tile into its other possibilities.', 'start': 2393.195, 'duration': 7.028}, {'end': 2407.062, 'text': 'and then enumerate all of the adjacency rules with code.', 'start': 2403.2, 'duration': 3.862}, {'end': 2423.23, 'text': 'And I think, if I create a tile class that keeps track of what image is it and what are its edges still going in the same order, top right,', 'start': 2407.462, 'duration': 15.768}, {'end': 2432.592, 'text': 'bottom left, that this will make the code more readable and easier to figure out and work and make for more fun wave function,', 'start': 2423.23, 'duration': 9.362}, {'end': 2433.973, 'text': 'collapsing of everything.', 'start': 2432.592, 'duration': 1.381}, {'end': 2435.813, 'text': 'I think my brain is collapsing.', 'start': 2434.233, 'duration': 1.58}, {'end': 2438.234, 'text': 'So let me start by making the tile class.', 'start': 2436.393, 'duration': 1.841}, {'end': 2446.255, 'text': 'I had used the tiles array to load the images.', 'start': 2443.555, 'duration': 2.7}, {'end': 2449.756, 'text': "So now I'm going to actually have an array called tile images.", 'start': 2446.335, 'duration': 3.421}], 'summary': 'Automated tile rotation with adjacency rules will enhance code readability and fun wave function collapsing.', 'duration': 56.561, 'max_score': 2393.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM2393195.jpg'}], 'start': 1755.555, 'title': 'Debugging and wave function collapse', 'summary': 'Covers the debugging process for coding errors, involving identifying mistakes, updating variables, and testing the code, resulting in error resolution. it also discusses the coding and troubleshooting of a wave function collapse algorithm, emphasizing challenges faced, iterative modifications, creation of a tile class, and implementation of a rotation function.', 'chapters': [{'end': 1887.293, 'start': 1755.555, 'title': 'Coding error debugging process', 'summary': 'Describes the process of debugging a coding error, including identifying the mistake, updating variables, and testing the code, resulting in resolving the error and making necessary adjustments.', 'duration': 131.738, 'highlights': ['The process of debugging a coding error, including identifying the mistake, updating variables, and testing the code.', "Identifying the incorrect variable usage by recognizing the array names 'tiles' and 'grid' as being different.", "Updating the variable names 'tiles' to 'grid' and 'next grid' to resolve the error and make necessary adjustments.", "Recognizing the need to convert the 'rules' object to an array to fix the issue."]}, {'end': 2608.554, 'start': 1887.933, 'title': 'Wave function collapse', 'summary': 'Illustrates the process of coding and troubleshooting a wave function collapse algorithm, highlighting the challenges faced and the iterative modifications made, ultimately leading to the creation of a tile class and the implementation of a rotation function.', 'duration': 720.621, 'highlights': ['The process of coding and troubleshooting a wave function collapse algorithm, including iterative modifications and challenges faced.', 'The creation of a tile class to manage tiles and their edges, providing a more readable and manageable code structure.', "The implementation of a rotation function to automate the rotation of tiles and enumerate adjacency rules, enhancing the algorithm's flexibility and scalability.", 'The use of console logs and console table for debugging and visualizing the array, aiding in identifying flaws and errors in the algorithm.']}], 'duration': 852.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM1755555.jpg', 'highlights': ["The implementation of a rotation function to automate the rotation of tiles and enumerate adjacency rules, enhancing the algorithm's flexibility and scalability.", 'The creation of a tile class to manage tiles and their edges, providing a more readable and manageable code structure.', 'The process of coding and troubleshooting a wave function collapse algorithm, including iterative modifications and challenges faced.', 'The process of debugging a coding error, including identifying the mistake, updating variables, and testing the code.']}, {'end': 3065.144, 'segs': [{'end': 2664.402, 'src': 'embed', 'start': 2608.554, 'weight': 0, 'content': [{'end': 2616.198, 'text': 'Ah! So all I then need to do is use the modulo operator And this should give me perfect wraparound.', 'start': 2608.554, 'duration': 7.644}, {'end': 2622.585, 'text': "Always take the previous one, but if the previous one is negative, you're going to get the higher value.", 'start': 2616.558, 'duration': 6.027}, {'end': 2626.049, 'text': "And it's not one, it's the number of rotations.", 'start': 2622.786, 'duration': 3.263}, {'end': 2631.836, 'text': 'So now I can return a new tile with the new image and the new edges.', 'start': 2626.991, 'duration': 4.845}, {'end': 2641.121, 'text': 'So before I go any further, I just want to determine if this at least worked rotating these images.', 'start': 2633.032, 'duration': 8.089}, {'end': 2645.226, 'text': 'The difference now is the image is a property of that tile object.', 'start': 2641.602, 'duration': 3.624}, {'end': 2652.235, 'text': 'Something is wrong.', 'start': 2651.434, 'duration': 0.801}, {'end': 2654.396, 'text': 'My rotation is not working.', 'start': 2652.295, 'duration': 2.101}, {'end': 2660.9, 'text': "So I've made a sort of classic error in P5 here where I didn't think about the origin around which I was rotating.", 'start': 2654.916, 'duration': 5.984}, {'end': 2664.402, 'text': "So I've rotated the image off the canvas that I'm drawing it to.", 'start': 2661.24, 'duration': 3.162}], 'summary': 'Using modulo operator for perfect wraparound, handling rotations and image properties, encountering an error in image rotation in p5.', 'duration': 55.848, 'max_score': 2608.554, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM2608554.jpg'}, {'end': 2717.522, 'src': 'embed', 'start': 2687.018, 'weight': 2, 'content': [{'end': 2689.059, 'text': 'But this is not relevant to the algorithm.', 'start': 2687.018, 'duration': 2.041}, {'end': 2691.221, 'text': "It's just a matter of designing the tile images.", 'start': 2689.139, 'duration': 2.082}, {'end': 2697.265, 'text': "And ultimately, I'm going to use the tile images from here to see if I can create a more sophisticated pattern.", 'start': 2691.381, 'duration': 5.884}, {'end': 2698.546, 'text': 'So now,', 'start': 2697.626, 'duration': 0.92}, {'end': 2709.936, 'text': "instead of having this big array that's just a mess of all of these rules could I procedurally generate the rules by analyzing the tile objects that I'm creating?", 'start': 2698.546, 'duration': 11.39}, {'end': 2717.522, 'text': "As long as I'm doing that, why not put in the tile object itself lists of valid neighbors?", 'start': 2710.396, 'duration': 7.126}], 'summary': 'Designing tile images to create a more sophisticated pattern and procedurally generate rules based on tile objects.', 'duration': 30.504, 'max_score': 2687.018, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM2687018.jpg'}, {'end': 2841.592, 'src': 'heatmap', 'start': 2735.178, 'weight': 0.719, 'content': [{'end': 2741.541, 'text': "They've got a list of options as well as whether they're collapsed or not, but I should make a class with a constructor to generate these.", 'start': 2735.178, 'duration': 6.363}, {'end': 2751.006, 'text': 'These names are no longer relevant.', 'start': 2748.825, 'duration': 2.181}, {'end': 2755.949, 'text': 'The list of options can just be the index values to the tiles array.', 'start': 2751.427, 'duration': 4.522}, {'end': 2762.864, 'text': 'So what I want to pass in is the total amount of tiles there actually are.', 'start': 2758.1, 'duration': 4.764}, {'end': 2773.451, 'text': 'Then I can fill the array with, if there are five options, 0, 1, 2, 3, 4.', 'start': 2767.988, 'duration': 5.463}, {'end': 2779.517, 'text': 'Of course, that could be done with some higher order functions, like fill, and map, and from, and have a ball doing that.', 'start': 2773.452, 'duration': 6.065}, {'end': 2784.241, 'text': "I actually just spent a little while doing it myself and it was very confusing and I didn't want to include it in this video,", 'start': 2779.898, 'duration': 4.343}, {'end': 2785.402, 'text': "but here's what it looks like.", 'start': 2784.241, 'duration': 1.161}, {'end': 2787.564, 'text': 'Loaded and created the tiles.', 'start': 2786.163, 'duration': 1.401}, {'end': 2792.347, 'text': 'I built a cell for every spot on the grid.', 'start': 2789.366, 'duration': 2.981}, {'end': 2799.129, 'text': 'And now I need to generate the adjacency rules based on the edges.', 'start': 2794.628, 'duration': 4.501}, {'end': 2812.094, 'text': "For every tile, I'm going to just write a function called analyze and give it all the tiles, all the other tiles.", 'start': 2802.411, 'duration': 9.683}, {'end': 2814.555, 'text': "So the tile object's going to have to figure this out.", 'start': 2812.474, 'duration': 2.081}, {'end': 2820.383, 'text': "let's call this the connection, is edges index zero.", 'start': 2816.681, 'duration': 3.702}, {'end': 2826.745, 'text': 'Now, if we look at all the tiles, I mean, we should check if a tile could connect to itself.', 'start': 2822.063, 'duration': 4.682}, {'end': 2828.686, 'text': 'That is a valid thing to check.', 'start': 2827.146, 'duration': 1.54}, {'end': 2830.727, 'text': "So I'm looking at all the tiles regardless.", 'start': 2829.186, 'duration': 1.541}, {'end': 2841.592, 'text': 'So if my connection up is a certain value, I need to find all of the tiles that have that same connection pointing down, which is index two.', 'start': 2832.448, 'duration': 9.144}], 'summary': 'Creating a class to generate options and adjacency rules for tiles based on grid edges, using higher order functions like fill, map, and from.', 'duration': 106.414, 'max_score': 2735.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM2735178.jpg'}, {'end': 2826.745, 'src': 'embed', 'start': 2794.628, 'weight': 1, 'content': [{'end': 2799.129, 'text': 'And now I need to generate the adjacency rules based on the edges.', 'start': 2794.628, 'duration': 4.501}, {'end': 2812.094, 'text': "For every tile, I'm going to just write a function called analyze and give it all the tiles, all the other tiles.", 'start': 2802.411, 'duration': 9.683}, {'end': 2814.555, 'text': "So the tile object's going to have to figure this out.", 'start': 2812.474, 'duration': 2.081}, {'end': 2820.383, 'text': "let's call this the connection, is edges index zero.", 'start': 2816.681, 'duration': 3.702}, {'end': 2826.745, 'text': 'Now, if we look at all the tiles, I mean, we should check if a tile could connect to itself.', 'start': 2822.063, 'duration': 4.682}], 'summary': 'Generating adjacency rules for tiles based on edges and analyzing connections.', 'duration': 32.117, 'max_score': 2794.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM2794628.jpg'}], 'start': 2608.554, 'title': 'Image rotation and tile objects', 'summary': 'Discusses the process of rotating images within a canvas, addressing symmetry and alignment, and the design of tile images for procedural generation, involving rules for analyzing valid neighbors and generating adjacency rules based on edges.', 'chapters': [{'end': 2686.697, 'start': 2608.554, 'title': 'Image rotation and wrapping', 'summary': 'Discusses the process of rotating images within a canvas, addressing issues such as using the modulo operator for perfect wraparound and correcting errors in image rotation, with a focus on ensuring symmetry and alignment. the chapter also delves into determining the success of the image rotation process.', 'duration': 78.143, 'highlights': ['The process involves using the modulo operator for perfect wraparound, ensuring that the previous value is taken, and addressing cases where the previous value is negative, resulting in a higher value.', 'Correcting errors in image rotation by considering the origin around which the rotation occurs and ensuring proper alignment within the canvas.', 'Addressing the slight asymmetry in the rotation by translating the image to the center before rotation, resulting in a visually appealing outcome.', 'The chapter delves into evaluating the success of the image rotation process, emphasizing the importance of determining if the rotation functionality is working as intended.']}, {'end': 3065.144, 'start': 2687.018, 'title': 'Tile objects and procedural generation', 'summary': 'Discusses the process of designing tile images and utilizing tile objects to procedurally generate rules for analyzing valid neighbors and generating adjacency rules based on edges, involving the loading and creation of tiles and cells, as well as addressing errors during the process of creating a generic, scalable solution.', 'duration': 378.126, 'highlights': ['The process of using tile objects to procedurally generate rules for analyzing valid neighbors and generating adjacency rules based on edges. The chapter delves into the concept of utilizing tile objects to procedurally generate rules for analyzing valid neighbors and generating adjacency rules based on edges, involving the loading and creation of tiles and cells.', 'Addressing errors and making adjustments during the process of creating a generic, scalable solution. The chapter covers the process of making adjustments and addressing errors encountered during the creation of a generic, scalable solution for generating adjacency rules based on edges.', 'Designing tile images and utilizing tile objects in the procedural generation process. The chapter discusses the design of tile images and the utilization of tile objects in the procedural generation process for creating a sophisticated pattern.']}], 'duration': 456.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM2608554.jpg', 'highlights': ['The chapter delves into evaluating the success of the image rotation process, emphasizing the importance of determining if the rotation functionality is working as intended.', 'Addressing errors and making adjustments during the process of creating a generic, scalable solution. The chapter covers the process of making adjustments and addressing errors encountered during the creation of a generic, scalable solution for generating adjacency rules based on edges.', 'Designing tile images and utilizing tile objects in the procedural generation process. The chapter discusses the design of tile images and the utilization of tile objects in the procedural generation process for creating a sophisticated pattern.', 'The process involves using the modulo operator for perfect wraparound, ensuring that the previous value is taken, and addressing cases where the previous value is negative, resulting in a higher value.']}, {'end': 3678.764, 'segs': [{'end': 3147.266, 'src': 'embed', 'start': 3095.925, 'weight': 5, 'content': [{'end': 3099.968, 'text': "Those aren't cell objects because I did something really pretty terrible.", 'start': 3095.925, 'duration': 4.043}, {'end': 3107.432, 'text': "At the end, instead of creating the new cell object for the next generation, I'm just making an object literal, which is not right.", 'start': 3100.408, 'duration': 7.024}, {'end': 3109.273, 'text': 'So I need to say new cell.', 'start': 3107.792, 'duration': 1.481}, {'end': 3113.896, 'text': 'And the options, this is when a new cell is made.', 'start': 3110.934, 'duration': 2.962}, {'end': 3116.877, 'text': 'How about I could give it options.', 'start': 3114.636, 'duration': 2.241}, {'end': 3120.239, 'text': "I'm trying to think of an elegant way to design the constructor now.", 'start': 3117.658, 'duration': 2.581}, {'end': 3129.244, 'text': "So I just did a little testing in the console here that I could determine if a variable is an array by saying instance of array, and I'll get true.", 'start': 3120.579, 'duration': 8.665}, {'end': 3142.943, 'text': 'So I think what I could do here in this cell class is I can say if num is an instance of an array, then this.options equals that array.', 'start': 3129.744, 'duration': 13.199}, {'end': 3143.864, 'text': "It's no longer num.", 'start': 3142.963, 'duration': 0.901}, {'end': 3144.604, 'text': "It's the array.", 'start': 3143.904, 'duration': 0.7}, {'end': 3146.366, 'text': "I mean, I don't know what to call that variable.", 'start': 3144.644, 'duration': 1.722}, {'end': 3147.266, 'text': "I'll still call it a num.", 'start': 3146.386, 'duration': 0.88}], 'summary': 'Improving code to create new cell objects and handle options elegantly.', 'duration': 51.341, 'max_score': 3095.925, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM3095925.jpg'}, {'end': 3334.852, 'src': 'embed', 'start': 3300.65, 'weight': 2, 'content': [{'end': 3307.119, 'text': 'Let me go back and make it 20 by 20.', 'start': 3300.65, 'duration': 6.469}, {'end': 3310.804, 'text': 'Wave function collapse, exactly what I had before.', 'start': 3307.119, 'duration': 3.685}, {'end': 3315.07, 'text': "But now, again, it's not always going to find a solution.", 'start': 3310.944, 'duration': 4.126}, {'end': 3317.193, 'text': 'And I got to talk about how to deal with that.', 'start': 3315.31, 'duration': 1.883}, {'end': 3325.683, 'text': "But now, I don't have to create a massive map of all of the tiles and their adjacencies.", 'start': 3317.573, 'duration': 8.11}, {'end': 3334.852, 'text': "All I need to do is load tile images and some numeric indicator for what's a valid connection of an edge.", 'start': 3326.384, 'duration': 8.468}], 'summary': 'Discussing a 20 by 20 grid, wave function collapse, and simplifying tile connections.', 'duration': 34.202, 'max_score': 3300.65, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM3300650.jpg'}, {'end': 3535.266, 'src': 'embed', 'start': 3495.713, 'weight': 4, 'content': [{'end': 3500.496, 'text': 'Ordinarily, I would just write a loop now to load them into the array based on the number of the file.', 'start': 3495.713, 'duration': 4.783}, {'end': 3503.398, 'text': "But since I want to skip two, I'm going to do it manually.", 'start': 3500.756, 'duration': 2.642}, {'end': 3515.426, 'text': "OK, so you can see I'm loading them into an array of 11 tile images, skipping four and five.", 'start': 3509.942, 'duration': 5.484}, {'end': 3535.266, 'text': 'Now I put in the connections, zeros, all zeros, all ones, 1211, 1313.', 'start': 3520.495, 'duration': 14.771}], 'summary': 'Manually loading 11 tile images, skipping 4 and 5, with specific connections and values.', 'duration': 39.553, 'max_score': 3495.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM3495713.jpg'}, {'end': 3678.764, 'src': 'embed', 'start': 3626.476, 'weight': 0, 'content': [{'end': 3630.442, 'text': 'Tile zero, it only can connect to tile four.', 'start': 3626.476, 'duration': 3.966}, {'end': 3632.606, 'text': "I'm so close.", 'start': 3631.885, 'duration': 0.721}, {'end': 3636.672, 'text': 'I think I could get image four and image five in there.', 'start': 3632.826, 'duration': 3.846}, {'end': 3638.475, 'text': "No, I can't.", 'start': 3637.473, 'duration': 1.002}, {'end': 3643.814, 'text': 'One day later.', 'start': 3642.253, 'duration': 1.561}, {'end': 3645.696, 'text': 'Welcome to day three.', 'start': 3644.355, 'duration': 1.341}, {'end': 3651.621, 'text': "This time, I'm finally going to complete the wave function collapse algorithm.", 'start': 3646.076, 'duration': 5.545}, {'end': 3658.306, 'text': 'First, I need to say a huge thank you to Telemako and Garasbalg who, overnight, while I was sleeping,', 'start': 3651.901, 'duration': 6.405}, {'end': 3662.609, 'text': 'added some GitHub issues on the wave function collapse, repository,', 'start': 3658.306, 'duration': 4.303}, {'end': 3670.396, 'text': 'pointing to the keys to unlocking the asymmetrical tiles and placing them correctly that I was struggling with yesterday.', 'start': 3662.609, 'duration': 7.787}, {'end': 3678.764, 'text': "An incredible demonstration of the solution I'm about to attempt is Oskar Stahlberg's Unity implementation of Wave Function Collapse.", 'start': 3670.896, 'duration': 7.868}], 'summary': "Striving to complete wave function collapse algorithm with help from telemako and garasbalg, aiming to implement oskar stahlberg's unity solution.", 'duration': 52.288, 'max_score': 3626.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM3626476.jpg'}], 'start': 3065.164, 'title': 'Debugging and implementing algorithms', 'summary': 'Covers debugging techniques for cell object creation and the wave function collapse algorithm, emphasizing error identification, resolution, and the implementation process, with a focus on array instances, logic errors, and manual loading of 11 tile images.', 'chapters': [{'end': 3176.399, 'start': 3065.164, 'title': 'Debugging cell object creation', 'summary': 'Discusses debugging a cell object creation process, including identifying errors and implementing correct object instantiation techniques, with a focus on determining array instances and options assignment.', 'duration': 111.235, 'highlights': ['The speaker debugs the process of creating cell objects, identifying the issue of using object literals instead of creating new cell objects, leading to errors in the generation of cells.', 'The speaker demonstrates testing for array instances and assigns options based on whether the provided variable is an array or a sum total.']}, {'end': 3359.133, 'start': 3176.96, 'title': 'Debugging wave function collapse', 'summary': 'Discusses debugging the wave function collapse algorithm, identifying and resolving a logic error, and progressing towards generating a pcb using fixed tiles and circuit board tiles.', 'duration': 182.173, 'highlights': ['The chapter discusses identifying a logic error in the Wave Function Collapse algorithm and resolving it by adjusting the function to use the index of the tile instead of the actual tile objects, resulting in successful debugging.', "The author mentions increasing the size of the grid to 20 by 20 and achieving the Wave Function Collapse, indicating progress in the algorithm's functionality.", 'The author expresses the ability to generate a PCB by loading tile images and inferring adjacencies, showcasing potential advancement in the project.']}, {'end': 3678.764, 'start': 3359.473, 'title': 'Wave function collapse algorithm', 'summary': 'Presents the process of implementing the wave function collapse algorithm, including manual loading of 11 tile images, skipping specific tiles, and the completion of the algorithm with the help of external resources.', 'duration': 319.291, 'highlights': ['The chapter details the manual loading of 11 tile images, skipping four and five, into an array and putting in the connections, zeros, all zeros, all ones, 1211, 1313.', 'The process of implementing the wave function collapse algorithm involves rotating tiles, with a total of 11 tiles being rotated once, twice, and thrice, excluding the first two tiles.', "The completion of the wave function collapse algorithm is facilitated by external resources, particularly the assistance from Telemako and Garasbalg, who added GitHub issues providing solutions, and Oskar Stahlberg's Unity implementation of Wave Function Collapse."]}], 'duration': 613.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM3065164.jpg', 'highlights': ["The completion of the wave function collapse algorithm is facilitated by external resources, particularly the assistance from Telemako and Garasbalg, who added GitHub issues providing solutions, and Oskar Stahlberg's Unity implementation of Wave Function Collapse.", 'The chapter discusses identifying a logic error in the Wave Function Collapse algorithm and resolving it by adjusting the function to use the index of the tile instead of the actual tile objects, resulting in successful debugging.', "The author mentions increasing the size of the grid to 20 by 20 and achieving the Wave Function Collapse, indicating progress in the algorithm's functionality.", 'The process of implementing the wave function collapse algorithm involves rotating tiles, with a total of 11 tiles being rotated once, twice, and thrice, excluding the first two tiles.', 'The chapter details the manual loading of 11 tile images, skipping four and five, into an array and putting in the connections, zeros, all zeros, all ones, 1211, 1313.', 'The speaker demonstrates testing for array instances and assigns options based on whether the provided variable is an array or a sum total.', 'The speaker debugs the process of creating cell objects, identifying the issue of using object literals instead of creating new cell objects, leading to errors in the generation of cells.']}, {'end': 4152.175, 'segs': [{'end': 3742.25, 'src': 'embed', 'start': 3679.205, 'weight': 0, 'content': [{'end': 3685.732, 'text': 'In it, you can interactively start to select tiles and it will visually show to you which tiles are left.', 'start': 3679.205, 'duration': 6.527}, {'end': 3694.64, 'text': 'You can also let it run and watch the process as it selects the tiles and the magic of wave function collapse unfolds over the screen.', 'start': 3686.232, 'duration': 8.408}, {'end': 3703.589, 'text': 'The beautifully designed tiles of this demonstration are not symmetrical along the edges, but each edge can be divided into three parts.', 'start': 3694.9, 'duration': 8.689}, {'end': 3706.151, 'text': 'The left part, the right part and the middle part.', 'start': 3703.949, 'duration': 2.202}, {'end': 3715.337, 'text': 'And as long as Brown matches with brown, blue matches with blue, half brown, half light brown matches with half light brown, half dark brown.', 'start': 3706.452, 'duration': 8.885}, {'end': 3716.837, 'text': 'The process will work.', 'start': 3715.477, 'duration': 1.36}, {'end': 3722.52, 'text': 'And thanks to the magic of these colorful markers, I have redrawn all of these tiles.', 'start': 3717.197, 'duration': 5.323}, {'end': 3733.005, 'text': 'So I think I can make a key to enumerate all of the possible parts with each edge divided into three that could be on any tile, symmetrical or not.', 'start': 3722.7, 'duration': 10.305}, {'end': 3738.468, 'text': 'So this first tile, which is all black, is fully symmetrical along all the edges and all rotations.', 'start': 3733.385, 'duration': 5.083}, {'end': 3742.25, 'text': "And I think, because I've numbered all the tiles,", 'start': 3739.829, 'duration': 2.421}], 'summary': 'Interactive demonstration of wave function collapse with visually represented tiles and color matching process.', 'duration': 63.045, 'max_score': 3679.205, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM3679205.jpg'}, {'end': 3890.792, 'src': 'embed', 'start': 3867.909, 'weight': 1, 'content': [{'end': 3876.475, 'text': "Nonetheless, these tile objects still have to be created individually because I'm going to manually notate all of the letters for the edges.", 'start': 3867.909, 'duration': 8.566}, {'end': 3885.382, 'text': "And by the way, there's a key term that I should be using when talking about all of these edges, and that is the term socket.", 'start': 3876.956, 'duration': 8.426}, {'end': 3890.792, 'text': 'You can think of each section of an edge as a socket.', 'start': 3886.687, 'duration': 4.105}], 'summary': 'Tile objects created individually for edge letters, referred to as sockets.', 'duration': 22.883, 'max_score': 3867.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM3867909.jpg'}], 'start': 3679.205, 'title': 'Interactive tile selection and wave function collapse', 'summary': 'Discusses the interactive selection of non-symmetrical tiles, wave function collapse, and the enumeration of possible tile parts. it emphasizes the use of colors and letters to distinguish and match different tile edges, and also covers the manual creation of tile edges and sockets, highlighting the need for specific notations and potential for automation.', 'chapters': [{'end': 3867.909, 'start': 3679.205, 'title': 'Interactive tile selection and wave function collapse', 'summary': 'Discusses the interactive selection of non-symmetrical tiles, the process of wave function collapse, and the enumeration of possible tile parts, with the demonstration showcasing the use of colors and letters to distinguish and match different tile edges.', 'duration': 188.704, 'highlights': ['The demonstration allows interactive selection of tiles and visually shows the remaining options, facilitating the understanding of the wave function collapse process.', 'The tiles in the demonstration are not symmetrical along the edges and can be divided into three parts, with matching rules based on color combinations (e.g., brown matches with brown, blue matches with blue, etc.).', 'The speaker introduces a system of using letters to represent different colors on the tiles, enabling easier distinction and matching of the tile edges.', 'The process of enumerating all possible parts with each edge divided into three is discussed, with an emphasis on distinguishing symmetrical and asymmetrical tiles.', 'The speaker mentions the plan to turn the process into a loop to improve efficiency, highlighting the importance of streamlining the tile selection and matching.']}, {'end': 4152.175, 'start': 3867.909, 'title': 'Tile edges and sockets', 'summary': 'Discusses the manual creation of tile edges and sockets, emphasizing the need for specific notations and the process of ensuring compatibility between edges. it also hints at the potential for automation while encountering unexpected patterns and errors during code execution.', 'duration': 284.266, 'highlights': ['The manual creation of tile edges and sockets is discussed, emphasizing the need for specific notations and careful consideration of symmetry and orientation. ', 'The process of ensuring compatibility between edges is highlighted, with an emphasis on the need for edges to match up and lock together. ', 'The possibility of automating the process using color values of pixels along the edges is mentioned, although the decision to proceed manually is made for the current project. ', 'Encountering unexpected patterns and errors during code execution is mentioned, adding an element of unpredictability to the process. ']}], 'duration': 472.97, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM3679205.jpg', 'highlights': ['The demonstration allows interactive selection of tiles and visually shows the remaining options, facilitating the understanding of the wave function collapse process.', 'The manual creation of tile edges and sockets is discussed, emphasizing the need for specific notations and careful consideration of symmetry and orientation.', 'The process of enumerating all possible parts with each edge divided into three is discussed, with an emphasis on distinguishing symmetrical and asymmetrical tiles.', 'The process of ensuring compatibility between edges is highlighted, with an emphasis on the need for edges to match up and lock together.', 'The tiles in the demonstration are not symmetrical along the edges and can be divided into three parts, with matching rules based on color combinations (e.g., brown matches with brown, blue matches with blue, etc.)']}, {'end': 4706.41, 'segs': [{'end': 4236.519, 'src': 'embed', 'start': 4181.74, 'weight': 0, 'content': [{'end': 4191.185, 'text': 'so all i need to do is, instead of checking equality, i need to check if one edge is equal to the reverse of another edge,', 'start': 4181.74, 'duration': 9.445}, {'end': 4194.048, 'text': 'and i believe that happens in the check valid function.', 'start': 4191.185, 'duration': 2.863}, {'end': 4196.157, 'text': "No, this isn't it.", 'start': 4195.296, 'duration': 0.861}, {'end': 4199.839, 'text': "It's all about how I generate the adjacency rules.", 'start': 4196.757, 'duration': 3.082}, {'end': 4203.741, 'text': 'CheckVal is just checking to see based on the adjacency rules.', 'start': 4200.419, 'duration': 3.322}, {'end': 4209.184, 'text': 'So I need to regenerate the adjacency rules, which is in this analyze function.', 'start': 4204.041, 'duration': 5.143}, {'end': 4212.866, 'text': "And here I'm checking if tile.edges.", 'start': 4209.684, 'duration': 3.182}, {'end': 4216.408, 'text': "Ah, here's where I'm checking if one edge is equal to another edge.", 'start': 4213.466, 'duration': 2.942}, {'end': 4220.05, 'text': "So let's write a function, compareEdge.", 'start': 4217.068, 'duration': 2.982}, {'end': 4223.752, 'text': 'return a is equal to b.', 'start': 4221.451, 'duration': 2.301}, {'end': 4228.235, 'text': "Is there a string function called reverse? There's an array function called reverse.", 'start': 4223.752, 'duration': 4.483}, {'end': 4231.657, 'text': 'So I think I need to write my own string function to reverse a string.', 'start': 4228.695, 'duration': 2.962}, {'end': 4232.577, 'text': "That's not too hard.", 'start': 4231.837, 'duration': 0.74}, {'end': 4236.519, 'text': 'I could make it into an array.', 'start': 4235.339, 'duration': 1.18}], 'summary': 'Revamping adjacency rules and implementing edge comparison in code.', 'duration': 54.779, 'max_score': 4181.74, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM4181740.jpg'}, {'end': 4325.818, 'src': 'embed', 'start': 4298.66, 'weight': 5, 'content': [{'end': 4302.282, 'text': 'So the reverse function in p5 actually does the work of reversing the array.', 'start': 4298.66, 'duration': 3.622}, {'end': 4304.564, 'text': 'But it does say deprecate it.', 'start': 4302.663, 'duration': 1.901}, {'end': 4309.407, 'text': 'It will be removed in a future version of p5 because there already is an array.reverse function.', 'start': 4304.624, 'duration': 4.783}, {'end': 4312.129, 'text': 'So that all makes sense, and everything is right with the world again.', 'start': 4309.427, 'duration': 2.702}, {'end': 4314.971, 'text': 'I just need to call this reverse string, which is more clear anyway.', 'start': 4312.149, 'duration': 2.822}, {'end': 4316.812, 'text': 'All right.', 'start': 4316.432, 'duration': 0.38}, {'end': 4318.493, 'text': "You've waited long enough.", 'start': 4317.392, 'duration': 1.101}, {'end': 4319.374, 'text': "Let's see.", 'start': 4318.914, 'duration': 0.46}, {'end': 4321.555, 'text': 'Oh, shoot.', 'start': 4320.475, 'duration': 1.08}, {'end': 4323.757, 'text': 'Assignment to a constant variable.', 'start': 4322.156, 'duration': 1.601}, {'end': 4325.818, 'text': 'I made it constant.', 'start': 4324.877, 'duration': 0.941}], 'summary': 'The reverse function in p5 is being deprecated and will be removed in a future version due to the existence of array.reverse function.', 'duration': 27.158, 'max_score': 4298.66, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM4298660.jpg'}, {'end': 4436.777, 'src': 'embed', 'start': 4411.165, 'weight': 1, 'content': [{'end': 4417.652, 'text': "I think there's some optimization and cleanup I could do in the code and ultimately implementing backtracking,", 'start': 4411.165, 'duration': 6.487}, {'end': 4420.836, 'text': 'going back and trying a different solution would make sense here.', 'start': 4417.652, 'duration': 3.184}, {'end': 4423.599, 'text': "But I'm just going to keep things simple and have it start over.", 'start': 4421.076, 'duration': 2.523}, {'end': 4427.011, 'text': "I'm going to write a function called startOver.", 'start': 4424.85, 'duration': 2.161}, {'end': 4436.777, 'text': 'In setup, I create all the tile objects, I put them into a big tiles array, I analyze all the adjacency rules, and then create a new grid.', 'start': 4427.632, 'duration': 9.145}], 'summary': 'Discussing optimization and cleanup in the code for creating tile objects, analyzing adjacency rules, and creating a new grid.', 'duration': 25.612, 'max_score': 4411.165, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM4411165.jpg'}, {'end': 4579.004, 'src': 'heatmap', 'start': 4526.503, 'weight': 1, 'content': [{'end': 4530.587, 'text': "Let's try upping the resolution to 40 by 40.", 'start': 4526.503, 'duration': 4.084}, {'end': 4536.614, 'text': "My guess is it's going to run very slow because I haven't bothered to think about other ways to optimize the performance, but let's see what happens.", 'start': 4530.587, 'duration': 6.027}, {'end': 4549.27, 'text': 'Wave function collapse.', 'start': 4547.389, 'duration': 1.881}, {'end': 4550.99, 'text': 'We have it, everybody.', 'start': 4549.67, 'duration': 1.32}, {'end': 4552.891, 'text': 'There is so much more to do here.', 'start': 4551.27, 'duration': 1.621}, {'end': 4556.452, 'text': "First of all, I haven't even attempted the overlapping model.", 'start': 4552.991, 'duration': 3.461}, {'end': 4561.013, 'text': "I'm going to wait until you're sometime in the future actually watching this.", 'start': 4556.832, 'duration': 4.181}, {'end': 4564.294, 'text': 'This is a video on YouTube so I can get a lot of comments and feedback.', 'start': 4561.053, 'duration': 3.241}, {'end': 4573.42, 'text': "because I'm sure there's lots of things that I've done in sort of strange and odd ways that I might want to think about and address before I move on to the next version of the algorithm,", 'start': 4564.614, 'duration': 8.806}, {'end': 4579.004, 'text': 'which detects the tiles and adjacencies in a way based on doing a pixel analysis.', 'start': 4573.42, 'duration': 5.584}], 'summary': 'Experimenting with 40x40 resolution, seeking feedback for algorithm optimization.', 'duration': 52.501, 'max_score': 4526.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM4526503.jpg'}, {'end': 4706.41, 'src': 'heatmap', 'start': 4669.221, 'weight': 2, 'content': [{'end': 4677.27, 'text': 'Not to mention, this algorithm can be applied in 3D, and whoa, there are so many amazing implementations of wave function collapse in 3D.', 'start': 4669.221, 'duration': 8.049}, {'end': 4682.075, 'text': "YouTube videos, websites, I'll try to link a whole bunch of them, put them up on the screen.", 'start': 4677.65, 'duration': 4.425}, {'end': 4684.476, 'text': "Oh, there's just too many to mention.", 'start': 4682.775, 'duration': 1.701}, {'end': 4690.98, 'text': 'So comment on the video, go to the Coding Train website where there is a place that you could submit your version of this.', 'start': 4684.716, 'duration': 6.264}, {'end': 4692.541, 'text': 'Tag me on social media.', 'start': 4691.301, 'duration': 1.24}, {'end': 4699.546, 'text': 'I want to see the world full of beautiful wave function collapse algorithmically generated images.', 'start': 4692.801, 'duration': 6.745}, {'end': 4706.41, 'text': 'And stay tuned for the next coding challenge or sometime in the future when I tackle the overlapping model.', 'start': 4699.866, 'duration': 6.544}], 'summary': 'Wave function collapse algorithm can be applied in 3d with numerous implementations. encourages viewers to submit their versions for algorithmically generated images and teases a future challenge on the overlapping model.', 'duration': 15.109, 'max_score': 4669.221, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM4669221.jpg'}], 'start': 4153.203, 'title': 'Tile edge comparison and wave function collapse', 'summary': "Covers the process of checking and comparing tile edges, including the need to change from checking for equality to checking if one edge is equal to the reverse of another edge, as well as debugging a wave function collapse algorithm, implementing backtracking, and discussing potential future improvements with a call to action for audience participation, while showcasing the algorithm's potential for 3d applications.", 'chapters': [{'end': 4319.374, 'start': 4153.203, 'title': 'Checking and comparing tile edges', 'summary': 'Discusses the process of checking and comparing tile edges, including the need to change from checking for equality to checking if one edge is equal to the reverse of another edge, the creation of a function to compare edges, and the use of the reverse string function to facilitate the comparison.', 'duration': 166.171, 'highlights': ['The need to change from checking for equality to checking if one edge is equal to the reverse of another edge', 'The creation of a function to compare edges, incorporating the use of the reverse string function to facilitate the comparison', 'The use of the reverse function in P5 to achieve the reversal of the array, with the mention that it will be removed in a future version']}, {'end': 4706.41, 'start': 4320.475, 'title': 'Wave function collapse', 'summary': "Explores debugging a wave function collapse algorithm, implementing backtracking, and discussing potential future improvements, with a call to action for audience participation, while showcasing the algorithm's potential for 3d applications.", 'duration': 385.935, 'highlights': ['Implemented backtracking and identified the cause of error, achieving successful execution on the second attempt. The speaker successfully implemented backtracking, addressing the issue causing the error and achieving successful execution on the second attempt.', 'Discussed potential future improvements, including the overlapping model and 3D applications, and encouraged audience participation in creating algorithmically generated images. The speaker discussed potential future improvements, such as the overlapping model and 3D applications, and encouraged audience participation in creating algorithmically generated images.', 'Highlighted the need for optimization and cleanup in the code, and acknowledged the potential for adding backtracking and extended functionality to the algorithm. The speaker highlighted the need for optimization and cleanup in the code, and acknowledged the potential for adding backtracking and extended functionality to the algorithm.']}], 'duration': 553.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rI_y2GAlQFM/pics/rI_y2GAlQFM4153203.jpg', 'highlights': ['The need to change from checking for equality to checking if one edge is equal to the reverse of another edge', 'Implemented backtracking and identified the cause of error, achieving successful execution on the second attempt', 'Discussed potential future improvements, including the overlapping model and 3D applications, and encouraged audience participation in creating algorithmically generated images', 'The creation of a function to compare edges, incorporating the use of the reverse string function to facilitate the comparison', 'Highlighted the need for optimization and cleanup in the code, and acknowledged the potential for adding backtracking and extended functionality to the algorithm', 'The use of the reverse function in P5 to achieve the reversal of the array, with the mention that it will be removed in a future version']}], 'highlights': ['The wave function collapse algorithm aims to generate multiple output images resembling the style of the original image, using none of the giant deep neural networks commonly used for similar tasks.', "The term 'wave function collapse' originates from quantum mechanics and is utilized in the context of procedural generative images for art and games.", 'The process of solving a Sudoku puzzle is exactly the same process that lives inside the wave function collapse algorithm.', "The implementation of a rotation function to automate the rotation of tiles and enumerate adjacency rules, enhancing the algorithm's flexibility and scalability.", "The completion of the wave function collapse algorithm is facilitated by external resources, particularly the assistance from Telemako and Garasbalg, who added GitHub issues providing solutions, and Oskar Stahlberg's Unity implementation of Wave Function Collapse.", 'The demonstration allows interactive selection of tiles and visually shows the remaining options, facilitating the understanding of the wave function collapse process.', 'Discussed potential future improvements, including the overlapping model and 3D applications, and encouraged audience participation in creating algorithmically generated images']}