Coding Challenge 165: Slide Puzzle

From the creator

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

Published 2022-02-01 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.