1 00:00:05,820 --> 00:00:06,150 All right. 2 00:00:06,150 --> 00:00:09,300 So just a quick recap on what we have done so far. 3 00:00:09,330 --> 00:00:11,640 We created our cell. 4 00:00:12,150 --> 00:00:15,180 We created a universe. 5 00:00:15,210 --> 00:00:18,630 We implemented a method on getting our index. 6 00:00:19,020 --> 00:00:26,880 That way that we can create the hour, count the number of live neighbors our cell has, and then our 7 00:00:26,880 --> 00:00:35,490 tick method, which we exposed via bind gene so that the JavaScript is able to access this functionality. 8 00:00:36,240 --> 00:00:41,090 It's just allowing us to implement the game of life rules. 9 00:00:41,100 --> 00:00:49,560 On whether the next generation of cells are dead or alive, depending on the four rules that we got. 10 00:00:50,370 --> 00:00:59,760 And then we also implemented a way in for our program to display our dead cell or our live cell. 11 00:01:01,310 --> 00:01:04,820 So we're pretty close to being done with implementing this game. 12 00:01:04,850 --> 00:01:13,160 There are two more methods that we need to define, and one of the methods is our constructor, which 13 00:01:13,160 --> 00:01:16,130 is going to initialize our universe for us. 14 00:01:16,370 --> 00:01:23,930 So we're just going to call this new and it's going to return back a universe for us. 15 00:01:25,550 --> 00:01:32,420 So we know that we need a width and we also know that we need a height. 16 00:01:34,400 --> 00:01:37,850 And our universe struct up here. 17 00:01:38,830 --> 00:01:40,630 Also needs cells. 18 00:01:40,750 --> 00:01:45,100 So now we have to add in our cells. 19 00:01:45,100 --> 00:01:51,730 So we're going to just do a random assortment of where our cells will be. 20 00:01:51,730 --> 00:01:58,580 So we're going to do cells from zero to height, times width, 64 times 64. 21 00:01:58,600 --> 00:02:03,160 Since that is the size of our universe, that is how many cells we need to have. 22 00:02:04,480 --> 00:02:10,150 And then we're going to map these values. 23 00:02:12,210 --> 00:02:25,140 And what we're going to do is say if I mod two is equal to zero or I mod seven is equal to zero and 24 00:02:25,140 --> 00:02:27,450 you can change two or seven however you like. 25 00:02:27,630 --> 00:02:29,850 Those are just the values that I happen to pick. 26 00:02:31,140 --> 00:02:36,750 If I mod two or seven is equal to zero then our cell is going to be alive. 27 00:02:36,990 --> 00:02:40,560 Otherwise our cell will be dead. 28 00:02:40,710 --> 00:02:49,380 And that's just going to give us a random placement of cells onto our universe for us. 29 00:02:49,860 --> 00:02:52,710 And then we want to collect those values that way. 30 00:02:53,550 --> 00:02:56,700 We have a vector of them. 31 00:02:56,700 --> 00:03:05,550 And in here we're going to create our universe with our width, height and our cells. 32 00:03:07,130 --> 00:03:09,720 All right, so it looks like I have a little air. 33 00:03:09,740 --> 00:03:11,240 What am I forgetting? 34 00:03:17,130 --> 00:03:18,870 It helps if I put it inside. 35 00:03:33,010 --> 00:03:34,540 Oh, not parentheses. 36 00:03:34,660 --> 00:03:35,380 There we go. 37 00:03:35,500 --> 00:03:36,100 Okay. 38 00:03:37,490 --> 00:03:41,360 And just to make this pretty, I'm going to do cargo format. 39 00:03:41,570 --> 00:03:44,360 That way we follow the standard formatting. 40 00:03:45,990 --> 00:03:56,580 And then lastly, the the last method we need to define is our render and that is going to just refer 41 00:03:56,580 --> 00:04:04,410 to self return a string and self dot to string. 42 00:04:05,220 --> 00:04:12,240 So this is all that we needed to do inside of our lib rs So now with us having made changes to this, 43 00:04:12,270 --> 00:04:14,580 we are going to run and pack. 44 00:04:15,560 --> 00:04:20,030 Build and everything compiled successfully, which is great. 45 00:04:21,250 --> 00:04:25,660 So now that we need we need to just do a couple of additional setups. 46 00:04:25,660 --> 00:04:33,760 So we'll go over to our index.html HTML file inside of our WW directory and we are going to add an A 47 00:04:33,760 --> 00:04:44,980 pre tag which is going to create a element on our web page called the Game of Life Canvas. 48 00:04:45,550 --> 00:04:50,410 And we want to make sure that that element exists before. 49 00:04:51,480 --> 00:04:54,900 We try to draw our our universe. 50 00:04:54,900 --> 00:05:02,790 And then I also want to add in some styling again, just copy and paste this in. 51 00:05:03,240 --> 00:05:07,590 I'm not going to go over the CSS styling behind it. 52 00:05:07,860 --> 00:05:14,430 So from the code that I got, you just feel free to copy and paste it in and that's all we need to do 53 00:05:14,430 --> 00:05:16,650 inside of indexed HTML. 54 00:05:16,650 --> 00:05:18,480 So I'm going to close that out. 55 00:05:18,510 --> 00:05:21,420 I'm also going to close in DEC our package. 56 00:05:21,420 --> 00:05:27,150 So now inside of indexed JSON and our UWW directory as well. 57 00:05:28,610 --> 00:05:32,540 I went ahead and cleared out this file so you can do the same if you want. 58 00:05:32,690 --> 00:05:40,370 But otherwise I'm going to import in our universe from. 59 00:05:42,430 --> 00:05:45,370 Our Chasm game of life. 60 00:05:45,910 --> 00:05:56,140 And then inside here, we're going to want to get access to the element that we added into our index 61 00:05:56,140 --> 00:05:57,010 at HTML. 62 00:05:57,010 --> 00:06:11,080 So we named it the Game of Life Canvas, and now we want to go ahead and create our universe. 63 00:06:13,180 --> 00:06:24,850 So we will say Universe New and Universe dot new is referring to our new method that we created here 64 00:06:24,850 --> 00:06:33,400 and JavaScript is able to see it because of the ASM bi engine that we gave this entire implementation 65 00:06:33,400 --> 00:06:35,260 block on the universe. 66 00:06:37,540 --> 00:06:44,200 So the way that this is going to run is that the JavaScript is going to use a request animation frame 67 00:06:44,200 --> 00:06:52,210 loop, and then on each iteration it's going to draw the current universe by calling on the universe 68 00:06:52,210 --> 00:06:56,260 tick method that we implemented right here. 69 00:06:56,560 --> 00:07:05,260 So we can implement this by saying we're going to have a constant render loop, we'll do an anonymous 70 00:07:05,260 --> 00:07:17,500 function and we will say pre dot text content is equal to universe, dot render render. 71 00:07:17,500 --> 00:07:23,200 Again, referring to the render method that we implemented right there. 72 00:07:24,640 --> 00:07:26,970 And now we are going to say Universe. 73 00:07:27,350 --> 00:07:28,020 Tick. 74 00:07:29,370 --> 00:07:35,580 And now we're going to request animation frame on render loop. 75 00:07:35,910 --> 00:07:47,640 And then to get this to reinforce just the first time we are going to execute a request animation frame 76 00:07:47,640 --> 00:07:51,810 on render loop and then that will put us inside of our loop. 77 00:07:51,990 --> 00:08:00,300 So now we need to change directory so KD into W, W, W and now just to make sure that we have all of 78 00:08:00,300 --> 00:08:04,560 our dependencies installed, we'll run npm install. 79 00:08:06,080 --> 00:08:07,790 And wait for it to. 80 00:08:10,640 --> 00:08:11,230 Finish. 81 00:08:11,240 --> 00:08:11,720 All right. 82 00:08:11,720 --> 00:08:13,940 And now we can run in PM. 83 00:08:14,180 --> 00:08:14,960 Run. 84 00:08:17,890 --> 00:08:21,270 And it looks like it's compiling a compiled successfully. 85 00:08:21,280 --> 00:08:31,870 So now if we go to local host refresh the page and we now have our game of life implementation working. 86 00:08:31,870 --> 00:08:35,560 So you can see we have live cells here. 87 00:08:37,300 --> 00:08:43,930 Because we have the full squares and then all the empty squares are dead cells. 88 00:08:43,930 --> 00:08:49,990 And you can see that all of our cells are just interacting and you can let this run for as long as you 89 00:08:49,990 --> 00:08:50,500 want. 90 00:08:51,170 --> 00:08:59,360 And watch how your universe continues to change and how the cells continue to come alive and or die 91 00:08:59,360 --> 00:09:01,850 based on the rules that we implemented. 92 00:09:02,060 --> 00:09:05,270 So congratulations on getting this working. 93 00:09:05,690 --> 00:09:10,940 Hopefully you can see that working in Webassembly is actually pretty straightforward overall. 94 00:09:11,540 --> 00:09:17,630 I hope you enjoyed creating this little game and have a much better understanding on how to use Webassembly 95 00:09:17,630 --> 00:09:21,200 as you dive further in on your journey with rust. 96 00:09:21,800 --> 00:09:26,690 Please feel free to ask me any questions in the Q&A section if you have any.