Coding Challenge 165: Slide Puzzle

Channel:

The Coding Train

Subscribers:

1,750,000

Published on February 1, 2022 6:27:58 PM ● Video Link: https://www.youtube.com/watch?v=uQZLzhrzEs4

Duration: 26:53

152,167 views

4,867

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