Coding Challenge 165: Slide Puzzle

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...

p5.js Web Editor Sketches:
🕹️ Slide Puzzle with Image: https://editor.p5js.org/codingtrain/s...
🕹️ Slide Puzzle with Video: https://editor.p5js.org/codingtrain/s...
🕹️ Slide Puzzle with Canvas: https://editor.p5js.org/codingtrain/s...

🎥 Previous video:    • Coding Challenge 164: Bending Time Sl...  
🎥 All videos:    • Coding Challenges  

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:    • Coding Challenge 164: Bending Time Sl...  

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/com...
🚩 Suggest Topics: https://github.com/CodingTrain/Rainbo...
💡 GitHub: https://github.com/CodingTrain
💬 Discord:   / discord  
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
📚 Books: https://www.amazon.com/shop/thecoding...
🖋️ Twitter:   / thecodingtrain  
📸 Instagram:   / the.coding.train  

🎥 Coding Challenges:    • Coding Challenges  
🎥 Intro to Programming:    • Start learning here!  

🔗 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-o...

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/websit...