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.
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 !
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!
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.
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). TH-cam 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.
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.
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.
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.
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
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 ?"
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
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
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.
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.
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.
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.
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.
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..
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.
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?
You don't need a move function to shuffle the board for it to be solvable. Because that is a standard "15-puzzle", when it is shuffled in the way you did it first an even number of times (and 100 is an even number), it should be solvable in all cases. Numberphile did a video about it, called "Why is this 15-Puzzle impossible?" th-cam.com/video/YI1WqYKHi78/w-d-xo.html ..but if the blank square doesn't start, in the shuffled puzzle, in the bottom right corner, things can go differently...
He mentions the whiteboard was messy and I see the "editor" avatar pop up when discussing it so I assume the video editor greenscreened/rotoscoped him out and then animated his own cleaner version, which is why the square isn't so square and the pseudo code is much more than just written text.
How do I enable other buttons in my sketch window when it runs, so basically I need I stop button and when you click the start Button, every other button becomes disabled. Nothing work until you click on the Stop which is outside the sketch window ... I don't know jow to resolve this
Love how the whiteboard effect retains the not-quite-square squares!
Yes, I agree!
th-cam.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!
th-cam.com/channels/zsoRWLVEoqbZHcizHxbTUA.html
So happy to see Coding Challenges back, and that new digitalized whiteboard explanation is very cool!
So glad to hear you liked it!
th-cam.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!
You know he's a programmer when he uses a function before defining it
exactly my thoughts haha
lol
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!!!
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!
You're my 1st programming teacher.
Happy to be here after a long time.
Absolutely love the editing on this one. Amazing video, keep it going!
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.
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). TH-cam 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!
You're a great programmer and a great teacher. Thank you.
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.
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 :)
this channel is gold
Thank you!
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!
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!
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.
The quality of these videos has grown so much!!! Great content!
Thank you!
The whiteboard and time stamps are a game changer!
FINALLY MAN YOUR BACK :D I WAS WAITING FOR ANOTHER CODING CHALLENGE FOR A WHILE
Everytime I watch your videos I go and try them myself. Your enthusiasm inspires me c:
that whiteboard magic, awesome to watch. You could make a tutorial on how to edit something like this ♥
Like the new whiteboard edits...
Thank you!
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 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.
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!
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.
23:35 😄 All of those white tiles. Good fun! 💕
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 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
you're so happy you made my depressed evening less depressed
I love this channel man, quality content
I like the new timer design!
Me too!
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 ?"
Gilfoyle from another timeline
love your vids
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
Yay! Coding challenges are back!?
Yes! My 2022 resolution!
@@TheCodingTrain lesgooooo
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
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.
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.
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.
Woah, this was amazingly edited! :D
Glad to see you back, Dan!
Thank you Julian!
@@TheCodingTrain 😊
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.
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!!
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.
Just dropping by to say I am SO HAPPY TO SEE THAT ORIOLES HAT!!!!
Alex!!!!!!!! How are things??? So great to hear from you!
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 😁
i am mad of your coding challenges big fan.
love this!! :)
Aaawww yeah! Happy to see you back again with the challenges and all 😍
Thank you for your continued support!!
I have a feeling you would absolutely love to participate in a game jam.
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!
Love Hannah Fry!
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??!?!?!
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?
Bedankt
Thank you for the support!
You really need an IDE that shows you errors while you type 😄 And also input parameter names while you type out a function call.
love yer content ... nice
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
when solved, the blank square should pop in the missing tile.
Cool. A more challenging part would be to create an algorithm that tells you how to solve it :)
Yes, I hope to tackle this next!
Great stuff!
This is fun
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?
You are beautiful in this video Dan!
And thank you for teach us
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!
Radu has done a similar in JavaScript
@TheCodingTrain Let's say I want to play celebratory music once the puzzle has been completed. What code should I write then?
Hi I know I'm late but what about a jigsaw generation coding challenge?
Love this idea!
Really missed those timed ones!
You don't need a move function to shuffle the board for it to be solvable. Because that is a standard "15-puzzle", when it is shuffled in the way you did it first an even number of times (and 100 is an even number), it should be solvable in all cases. Numberphile did a video about it, called "Why is this 15-Puzzle impossible?" th-cam.com/video/YI1WqYKHi78/w-d-xo.html
..but if the blank square doesn't start, in the shuffled puzzle, in the bottom right corner, things can go differently...
How the heck did you do that with the whiteboard?! Did you cover that in a livestream or something I missed? That's really impressive! Keep it up!
We're using runwayml.com/ for the rotoscoping and then my drawings are manually traced, hoping to automate it someday!
He mentions the whiteboard was messy and I see the "editor" avatar pop up when discussing it so I assume the video editor greenscreened/rotoscoped him out and then animated his own cleaner version, which is why the square isn't so square and the pseudo code is much more than just written text.
How could you get the white tiles be treated as in the correct place?
Super sir
hi! great job man! can you kindly make a tetris game^^
what is the significance of 549317 in the source image?
Would love to see if you could implement Eulerian video magnification in p5
Oh i actually made this a few muths back =)
How do I enable other buttons in my sketch window when it runs, so basically I need I stop button and when you click the start Button, every other button becomes disabled. Nothing work until you click on the Stop which is outside the sketch window ... I don't know jow to resolve this
hi. how you added animation to white board? That was interesting
Will you be releasing the ASCII Art stream you did a few months back? Or can that be another full coding challenge vid?
Ahhhh! I'm trying to remember when I did that? I definitely want to do that as a Coding Challenge.
Nice tip at 12:35
Glad you caught that!
How to crop pieces of the image
came for the javascript, stayed cause hes got on a O's hat
It is a neighbour if abs(i-x) + abs(j-y) = 1 ...
I have solved one of these, and random switching doesnt work, becomes impossible sometimes.
You can check if it's solvable and then fix it if it's not.
Ok but what even is that source image lol
😀 PS this video made me like you more as a teacher
I think I'm gonna do something with my previous codes by shuffling the canvas
(Not gonna make it solvable)
sir if i write this same code then will it work in pure javascript ...
Hello! Uvota from stream chat!
Hi hi hi!!!! Thanks for joining the live stream and all of your support!