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.
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
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
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!
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 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.
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.
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 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 !
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.
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.
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.
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!
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.
@@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.
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
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
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.
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.
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.
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
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.
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.
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.
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.
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..
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.
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.
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
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.
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
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!!
You know he's a programmer when he uses a function before defining it
exactly my thoughts haha
lol
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
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!
Love the whiteboard effects. Makes it so much easier to see!
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!
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!
Absolutely love the editing on this one. Amazing video, keep it going!
These challenges are great for keeping my skills sharp as a software dev 💪🏼
You're my 1st programming teacher.
Happy to be here after a long time.
The timestamps are a great addition!
So glad to hear!
th-cam.com/channels/zsoRWLVEoqbZHcizHxbTUA.html
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.
Its really respectable that you don't edit out silly mistakes even tho you can!
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!!
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 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.
I love these videos. It's very helpful to hear you think out loud.
You're a great programmer and a great teacher. Thank you.
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!!!
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!
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.
FINALLY MAN YOUR BACK :D I WAS WAITING FOR ANOTHER CODING CHALLENGE FOR A WHILE
Awesome, I might try this on my channel one of these days!
Everytime I watch your videos I go and try them myself. Your enthusiasm inspires me c:
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!
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.
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!
The whiteboard and time stamps are a game changer!
23:35 😄 All of those white tiles. Good fun! 💕
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.
this channel is gold
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 :)
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.
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 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
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 love this channel man, quality content
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.
the "ahhhhhhhh what am i doing" is what every programmer goes through everyday
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!
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
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.
I like the new timer design!
Me too!
Thankyou so muchhhhhhhh, I need this for my capstone project at school
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)
that whiteboard magic, awesome to watch. You could make a tutorial on how to edit something like this ♥
Woah, this was amazingly edited! :D
Bedankt
Thank you for the support!
The animation look stunning. What a great job
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.
Glad to see you back, Dan!
Thank you Julian!
@@TheCodingTrain 😊
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!!
Like the new whiteboard edits...
Thank you!
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!
I really miss your videos, Keep 'em coming
Trying to make one per week now!
sliding puzzle in javascript was actually a project I had to do in college for the web course
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
He’s back! 🙌🙌🙌
this guy is a genius...a god among programmers
yeah, nice to see you again.
Full on whiteboard madness!
Really like the new format! :0
Thank you!
Yay! Coding challenges are back!?
Yes! My 2022 resolution!
@@TheCodingTrain lesgooooo
For what it's worth you could just use uv coordinates to render parts of the image to each piece's quad.
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.
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?
Loving the whiteboard
Gilfoyle from another timeline
love your vids
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!
I have a feeling you would absolutely love to participate in a game jam.
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
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.
Just dropping by to say I am SO HAPPY TO SEE THAT ORIOLES HAT!!!!
Alex!!!!!!!! How are things??? So great to hear from you!
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.
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.
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.
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..
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!
Love the white board
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!
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.
Amazing!!!! Your videos are great!! Greetings from Brazil
i am mad of your coding challenges big fan.
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??!?!?!
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.
You really need an IDE that shows you errors while you type 😄 And also input parameter names while you type out a function call.
@TheCodingTrain Let's say I want to play celebratory music once the puzzle has been completed. What code should I write then?
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
Aaawww yeah! Happy to see you back again with the challenges and all 😍
Thank you for your continued support!!
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.
i just realized that a rubix cube is a slide puzzle
How could you get the white tiles be treated as in the correct place?
Love Hannah Fry!
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!