Ep. 059 - Conway's Game of Life | Flutter Processing

what is up flutter devs today we're going to create conway's game of life using the flutter processing package let's go figure it out so first what is conway's game of life well i don't really remember this was a topic back from uh the early part of my computer science program but it is a an instance of cellular automata or what is called here cellular automation in a very generic sense we have a grid of cells those cells every cell is considered either alive or dead if it's alive you see here it's colored in black if it's dead it's in white every iteration every kind of game frame you decide which of those cells continue to live or die or are born and then based on a very basic set of rules you can get very interesting emergent behavior now there's also when you get more into the computer science part you see things like this it is touring complete and can simulate a universal constructor or any other touring machine that gets much more into the science of computation not something we're focused on here today this is an exercise for flutter processing and in fact i should point out that this is coding challenge number 85 over on the coding train which is why we're doing it here from a processing perspective a ui perspective our goal is to paint this thing that you see over here on the right now we're not going to create exactly this because this is a very carefully designed um kind of iteration of conway's game of life these cells were chosen specifically to get this effect we're going to choose random cells but we're going to implement the painting of this and we're going to implement the standard rules for conway's game of life which are right here technically these four rules but they can be reduced to these three here so for example any live cell with two or three live neighbors survives so if you are a black cell and you have two or three black cells around you you survive if you're a dead cell meaning you're white but you have three black square cell neighbors around you you are born into a black cell a live cell on the next iteration all other live cells die so if you're a live cell with zero or one live neighbors if you're a live cell with four plus live neighbors you die um i guess of course if you're already a dead cell then you're a dead cell but we're going to implement these rules which will give us this emergent behavior that you see up here so how are we going to do that well i already have the example app running so this is a sketch waiting for us right here to fill in let's go implement what we can in terms of thinking about how we're going to approach this again notice that we're on a grid so we have this essentially a glorified two-dimensional array filled with bullions true for alive false for dead we need to be able we need to set that up give it a random set of values and then paint it and then we implement the rules for the next generation let's go figure that out here's our sketch let's start by configuring the size of our canvas so we'll say size is 500 by 500 doesn't matter what size you choose it's just a matter of preference and then because we're drawing a grid we need to decide how many pixels per grid square now what you could do is you could take the all the available space and then divide it by your desired row count and column count that's one way to do it another way to do it is to say i want x number of pixels per cell and then you have as many rows and columns as you can fit and we're going to take that ladder approach again primarily for preference so we'll say pixels per cell equals 25 and because we're establishing the number of pixels per cell it means we have a possibly uh essentially a variable column count and row count based on dividing the width and the height by that value so we're eventually going to have a number of columns and we're going to have a number of rows and then i said we need a grid full of bullions how do we get that well in our case we're going to have a list of lists of bullions which is functionally the same thing as like a two-dimensional array a list of lists is a two-dimensional array this is what we're going to need to set this up paint it and generate future grids grid refers to the cells it's the current generation of cells now down here in setup we just decided what the width and height would be which means we can now calculate the column count which is the width that we just chose divided by pixels per cell and we're going to floor that row count is height divided by pixels per cell i'm assuming square cells here we'll floor that okay and then we need to actually generate our first generation of cells so we're going to say grid is equal to list dot generate and we're going to generate each column and then each column is going to be a list dot generate where we generate each individual cell so we're going in that case we'll need the first generation is the columns the second generation is each row within the column and then we're going to [Music] use a random which i think we can say const random and once again this autocomplete is taking forever probably because of the recording i guess something's changed in my recording software that has made it slower so we will say next bullion so we could actually generate a random bullion and let's see let me get the const working here nope still doesn't like that okay so in some languages you can only generate doubles random doubles and then you have to convert that into integers or bullions or whatever we can just ask dart to give us a random bullion let me try to get some auto formatting going here okay so there's our grid now come back over here you'll see that we are now 500 by 500 but we aren't drawing the grid we've generated a grid we haven't drawn anything yet so we need to figure that out but we're we're on our way okay now down here in the draw method this is where we actually start painting things first we're going to set the background to black this is so whether it's whether you choose black as alive or dead in terms of the cells as your choice we're actually going to have black be dead and so then only little white cells pop up which is kind of the inversion of what we saw in the wikipedia article now once we've filled the screen with black we're going to draw whatever cells or grid items are active for that we're going to set the fill color to white and then we're going to say for column from zero to column count increment by one so we're going column to column to column and then we're going to go from row is zero row is less than row count row plus equals one and then now we're dealing with an individual cell so we need to paint it first let's calculate the top left of that cell is going to be equal to uh the x value is going to be the column times pixels per cell and the row or the y value is going to be row plus pixels per cell that's the top left of this particular cell and then we're going to say actually we only need to paint if grid column row is true so only if we're alive then we're going to paint something and we're going to say wrecked wrecked from left top width height so top left dot dx top left dot d y pixels per cell and pixels per cell this should now draw a square at this given top left which is white only for the cells that are alive let's save that might need might need to do let me real quick do a hot restart i want to make sure that i got this value up here okay so definitely done something wrong here let's see what i screwed up column zero yep okay and let's turn off the drawing here uh what do i what was that method called oh it's no loop that's what i'm thinking of no loop okay let me clear this out let me restart that okay so we're always drawing at the same y value or similar y value well um did i not oh okay need to multiply by pixels per cell and now we have a grid and this is probably a high density for for um conway's game of life but nonetheless there's a grid okay so now if we take that grid and we apply the rules to it then we will get this animated conways game of life therefore down here after after we draw everything we're going to call a method called create next generation and this is where we're going to apply the rules void create next generation so we're going to need a new grid because we um maybe there's a way to apply this in place but i doubt it because we need to calculate based on our neighbors if we change the grid in place then by the time we get to the next cell we've screwed up the neighbors because we applied changes to the previous cell so we need a new grid which we will fill based on the previous grid and once again we're going to start by generating the cells except we're going to start them all as false because we're going to fill this with what we want so now we're going to loop i'm going to copy this loop because we're going to go through all the cells we're just going to do something different we're not going to draw we're going to calculate based on the rules and then rather than in the middle of this loop add the rules what we're going to say is new grid and let's see how did i index this before column then row so column row equals calculate next cell value and we're going to pass a column in a row we're going so we're going to defer the exact application of the rules to this method and then once we've calculated the new generation or the new grid we're going to say grid equals new grid and that'll be picked up on the next frame now we're going to define this calculate next cell value which takes in required int column required into row and we need to return whether or not this cell is alive or dead this is where we actually bring in those rules that we saw now these rules pretty much all come down to one number which is given this cell how many live neighbors does it have based on the number of live neighbors we decide whether this cell continues to live or dies or is born so we're going to say live neighbors count equals zero and then we're going to go through and manually find all the live neighbors now you can try to do some kind of neat math on the index to figure out the neighbors we're just going to go manually look for everyone so we're going to look for the top left the top the top right the right the bottom right the bottom bottom left left and then we're back up to the top left okay so live neighbors count plus equals one thing that we need to keep in mind here is that if the if we look to the left for example if we're at column zero there is nothing to the left and all of these directions are going to have that possibility so we need to make sure that we're within the board before we go accessing the grid so we're going to say if column is greater than 0 and then we're going to actually access the grid and we're going to say column minus 1 row minus one and i forgot one more condition here so if we're if we're going top left we need to make sure that not only is column greater than zero but rho is also greater than zero what we're saying here is if we are not if we are at least somewhere to the left of the grid so we're somewhere beyond this leftmost column and we're somewhere beyond this topmost row then we go to the top left we go up one and over one and we see if it's we see if it's alive or dead if it's alive we add one to the live neighbors count otherwise we add zero and live neighbors count doesn't change this is essentially what we need to repeat for each of these neighbors and then we'll be able to evaluate the rule up top we're going to say live neighbors count plus equals what do we need to check here if we're going up we just we need to make sure the row is greater than zero and then we can access the grid and we can say column and row minus one add one or add zero for the top right live neighbors count plus equals we're going to make sure that column is less than column count minus one and that row is greater than zero and then we're going to access the grid uh at column plus one row minus one so we're going over to the right one we're going up one on the on the y fix a typo there live neighbors count we're going one to the right which means that column needs to be less than column count minus one we're not going up or down so we don't care about the row we just need to check the grid column plus one same row plus one plus zero live neighbors count so now going to the bottom right we need to make sure column is less than column count minus one and that row is less than row count minus one and then we're going to access the grid at column plus one and row plus one add one at zero [Music] bottom live neighbors count plus equals now we're going down a row but we're not going left or right so we don't care about the column we need to make sure that row is less than row count minus one and that and then we check the grid at column and row plus one add one or zero live neighbors count we're going one to the left and one down so column needs to be greater than zero and the row needs to be less than row count minus one and then we check the grid at column minus one row plus one then we plus one or plus zero and then finally to the left live neighbors count plus equals we're going column to the left but no change to the row so column needs to be greater than zero but that's all we care about so we say grid column minus one same row plus one plus zero okay all of that annoying manual stuff aside we now have the live neighbors count and now we can apply the rules so what did the rule say so if the current cell is already alive so if grid column row and live neighbors count is greater than or equal to two and live neighbors count is less than or equal to three so two or three then we stay alive we return true we will say the living cell survives else if this cell is dead so if not grid column row if it's currently dead but live neighbors count is equal to 3 exactly then we say a dead cell is born and we return true and then in all other situations the cell dies or remains dead we return false okay and then i'll need to fix a typo there calculate next cell value so i think that's everything we need let's save it and see what happens here all right check that out real fast hmm i guess that's uh a steady state i don't know either that or maybe our logic is wrong but one thing is for sure this goes way too fast we don't want to watch this thing go this fast anytime that you want to slow down the drawing in flutter processing you can just come in here to set up and you can say frame rate in this case equals three and now you can see it much more slowly you can make that a little higher if you want but three times a second we're calculating um a tick or a game frame or a game loop however you want to look at it and then down here i can't remember when i added this maybe it was here in the previous video maybe it wasn't but we can restart sketches with this little button which is nice when you have something that actually changes state like this we just keep restarting but with that we have conway's game of life and this again is coding challenge number 85 so you can go over to the coding train and see how dan did this same thing but we will continue with some more coding challenges replicating what dan has done over on the coding train until we've stress tested the the flutter processing package a bit and then we'll eventually consider this whole exercise to be complete so hope you enjoyed that maybe you learned something about cellular automata or automata depending on how you want to pronounce it and i'll see you in the next video [Music] so [Music] you

Channel: SuperDeclarative!

Views: 224

Keywords: flutter, widgets, mobile-apps, web-apps

Id: NZdE8KPtfp4

Length: 22min 3sec (1323 seconds)

Published: Tue Oct 19 2021