165-slide-puzzle.md

title	video_number	date	video_id	repository	variations	links	videos	topics	contributions
Slide Puzzle	165	2022-01-31	uQZLzhrzEs4	CC_165_Slide_Puzzle	name lang folder web_editor Slide Puzzle with Image p5js slide-puzzle-image o_ljlLilZ name lang folder web_editor Slide Puzzle with Video p5js slide-puzzle-video YnLX7bGwW name lang folder web_editor Slide Puzzle with Canvas p5js slide-puzzle-canvas MVCd9trLw	title url Fisher-Yates Shuffle https://bost.ocks.org/mike/shuffle/ title url p5.js copy() reference https://p5js.org/reference/#/p5/copy	title author url Coding Challenge 164 Bending Time SlitScan The Coding Train /CodingChallenges/164-time-slitscan	title time Welcome! 0:00 title time Explain! Using copy() to split the source image into tiles? 2:24 title time Code! The Tile class! 3:24 title time Explain! Copying tiles from the source image to the puzzle. 4:40 title time Code! Setting up tile indices and a board array! 5:33 title time Explain! How should the board work? 6:54 title time Code! Something went wrong! Let's fix it! 8:31 title time It works! Now how to draw borders between the tiles? 9:55 title time Code! Shuffling the board. 10:57 title time Code! The slide puzzle needs an empty tile! 14:00 title time Code! A function to move the tiles! 14:52 title time Code! Checking if tiles are neighbors? 16:59 title time Code! Random shuffling in draw()! 19:37 title time Code! Moving pieces with mousePressed() 20:12 title time Code! What should the sketch do when the puzzle is solved? 21:32 title time Code! Having fun with the tile grid! 23:06 title time Let's see if I can solve this... 23:55 title time Solved it! What will you create? 24:27	title author url source Sliding Puzzle with Mushy Men Kathy McGuiness https://editor.p5js.org/kfahn/full/QFe-ulhZS https://editor.p5js.org/kfahn/sketches/QFe-ulhZS title author url source Slide Puzzle with move animations David Sullivan https://editor.p5js.org/tkroo/full/Q5UG6tR6c https://editor.p5js.org/tkroo/sketches/Q5UG6tR6c title author url source Slide Puzzle with Ability to Add Your Own Images and Number of Rows and Coloumns Joshua H https://joshjh2002.github.io/SlidePuzzle/ https://github.com/joshjh2002/SlidePuzzle

Let's make a slide puzzle in p5.js together! We'll be using images, nested loops, and arrays, and by the end of our journey, we'll have a fully playable game!