title
Coding Challenge 165: Slide Puzzle
description
Let's code a slide puzzle in p5.js together! Sign up for the CuriosityStream + Nebula bundle with a 26% exclusive discount ($14.79 for a full year!) at https://curiositystream.com/codingtrain
We'll be using images, nested loops, and arrays, and by the end of our journey, we'll have a fully playable game! https://thecodingtrain.com/challenges/165-slide-puzzle
p5.js Web Editor Sketches:
đšī¸ Slide Puzzle with Image: https://editor.p5js.org/codingtrain/sketches/o_ljlLilZ
đšī¸ Slide Puzzle with Video: https://editor.p5js.org/codingtrain/sketches/YnLX7bGwW
đšī¸ Slide Puzzle with Canvas: https://editor.p5js.org/codingtrain/sketches/MVCd9trLw
đĨ Previous video: https://youtu.be/hckvHFDGiJk?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
Links discussed in this video:
đ Fisher-Yates Shuffle: https://bost.ocks.org/mike/shuffle/
đ p5.js copy() reference: https://p5js.org/reference/#/p5/copy
Other videos mentioned in this video:
đĨ Coding Challenge 164 Bending Time SlitScan: https://youtu.be/hckvHFDGiJk
Timestamps:
0:00 Welcome!
2:24 Explain! Using copy() to split the source image into tiles?
3:24 Code! The Tile class!
4:40 Explain! Copying tiles from the source image to the puzzle.
5:33 Code! Setting up tile indices and a board array!
6:54 Explain! How should the board work?
8:31 Code! Something went wrong! Let's fix it!
9:55 It works! Now how to draw borders between the tiles?
10:57 Code! Shuffling the board.
14:00 Code! The slide puzzle needs an empty tile!
14:52 Code! A function to move the tiles!
16:59 Code! Checking if tiles are neighbors?
19:37 Code! Random shuffling in draw()!
20:12 Code! Moving pieces with mousePressed()
21:32 Code! What should the sketch do when the puzzle is solved?
23:06 Code! Having fun with the tile grid!
23:55 Let's see if I can solve this...
24:27 Solved it! What will you create?
đ Website: http://thecodingtrain.com/
đž Share Your Creation! https://thecodingtrain.com/Guides/community-contribution-guide.html
đŠ Suggest Topics: https://github.com/CodingTrain/Rainbow-Topics
đĄ GitHub: https://github.com/CodingTrain
đŦ Discord: https://discord.gg/hPuGy2g
đ Membership: http://youtube.com/thecodingtrain/join
đ Store: https://standard.tv/codingtrain
đ Books: https://www.amazon.com/shop/thecodingtrain
đī¸ 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/website/issues/new
detail
{'title': 'Coding Challenge 165: Slide Puzzle', 'heatmap': [{'end': 777.341, 'start': 740.046, 'weight': 0.776}, {'end': 1486.224, 'start': 1452.947, 'weight': 0.99}], 'summary': "In the video 'coding challenge 165: slide puzzle', the host attempts to create a slide puzzle within a time limit, discussing image processing, oop, shuffling array elements, and creating solving functions in javascript, to optimize the process and improve efficiency.", 'chapters': [{'end': 99.606, 'segs': [{'end': 67.833, 'src': 'embed', 'start': 0.069, 'weight': 0, 'content': [{'end': 2.81, 'text': 'Thanks to CuriosityStream for sponsoring this video.', 'start': 0.069, 'duration': 2.741}, {'end': 6.751, 'text': 'Welcome, folks, to a coding challenge.', 'start': 4.651, 'duration': 2.1}, {'end': 8.552, 'text': "I haven't done one of these in a while.", 'start': 7.312, 'duration': 1.24}, {'end': 14.214, 'text': "I'm going to set myself a timer here, and I'm going to attempt to make a slide puzzle.", 'start': 8.972, 'duration': 5.242}, {'end': 16.735, 'text': "So this is the source image that I'm going to use.", 'start': 14.614, 'duration': 2.121}, {'end': 19.436, 'text': 'I need to chop it up into a bunch of pieces.', 'start': 16.775, 'duration': 2.661}, {'end': 23.917, 'text': 'allow you to click, to move the pieces around and see if you could solve it,', 'start': 19.436, 'duration': 4.481}, {'end': 28.259, 'text': "to put it back together and have something detect when it's put back together that it works.", 'start': 23.917, 'duration': 4.342}, {'end': 32.961, 'text': 'All right, so one of the things that we need to use, that I need to use for this, is the copy function.', 'start': 28.499, 'duration': 4.462}, {'end': 38.424, 'text': 'Because what I want to do first is just take this image and chop it up into a bunch of smaller images.', 'start': 33.541, 'duration': 4.883}, {'end': 42.485, 'text': 'So let me call those the pieces.', 'start': 38.964, 'duration': 3.521}, {'end': 43.846, 'text': "And I'll make an array.", 'start': 42.505, 'duration': 1.341}, {'end': 48.908, 'text': 'And then in setup, I should figure out how many columns and rows that I want.', 'start': 43.866, 'duration': 5.042}, {'end': 50.489, 'text': "So let's just make it.", 'start': 49.368, 'duration': 1.121}, {'end': 51.85, 'text': "Right now, it's a 400 by 400.", 'start': 51.089, 'duration': 0.761}, {'end': 55.526, 'text': "So let's just make it 4 by 4.", 'start': 51.85, 'duration': 3.676}, {'end': 59.428, 'text': 'And I also am going to probably want to keep track of the width and height of each piece.', 'start': 55.526, 'duration': 3.902}, {'end': 65.552, 'text': "I probably should do this in an object-oriented way where there's class, piece, and that's not happening right now.", 'start': 60.269, 'duration': 5.283}, {'end': 67.833, 'text': 'For let i equal 0.', 'start': 66.132, 'duration': 1.701}], 'summary': 'Coding challenge to create a slide puzzle using an image, aiming for 4x4 grid', 'duration': 67.764, 'max_score': 0.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs469.jpg'}], 'start': 0.069, 'title': 'Creating a slide puzzle', 'summary': 'Involves the host attempting to create a slide puzzle within a set time limit, using a source image, and discussing the use of the copy function and the need for an object-oriented approach, aiming for a 4x4 grid with smaller images.', 'chapters': [{'end': 99.606, 'start': 0.069, 'title': 'Coding challenge: creating a slide puzzle', 'summary': 'Involves the host attempting to create a slide puzzle within a set time limit, using a source image, and discussing the use of the copy function and the need for an object-oriented approach, aiming for a 4x4 grid with smaller images.', 'duration': 99.537, 'highlights': ['The host attempts to create a slide puzzle within a set time limit The host sets a timer and endeavors to create a slide puzzle within a specified time frame.', "Discussion on the use of the copy function and need for an object-oriented approach The host mentions the use of the copy function to chop up the source image into smaller pieces and discusses the need for an object-oriented approach, particularly highlighting the absence of a class for 'piece' at the moment.", 'Aiming for a 4x4 grid with smaller images The host plans to create a 4x4 grid by setting the number of columns and rows, and mentions the intention to work with smaller images within this grid.']}], 'duration': 99.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs469.jpg', 'highlights': ['The host sets a timer and endeavors to create a slide puzzle within a specified time frame.', "The host mentions the use of the copy function to chop up the source image into smaller pieces and discusses the need for an object-oriented approach, particularly highlighting the absence of a class for 'piece' at the moment.", 'The host plans to create a 4x4 grid by setting the number of columns and rows, and mentions the intention to work with smaller images within this grid.']}, {'end': 244.717, 'segs': [{'end': 129.139, 'src': 'embed', 'start': 100.226, 'weight': 0, 'content': [{'end': 101.387, 'text': 'Oh, I think I could just use get.', 'start': 100.226, 'duration': 1.161}, {'end': 106.149, 'text': "I'm really obsessed with the idea of using copy because hopefully, by the time this video comes out,", 'start': 101.527, 'duration': 4.622}, {'end': 110.151, 'text': 'there will be an entire video all about the copy function and processing in P5..', 'start': 106.149, 'duration': 4.002}, {'end': 111.752, 'text': "Let's look at the reference.", 'start': 110.811, 'duration': 0.941}, {'end': 119.072, 'text': 'Get I believe it returns an array of RGBA values, which is not what I want.', 'start': 113.013, 'duration': 6.059}, {'end': 120.714, 'text': 'I want an actual image.', 'start': 119.133, 'duration': 1.581}, {'end': 122.155, 'text': 'Maybe copy is what I want.', 'start': 120.914, 'duration': 1.241}, {'end': 128.119, 'text': 'I know copy will work in the sense that I can copy from this image onto this image.', 'start': 122.175, 'duration': 5.944}, {'end': 129.139, 'text': "Let's use copy.", 'start': 128.318, 'duration': 0.821}], 'summary': "Exploring the use of 'copy' function in p5 for image processing.", 'duration': 28.913, 'max_score': 100.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs4100226.jpg'}, {'end': 195.047, 'src': 'embed', 'start': 147.493, 'weight': 1, 'content': [{'end': 156.472, 'text': "And what I first want to do is on my canvas, I'm going to chop this up, one, two, three, one, two, three, into four by four.", 'start': 147.493, 'duration': 8.979}, {'end': 164.559, 'text': 'And I want to take this section of the image and place it on the canvas, but keep this as a separate variable, like a piece,', 'start': 156.992, 'duration': 7.567}, {'end': 168.943, 'text': 'so that these pieces can be locked to a part of the original canvas.', 'start': 164.559, 'duration': 4.384}, {'end': 169.603, 'text': 'Oh, I really need it.', 'start': 169.003, 'duration': 0.6}, {'end': 170.644, 'text': 'I just need it now.', 'start': 169.643, 'duration': 1.001}, {'end': 173.406, 'text': 'I got to do this object-oriented, right? Because the piece..', 'start': 170.744, 'duration': 2.662}, {'end': 177.872, 'text': 'should know where its home base is as well as where it currently is.', 'start': 174.227, 'duration': 3.645}, {'end': 181.838, 'text': "So if they're being shuffled when all the pieces are in the right place, we've won.", 'start': 177.933, 'duration': 3.905}, {'end': 182.499, 'text': 'So what do I need?', 'start': 181.858, 'duration': 0.641}, {'end': 195.047, 'text': 'I need to make a class, a piece class that has a current index, Like if I number all these 0, 1, 2, 3, 4, 5, 6, 7, blah, blah, blah, blah, blah.', 'start': 182.519, 'duration': 12.528}], 'summary': 'Creating a piece class to track positions for a puzzle game.', 'duration': 47.554, 'max_score': 147.493, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs4147493.jpg'}], 'start': 100.226, 'title': 'Image processing and oop', 'summary': "Discusses using the 'copy' function for image processing in p5, dividing an image into pieces, and creating a class to track the position of the pieces in a puzzle game.", 'chapters': [{'end': 244.717, 'start': 100.226, 'title': 'Image processing and object-oriented programming', 'summary': "Discusses using the 'copy' function for image processing in p5, dividing an image into pieces, and creating a class to track the position of the pieces in a puzzle game.", 'duration': 144.491, 'highlights': ["The 'copy' function and its use for image processing in P5 is emphasized, with the desire to create an entire video on this topic.", 'The process of dividing an image into pieces and placing them on a canvas, while keeping track of their original positions, is detailed.', 'The decision to implement object-oriented programming for creating a class to track the position of image pieces in a puzzle game is highlighted.']}], 'duration': 144.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs4100226.jpg', 'highlights': ["The 'copy' function and its use for image processing in P5 is emphasized, with the desire to create an entire video on this topic.", 'The process of dividing an image into pieces and placing them on a canvas, while keeping track of their original positions, is detailed.', 'The decision to implement object-oriented programming for creating a class to track the position of image pieces in a puzzle game is highlighted.']}, {'end': 652.2, 'segs': [{'end': 308.778, 'src': 'embed', 'start': 245.417, 'weight': 0, 'content': [{'end': 246.658, 'text': "Then I'm saying copy.", 'start': 245.417, 'duration': 1.241}, {'end': 253.023, 'text': "What am I copying? I'm copying from the source 0, 0, width.", 'start': 249.321, 'duration': 3.702}, {'end': 255.203, 'text': 'Oh, no, no, no, no, no, no, no.', 'start': 253.043, 'duration': 2.16}, {'end': 259.825, 'text': 'In the source, the x location is i times the width.', 'start': 256.184, 'duration': 3.641}, {'end': 264.127, 'text': 'The y location is j times h.', 'start': 260.265, 'duration': 3.862}, {'end': 274.053, 'text': "And I'm copying from the source i, j, width, height, to 0, 0, width, height.", 'start': 264.127, 'duration': 9.926}, {'end': 278.938, 'text': 'So if this is confusing to you, thank goodness I have a whiteboard.', 'start': 274.514, 'duration': 4.424}, {'end': 287.326, 'text': 'Each one of these pieces is an image where this is 0, 0, and its height is width and h.', 'start': 279.378, 'duration': 7.948}, {'end': 296.954, 'text': "But if I'm copying this one and it's column 2, Row one, boy, this is like so messy, this whiteboard, but that's fine.", 'start': 287.326, 'duration': 9.628}, {'end': 300.675, 'text': 'Then basically I need to know what is this location.', 'start': 297.954, 'duration': 2.721}, {'end': 305.137, 'text': 'This location is column times width, row times height.', 'start': 300.935, 'duration': 4.202}, {'end': 308.778, 'text': 'And then, so take this section and copy it to this part of the piece.', 'start': 305.597, 'duration': 3.181}], 'summary': 'Instructions for copying image sections using coordinates and dimensions.', 'duration': 63.361, 'max_score': 245.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs4245417.jpg'}, {'end': 401.651, 'src': 'embed', 'start': 341.399, 'weight': 1, 'content': [{'end': 349.823, 'text': "I'm just gonna keep track of the individual index counting zero one, two, three, four, five, six, seven, eight, nine, 10, 11, 12, 13,, 14, 15,", 'start': 341.399, 'duration': 8.424}, {'end': 352.944, 'text': 'zero through 15, 16 total tiles.', 'start': 349.823, 'duration': 3.121}, {'end': 358.626, 'text': 'So the index is i plus j times the number of columns.', 'start': 353.464, 'duration': 5.162}, {'end': 360.207, 'text': "Let's call this tiles.", 'start': 359.106, 'duration': 1.101}, {'end': 369.915, 'text': "Let's just put all the tiles into an array Just out of curiosity now, let me loop through that array.", 'start': 361.307, 'duration': 8.608}, {'end': 373.856, 'text': 'And OK, I have an idea.', 'start': 372.195, 'duration': 1.661}, {'end': 375.716, 'text': "Let's make a variable called board.", 'start': 374.336, 'duration': 1.38}, {'end': 377.777, 'text': 'So this is the board.', 'start': 376.697, 'duration': 1.08}, {'end': 381.638, 'text': "The board is an array of all of the elements in the order that they're in.", 'start': 378.077, 'duration': 3.561}, {'end': 382.799, 'text': 'So board.', 'start': 382.179, 'duration': 0.62}, {'end': 386.194, 'text': 'push index.', 'start': 385.353, 'duration': 0.841}, {'end': 393.923, 'text': "So basically, I'm going to have an array that keeps track of the positions of all of the tiles.", 'start': 386.895, 'duration': 7.028}, {'end': 398.327, 'text': "And then this is a little bit silly, but I'm going to do it this way.", 'start': 394.743, 'duration': 3.584}, {'end': 401.651, 'text': "I'm going to just always use a nested loop just to get that index.", 'start': 398.347, 'duration': 3.304}], 'summary': 'The transcript discusses creating an array of tiles and a board, using i and j indices, and a nested loop to track tile positions.', 'duration': 60.252, 'max_score': 341.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs4341399.jpg'}], 'start': 245.417, 'title': 'Image processing techniques', 'summary': 'Covers an image copying algorithm, focusing on source and destination locations, as well as creating a board array to display images as separate tiles using a nested loop.', 'chapters': [{'end': 341.039, 'start': 245.417, 'title': 'Image copying algorithm', 'summary': 'Explains the process of copying sections of an image and the formula for calculating source and destination locations, with emphasis on the source x, source y, source to the destination, and the index calculation.', 'duration': 95.622, 'highlights': ['The source x location is i times the width, and the y location is j times h, with the formula for source image, source X, source Y, source to the destination being explained.', 'The location for copying a specific section of the image is calculated using column times width and row times height.', 'Understanding the process of copying sections of an image and the formula for calculating source and destination locations.', 'Explanation of the process of creating a new tile and the index calculation.']}, {'end': 652.2, 'start': 341.399, 'title': 'Creating a board array for displaying images', 'summary': 'Discusses creating a board array to display images as separate tiles, using a nested loop to iterate through the array and manipulate the images with relevant functions.', 'duration': 310.801, 'highlights': ['Creating a board array to keep track of the positions of all the tiles and manipulating the images using relevant functions. Board array, nested loop', 'Using a nested loop to iterate through the array and access the index of the tiles for display. Nested loop, array iteration', 'Implementing functions to manipulate the images within the array for display as separate tiles. Image manipulation functions']}], 'duration': 406.783, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs4245417.jpg', 'highlights': ['The source x location is i times the width, and the y location is j times h, with the formula for source image, source X, source Y, source to the destination being explained.', 'Creating a board array to keep track of the positions of all the tiles and manipulating the images using relevant functions. Board array, nested loop', 'The location for copying a specific section of the image is calculated using column times width and row times height.', 'Using a nested loop to iterate through the array and access the index of the tiles for display. Nested loop, array iteration', 'Understanding the process of copying sections of an image and the formula for calculating source and destination locations.']}, {'end': 831.983, 'segs': [{'end': 681.11, 'src': 'embed', 'start': 652.801, 'weight': 0, 'content': [{'end': 655.122, 'text': 'Yeah So I just wanted to draw some lines over it.', 'start': 652.801, 'duration': 2.321}, {'end': 658.244, 'text': 'Now, now, we are really getting somewhere.', 'start': 655.502, 'duration': 2.742}, {'end': 670.713, 'text': 'Because in theory, if all I do is shuffle this array, have all of the elements of the array in random order,', 'start': 658.344, 'duration': 12.369}, {'end': 674.135, 'text': 'then I should see the image chopped up and moved around.', 'start': 670.713, 'duration': 3.422}, {'end': 675.035, 'text': "So let's do that.", 'start': 674.175, 'duration': 0.86}, {'end': 677.057, 'text': "So I'm going to write a function.", 'start': 675.556, 'duration': 1.501}, {'end': 681.11, 'text': 'called shuffle, which receives an array.', 'start': 678.527, 'duration': 2.583}], 'summary': 'Creating a shuffle function to rearrange array elements for image manipulation.', 'duration': 28.309, 'max_score': 652.801, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs4652801.jpg'}, {'end': 777.341, 'src': 'heatmap', 'start': 709.537, 'weight': 1, 'content': [{'end': 713.18, 'text': "The way I'm going to shuffle the array is by picking any two elements and swapping their place.", 'start': 709.537, 'duration': 3.643}, {'end': 719.764, 'text': 'So now temp is that arrays are one value.', 'start': 713.88, 'duration': 5.884}, {'end': 727.589, 'text': "Then I'm going to write a swap function, because I'm going to need that, I think, also when I move the pieces.", 'start': 720.925, 'duration': 6.664}, {'end': 730.351, 'text': 'So function swap.', 'start': 729.03, 'duration': 1.321}, {'end': 736.064, 'text': 'is swap index i and j of an array.', 'start': 731.851, 'duration': 4.213}, {'end': 738.652, 'text': 'So temp is index i.', 'start': 737.067, 'duration': 1.585}, {'end': 745.888, 'text': "And then that array's i element is the j element.", 'start': 740.046, 'duration': 5.842}, {'end': 749.01, 'text': 'And the j element is that temporary value.', 'start': 746.449, 'duration': 2.561}, {'end': 751.41, 'text': "Now, you might be wondering, what? And there's a way.", 'start': 749.05, 'duration': 2.36}, {'end': 755.372, 'text': "I know there's some object deconstruction way I can do a swap.", 'start': 751.49, 'duration': 3.882}, {'end': 758.933, 'text': "And I'll put it up on the screen if I ever make this into an edited video.", 'start': 755.432, 'duration': 3.501}, {'end': 768.337, 'text': 'But basically, the old fashioned, the old way that we used to swap our elements in an array is we take element 1.', 'start': 759.394, 'duration': 8.943}, {'end': 771.639, 'text': 'store it somewhere temporary because we need to put a new thing in that spot.', 'start': 768.337, 'duration': 3.302}, {'end': 773.84, 'text': 'And then we saved it temporarily.', 'start': 772.319, 'duration': 1.521}, {'end': 777.341, 'text': 'We could put that thing we saved in the spot that just the other thing came out of.', 'start': 774.04, 'duration': 3.301}], 'summary': 'Using a swap function to shuffle array elements for a new method.', 'duration': 36.351, 'max_score': 709.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs4709537.jpg'}, {'end': 818.325, 'src': 'embed', 'start': 790.495, 'weight': 2, 'content': [{'end': 794.138, 'text': "I'm shuffling the array that's keeping track of the index, indices of all of them.", 'start': 790.495, 'duration': 3.643}, {'end': 797.961, 'text': "Maybe I need these two arrays, but it's the way that I'm thinking of it right now.", 'start': 794.218, 'duration': 3.743}, {'end': 799.783, 'text': 'Shuffle the board.', 'start': 798.522, 'duration': 1.261}, {'end': 806.674, 'text': 'Oh, well, good thing I wrote my own shuffle function, p5.', 'start': 803.411, 'duration': 3.263}, {'end': 810.638, 'text': "The reason I'm getting that error is there already is a global function in p5 called shuffle.", 'start': 806.714, 'duration': 3.924}, {'end': 818.325, 'text': 'And it uses this Fisher-Yates shuffle algorithm, which I can only assume is better than whatever I did.', 'start': 811.078, 'duration': 7.247}], 'summary': "Using p5's shuffle function caused an error, so i wrote my own, but it may be inferior to fisher-yates.", 'duration': 27.83, 'max_score': 790.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs4790495.jpg'}], 'start': 652.801, 'title': 'Shuffling array elements', 'summary': "Discusses shuffling array elements using a custom 'shuffle' function, the need for a 'swap' function, and the global 'shuffle' function in p5.", 'chapters': [{'end': 831.983, 'start': 652.801, 'title': 'Shuffling array elements for image manipulation', 'summary': "Discusses the process of shuffling array elements using a custom 'shuffle' function and the need for a 'swap' function to facilitate the movement of elements, while also considering the existence of a global 'shuffle' function in p5.", 'duration': 179.182, 'highlights': ["The chapter focuses on implementing a custom 'shuffle' function to rearrange array elements for image manipulation.", "The need for a 'swap' function is highlighted to facilitate the movement of array elements during the shuffling process.", "The existence of a global 'shuffle' function in p5 is acknowledged, prompting the decision to name the custom function 'simple shuffle' to avoid conflicts."]}], 'duration': 179.182, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs4652801.jpg', 'highlights': ["The chapter focuses on implementing a custom 'shuffle' function to rearrange array elements for image manipulation.", "The need for a 'swap' function is highlighted to facilitate the movement of array elements during the shuffling process.", "The existence of a global 'shuffle' function in p5 is acknowledged, prompting the decision to name the custom function 'simple shuffle' to avoid conflicts."]}, {'end': 1028.977, 'segs': [{'end': 966.862, 'src': 'embed', 'start': 832.023, 'weight': 0, 'content': [{'end': 832.943, 'text': 'You should try it yourself.', 'start': 832.023, 'duration': 0.92}, {'end': 834.324, 'text': 'There we go.', 'start': 833.784, 'duration': 0.54}, {'end': 837.146, 'text': 'Look, I have mixed up the elements.', 'start': 834.344, 'duration': 2.802}, {'end': 849.032, 'text': 'All right, so one thing for it to be a slide puzzle that I need to do is I need to be able to remove one of them.', 'start': 838.466, 'duration': 10.566}, {'end': 855.215, 'text': "So columns, and then let's just delete the last one.", 'start': 849.812, 'duration': 5.403}, {'end': 863.393, 'text': "Pop, is it pop? That'll be empty.", 'start': 855.755, 'duration': 7.638}, {'end': 865.574, 'text': 'OK, great.', 'start': 865.054, 'duration': 0.52}, {'end': 871.94, 'text': 'So as long as if tile index is greater than 0, draw the image.', 'start': 866.115, 'duration': 5.825}, {'end': 877.724, 'text': "So now I'm just, oops, greater than negative 1.", 'start': 873.601, 'duration': 4.123}, {'end': 880.486, 'text': 'OK, so now I have made the board.', 'start': 877.724, 'duration': 2.762}, {'end': 882.348, 'text': 'I could shuffle it.', 'start': 880.506, 'duration': 1.842}, {'end': 886.131, 'text': 'I could still shuffle it now, but this shuffling is no good.', 'start': 883.208, 'duration': 2.923}, {'end': 891.631, 'text': "Because in theory now, is it possible that it's unsolvable? I need a move.", 'start': 887.847, 'duration': 3.784}, {'end': 897.137, 'text': 'Basically, I need a function that moves one element.', 'start': 891.751, 'duration': 5.386}, {'end': 900.641, 'text': 'So function move.', 'start': 897.818, 'duration': 2.823}, {'end': 905.105, 'text': 'So the function is going to receive a given index.', 'start': 901.281, 'duration': 3.824}, {'end': 908.802, 'text': "So the idea is I'm clicking on an index.", 'start': 906.681, 'duration': 2.121}, {'end': 910.323, 'text': "I'm going to click on one of them.", 'start': 909.142, 'duration': 1.181}, {'end': 914.905, 'text': "And it's only a valid move if it's above, below, to the right, or to the left.", 'start': 910.783, 'duration': 4.122}, {'end': 917.366, 'text': 'So I do need this function.', 'start': 915.726, 'duration': 1.64}, {'end': 920.028, 'text': 'The column is index.', 'start': 917.987, 'duration': 2.041}, {'end': 925.17, 'text': 'You know what? I could pick a random column or row.', 'start': 920.688, 'duration': 4.482}, {'end': 927.852, 'text': 'I need to know where the negative 1 is.', 'start': 926.291, 'duration': 1.561}, {'end': 930.673, 'text': "So let's just have a variable.", 'start': 928.772, 'duration': 1.901}, {'end': 936.256, 'text': "Blank spot is, you know what I'm going to do? I'm going to write a function.", 'start': 932.354, 'duration': 3.902}, {'end': 938.912, 'text': 'Find blank.', 'start': 938.092, 'duration': 0.82}, {'end': 947.115, 'text': 'So this is a way to quickly check all of it to find which one is blank.', 'start': 943.614, 'duration': 3.501}, {'end': 961.061, 'text': 'So the blank i, the blank column is the blank spot modulus, the number of columns and the blank row is floor,', 'start': 949.215, 'duration': 11.846}, {'end': 964.262, 'text': 'the blank index divided by the number of rows.', 'start': 961.061, 'duration': 3.201}, {'end': 966.862, 'text': "That's the inverse of putting it back.", 'start': 964.862, 'duration': 2}], 'summary': 'Creating a slide puzzle game with functions to shuffle and move elements.', 'duration': 134.839, 'max_score': 832.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs4832023.jpg'}, {'end': 1032.198, 'src': 'embed', 'start': 1006.493, 'weight': 5, 'content': [{'end': 1010.836, 'text': "If it's a proper neighbor to the blank spot, then it can be swapped with it.", 'start': 1006.493, 'duration': 4.343}, {'end': 1012.877, 'text': "Oh no, that's not, yeah, yeah, yeah.", 'start': 1011.576, 'duration': 1.301}, {'end': 1016.039, 'text': 'When you move a thing and tile into it, it becomes the blank spot.', 'start': 1012.897, 'duration': 3.142}, {'end': 1019.241, 'text': 'OK So I just need now an is neighbor function.', 'start': 1016.359, 'duration': 2.882}, {'end': 1023.636, 'text': 'You, the viewer, will write this in a so much better way.', 'start': 1020.635, 'duration': 3.001}, {'end': 1024.955, 'text': "I'm on a time crunch here.", 'start': 1023.836, 'duration': 1.119}, {'end': 1026.576, 'text': "I'm way over my 30-minute limit.", 'start': 1024.976, 'duration': 1.6}, {'end': 1028.977, 'text': 'Function is neighbor.', 'start': 1027.076, 'duration': 1.901}, {'end': 1032.198, 'text': "I'm just going to do x1, y1, x2, y2.", 'start': 1029.597, 'duration': 2.601}], 'summary': 'The speaker needs an is neighbor function, feeling time pressure and exceeding a 30-minute limit.', 'duration': 25.705, 'max_score': 1006.493, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs41006493.jpg'}], 'start': 832.023, 'title': 'Creating slide puzzle and solving functions', 'summary': 'Explains creating a slide puzzle, shuffling the board, ensuring solvability, and defining valid moves. it also discusses creating a function to find and move the blank spot in a puzzle game to optimize the process and improve efficiency.', 'chapters': [{'end': 930.673, 'start': 832.023, 'title': 'Creating slide puzzle and valid moves', 'summary': 'Explains the process of creating a slide puzzle, including the steps of creating the board, shuffling it, and ensuring solvability, as well as defining a function for valid moves.', 'duration': 98.65, 'highlights': ['The process involves creating a slide puzzle, shuffling the board, and ensuring its solvability.', 'Defining a function for valid moves by checking if the selected tile can move above, below, to the right, or to the left.', 'The need for a function to move one element, ensuring its validity by restricting movement to adjacent positions.']}, {'end': 1028.977, 'start': 932.354, 'title': 'Creating a function to solve puzzle game', 'summary': 'Discusses the process of creating a function to find and move the blank spot in a puzzle game, aiming to optimize the process and improve efficiency.', 'duration': 96.623, 'highlights': ['The process involves writing a function to find the blank spot and swiftly check all positions, improving the efficiency of the puzzle-solving algorithm.', 'The function determines the blank column and row based on the index and the number of columns and rows, optimizing the strategy for moving the blank spot.', "The discussion revolves around creating an 'is neighbor' function to efficiently check if a tile is a neighbor of the blank spot, aiming to streamline the swapping process."]}], 'duration': 196.954, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs4832023.jpg', 'highlights': ['The process involves creating a slide puzzle, shuffling the board, and ensuring its solvability.', 'The process involves writing a function to find the blank spot and swiftly check all positions, improving the efficiency of the puzzle-solving algorithm.', 'Defining a function for valid moves by checking if the selected tile can move above, below, to the right, or to the left.', 'The function determines the blank column and row based on the index and the number of columns and rows, optimizing the strategy for moving the blank spot.', 'The need for a function to move one element, ensuring its validity by restricting movement to adjacent positions.', "The discussion revolves around creating an 'is neighbor' function to efficiently check if a tile is a neighbor of the blank spot, aiming to streamline the swapping process."]}, {'end': 1601.616, 'segs': [{'end': 1080.282, 'src': 'embed', 'start': 1029.597, 'weight': 2, 'content': [{'end': 1032.198, 'text': "I'm just going to do x1, y1, x2, y2.", 'start': 1029.597, 'duration': 2.601}, {'end': 1037.219, 'text': 'Let me do i, j, x, y.', 'start': 1033.738, 'duration': 3.481}, {'end': 1049.949, 'text': 'So first, if i is not equal to x and j is not equal to y, return Return false.', 'start': 1037.219, 'duration': 12.73}, {'end': 1053.592, 'text': "It's either got to be in the same column or the same row.", 'start': 1050.77, 'duration': 2.822}, {'end': 1058.555, 'text': "So if they're both not the same, then it's not a neighbor.", 'start': 1054.212, 'duration': 4.343}, {'end': 1069.261, 'text': "If the absolute value of i minus x equals 1, it's one spot away.", 'start': 1059.115, 'duration': 10.146}, {'end': 1080.282, 'text': "Or the absolute value of j minus y, if it's one spot away, return true.", 'start': 1071.463, 'duration': 8.819}], 'summary': 'Determining neighbor relationship based on coordinates x, y, i, j.', 'duration': 50.685, 'max_score': 1029.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs41029597.jpg'}, {'end': 1140.126, 'src': 'embed', 'start': 1112.305, 'weight': 3, 'content': [{'end': 1118.751, 'text': "I know I could just pick from valid neighbors to do a move, but if I do it enough times, I'll pick valid neighbors enough times that this should work.", 'start': 1112.305, 'duration': 6.446}, {'end': 1120.413, 'text': 'So now I should just say move R1 and R2.', 'start': 1119.071, 'duration': 1.342}, {'end': 1131.684, 'text': "And move, if it finds the blank spot, and if the blank spot is a neighbor, it swaps it with, I don't know if this is going to work.", 'start': 1124.322, 'duration': 7.362}, {'end': 1132.324, 'text': "Let's just try it.", 'start': 1131.724, 'duration': 0.6}, {'end': 1135.545, 'text': 'Array Ah, move.', 'start': 1133.884, 'duration': 1.661}, {'end': 1140.126, 'text': 'I guess move should, the function should get the array.', 'start': 1137.665, 'duration': 2.461}], 'summary': 'Attempting to make valid moves repeatedly to ensure success in swapping the blank spot with neighboring elements.', 'duration': 27.821, 'max_score': 1112.305, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs41112305.jpg'}, {'end': 1486.224, 'src': 'heatmap', 'start': 1421.499, 'weight': 0, 'content': [{'end': 1428.464, 'text': "obviously again I need a better shuffling algorithm, but if I do it 10,000 times, you know that's a lot of interesting moves there,", 'start': 1421.499, 'duration': 6.965}, {'end': 1432.928, 'text': "but let's go back to making it four by four and make this puzzle solvable for myself.", 'start': 1428.464, 'duration': 4.464}, {'end': 1435.269, 'text': "This is the last thing I'm going to do.", 'start': 1433.288, 'duration': 1.981}, {'end': 1437.451, 'text': "I'm going to make it four by four.", 'start': 1435.95, 'duration': 1.501}, {'end': 1442.975, 'text': "I'm going to shuffle it just 100 times and let's see if I can solve this.", 'start': 1438.512, 'duration': 4.463}, {'end': 1448.099, 'text': 'Ooh, shoot.', 'start': 1447.438, 'duration': 0.661}, {'end': 1453.567, 'text': 'Oh, wait a sec.', 'start': 1452.947, 'duration': 0.62}, {'end': 1463.572, 'text': 'I think I did it.', 'start': 1462.911, 'duration': 0.661}, {'end': 1474.617, 'text': 'Yes! I solved it! All right! So what can you do? Well, you can be more thoughtful about what image you pick.', 'start': 1465.413, 'duration': 9.204}, {'end': 1475.918, 'text': 'You could add animations.', 'start': 1474.637, 'duration': 1.281}, {'end': 1480.02, 'text': "There's a million opportunities to refactor this code to make it make more sense.", 'start': 1476.318, 'duration': 3.702}, {'end': 1482.722, 'text': 'I mean, this object could do so much.', 'start': 1480.341, 'duration': 2.381}, {'end': 1486.224, 'text': 'I started with, like, I need to make this object-oriented, but I did not follow through with that.', 'start': 1482.822, 'duration': 3.402}], 'summary': 'Solved 4x4 puzzle after 100 shuffles, exploring code refactoring and missed object-oriented approach.', 'duration': 64.725, 'max_score': 1421.499, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs41421499.jpg'}], 'start': 1029.597, 'title': 'Puzzle shuffling and solving', 'summary': 'Involves shuffling and solving a puzzle in javascript, exploring different shuffling algorithms, providing insights, and suggesting improvements for the code.', 'chapters': [{'end': 1135.545, 'start': 1029.597, 'title': 'Logic for random shuffling', 'summary': 'Explains the logic for determining if two points are neighbors and the strategy for shuffling by picking random moves, aiming to achieve valid neighbors enough times for successful shuffling.', 'duration': 105.948, 'highlights': ['Determining if two points are neighbors by checking if they are in the same column or row and one spot away, with the possibility of returning true if the condition is met.', 'Strategy for shuffling involves picking random moves and relying on the likelihood of picking valid neighbors enough times for successful shuffling.']}, {'end': 1601.616, 'start': 1137.665, 'title': 'Puzzle shuffling and solving in javascript', 'summary': 'Involves the process of shuffling and solving a puzzle in javascript, with the creator attempting different shuffling algorithms and solving the puzzle, providing insights into the process and suggesting potential improvements and expansions for the code and the concept.', 'duration': 463.951, 'highlights': ['The creator attempts shuffling and solving a puzzle in JavaScript, exploring different shuffling algorithms and solving the puzzle. The creator tries shuffling and solving a puzzle in JavaScript, experimenting with different shuffling algorithms and successfully solving the puzzle, showcasing the process and potential improvements.', 'The creator suggests potential improvements and expansions for the code and the concept, including adding animations, making the code more object-oriented, and exploring possibilities with images and move counters for scoring. The creator recommends potential enhancements and extensions for the puzzle code and concept, such as integrating animations, improving object-oriented design, exploring image-related possibilities, and incorporating move counters for scoring.', 'The creator promotes Nebula, a streaming platform for educational content, and encourages viewers to sign up for Nebula and CuriosityStream, offering access to ad-free content, uncut videos, and bonus material from various educational creators. The creator advocates for Nebula, a platform for educational content, and urges viewers to join Nebula and CuriosityStream, providing access to ad-free content, uncut videos, and additional material from diverse educational creators.']}], 'duration': 572.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uQZLzhrzEs4/pics/uQZLzhrzEs41029597.jpg', 'highlights': ['The creator suggests potential improvements and expansions for the code and the concept, including adding animations, making the code more object-oriented, and exploring possibilities with images and move counters for scoring.', 'The creator attempts shuffling and solving a puzzle in JavaScript, exploring different shuffling algorithms and solving the puzzle.', 'Determining if two points are neighbors by checking if they are in the same column or row and one spot away, with the possibility of returning true if the condition is met.', 'Strategy for shuffling involves picking random moves and relying on the likelihood of picking valid neighbors enough times for successful shuffling.']}], 'highlights': ['The host sets a timer and endeavors to create a slide puzzle within a specified time frame.', 'The process involves creating a slide puzzle, shuffling the board, and ensuring its solvability.', 'The creator suggests potential improvements and expansions for the code and the concept, including adding animations, making the code more object-oriented, and exploring possibilities with images and move counters for scoring.', "The 'copy' function and its use for image processing in P5 is emphasized, with the desire to create an entire video on this topic.", "The chapter focuses on implementing a custom 'shuffle' function to rearrange array elements for image manipulation.", 'The source x location is i times the width, and the y location is j times h, with the formula for source image, source X, source Y, source to the destination being explained.']}