Live Stream #92: Minesweeper

good morning oh I'm so glad to be back here on the coding train in the morning I'm playing on the background a new song by somebody it is called the k-nearest neighbor remix by third culture records i guess it's from the latest live stream i'm having trouble talking with this music on so welcome my name is Dan I hope that I'm live streaming I hope that everyone can hear me I'm checking some chat things going and okay it is live okay great so this is the coding train good my name is Dan Schiffman and I am here most Fridays almost every Friday often in the late afternoon but I'm here this morning it is now the end of the semester at New York University next week if you happen to be in the New York City area my students have a show of all their work Tuesday and Wednesday here at 721 Broadway so there's a lot of stuff going on for setting up for that that I'm doing this afternoon and so I'm here this morning instead so what's what's happening well look at all the board to to to all sorts of stuff okay nobody's complaining this yo this slightly strange invisible bug is back so I have a bunch of things that I want to discuss and go over and do and I think I've already forgotten what those things are Oh does it's a special Thursday episode in the let me fix that every I'm gonna change this to say every Friday okay should save that now so first of all to the young fellow who stopped me in Union Square this morning it said hey are you coding rainbow hello I doubt you're actually watching but that was like a lot of fun that somebody actually stopped me in the subway at Union Square to ask if I was coding rainbow and first of all a couple things number one is as much as I would like to be I am NOT physically a rainbow though I am close to one perhaps maybe and also it's the Kotick train now no more coding rainbow sadly ok uh-huh so a blue boys 79 who has two exams tomorrow you should probably go study for those exams ok let's put back on I realize I forgot to do something here which I I need to do I'm gonna put back on the actually going before I do that let me mention something so I'm trying a new experience or two different ways to interact with the audience and some of you know that I have a patron group I'm using a crowdfunding site called patreon calm if you go to patreon patreon calm slash coding train you are welcome to participate and contribute in this and you'll get an invite to a slack channel which I am NOT looking at but I'm going to look at right now nobody's put any messages in this like channel but there it is actually there are some from earlier but not since I started ok but I've take questions on Twitter and I have this like github repository of trying all sorts of different things something that I thought I would try that someone suggested there is a coding train subreddit that somebody created and I put there a question thread for Friday May 12th at 10:30 a.m. so here is where you could I'm gonna if this goes well I'll do this every week I will people can post their questions and then upload them so what did I have for breakfast I'm going to upload this oops oh I'm not signed in can I do it is it what's the chance I'm gonna actually know my password to sign in to read it wow that was really lucky ok I'm gonna upload this question oops and then I am going to answer it what did I have for breakfast I had some granola with some almond milk and a banana that's what I have that's all I had ok so while I'm talking and wasting time if any of you want to go and add some questions or upload any questions I'll come back to this in a moment ok let me do something that that I need to hike Shahid I love those emojis so Baltimore Papa pistachio guess who is from the great city of Baltimore go owes me that's where I grew up I was not born in Baltimore I was born in New Haven Connecticut little fact there when I was four weeks old I moved to Baltimore other interesting tidbits here we go okay I forgot something very important which is my green paper check and use for my strange invisible tricks but I put it on this laptop [Music] [Music] so I think this is good to others something what's down here the paper hold on there we go okay okay here's the thing I I think it could use some auto-tune me all of my songs that aren't myself they give you some audit because my voice is really not my instrument so to speak okay let's see so what do i else do I have to say anything else to say I don't think so I'm gonna get started soon so okay so I'm gonna go look at some of these questions in a second but what is going to happen on today's episode of the coding train well guess what you might be aware that I have been plugging away at making a lot of videos about machine learning artificial intelligence I have this syllabus from a course that is now wrapped up at NYU but I'm over the course of this summer dedicated to making I'm committed to making all the videos that go along with this course and where I think if I look at the these are all the examples here I'm kind of somewhere here in week 3 and last week I did some videos about nearest-neighbor algorithms and made a little movie recommendation system but it's been a very long hectic week I need to take a break from this so one of the things that I have is I have this rainbow topics repository which is my current system for taking suggestions and you can see people have added issues here sometimes their questions sometimes there's are ideas and things I could do and I sometimes like to sort it by thumbs up and now I can look and look at this so a couple things machine learning that's what I'm working on I'm gonna get back to that probably next week computer vision that would be I've made a bunch of videos with various computer vision topics and I definitely want to make some more and then I noticed a sweeper so first of all minesweeper is the third-most thumbs-up added topic in my rainbow topics github repository so i would like to listen to what the people want and so I wanna I'm gonna do it it also says patron recommended which means that somebody who is in the patron group and has access to the repository added that label and I like to listen to the patrons as well it's already getting warm and your hold on a second one of these days you can't see me anymore but I'm gonna attempt to turn on the climate control system in here okay so that's what's gonna happen today minesweeper to be honest with you I definitely have played minesweeper in fact I think I've been addicted to it in the past but it's got to be at least I mean it's got to be at least 10 years 15 years since I played minesweeper I don't actually really remember how it works but let's I believe if I look at this there is a I am so Mattias con tilde here made this oh and there's another one so let's take a look let's Ida haven't looked at this one look at this oh this is way better than anything I'm ever going to do oh wait oh this is just an image so this is oh it's a minesweeper clone made in processing to download how interesting let's download it I don't want to look at the code so let's see if we can download this should hopefully just be the application yes six modules now natively breaking news I need a breaking news so will somebody make me a excellent like coding breaking news sound effect that I could play breaking news it's just a timpani sound yes six modules are now natively supported in Chrome Canary behind the experimental web platform flag there's your coding breaking news this morning okay did this download let's open this up yes this looks like an application here I'm gonna open it up yes I want to open this from the internet I don't Internet I'm opening you where are you need this open run minesweeper there you are nope they are okay that didn't work I don't know why let's try this let's try this one okay so I think the idea here is that there are there's a grid with a bunch of bombs and I don't want to click on a bomb and if I click on a cell it's gonna tell me how many cells next to it have a bomb so only one out of these eight neighbors has a bomb so hopefully this one does not hopefully this one does not this one has two neighbors we could strengthen them oh boy then we could start to use our brain logic to understand well let's whip me if i zoom in even more here okay there are two okay wait a second here is there a bomb not necessarily not necessarily there are two bombs within one two three four five six spots all right I win ever let's just guess wait I want it Oh Oh game over oh okay so it is now hereby established that I am terrible at playing the game of minesweeper but I think this gives me enough but that's what I thought what I yeah so if you click on a cell with no bombs anywhere near it it will unfold in a beautiful animation all the way around the grid until I find some spots that have bombs next to it so that's one thing that I really do need to think about here do I want to program this beautiful little animation or just have it show us all the spots so that's something we're going to think about it think about I'm going to think about okay I think I can do this alright let's here we go now I'm gonna go to my new favorite website strawpoll calm how long will it take me Dan your chief Mon to program Mine Sweeper 15 minutes 30 minutes can I spell minutes 45 minutes 60 minutes over 60 minutes okay let's go here we go creep pol strawpoll / s31 for a gge okay let's see let's viewers the results so far there are no results cuz I'm in the future you haven't even seen this yet but now you probably have cuz it's about 20 seconds 20 seconds uh-huh yeah no way 50 minutes now here's the thing let me just let me say a few things about this I am NOT going to necessarily actually I mean yeah I know I'm gonna program the whole thing I mean here's the thing when I made I one of the reasons like I like to do these challenges is to not do everything I like to do the beginning steps of a project that show the fundamental pieces and that leave room for people watching or learning or following along to make their own to finish the project to make their own creative variation so anyway but I did and often I do coding challenges in multiple parts but I think when I do these simple and minesweepers not that simple simple game coding challenges I like the idea of doing them all as one video even if it something like 60 minutes long so you know I could change my mind I guess but I'm think I'm going to attempt to do this you know it's I'm gonna attempt to do this within an hour that's gonna be my personal goal in one video with no editing so even if I get really stuck you know I won't edit that's kind of my plan let's look at what you guys think so I'm gonna say 60 minutes 30 pins you guys have over 60 minutes yes okay that's not such a surprise there okay now let now I think I gave it enough time where are we I've been streaming for 15 minutes I've got until like 12:00 12:30 so a little bit of a shortened day here I don't know wait since when a two hour livestream became like a short one but that seems to be where I have these days oh okay here we go now let me refresh this page and see I don't think people are up voting these questions can the can't the comments be right wouldn't it have like this shows like a little I know about how the internet works shouldn't these have like or maybe there's okay let me answer some of these questions so red hand dev who posts a lot of great examples and actually some tutorials to YouTube as well on Twitter asks how do you deployed a nodejs server client multiplayer sketch such as in earlier tutorials using Express in other words how do you go from using a local server on one machine to serving from the web okay okay I'm sorry sorry that is it it says for points to the right of the username oh it does why I'm blah I cannot see but now I see I I wish this was like it's been 30 minutes since I turned that camera on okay all right um okay so okay so let's talk about this so there are different options you need a machine that is connected to the Internet so that's on the simplest level that's what you need you know your laptop that you're running if you if I'm not running anything right now but if you're running a server and you're looking at your web page localhost on your laptop somebody else could view that if your laptop is connected to the Internet and that person happens to know your IP address so ultimately if you are a web server and you are open to the Internet and it's receiving accepting of connections then you're ready to go now most likely you don't want to say from your apartment always leave your laptop on 24/7 to be a web server so most of the time if you want to deploy a web application somewhere work and live more permanently you're going to pay for access to a server through some service now there are some free or sort of like semi free options you know I'm not sponsored by any web hosting companies at the moment if I were I would do a little advertisement for them but I'll name you a few that I happen to use or know about digitalocean is one the one reason why I'm mentioning that is there is the github student developer pack so if you happen to be a student you can get this developer pack which gives you some free access to it gives you 50 dollars in credits to digitalocean looks like it gives you another one I was going to mention is AWS so 110 in bonus AWS credits so Amazon web servers is another service you can use digitalocean guess what oh I forgot I'm so excited I'm not sponsored by this but I am very excited about glitch so glitch a new service it is a code editor it is a sharing service it is a place where you can make web applications and actually live and you can run note applications through glitch and use it for free and run it on the web so it's made by a company called fog Creek maybe and I there's lots of wonderful people that I happen to know that work on it for example Jen Schiffer who is a Twitter hero of mine I should fault you should definitely follow her Twitter if you don't what is it Jen shiver Twitter this is like my Jen money dot biz I don't know what her Twitter is let's see here I'm here's your website at Jen Schiffer coding trade is sponsored by at Jen shipper Jen German button okay so really it's like the best my Twitter account is like the lamest thing ever it's like I'm live streaming now or I thought laughs a new video tutorial anyway so glitch that's a great I want to do some stuff some challenges with click glitch and use it maybe have a guest hey anybody from glitch you want to come and talk about it on the coding train it seems like a wonderful service I'm hoping to use it in one of my classes next year okay we're out where was i answering this question so so that's it then once you have this account how do you deploy it well how do you get your you have to get your code files there somehow glitch for example it's a web interface for doing that AWS or digitalocean you can use you can FTP or SFTP secure File Transfer Protocol which is a way of transferring files from your laptop to this web server then you can login this is my I was gonna this is my gift which is a weird thing to say by the way I like my whole life basically is just like can I do something weird enough on the coding training that people will make a gif out of it so this is me logging into AWS and in terminal and then you can type node this and forever this and I do have some videos about how to do this this is the worst answer this question ever so anyway uh maybe I'll make some more video tutorials and that sort of thing about this okay let me refresh this page and see what else we've got here oh yeah so github so this was a good question I'm it would be magical if this were possible hosting from github so there is github pages and I made some videos about github pages you cannot execute server-side code on github pages it's just for hosting files so it's this is of one of the most confusing things about doing web programming right you could write a server in nodejs you could write a game like minesweeper in JavaScript you could write a server in JavaScript you could write a client-side JavaScript on even confusing myself just talking about it you could write a server app KS you could write a p5 sketch maybe call that sketch touch ass both of those are javascript files both of those you might upload to a web server the difference is where do those run when you write a node program that code executes on the server when you write a p5 sketch while the javascript file lives on the server it actually gets sent to the clients computer the web browser and execute on that clients computer itself so github is a place where you can host your JavaScript files that get static files really it's called static cuz they don't execute and get served up and run on the client computer but you cannot run your own server side code why would you do one versus the other server-side code is good for saving to a database communicating with a certain when Takei ting to some like security privacy thing as host words of reasons why you might want to write server-side code and I if you go some too and look at some I know tutorials you'll see reasons why okay it's a good idea dan doing this bind sweeper no no no no server-side and client-side code although I'm tempted now to do minesweeper use a glitch oh boy oh boy do I dare do I dare this baby nervous and now I feel like I have to be I got very anxious about this okay alright let's let's take a moment I bite so I answered one question I answer to because I also said what I had for breakfast okay so how that's going tell us more about your background how did you get into programming how did you get into teaching and writing 23 minutes okay I want to get into the coding stuff soon so let me try to answer this question I got into program I don't have a good I wish I had a good answer for this question but I got into programming by attending a program called ITP ITP is a two-year graduate program located in Tisch school the arts whose mission is to explore imagine of use of communications technologies guess what that's the program where I teach now I was a student there from 2001 to 2003 JT nimoy came and did a workshop on processing and that's and processing started appearing more at ITP then and that's where I discovered it and I just kind of never left ITP and started working on open source things and honestly here's the thing with this question which is how did you get into teaching and writing for me I never actively applied for anything or decided this is what I was going to do I just started putting exec you know I would make stuff and then put examples online and put a blog post online about the example and through doing that then people would find it and and so just sort of the act of always kind of release early release often with just anything that I was doing kind of snowballed into just doing more and more of that and discovering that one of the things I enjoyed doing more was teaching and making examples then making actual projects are doing kind of freelance coding work itself so that's kind of how it happened okay okay so no I did not go from student to teacher in two years ITP has positions that are called are like research residences that I did after I graduated and I did workshops and things as part of that and then maybe I taught one class it was sort of a slowish process okay I'll try it up maybe what I'll try to do is come back and answer some of these questions by typing it's pathetic I know later okay so I don't know if this went well my attempt to answer questions okay but let's let's take a look at glitch let's see if this is a viable option for doing a coding challenge I sort of feel like if I'm to use glitch do I really want the the usually issue there's nothing about what I'm doing today that requires server-side programming um you know you know I could add stuff like a high score list and things like that but I'm not so but let's take a look at this for a little bit now I have a glitch account Oh sign-in with git oh boy okay hold on do you think we can manage this you bear with me for a second you know what okay I'm gonna come back to glitch another time because it's already 11 a.m. I have been streaming for 27 minutes and I'm looking at the chat and so I think I need to get going let's let me put on some music so this is random this is your choice that is in the core random algorithm the actual random algorithm itself those numbers aren't related at all you pick like I'm picking random numbers between zero and ten nine two seven six one things I need to do is get the whiteboard ready really but with curly noise I might pick numbers like this two three four so minesweeper I have to think about this five six seven eight nine what do I need for my [Music] this will be so hard let's see okay so let's get going here we're gonna do my ridiculous thing where oh this is by the way wonderful project called superwoman it's made by Qian Tian Yi I'm apologizing sick John Khan if I mispronounced her name I love this project it's so lovely it's so satisfying to watch these little characters fly as you hover your mouse over them okay but the reason why I'm here on the p5.js website is to download the entire forces 7th time because I am a ridiculous person and now I'm gonna get empty example and I'm going to put it on the desktop and I'm going to call it now minesweeper now here's the thing I like I like to I'm gonna do some sort of little my audio is quiet relative than music is that correct okay let's let me let's let's let's confirm this as always I always forget to this stop I'm talking it's done and music is play I'm talking and you skip plays how is the volume of my voice as compared I can't hear the music so what's to loud sounds fine to me it's perfect okay great all right so now what am I going to do I I'm gonna chicken out about the glitch thing I'm gonna come back to that especially one side once once I'm sponsor hey what happened to my oh oh how interesting now when you download the example it doesn't come with the libraries that come is a little it just links to the CDN that's fine and the min yes that's fine okay let's take this off okay and let's go to the brats let's run a little server by the way I had a strawpoll up about let's check this one out by the way oh yeah I had a strawpoll up as to whether people preferred me to do this in JavaScript or Java and seems like the I would like to do more coding challenges and things in processing good morning oh I'm so glad to be back here on the coding train in the morning I'm playing in the background a new song by somebody it is called the k-nearest neighbor remix by third culture records i guess it's from the latest live stream i'm having trouble talking with this music on so welcome my name is Dan I hope that I'm live streaming I hope that everyone can hear me I'm checking some chat things going and okay it is live okay great so this is the coding train good my name is Dan Schiffman and I am here most Fridays almost every Friday often in the late afternoon but I'm here this morning it is now the end of the semester at New York University next week if you happen to be in the New York City area my students have a show of all their work Tuesday and Wednesday here at 721 Broadway so there's a lot of stuff going on for setting up for that that I'm doing this afternoon and so I'm here this morning instead so what's what's happening well look at all the board to to to all sorts of stuff okay nobody's complaining this yo this slightly strange invisible bug is back so I have a bunch of things that I want to discuss and go over and do and I good morning oh I'm so glad to be back here on the coding train in the morning I'm playing in the background a new song by somebody [Music] it is called the k-nearest neighbor remix by third culture records I guess it's from the latest live stream I'm having trouble talking with this music on so welcome my name is Dan I hope that I'm live streaming I hope that everyone can hear me I'm checking some chat things going and okay it is live okay great so this is the coding train turd my name is Dan Schiffman and I am here most Friday's almost every Friday often in the late afternoon but I'm here this morning it is now the end of the semester at New York University next week if you happen to be in the New York City area my students have a show of all their work Tuesday and Wednesday here at 721 Broadway so there's a lot of stuff going on for setting up for that that I'm doing this afternoon and so I'm here this morning instead so what's what's happening well look at all the board - - - all sorts of stuff okay nobody's complaining this yath is slightly strange invisible bug is back so I have a bunch of things that I want to discuss and go over and do and I think I've already forgotten what all those things are Oh does it say special Thursday episode in the let me fix that [Music] every I'm gonna change this to say every Friday okay should save that now so first of all to the young fellow who stopped me in Union Square this morning it said hey are you coding rainbow hello I doubt you're actually watching but that was like a lot of fun that somebody actually stopped me in the subway at Union Square to ask if I was coding rainbow and first of all a couple things number one is as much as I would like to be I am NOT physically a rainbow though I am close to one perhaps maybe and also it's the coding train now no more coding rainbow sadly okay so a blue boys 79 who has two exams tomorrow you should probably go study for those exams okay let's put back on I realized I forgot to do something here which I need to do I'm gonna put back on the actually go before I do that let me mention something so I'm trying a new experiment rying to figure out all sorts of different ways to interact with the audience and some of you know that I have a patron group I'm using a crowdfunding site called patreon calm if you go to patreon patreon calm slash coding train you are welcome to participate and contribute in this and you'll get an invite to a slack channel which I am NOT looking at but I'm going to look at right now nobody's put any messages in this like channel but there it is actually there are some from earlier but not since I started okay but I've take questions on Twitter and I have this like github repository of trying all sorts of different things something that I thought I would try that someone suggested there is a coding train subreddit that somebody created and I put there a question thread for Friday May 12th at 10:30 a.m. so here is where you could I'm going to if this goes well I'll do this every week I will people can post their questions and then up vote them so what did I have for breakfast I'm going to upload this oops oh I'm not signed in can I do it is it what's the chance I'm gonna actually know my password to sign in to read it wow that was really lucky okay I'm gonna upload this question oops and then I am going to answer it what did I have for breakfast I had some granola with some almond milk and a banana that's what I have okay so while I'm talking and wasting time if any of you want to go and add some questions or upload any questions I'll come back to this in a moment okay let me do something that that I need to high shine I love those emojis so baltimore papa pistachio guess who is from the great city of baltimore go Oh's me that's where I grew up I was not born in Baltimore I was born in New Haven Connecticut little fact there when I was 4 weeks old I moved to Baltimore other interesting tidbits here we go okay I forgot something very important which is my green paper check it used for my strange conductors hat the only reason that the thing is I kind of want to wear this but it's doesn't have green in it but I guess this particular shade of blue it kind of gets keyed out so it's got this weird invisible head thing but maybe I'll wear it for the beginning of this okay ready all aboard here we are I was coding trade I'm going to do a coding challenge today that was requested highly requested the number three requested topic minesweeper thank you to fire soul who suggested this on August 14th 2016 today is May 12th 2017 so I didn't get to it within a year and I have never programmed this before and I think probably last time I played minesweeper was big it's got to be at least 15 years ago but I do know how it works so I'm just gonna get started let's see I expect this is probably gonna take if I can do this in under 60 minutes that's gonna be good for me you could see how long this video is I don't even know because I am at the present time right now okay I've no idea what's gonna happen next but I'm just gonna get started okay what are some things I need to do here I have to do this okay first thing that I need to do is I think what I should do is I should make an object I should make an object called a cell let's think about this so minesweeper and by the way I'm gonna well minesweeper I want to use something besides bombs so i beez and bombs on twitter suggested why not B's so I like this idea of what we're gonna do is make beasts we're the idea here is there's a grid and any one of these cells could either have a bee in it or nothing in it so the cell should have a state and we could think of that state as like B maybe it's true or false so each cell will have a state true or false each cell might I might need to know like where it is and its width and height it's kind of redundant information but that's kind of useful good I need to know where to draw it and then I also want to know its state like has it been revealed or not so that's also I can actually think of that as a boolean revealed true or false so right because if it's revealed I'll see what's there it could be blank if nothing's there or the B if the B is there or it could also have a number so for example this cell would have the number 2 because it's got to be xed to it this cell would also have the number 2 because it has to be xed to it this would have a 1 a 1 a 1 a 1 a 2 a 2 A 1 a 1 so if it's revealed we either see blank or B or a number okay so I think this is kind of all we need this is gonna be really hard so you take me a very long time because what I was about feels like God it'll be easy it'll be done ten minutes which is never true it's especially not for me back okay okay so I'm gonna come back to the computer now and let's let's add some of these things this dot B equals true this dot revealed equals true so let's just pretend for a moment that every single cell has a B and is revealed so now what do I want to do here I need to store all of these cells in some sort of data structure now there's a variety of ways I could do this I could whatever probably makes sense for me to store them in a two dimensional so-called two-dimensional array and so we could think of this as like oh this every single cell is going to be in a big array so it's a list but inside that array maybe each row is also an array that way what this allows me to do is if I want to say if I call this maybe I'll call this the grid if I reference grid index one a comma 2 comma 3 or something so this is Z this is row 0 this is Row 1 and then column I would have this or something so that would be that particular cell and I wouldn't write it like this I would write it like this so I think this makes sense I could use a just a regular array and then I could always convert a column and row location to the spot and the one dimensional array and I've done this quite a bit in different videos about pixels and image processing but I think this makes sense the only thing that's a little bit weird is typically when I do this I actually think about this as the column and this is the row kind of like X comma Y column row and the way I just described it here these so so really what I might do is like this is the FIR the first column is the first element then the next column is the second element of that array so there's any number of ways you could sort of think of this or do this but I'm gonna do this here and in the code now now it's a little bit tricky in JavaScript to make a two-dimensional array and what I'm actually gonna do is I'm gonna make a function I'm gonna call it make make 2d array I've done this before I have like a total deja vu moment here I've done this in a previous coding challenge and actually I think there's a github issue thread on the rainbow topics forum github repository about how to make a Eric function that makes you any dimensional array but let's just say I make a 2-dimensional array with a certain number of columns and a certain number of rows and so I'm going to say array equals a new array with a certain number of columns and then for every column make that an array with the number of rows in it okay so I have an array of all the columns which are all like the X's and then each one of those is an array of all the rows of all the Y's and this is a you know in JavaScript typically you'll see this right which is like that's how you make an array but I can I can also say if I want the array to have a specific number of elements to start I can say new array number of columns okay so what I want to do is now I'm gonna have a global variable called grid and I'm gonna say grid equals make 2d array with now how many columns and how many rows all right so let's just do something simple here let's just say that these are gonna be ten by ten these are gonna be ten ten by ten pick little ten by ten pixel right squares so if my canvas is 400 by 400 then I'm gonna have forty columns and 40 rows okay so that let's do that so I'm gonna make uh so first I have to say let's make create canvas width of 400 comma 400 and let's make it smaller just to start 200 comma 200 and then make the grid make the make an array of two honey 20 by 20 and I'm gonna okay and you know I could use math to clean this up later we'll do that later okay this is fun this isn't feel so fun yet maybe look at soon enough so now and actually let's have a global variable like let's just do this and now I'm going to say for VAR i equals 0 i is less than a number of columns i now need to initialize and then I'm going to use J for the number of rows and now I need to just initialize every single spot to be a new cell so what we've got now here is this idea of okay we need have the game the board the game board is a grid of cell objects it's going to have a certain number of columns and a certain number of roll rows so I make a two-dimensional array to store all the cells and then I loop through for every column for every row make a new cell now let's go into the draw function let's say background zero and do this and I'm gonna say show okay this is going to actually be an edit point because I just hate what the camera goes off but otherwise I'm not going to do any entity let's say show okay so the idea here now is I want to be able to see what's in these cells so I need to go and you know what I really want to do I'm gonna make a separate JavaScript file called cell yes because I have a feeling ultimately there's gonna be a lot of code that starts going into the cell so I'd like to save that somewhere else and once I've done that I just need to make sure I also add a reference to it in my index.html file okay whoops what's going on cannot read properties 0 of undefined sketch such as 25 so we already have an error here what Seve let's get touch hiss 22 mmm what do I have now what's wrong oh look at this you know it would be nice if I write a function called make 2d array and I create a two-dimensional array you know what I need to do I need to return it so return the array okay great now show is not a function ok great so now we need to write a function called show and I'm gonna attach the functions to the prototype this is up this is a one a way of doing object-oriented programming in JavaScript where I create use this constructor function to make an object and every object that is made with that constructor function will have a set of methods as part of its prototype one of which is show another video that covers to this more clear or another they covered this in more detail which I will link to in the description and also someday maybe I'll use this yes six syntax which is a little bit different and perhaps a bit nicer remains to be seen okay so now what I want to do is I want to draw a rectangle at the X location we have a source with a width and height that's the size of the rectangle of each cell huh but it doesn't have this cell doesn't have an X a Y or a size so let's give it that X Y w this dot x equals x this dot y equals y this w equals W now when I create each cell if I have a global variable called W which is ten each cell is going to be a 10 by 10 pixel thing let's make it 20 by 20 to make it bigger then I can also say right I can actually then calculate the number of columns and rows which is the width divided by that size the rows is the height divided by that size and probably what I should also do is say floor because I don't want to have like 21.3 columns or 21.7 rows it needs to be a whole number an integer value so let's see how are we doing here now that I've done that I can make each cell at its I times W location or it's J times W location so why is that right so each one of these basically has let me find my eraser here each one of these has a I index its column it also has a J index it's row so if this one is 2 comma 1 it's actually the rectangle itself if each one of these is 10 by 10 would be at 20 comma 10 pixels if it's 20 by 20 okay 40 comma 20 so we need to calculate its pixel location by multiplying by taking the its index I comma J and expanding it by the number of pixels which is the size yay-yay me and setting the grid size things okay so now and its size is just W so again some funny me you know nothing on this is really going to change does it need to be in the object could just be a global variable but what the hey here we go okay so now we should be able to see a whole bunch of rectangles now look at this that's sort of sad like they have this what am i what's going on here so let's figure out what we're gonna color then I'm gonna say stroke common zero and no fill let's do that now we see nothing I'm gonna say fill comma 255 now we see the outline and but it's kind of sad like our math is off this these little details really pause for me so let's fix this what's the best way to do it I don't know this might this might just actually work that's fine let's do it that way so just actually make the canvas one pixel wider everything's happy now okay so now we see that grid now here's the thing what I want to say in the show function is you know if if it's not revealed well actually it's always gonna I think we're always going to draw a white rectangle you know what actually what I should do this will make more sense is I should make the background white and I'm always going to draw a no filled a no filled rectangle and if it is revealed then I might put some other things in it for example if it's a B then let's draw I don't know what I'm just gonna draw an ellipse and so I'm gonna draw a little circle if it's a B let's see what happens there okay whoops but this circles in the wrong place because but I can change that I could say ellipse mode corner so I can have the ellipse reference point be the corner oh but I want it to be I want it to appear in the center so never mind I'm gonna make its location plus W so I'm gonna just draw in a little ellipse I'm just kind of moving the ellipse around so if it's a B there's a circle there they all have a B so let's now do something different let's just say if random 1 is less than 0.5 then this dot B is true otherwise this dot B is false so now half of them are about how about half of them randomly are going to be bees and there we go so now we see we're on our way to actually making this game okay so we now have a setup where we have a grid each cell has a stake it could be a B or not a B and we can visualize that B design aside okay so now I should say that there none of them are revealed at the beginning none of them are revealed right tada so now here's the thing now what I need to do what we're really moving along here we don't have too much farther to go now what I need to do is I need some mechanism to just say like when I click on one of these I want to reveal it I want to show what's underneath click on it reveal it so now what I need to do is I need some sort of function to determine if the mouse has clicked on that particular cell so one way to do that first of all would be to write a function contains XY so in other words I want to this is a function I want to be able to say does this cell contain a point is that point inside this cell and so what are the boundaries of the cell well if X is greater than this X plus this out X and X is less than this dot X plus this dot W right because if that Newt look right if this is a cell I want to know did the mouse is this point between X and X plus W or is it between y and y plus W and I'm using W as this generic variable named width and since these are all squares the width and height are equal I you know I would have to rethink this and perhaps if I was things were different but and maybe there's a better variable name for this but W for this the sort of length of a side of the rectangle okay so what I can actually do here and I don't need to actually have this if statement I just want to return the result of this a point is inside if X is between the boundaries and this is gonna get very long Y is between the boundaries so the same old thing right so return this long the result evaluating this long if statement return X being between the left and right and Y being between the top and bottom why am I doing this because what I also want to do now is handle the mouse pressed event so using p5 there's a global function called mousepressed where what I can do is I can say now I could say if grid contains Mouse X comma Mouse why I wrote that function because what I want to do is say let me check every single let me check every single spot in the grid to see if it contains when the mouse is pressed to see if it contains the mouse point if it does that's a point that I've clicked on and now I can do something about that I can say grid IJ reveal all right so I can execute a function like reveal so let me now go into the cell object and I can write a new function called reveal and here's the thing say this dot revealed equals true so even if I if I click on it before it's already true it's true so let's let's see how this works well that was weird so I must have mistakes unfair because I'm clicking on some so let's see here let's see where do I have a mistake I see somebody in the chat grid i J okay III whoops that's AI J and this was this is right this is right this is right okay I comma J there we go that should fix it so whoa what craziness is going on oh this is kind of a fun effect live if grid I comma J contains Mouse X and mouse Y and so okay let's look at my reveals function my contains function if X is greater than this dot X and X is less than this X plus y is greater than this not Y this looks right what have I missed here contains has an error clearly looking at this greater than X and less than X plus W did I not know I've set W Y is greater than this oh this is the mistake look at that so then I really it's the event the opposite of the usual this dot mistake and you know this is a bit of a problem this is a very common programming a headachy thing which is that these variables are the arguments to the function the parameters of the function they're coming in and I'm testing them against the objects own X&Y so the objects own x and y is this dot and the arguments that are coming in are x and y so this is where i don't want to this dot okay great so now we should see whenever I click on one now and and what I'm going to do here also just to be able to see that this is really working is where do I if there to be otherwise let's draw a like a gray rectangle and let's be let's be explicit about everything so let's sort of see here so now I'm just also whenever I click on it it will draw something so we can see oh and I should have you know we don't need to redo the stroke the stroke will always stay so we can see if there's a B there's a B circle if there's not there's a gray rectangle and I meant that for that to be much lighter so something like this so I just want to see that it's been clicked on okay great we're doing well now here's the thing the amazing thing is that somebody's somebody's giving me some good advice in the chat it's a better way than I could do this now here's the thing what do I also want I want to be able to determine how many bees are neighboring a particular cell so I need a function I'm gonna call it count neighbors and I wonder if that's something else yeah I'll just do it on the fly count neighbors equals a function okay so first I want to do is just say total is zero and maybe I could call this count bees or something so first of all if this cell is a bee return negative one let's just say if it's a bee return negative one because it's irrelevant I only want to count the number of bees next two cells that are bees now what I need to do is I need to look at all the neighbors well how do I look at all the neighbors a particular cell has how many neighbors one two three four five six seven eight and so actually I can do a little loop that's between an offset of negative one and an offset of +1 right I want to look at every neighbor that's minus one plus one I could do these each individually like just check each one but let's do it in a loop so what I want to say now is okay I'm thinking I'm thinking I'm thinking let's do for I equals negative 1 I is less than and/or let's say less than or equal to plus 1 i plus plus so i here is now the offset in the X Direction J equals negative 1 J is less than or equal to 1 J plus plus and so I want to look at a particular neighbor is a particular neighbor is grid oh look at this these keep track of their own x and y but don't keep track of their own index what do I want to do about this so this is really in some ways this function isn't really part of a cell or is it a grid function anyway there's a bunch of different ways I could do this I'm actually just gonna in a very redundant way whoops I'm going to this is just for total overkill nests and you know it actually I like this because you know what I could do is if I send the index into the grid then I could just calculate the x and y here because I could say it's I times W and the y is J times W so let's change how that works and let's go into sketch and let's change how this works so I could just make a new cell that's at I comma J comma W right because now what I can do here is I can say this dot I plus I this dot J this J plus J so these are all the neighbors I want to look at I want to look at I want to look at I minus 1 I I plus 1 hi I want to look at I plus 1 J minus 1 I want to look at every single neighbor from negative 1 to 1 okay like I don't know if this is if I'm totally being clear I want to say like I minus 1 comma J J minus 1 then I want to say you know I comma J minus 1 I I plus 1 J minus 1 I comma J right you know I comma J minus 1 I comma J I comma u you can you know I said everything we could do any edits I don't know why I'm trying to list all the neighbors I think if you get out a piece of paper and draw it you'll be able to do it I got to keep moving we're gonna get this video finished okay so if neighbor dot B total plus plus okay so if if the neighbor has a beat increase that total and I guess I could say at the end now I return total now here's the thing I really don't want to check myself right because I'm not a neighbor for myself so whenever I equals whenever whenever I and J are both zero that offset is zero then I don't want to check but the thing is if I was a B I wouldn't be in here if I wasn't B I wouldn't be checking my neighbors in the first place so we can assume that I'm not to be so total even if neighbor is myself total won't go up so I can I can skip checking that so great so now I can return total so what I want to do and so here's the thing I think actually let's just create a variable which is neighboring called name neighbor count right I'm going to create a variable called neighbor count and when I do count bees instead of returning it I'm gonna say this dot neighbor count is a is that total because I think what I'm gonna do is after I create the whole grid I'm just gonna just gonna count every single one now the thing is I can't just call count neighbors here I've got to make the full grid because I can't count neighbors if I haven't made certain cells that are next to that one so you know I could just count the neighbors when I click on it but I might as well just count them all that way when I click on it what I can actually do here is in the display right where's my show function if it's a B it's got a circle if it's not I can also say text and let's say text-align:center text-align:center then I want to say text and then I wanna say fill 0 and then I want to say text neighbor count this dot X this dot Y and I'm sure I'm gonna have to move the text around and it should be this dot neighbor count okay how are we doing here now I know there's gonna be a problem but I'm gonna go for it anyway no I didn't have a problem yeah ok 0 neighbors well first of all that's not right it's in the wrong place and it's the wrong number so something is going wrong but that's okay we're gonna figure this out okay so first of all it's in the Rosalie's fix where it is so let's let's move the text over so I'm gonna place it in the center and then so but it's in the center but it's kind of at the top so I want to actually place the text at the bottom maybe - like 2 pixels or something so let's do that and maybe let's make it minus 4 pixels this is obviously the most important thing 6 pixels okay so this looks good of getting the numbers but I am not seeing the right number so it's not counting right number of neighbors so something is clearly wrong so first of all did I cook let's just let's just see here is is this actually be happening let's say console.log total so that didn't happen I thought I was counting all the bees oh look at this just a little typo when you call a function you've got to add the parentheses referencing just the function as a variable you don't need the parentheses the parentheses execute the function so I was missing that and it's not grid it's not a function okay count neighbors is not a function what do I have wrong here contains equals function count oh it's called count bees it also would be nice to to name to name function correctly count bees all right cannot read property zero of undefined aha I thought we might have a problem so what is the problem the issue is ah ok this is gonna be a little edit point here if I'm on an edge there's no neighbor to the left or there's no neighbor up to the top so only only cells that are not along the edge have all eight neighbors otherwise there's fewer neighbors and I've got to account for that so what I wanted to account for that there's a variety of ways I could do that let's go to this count bees function okay so what I'm actually gonna do is I'm gonna call this X off I'm gonna just rename these Y off oops X off so it's like the X offset and the y offset I think this will be a little bit clearer in terms of a variable name then what I want to do is I'm going to say hi equals this dot I plus X off and bar J equals this j+ y off so this is actually the neighbor is just that I comma J now so I want to break those out into separate variables because now what I can do is I can say as long as I is not equal to as long as I is greater than negative 1 and I is less than [Music] columns and J is greater than negative 1 and J is less than rows then I can go forward and do this right so I want to I'm if it's something off the grid ignore it so hopefully this helps and now five whoa there are five B's next to this too so this looks let's just try to click a button and actually let me just reveal them all so we can see if this let me just turn true on so now there we go so is this right this looks right right this cell has three neighbors this one has four this one has three are they correct on the edges three so this looks good great awesome okay we're getting somewhere how long have I been doing this oh there's all this stuff happening in the chat that I'm not looking at okay okay okay let's go I think I think we're all just about ready to actually start making a game happen so we can start working on the game mechanic so here's the thing what I want to do now is minesweeper I think starts with a fixed number of mines or B's in this case so what I actually don't want to do now and everything's going to not be Abie to start this dot B equals false what I want to do is have a variable I'm going to call it something like total B's and we're going to start with ten B's so there'll be ten B's randomly placed and so now what I need to do is I need to pick ret ten random spots now here's the thing I could just pick a random I and J but I don't want to pick the same spot toy so I'm gonna do something a little bit goofy what I'm going to do is I'm going to add to set up an album for pic pic total bees bees spots so for VAR i equals zero eyes less than total bees i plus plus now what I was saying is I could pick and I'm going to use n here because I want it I could say var I equals floor random columns let's just start this way J equals floor random rows okay so I could just do this and then I'm gonna say grid I J dot B equals true so let's do this and let's uh let's go here and say let's set everything to be revealed so well okay so something I clearly did something wrong but they're all in the diagonal what typo do I have here I did I I again get I and J so one two three four five six seven eight nine ooh one two three four five six seven eight nine ten there's ten but I'm going to do this a bunch of times at some point it's going to pick the same spot twice and so there could be done so there's a variety of ways I could do this I could check is that already a B if not pick another spot but I'm gonna do it this way what I'm gonna do is I'm gonna say options is a new array and then I'm going to go through every possible spot so I'm going to do all the columns and all the rows and I'm going to say options dot push a a little array with I and J in it so I'm going to create an array that has every possible option in it and I just so you see it I'm gonna say console.log options and oops let me take out this console dot log that's in the count B's function I don't want that anymore I'm done with that so we can see this isn't how hard to look at we can see these are all all the spots right four come 0 4 comma 1 4 comma 2 the reason why I'm doing this is now what I could do is where am i sketched what I could do is here instead of just picking a random column in row I could say index equals floor random options dot length so give me a random option and then VAR I equals index 0 VAR j equals index 1 so that option has an x has a column and row location in it so i can set that to be true and then what I can do is I could say options dot splice index comma 1 so this then deletes that spot so so so it's no longer an option and I probably could do that in one line of code because splice probably returns the one that your o index sorry sorry this is blue choice equals so the thing that I'm choosing well this is confusing right the index is the random index into the options array and then the column and row location is part of that choice so I probably could so then I'm deleting it so okay then and okay so now let's try this again and this seems to work and what I'm going to do interestingly enough so there's a way that we're gonna be able to check if this is actually working so what I want to actually do is let's just take this splice right up here because I have a feeling splice return to the one returns the one that you picked so that's a little bit nicer right so pick a random index take it out and delete it and then set that to be true so now whoops so it doesn't splice does not so that's fine okay so let's leave it this way and there we go now let's make sure this is really working what I'm gonna do is say total bees equals we have 20 by what is this 10 by 10 so let's make total bees 100 there we go so we can see that's working if I had just it's it it was able to pick every single spot but again 10 get 10 total bees 20 we get 20 there we go okay that's good now I don't want to reveal anything and also the way minesweeper works design-wise is if it has no neighbors you actually don't see the zero so let's let's just change that in how it's drawing so where I where I have the show function is only draw the text if this dot neighbor count is greater than zero okay there we go so now we're seeing this is we're seeing the final result this is the end of the game right you're done we found all of the bees my numbers are wrong somebody in the chat is saying my numbers are wrong I think they're right look at this pop is what I want removes that element from the array but I thought pop you can't give it a specific index can you let's take a let's take our short little divergence digression sorry and look at pop JavaScript array so does pop-pop I don't think yet it only removes the last element of the array so I can't give it a specific index anyway I could shuffle the array and then pop him off the end but whatever there's lots of other ways you could do this this is my way I did it no copyright violation here okay if I just think 1 if I sing incredibly poorly one line from song do I really violates copyright I don't think so okay so now let's now go back to cell and nothing is revealed false so now when we do is I can start playing like so what one okay so this is actually working in the sense that I can play this but when I click on one of these if it has no neighbors it should reveal everything around it that doesn't have this is the one tricky part alert alert train helps thing pull into station this is the trickiest part okay I need to figure out a way to reveal all the adjacent cells that don't have a B and if any of those adjacent cells also have a count of 0 all of the adjacent cells next to those should also be revealed so how do I do that well where where do I need to start this okay oh yeah this is basically flood-fill someone is saying flood fill this is like a flood fill algorithm because what I'm and maybe I'll come back to that the end Google flood fill I think we're kind of doing that all of a sudden which is exciting embedded in this video here okay so flood film from Wikipedia also called fills an algorithm determines the area connected to a given node okay I have the chat message one way too quickly okay now um let's see here so I'm not gonna look it up how it works I'm just gonna make up my own way of doing this so we're okay so this okay let's trace out what's going on here when I click the mouse I call reveal when I call reveal I said this dot revealed equal to true now what do I want to do different things so if this dot neighbor count equals zero flood-fill time it's flood-fill time doo-doo-doo-doo doo-doo-doo-doo it's time how could you better but anyway so okay so now what I need to do is I need to go and look at all of the neighbors now we've done this before so what I think what I should do is I should probably call a function which is going to we'll call it this dot flood-fill because we might need to call this somewhat recursively cell dot prototype dot flood-fill equals function okay so one thing we need to do just like we did with neighbor count we can repurpose some of this code we can start to look at all the neighbors right so oops am i missing I'm missing a bracket okay so this was the code that looks at all the neighbors and it should reveal them all so ah this is perfect all I got to do is say this as long as it's not a B right if so okay I missed the one important I'm like thinking this through and I'm not able to say what I'm thinking right so has this work right we want to look at all the neighbors if the neighbor is not a B reveal it that's actually it's as simple as that if the neighbor is not a B neighbor dot reveal this is actually going to trigger because reveal is going to set that equal to true and it's gonna check reveal it's gonna set the neighbors reveal true and I have it flood fill if it's zero so it's gonna be redundancy here because it's gonna end up checking some spots but let's just see let's just see if this isn't really as simple as that I can't imagine okay something went wrong there clearly so first of all I clicked on a B okay that kind of worked but I got some errors here I think I'm getting close Oh maximum call stack size exceeded aha I also don't want to reveal it if it's already been revealed got it if neighbor is not a B and neighbor is not revealed right I don't otherwise I'm gonna be stuck in an infinite loop of like this neighbor oh I'm right because if I say to my neighbor reveal yourself and then my neighbor says hey you reveal yourself and I say no you reveal yourself I say know yourself everybody reveal themselves you you get to reveal yourself then we've got a problem okay so this that should help there's still some okay that's a one that's a one haha that was exciting okay okay I know what's going on when I click on a be something weird happens so it seems to be working unless I click on a B right why is it I what yeah so that's this this that's working really really well so why is it doing it when I click on a B so let's trace that out when I click on a B now suppressed I call reveal then in the reveal function if neighbor count equals zero this stuff so is neighbor counts zero when I click on a B shouldn't neighbor count be negative one when I click on a B why are other things being yield so let's do console dot log this dot neighbor count to see what's going on here 1 2 2 1 1 find me you want there's got to be this has got to be it here right 0 so it did get 0 and then why did it do anything else what am I missing right shouldn't dad have just have ended what else happens when it's a be it let's get out of the loop here that's not the issue I'm confused when you click on it be returned negative 1 but I but where am i returning something hmm it uses its if but I don't see why wouldn't this just finish returning negative 1 not assigning it to it Oh am I oh I return negative 1 here of course there we go yeah so if this dot B this neighbor count equals negative 1 and then I'll just say return ok that mean if that's what my problem I had - historically there we go I can keep playing hey I think we made my sleeper okay so now hold on if it's a B then the game is over ok haha how long have I been doing this somebody tell me how long this has been going on for ok ok ok wait wait wait all right low battery on my sound board everything's going everything's falling apart ok so here reveal if it contains so I could just check you know if it wasn't why don't we just check it here if grid i J J dot B game let's call game over so if it's a B if that spot is a B let's call a function called game over and in the game over function which I will put ran arbitrarily here what I'm going to do is loop through everything and just reveal everything reveal equals true so that's how I'm gonna have game over okay so I think we've made this game now oh shoot did I not hit save wah-wah if grid what did it happen grid IJ reveal is not a function what I mean it's not a function what did I do I've lost I've lost my Oh markers markers there's the thing where you could do markers okay okay hold on we're gonna well I'll add that maybe hold on yeah markers will be an exercise for the audience what's wrong here if it's a B well let me just run this again what did I do what have I done Oh reveal revealed revealed revealed revealed revealed not reveal the function this is one of the tricky things in JavaScript you can't have a variable I mean functions are variables so you can't say reveal equals five function reveal equals some function they're the same you've over written what you done that my variable name was revealed okay ah game over so I think that we have now made minesweeper about 50 this would be about 50 minutes I'm under an hour I mean minesweeper faster and it took me to make pong now I you know having the game just start having the game start over being able to add markers so being able to add markers is a way I think that you could like snow that you know there's a bomb there which is going to help you as you move along but I'm gonna finish this coding challenge I'm gonna leave that as an exercise so this is going to get posted you will see the code for it on github in a link that look in this video's description for the code those should be a readme file there as well where if you make a variation of this you can link to it maybe you could design some beautiful beze it could have sounds and one thing that you could do that would be really nice is you could animate the flood-fill algorithm so one thing I'm going to do is I'm going to just so we I'm gonna have a total number bees make it just 2 right now so when I click it flood fills it instantly but I could animate like just one at a time each frame reveal the next set of neighbors that would be an exciting nice little thing to do what other kinds of clever variations on the game can you make how can you make it more beautiful could you use some sort of weird hexagonal grid there's all sorts of possible ways you could improve and change the style he needs a wind condition it needs a way to start over it could use like some settings of like I want to add you know I wanted to have 20 bees I want the column number certain number of columns and rows so you could build a whole interface for it there is so many things you could do in the chat someone is suggesting to do this with all dom elements so don't use canvas at all but maybe these are all divs that would be an exciting thing to try to you get a little CSS animations as you click on things so many possible things you could try to do but there it is minesweeper in under an hour multiplayer with the server is something you could do I hope you make some variations I hope you share with me and next week on my live stream I will share hopefully a whole bunch of variations and things that people make with this game be sweeper thanks and see you in a future coding challenge all right hey what time is it it is 12:07 so I do have to get going but and I did make my own so they're just gonna be one new video from this week which is this video how is that was that good useful can you play it playing with an AI hexagonal grid okay so what if what else what else can I do today maybe answer a few questions can I look on Twitter I'm looking at the chat now boy that was actually quite fun to make I want to get rid of the console logging where did I have that so the question is should I start should I make a quick intro to this coding challenge yeah how do how do I imagine playing minesweeper with an AI it's a great question well I imagine that this is a pretty solved game in other words we don't need some kind of you know complex neural network based machine learning learning system although they'll be interesting to try you know reading the pixels and what's going on and knowing where to click next i mean if you look at this I think it's just a matter of you know doing what I would do in my head which is riddle let's let's put this back to a reasonable number let's put this to total B's 10 so looking at this there would be a way to check every spot and know if there has b.o.b there after you've clicked and then if you know that then you know you could really check every spot and actually what you would do the opposite I would check every spot and for example this spot if there were a B here then this spot this this would have to be a two so I guess I could determine where I know there so I know there has to be a B here because this has a 1 okay but there's only one spot available so I would mark in my sort of brain that I know there's a B there then I would ask the question would there be a B here no there can't be because then this would be a 2 so then I would click here next and then I suppose if there's no known place to click I could just use a probability and say so like let me start over okay okay well where is there the least likelihood of there being another B well I know that there's only each one of these spots just has a 1 out of 8 chance so that's a good place to try I could try there okay now what's the probability I could just do it I could do sort of like a probability analysis for every single spot and then pick from the lowest probability okay so that would be a great exercise for somebody to try to build an AI can you release sometimes an overview which country is your live stream are watching would be interesting yeah ask me that on Twitter because it takes about 24 hours but I'll get from today from today's live stream I'll get a report of through the YouTube analytics of like all the different countries that are watching and I'm happy to like tweet a screenshot of that or something but I won't be able to do that till tomorrow and I won't remember her so but if you tweet me everyone tell put it on github should I put it on github right now let's do that why not do that during the actual live stream and I'm just gonna do it because I can log in now I don't remember my password is the problem that's the property this is a thing I have this like sophisticated I can I can get it on my phone okay if you guys don't mind bearing with me I use one password buzz marketing one password by accident dude maybe maybe potential sponsor Soho now so I have to look up and this normally I would have a Chrome extension that would just enter it but I'm logged in on this computer not the way I normally login and I have like 2-step verification I got all the privacy stuff so I'm looking for my github password and so let's look at the password now I need to now I need to open 2-step verification 2-step verification I feel like this I wanted I was hoping to minesweeper video would somehow be more entertaining in a delightfully ridiculous way but I feel like I was much too serious about programming it where is my Authenticator here it is two five nine nine four nine [Music] okay so now I should be able to upload files so what coding challenge number is this 71 can anybody tell me when where is it mine sweeper minesweeper so I think it's 71 coding challenge 71 minesweeper it was fun and useful good thanks I'm always doubting myself here I think uploading odhh why not what's the worst thing that can happen if you put Alcazar pasady 3x3 box around a spot with a neighboring B where n is the amount of neighbors you could see hotspots of bees that's a great idea okay did that come into that work there it is Cody challenge 71 minesweeper is now B sweeper oh it should be called B sweeper somebody want to pull Rick somebody can pull request that change this to be sweeper I guess I do want to use even though I'm calling it B sweeper you know my for selfish reasons I think I want the coding challenge on YouTube to be called minesweeper the title the tags because because that's what people will be searching for I know I doubt people gonna be searching on YouTube B sweeper code B sweeper is there actually a game called B sweeper huh cool okay so I think I'm finished for today I have got it's 12:15 i I know this is just one coding challenge for today I would love to do more I will I'm gonna be doing some live streaming from the ITP show um let's see Schiffman ITP winter show 2016 so I made this video which you can't really hear because I but this was a video I made that that showed a bunch of projects from the winter show which was in December this is happening this week here at ITP you can come to it if you're in New York Tuesday and Wednesday I hope to livestream from my phone and I got this like a gimbal thing gimbal stabilizer so I'm gonna walk around the show with my phone looking at projects and interviewing people so that'll come maybe I'll even do that during some of the setups people even do a test about this afternoon so you can stay tuned for those and hopefully I'll be back the semester is over now there's a couple weeks there's two weeks in July that I'm out of town in two weeks in August that I'm out of town but otherwise this summer I might move in June to do twice a week live streams I might do some more I gotta get through all that machine learning content and do some more coding challenges so okay so let's see what else can I say today so let me is it playing that music and I can't hear it yeah oh so I will mention if you would if you like what you see and you want to join a slack patron group you can go to patreon.com/crashcourse v.com if you want to get one of these hopefully coding trade goodies they are available along with some t-shirts and different things um what else do I want to plug here I plugged I to be show uh processing foundation I would rather you support the processing foundation than me if you can only support one but you if you if you use processing our p5 yes and processing related tools consider becoming a member and let me look at the chat again oh yeah I'm gonna revamp the patreon rewards and try to change them around so I'm gonna be doing that in the next week and meatball mix it with a t-shirt or reward and that okay could you do a coding challenge visualizing sorting methods I would love that if you're not familiar by the way with Michael both stalks who's the creator of D threes visualizing algorithms this is a wonderful walkthrough and page about visualizing different algorithms and I think there's some sorting algorithms on this page right here I would love to do a coding challenge that does something like this that would be really fun and great and nothing I make will look nearly as nice or beautiful as what Michael Bostock is made okay looking at the chat here alka that is a great and let me see if I can recreate this alka posted a really great suggestion so let me see here is that still there yes or is it just caching it it's still there the code still there so what do what what do I do when I click on it let's see what was the suggestion app acity box were a neighboring B okay so wait wait so if I in ravit in in the show function if if it's revealed I'm gonna say alpha equals 10 times this dot neighbor account no stroke I'm going to draw a rectangle fill 0 comma a if it's revealed let's try this that didn't seem to work is this happening oh you know I wonder if something has gone wrong because I renamed the file oh no what did I know yeah cuz there's a whoops so hold on sorry in the I rename the file so I'm actually not looking at the right thing right now and try this little variation let's get rid of this and this is what I want to be editing in Adam in cell under show let's put this back in here and let's go here and see this doesn't exist anymore run the server whoa I might hold on I can't tell if I if it's there because I like my yeah there's like this whoa what's going on what did I do Oh because I'm not just doing it only if it's revealed what did I miss hold on we look at the chat needs to be masked to only call cover areas oops the camera went off oh you know what the range is hold on let me do let me do this map this neighbor count between 0 & 8 - between an alpha of 0 and 255 right and let's let's put this for everything right now whether it's revealed or not yeah so this is like a little map of like where the hot spots are yeah that's kind of cool so it's like a little bit of a clue here that we can see obviously if I click here and what I could do is also you know I could use like red or something just to sort of see that yeah that's kind of that's interesting and now now what I'm curious to do also is make the it bigger and make the size smaller and add like 50 bees woo and add like you know hundred bees and you can see here yeah so that's kind of interesting to see this is very much like reminiscent of like a cellular automata system so some interesting thing oh but the text placement is all wrong now so that's your great one thing that needs to be fixed is the text placement should really be controlled so that I would accept by the way as a pull request so one people sometimes I get well when should I make a pull request and when should I actually link to link to something that I have made and so pull requests to change the actual example code that's in the browser that's in the repository should really only be for like significant bug fixes or like minor adjustments that are gonna make it easier for someone who's making their own creative interpretation to work with so if you're making your own creative interpretation visualizing it differently changing adding interactivity changing the dose or narrative of game then that's your but but if you want to add something that just fixes the way the text is placed based on like the size of it that could be useful as a pull request okay my sound board died oh text-align you can have Center Center oh I didn't know that yeah okay so I'm uh now it's 1223 this dream has been for almost two hours I will take a couple more questions I want to plug in my let's charge up this this is so unnecessary what I'm doing but I'm gonna do it anyway cuz I'm about to say good I can't say goodbye it's so hard to say good that's not a song let's see if it comes alive up okay so any last questions I agree blew it should be determined by the box size in which turn should be determined by the window size yes this laptop has a hole in it yeah it's the green in the old coding rainbow sticker what kind of music do I like it's a good question I'm I'm a musical theater fan I love the musical theater I love the Broadway give me some show tunes that I'm happy classical music I like dance music I like I like all music could I do a neural network video in p5 sometime that is coming up and actually there's a big bug maybe I'll fix this bug right now in the next five minutes cuz it's been on my to-do list all week shift man okay so let's go to my actually I'm not gonna let's see here I have a simple little library for a neural network in p5 okay my soundboard has come back not now where is it okay there is a bug in this particular example which is what was it called neural network p5 so I'm gonna do this as a coding challenge for sure at some point and this is just like not at all working and I think the reason why is I made the library I'm gonna get to all this in a future video I made the library require a an activation function so if I go into here we look at this code to see when I create new neural network you know what I'm gonna do bug this on my own time later this afternoon oh yeah t-rex game that would be a great coding challenge Sudoku generator or solver I would love to do that as well I got to fix this example but I will get to I'm gonna build a neural network example in p5 or processing soon enough that's coming everybody wants the deep learning you know all this deep learning stuff maybe you should go outside and garden that's be my suggestion but I will I'm gonna do some I'm gonna do some videos I'm going to look at Karis and some Python and that sort of thing a genetic algorithm to solve minesweeper I think that's probably overkill it's unnecessary because it's sort of a solved you know mathematically you could just be solved but it's certainly a possible possibility okay so what else do I got I'm gonna see you guys hopefully in some bonus live streams about with interviewing students about their projects and things here at ITP and I and then I'll be back hopefully next Friday probably again in the afternoon I know for shorts there's a lot of graduation activities that I'll have to be at so next week is gonna be a little tricky but hopefully I'll find a time to do a live stream but then the summer will arrive and I will have all the time in the world to internet hug all of you with strange code examples and I have a new year's resolution from a long time ago which is that I want to hope they have a lot of guest tutorials in June so I need to have something I've got to work on add to my to-do list to make happen okay thanks everybody and I will see you in a future okay shouldn't look at ridiculous news notifications on my phone that's why I put my phone over there okay good bye everybody see you in the feud see you in the future I got to find the right good thing to move here to hit stop good bye happy train riding Kodi train choo choo all aboard thank you oh I was gonna read from this book but I'll do that next time okay hold on I'm back I forgot do I need to make a little intro to that coding challenge so let me see about this coming back okay I forgot those let me go let me go back here too let me let me put this back to what it was at one time [Music] and let me go to here and take off this I I forgot that maybe what I need to do but I should do is record a little like intro to the coding challenge I often do that so let me do that can move this over and do this okay so I'm gonna do that so this is a weird thing I hope like that not like take that like a thousands of people suddenly just join cuz this is gonna last for about five minutes I probably didn't even need to do this live streaming but I can't do anything unless I'm live on the internet apparently so so I wish I could automate it oh boy oh so many things I messed up oh right hold on hold on let me get the code back hold on hold on total B's 20 and where's the text got to change the text size let's try to make it just whatever the W is whoops oh my really text size oh that is working well let's just leave it what it was sorry I know what it was this was 20 this was 20 there we go okay sorry everybody this is actually a live video but it's very gonna it's gonna be over soon because I'm just doing a quick introduction I like the idea that maybe the coding train logo might actually appear more in this it's over there okay oh this turned off again okay hold on okay ah oh no go back okay maybe this might be pointless but I'm gonna try it anyway hello hello welcome to another coding challenge in this coding challenge I'm gonna make minesweeper I actually already did the coding challenge I'm recording a quick intro so you can see what's gonna happen it's about it's a long one so about somewhere between 45 minutes in an hour I will point out this would be less time to make minesweeper that it took me to make pong which goes to show you how my brain doesn't really work in normal ways the pong should really be simpler everything but anyway this is minesweeper it's actually be sweeper but because these are bees and not mines but it doesn't really matter the point of this game is that you click and when you click you're trying to avoid getting stung by a bee and so here this cell has three bees next to it so i'm gonna click somewhere else this one is - home - click somewhere else 3 click click oh and I hit a bee so let me try again oh I hit a bee oh I hate to be he ah there we go when I click somewhere that has no neighbors it it it reveals all the other spots around it that also have no neighbors and the numbers so ok so that's that's be sweeper I can see I can see for sure that there's will be here if I were to click there so this is the game I'm gonna program it from scratch in JavaScript all the way through I'm gonna make a whole bunch of mistakes and get lost and at the end of this I will give you a lot of suggestions and things that you could add or try to make your own creative version of it and I hope you will share those with me code in the description on github okay thanks enjoy this coding challenge all aboard okay alright that's it Audio not synced so people are saying the audio in the video are out of sync this is something I do not have control over it's sometimes this seems to happen if you refresh the page it usually fixes it and also when I do the edited version of this that's gonna get published online that will be fixed yeah yeah because I'm recording it separately okay alright so that's it sorry I just came back for an extra little bonus little clip there now I'm gonna leave again so goodbye oh look at my lap this laptop got kind of the paper or left and I don't know if that was weird but anyway see you all next week have a great day enjoy the world and the outside world and people and all the nice things hopefully that you have to do and I will see you soon okay

Channel: The Coding Train

Views: 13,624

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, nature of code, live stream, itp, itp nyu, minesweeper, minesweeper coding challenge, minesweeper in javascript, minesweeper js, minesweeper p5.js, p5.js, processing javascript, beesweeper, classic game javascript, video game javascript, videogame js, minesweeper html5 canvas, simple minesweeper

Id: zxR7KfVMGqk

Length: 120min 29sec (7229 seconds)

Published: Fri May 12 2017