Uploaded February 2022 | Updated September 2026, 2 weeks ago
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 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! thecodingtrain.com/challenges/165-slide-puzzle
p5.js Web Editor Sketches:
🕹️ Slide Puzzle with Image: editor.p5js.org/codingtrain/sketches/o_ljlLilZ
🕹️ Slide Puzzle with Video: editor.p5js.org/codingtrain/sketches/YnLX7bGwW
🕹️ Slide Puzzle with Canvas: editor.p5js.org/codingtrain/sketches/MVCd9trLw
🎥 Previous video: youtu.be/hckvHFDGiJk?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
Links discussed in this video:
🔗 Fisher-Yates Shuffle: bost.ocks.org/mike/shuffle
🔗 p5.js copy() reference: p5js.org/reference/#/p5/copy
Other videos mentioned in this video:
🎥 Coding Challenge 164 Bending Time SlitScan: 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: thecodingtrain.com
👾 Share Your Creation! thecodingtrain.com/Guides/community-contribution-guide.html
🚩 Suggest Topics: github.com/CodingTrain/Rainbow-Topics
💡 GitHub: github.com/CodingTrain
💬 Discord: discord.gg/hPuGy2g
💖 Membership: youtube.com/thecodingtrain/join
🛒 Store: standard.tv/codingtrain
📚 Books: amazon.com/shop/thecodingtrain
🖋️ Twitter: twitter.com/thecodingtrain
📸 Instagram: instagram.com/the.coding.train
🎥 Coding Challenges: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/website/issues/new
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 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! thecodingtrain.com/challenges/165-slide-puzzle
p5.js Web Editor Sketches:
🕹️ Slide Puzzle with Image: editor.p5js.org/codingtrain/sketches/o_ljlLilZ
🕹️ Slide Puzzle with Video: editor.p5js.org/codingtrain/sketches/YnLX7bGwW
🕹️ Slide Puzzle with Canvas: editor.p5js.org/codingtrain/sketches/MVCd9trLw
🎥 Previous video: youtu.be/hckvHFDGiJk?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
Links discussed in this video:
🔗 Fisher-Yates Shuffle: bost.ocks.org/mike/shuffle
🔗 p5.js copy() reference: p5js.org/reference/#/p5/copy
Other videos mentioned in this video:
🎥 Coding Challenge 164 Bending Time SlitScan: 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: thecodingtrain.com
👾 Share Your Creation! thecodingtrain.com/Guides/community-contribution-guide.html
🚩 Suggest Topics: github.com/CodingTrain/Rainbow-Topics
💡 GitHub: github.com/CodingTrain
💬 Discord: discord.gg/hPuGy2g
💖 Membership: youtube.com/thecodingtrain/join
🛒 Store: standard.tv/codingtrain
📚 Books: amazon.com/shop/thecodingtrain
🖋️ Twitter: twitter.com/thecodingtrain
📸 Instagram: instagram.com/the.coding.train
🎥 Coding Challenges: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/website/issues/new
