Almost 4 years ago I watched your Cube waves by bees and bombs coding challenge and decided to give programming a try. Learned a lot through your videos and now I have my first job as a developer. Thank you very very much for making these videos. You have inspired many people like me to code.
Man, I remember watching this channel like 5 years ago, when i was 15 and still pretty new to programming. Now I actually study computer science. Thanks Daniel for getting me so excited about coding! Damn this brings up some memories. Is the 'this dot song' still a thing? xD
What I love about your videos is that you are not just copying the code from another screen like most tho. You are doing trial and error and that is really good for us to understand it better. Makes us think with you. Thank you so much! Great content
A second video for this would be to right a solver that solves the puzzle after it’s been shuffled, maybe you could use the machine learning stuff for it.
sliding puzzle is my go-to project when i'm learning a new game dev lib or engine. its simple enough that you dont need to worry about physics and all that, but complex enough that there's a lot to worry when rendering, randomizing, moving pieces, etc. loved to see it here, i love the energy of this channel!
I love how you time yourself and show everything including the little bumps. People should really feel better about having the bumps, because people remember their failures better than their successes. Failing shouldn't be a stigma, but should be celebrated as a teaching aid.
Literally have watched this channel for over a year now beginning with almost no programming experience and I have a Web Developer Intern job interview tomorrow!! Thanks @The Coding Train !
22:53 lol The only problem with the 20 x 20 is not all the pieces look unique, so you would have a very hard time putting every piece back in the right spot. You could make it so that non-unique pieces can have multiple solve locations.
14:40 actually the simpleShuffle() is better, you just need an extra function to check whether or not the tile layout is solvable. Shuffling it by "manually" by moving tiles is much less efficient. You can see the algorithm get stuck on the edges and corners at 20:03 because it tries many invalid moves and essentially doing nothing. To check if it's solvable you basically go from the top-left to the bottom-right and count how many combinations of a large index tile comes before a smaller index tile. If this number of times is odd then it's not solvable and you just need to swap any two tiles to turn it into a solvable layout. You can search stackoverflow for "difficult to solve sliding puzzle" for a more in-depth answer.
Isn't checking the shuffled tiles if it's solvable takes more time? Swapping the empty cell to a random valid neighbor in N steps guarantees it is solvable. Shuffling and checking if it's solvable is not efficient.
This is awesome, Dan. I realize this isn’t the most efficient or scalable way to solve this, but I work at a large enterprise as a Senior Software Engineer and your problem solving skills are leagues better than literally 90% of the people I work with.
I have just written this exact code in BlitzBasic. Basically went through the exact process as you. I did use a 2 dimensional array. Went in a different direction as my app loads and plays music (playlist) as well as loading an image to use, both off your PC. The shuffle was a real pain, so I just had a data list that swapped the tile order. The "blank" tile is always the bottom right in mine. My logic was that the blank had 2 - 4 possible tiles that could move left, right, up, down. Move left and if there is a tile to the right it moves...etc, animated and with sound fx. Hold down space and iot shows the full image. TO DO, check when solved, random shuffle.
Hello Dan, I absolutely love this new type of video production. This seems like a new era for coding challenges! Although I do miss those days of "I'm sorry I'm just looking at the chat to see if I botched up something", but this is absolutely amazing. The white board, the timer and all the little helpful animations. Great job to the coding train team!
@@TheCodingTrain I would say no, however things seem a bit tighter in Twitch probably because it's solely based on livestreaming, that I guess makes it easier to do more casual streams on (like genuary, say). CZcams could be the place for more formal ones like special ones like PCD fundraiser, team seas and others. However, I think whatever you do, your community will always support it so it sort of doesn't matter that much. Have a great day!
This man fucking loves solving complicated problems and you can clearly see it in his actions. That's so alpha in programming. I hope to give back to him for the things he''d taught me when I land my first programming job.
@@TheCodingTrain Would be nice to have a link back to the livestream in the description of these edited videos, so those of us who like seeing all the mistakes, corrections, messy whiteboard, etc. can easily find the unedited version. I tried to find this one but couldn't.
Finally somebody else who uses JS classes! Pretty much everybody else uses a lineout function as a constructor and a .prototype function to add methods. But I really prefer classes because i like C++. So thank you for encouraging this practise!
Sadly until quite recently all browsers didn't support classes (*cough*IE and Edge*cough*). But now that Edge has become a Chromium reskin classes are thankfully universally supported in all still officially supported browsers.
At first I thought you wrote some amazing program that took the shapes you drew on the whiteboard and would snap them to the nearest shape they represent and overlay it. Then I realized it's just totally incredible editing!
oh hey, my friend challenged me to make this concept a few months ago. having an animation for moving pieces makes it look so much better. very nice video
I did that in DARK BASIC years ago! no objects just a good use of array and variables...I made a simulation of that board with 15 numbers made of plastic that we used to play with in the '80s but with an image to compose too, so I had to make the tiles able to slide in place in the 4 directions, and yes it was necessary for me too to make an empty sqare of course! I remeber that to ceck if the puzzle was right, I checked all the tiles number and if they were consequential (the st was follewed by the 2nd and then the 2nd was followed by the 3rd. and so on...up to 15) if not the game continued till that condition was satisfyed
function isNeighbor(i, j, x, y) { return ((abs(i-x) + abs(j-y)) == 1); } Since it needs to be the same row/col, the difference would be 0 for that. However, the difference needs to be 1 for the other direction. So 0+1 == 1, and 1+0 == 1.
A much easier move() function might be to just input up, down, left, and right. (use arrows, or a,w,s,d, or whatever). If up then exchange the blank with the tile under it, and so forth.
If I remember correctly, with the 4x4 puzzle, from the starting arrangement if you swap any two tiles an EVEN number of times, the puzzle is solvable. However, if you swap any two tiles an ODD number of times, the puzzle is not solvable. Sam Loyd, the famous puzzle author and recreational mathematician, figured this out back in the late 1800s / early 1900s. As the story goes, he offered $1,000 (a lot of money back then) if anyone could solve his 14-15 puzzle, as it was called. However, with his arrangement, the 14 tile and the 15 tile were the only two tiles that were swapped.. One swap... an odd number. Thus, his money was safe... as there was no valid solution.
as an aside, need to make sure the source image doesn't have any duplicate tile images or the puzzle will be solved pixel wise but, but not necessarly tile wise.
Awesome video! Was wondering if you would tackle this one, I had made one a number of years ago, it was fun! For the isSolved() method, you could just say: if (board[i] === i) instead of the tiles i. This would remove the necessity to maintain the tiles index in the data. All that needs to be in order is the board array! Effectively you just need to match the indexes of the board array and the tile array.
Love it dan so much , I have veen watchijf your forva very long time and seen most of the challanges and i have learmed so much from it and i just hope you upload more coding challanges and I want to see what kind of plans do you have for this year on this channel
Mrs Richards: "I paid for a room with a view !" Basil: (pointing to the lovely view) "That is Torquay, Madam ." Mrs Richards: "It's not good enough!" Basil: "May I ask what you were expecting to see out of a Torquay hotel bedroom window? Sydney Opera House, perhaps? the Hanging Gardens of Babylon? Herds of wildebeest sweeping majestically past?..." Mrs Richards: "Don't be silly! I expect to be able to see the sea!" Basil: "You can see the sea, it's over there between the land and the sky." Mrs Richards: "I'm not satisfied. But I shall stay. But I expect a reduction." Basil: "Why?! Because Krakatoa's not erupting at the moment ?"
great video! anyone attempting to improve on his work, think about the tiles with similar content, like the white tiles in his example, there is no visual way to distinguish them and put them in their right location.
I got back to p5 after a couple of years, and it was as fun as I remember it. I just wish that there was a better way to use it in module mode other than instance mode.
You must make sure that there are no multiple solid squares since there would be no way to know if one was in the correct place or swapped with another solid.
there is an obvious caveat with 8*8 or 20*20 pieces, where there is no visual indication of white squares being in the right spot. pixel comparison might be needed here..
Challenges to the Challenge: Move a column or row of tiles, instead of just a single tile. Have the missing tile be randomized so the hole can be anywhere on the board, even in the middle.
Can you please give a little more explanation about the code being implemented. I feel like there is lack of additional explanation, since I cannot follow through all steps..
Hey there! I noticed that in your videos, you've been manually creating a grid in p5.js for years now. Have you considered turning it into a function or maybe even contributing to p5.js to make it a global function? It would be really awesome and helpful for your viewers if you could simplify the process. What do you think?
Love how the whiteboard effect retains the not-quite-square squares!
Yes, I agree!
czcams.com/channels/zsoRWLVEoqbZHcizHxbTUA.html
omg a coding challenge with a timer, what a throwback!
Yes, I'm trying to work in a new system for doing so!
czcams.com/channels/zsoRWLVEoqbZHcizHxbTUA.html
You know he's a programmer when he uses a function before defining it
exactly my thoughts haha
lol
So happy to see Coding Challenges back, and that new digitalized whiteboard explanation is very cool!
So glad to hear you liked it!
czcams.com/channels/zsoRWLVEoqbZHcizHxbTUA.html
Almost 4 years ago I watched your Cube waves by bees and bombs coding challenge and decided to give programming a try. Learned a lot through your videos and now I have my first job as a developer. Thank you very very much for making these videos. You have inspired many people like me to code.
I just love hearing stories like this so so much!!
Man, I remember watching this channel like 5 years ago, when i was 15 and still pretty new to programming. Now I actually study computer science. Thanks Daniel for getting me so excited about coding! Damn this brings up some memories. Is the 'this dot song' still a thing? xD
It is! But it hasn't come up as much recently. Love to hear this story, thank you for sharing!
The timestamps are a great addition!
So glad to hear!
czcams.com/channels/zsoRWLVEoqbZHcizHxbTUA.html
What I love about your videos is that you are not just copying the code from another screen like most tho. You are doing trial and error and that is really good for us to understand it better. Makes us think with you. Thank you so much! Great content
A second video for this would be to right a solver that solves the puzzle after it’s been shuffled, maybe you could use the machine learning stuff for it.
Yes, this is a great idea!!
Love the whiteboard effects. Makes it so much easier to see!
These challenges are great for keeping my skills sharp as a software dev 💪🏼
sliding puzzle is my go-to project when i'm learning a new game dev lib or engine. its simple enough that you dont need to worry about physics and all that, but complex enough that there's a lot to worry when rendering, randomizing, moving pieces, etc. loved to see it here, i love the energy of this channel!
Oh, I love hearing this!
I love how you time yourself and show everything including the little bumps. People should really feel better about having the bumps, because people remember their failures better than their successes. Failing shouldn't be a stigma, but should be celebrated as a teaching aid.
Literally have watched this channel for over a year now beginning with almost no programming experience and I have a Web Developer Intern job interview tomorrow!! Thanks @The Coding Train !
So glad to hear!!
Good luck tomorrow!!!
Absolutely love the editing on this one. Amazing video, keep it going!
22:53 lol
The only problem with the 20 x 20 is not all the pieces look unique, so you would have a very hard time putting every piece back in the right spot. You could make it so that non-unique pieces can have multiple solve locations.
You're my 1st programming teacher.
Happy to be here after a long time.
Its really respectable that you don't edit out silly mistakes even tho you can!
Awesome, I might try this on my channel one of these days!
You're a great programmer and a great teacher. Thank you.
I made a version of this game in the 80s while studying computer science. I wrote it in Pascal on an old 80286 PC running DOS :)
14:40 actually the simpleShuffle() is better, you just need an extra function to check whether or not the tile layout is solvable. Shuffling it by "manually" by moving tiles is much less efficient. You can see the algorithm get stuck on the edges and corners at 20:03 because it tries many invalid moves and essentially doing nothing.
To check if it's solvable you basically go from the top-left to the bottom-right and count how many combinations of a large index tile comes before a smaller index tile. If this number of times is odd then it's not solvable and you just need to swap any two tiles to turn it into a solvable layout. You can search stackoverflow for "difficult to solve sliding puzzle" for a more in-depth answer.
Isn't checking the shuffled tiles if it's solvable takes more time?
Swapping the empty cell to a random valid neighbor in N steps guarantees it is solvable.
Shuffling and checking if it's solvable is not efficient.
Like the new whiteboard edits...
Thank you!
This is awesome, Dan. I realize this isn’t the most efficient or scalable way to solve this, but I work at a large enterprise as a Senior Software Engineer and your problem solving skills are leagues better than literally 90% of the people I work with.
I love these videos. It's very helpful to hear you think out loud.
I have just written this exact code in BlitzBasic. Basically went through the exact process as you. I did use a 2 dimensional array. Went in a different direction as my app loads and plays music (playlist) as well as loading an image to use, both off your PC. The shuffle was a real pain, so I just had a data list that swapped the tile order. The "blank" tile is always the bottom right in mine. My logic was that the blank had 2 - 4 possible tiles that could move left, right, up, down. Move left and if there is a tile to the right it moves...etc, animated and with sound fx. Hold down space and iot shows the full image. TO DO, check when solved, random shuffle.
Hello Dan, I absolutely love this new type of video production. This seems like a new era for coding challenges! Although I do miss those days of "I'm sorry I'm just looking at the chat to see if I botched up something", but this is absolutely amazing. The white board, the timer and all the little helpful animations. Great job to the coding train team!
I hope to keep that vibe going with some live streams!
@@TheCodingTrain enjoying your twitch streams!
@@DenisovichDev Glad to hear, do you have a platform preference for streaming?
@@TheCodingTrain I would say no, however things seem a bit tighter in Twitch probably because it's solely based on livestreaming, that I guess makes it easier to do more casual streams on (like genuary, say). CZcams could be the place for more formal ones like special ones like PCD fundraiser, team seas and others. However, I think whatever you do, your community will always support it so it sort of doesn't matter that much. Have a great day!
Great to see you're back with a challenge, looking forward to a new episode of your NoC series.❤
I'm a little ways away from getting back to that but I really hope to!
This man fucking loves solving complicated problems and you can clearly see it in his actions. That's so alpha in programming. I hope to give back to him for the things he''d taught me when I land my first programming job.
You can very well put every piece at random place, it will be solvable, so shuffling by moving from solved to unsolved state is less reliable.
that whiteboard magic, awesome to watch. You could make a tutorial on how to edit something like this ♥
the "ahhhhhhhh what am i doing" is what every programmer goes through everyday
23:35 😄 All of those white tiles. Good fun! 💕
just been watching old coding challenges and now a new one !!
But i miss old whiteboard with messy drawings :(
You can still find them if you go back and watch the stream archive! But yeah, it's a delicate balance between authenticity and clarity.
@@TheCodingTrain yes the clarity is much better. it is just sentimental thingy :D
@@TheCodingTrain Would be nice to have a link back to the livestream in the description of these edited videos, so those of us who like seeing all the mistakes, corrections, messy whiteboard, etc. can easily find the unedited version. I tried to find this one but couldn't.
Finally somebody else who uses JS classes! Pretty much everybody else uses a lineout function as a constructor and a .prototype function to add methods. But I really prefer classes because i like C++. So thank you for encouraging this practise!
Sadly until quite recently all browsers didn't support classes (*cough*IE and Edge*cough*). But now that Edge has become a Chromium reskin classes are thankfully universally supported in all still officially supported browsers.
The whiteboard and time stamps are a game changer!
The quality of these videos has grown so much!!! Great content!
Thank you!
this channel is gold
Thank you!
Thankyou so muchhhhhhhh, I need this for my capstone project at school
I find the editing here to be very tasteful and helpful and not distracting at all! Great job! And the content itself is top notch as always!
Everytime I watch your videos I go and try them myself. Your enthusiasm inspires me c:
I am excited to try my own image with this code!
Yay, can't wait to see! Please share in Discord and on thecodingtrain.com/CodingChallenges/165-slide-puzzle.html
Nice, I have been missing these.
Glad to be able to bring them back, I am hoping to do one per week but I'll settle for at least one more in February!
FINALLY MAN YOUR BACK :D I WAS WAITING FOR ANOTHER CODING CHALLENGE FOR A WHILE
sliding puzzle in javascript was actually a project I had to do in college for the web course
He’s back! 🙌🙌🙌
I love coding train. He'll always be the challenge-creator.
it makes me feel like IM a pro-coder (I was, but now I rely too much on chatGPT)
At first I thought you wrote some amazing program that took the shapes you drew on the whiteboard and would snap them to the nearest shape they represent and overlay it. Then I realized it's just totally incredible editing!
oh hey, my friend challenged me to make this concept a few months ago. having an animation for moving pieces makes it look so much better. very nice video
I did that in DARK BASIC years ago! no objects just a good use of array and variables...I made a simulation of that board with 15 numbers made of plastic that we used to play with in the '80s but with an image to compose too, so I had to make the tiles able to slide in place in the 4 directions, and yes it was necessary for me too to make an empty sqare of course! I remeber that to ceck if the puzzle was right, I checked all the tiles number and if they were consequential (the st was follewed by the 2nd and then the 2nd was followed by the 3rd. and so on...up to 15) if not the game continued till that condition was satisfyed
function isNeighbor(i, j, x, y) {
return ((abs(i-x) + abs(j-y)) == 1);
}
Since it needs to be the same row/col, the difference would be 0 for that. However, the difference needs to be 1 for the other direction. So 0+1 == 1, and 1+0 == 1.
I'd also use a function "getNeighbors(x, y)" for the shuffling.
A much easier move() function might be to just input up, down, left, and right. (use arrows, or a,w,s,d, or whatever). If up then exchange the blank with the tile under it, and so forth.
Oh great point!!
If I remember correctly, with the 4x4 puzzle, from the starting arrangement if you swap any two tiles an EVEN number of times, the puzzle is solvable. However, if you swap any two tiles an ODD number of times, the puzzle is not solvable.
Sam Loyd, the famous puzzle author and recreational mathematician, figured this out back in the late 1800s / early 1900s. As the story goes, he offered $1,000 (a lot of money back then) if anyone could solve his 14-15 puzzle, as it was called. However, with his arrangement, the 14 tile and the 15 tile were the only two tiles that were swapped.. One swap... an odd number. Thus, his money was safe... as there was no valid solution.
as an aside, need to make sure the source image doesn't have any duplicate tile images or the puzzle will be solved pixel wise but, but not necessarly tile wise.
Man I leave for a bit and now you’ve got this whole animated whiteboard (looks great by the way!)
Thank! It was fun to do but probably not realistic for every video!
I like the new timer design!
Me too!
For what it's worth you could just use uv coordinates to render parts of the image to each piece's quad.
I love this channel man, quality content
Awesome video! Was wondering if you would tackle this one, I had made one a number of years ago, it was fun!
For the isSolved() method, you could just say:
if (board[i] === i)
instead of the tiles i. This would remove the necessity to maintain the tiles index in the data. All that needs to be in order is the board array! Effectively you just need to match the indexes of the board array and the tile array.
Ah yes, such a good point!
Gilfoyle from another timeline
love your vids
Love it dan so much , I have veen watchijf your forva very long time and seen most of the challanges and i have learmed so much from it and i just hope you upload more coding challanges and I want to see what kind of plans do you have for this year on this channel
Yay! Coding challenges are back!?
Yes! My 2022 resolution!
@@TheCodingTrain lesgooooo
Damn, I'm coming back to this channel after 3 years and the quality of edits has gone way up and in a good way.
this guy is a genius...a god among programmers
Mrs Richards: "I paid for a room with a view !"
Basil: (pointing to the lovely view) "That is Torquay, Madam ."
Mrs Richards: "It's not good enough!"
Basil: "May I ask what you were expecting to see out of a Torquay hotel bedroom window? Sydney Opera House, perhaps? the Hanging Gardens of Babylon? Herds of wildebeest sweeping majestically past?..."
Mrs Richards: "Don't be silly! I expect to be able to see the sea!"
Basil: "You can see the sea, it's over there between the land and the sky."
Mrs Richards: "I'm not satisfied. But I shall stay. But I expect a reduction."
Basil: "Why?! Because Krakatoa's not erupting at the moment ?"
you're so happy you made my depressed evening less depressed
yeah, nice to see you again.
great video! anyone attempting to improve on his work, think about the tiles with similar content, like the white tiles in his example, there is no visual way to distinguish them and put them in their right location.
The animation look stunning. What a great job
I got back to p5 after a couple of years, and it was as fun as I remember it.
I just wish that there was a better way to use it in module mode other than instance mode.
Full on whiteboard madness!
I really miss your videos, Keep 'em coming
Trying to make one per week now!
the most important thing for beginners in this video is that even masters, when they write the code, it doesnt immediately works. such a myth.
Woah, this was amazingly edited! :D
Loving the whiteboard
One thing to point out is that isNeighbor will include the diagonals, but otherwise really nicely done! Live coding is so tricky!
I thought I wrote my algorithm to make sure not to include them! Did I make a mistake??
Oh no, that’s my bad. The first conditional checks to make sure it’s in the same row/col. Totally my bad! Disregard!!!
@@samthomas3255 No worries! Thanks for watching and commenting!
You must make sure that there are no multiple solid squares since there would be no way to know if one was in the correct place or swapped with another solid.
Amazing!!!! Your videos are great!! Greetings from Brazil
i am mad of your coding challenges big fan.
Love Hannah Fry!
Love the white board
there is an obvious caveat with 8*8 or 20*20 pieces, where there is no visual indication of white squares being in the right spot. pixel comparison might be needed here..
The music during whiteboard session is distracting, lower the volume a bit 😁
love this!! :)
You really need an IDE that shows you errors while you type 😄 And also input parameter names while you type out a function call.
Good luck with an 16x16 board but the white tiles have an explicit place where they have to go :D
haha, yeah, will need a different image for that!
Really like the new format! :0
Thank you!
I have a feeling you would absolutely love to participate in a game jam.
Just dropping by to say I am SO HAPPY TO SEE THAT ORIOLES HAT!!!!
Alex!!!!!!!! How are things??? So great to hear from you!
Challenges to the Challenge: Move a column or row of tiles, instead of just a single tile. Have the missing tile be randomized so the hole can be anywhere on the board, even in the middle.
For a second I thought you had some advanced digital whiteboard, took me way too long to realised it's added in post.
But my dream is to automate the process!
@@TheCodingTrain So youre saying there is a chance we are gonna see some digital whiteboard actions?
love yer content ... nice
Glad to see you back, Dan!
Thank you Julian!
@@TheCodingTrain 😊
Can you please give a little more explanation about the code being implemented.
I feel like there is lack of additional explanation, since I cannot follow through all steps..
To shuffle, you just needed to take the blank tile for a random walk and is done. :)
I know! What a weird way I did it??!?!?!
Aaawww yeah! Happy to see you back again with the challenges and all 😍
Thank you for your continued support!!
Hey there! I noticed that in your videos, you've been manually creating a grid in p5.js for years now. Have you considered turning it into a function or maybe even contributing to p5.js to make it a global function? It would be really awesome and helpful for your viewers if you could simplify the process. What do you think?
point is, half of all shuffled variations is unsolvable. I met it while coding 15 puzzle when you got 1 2 3 4 5 6 7 8 9 10 11 12 13 15 14
Missing the old Daniel Shifman, who just messes things up and then figure out in front of us what went wrong
I'm still doing this in the live streams! But I try to capture as much as possible for these edited down videos. Thanks for the feedback!
when solved, the blank square should pop in the missing tile.