 Welcome to Light Bright Simulator from 1967 to 2021 by Tokyo EdTech, that is me. So before we begin, let me do a quick shout out to my members. Thank you to all my members who have decided to support the channel. If you're interested in supporting directly, join below. If you haven't subscribed, click subscribe, click that like button. So in today's lesson, what we're going to be doing is creating a Light Bright Simulator. Now, for those of you who don't know what Light Bright is, it is, as you can see here from Wikipedia, a toy that was originally marketed in 1967. So that was quite some time ago. And it looked like this. So basically you had a little light in the background. You had these little colored pegs. And then you had this, you'd put like black paper in the background. You take the pegs and poke them through the black paper. And then you could create your own designs. So it is a toy with a long, long history. I remember having one as a child. And so what we're going to be doing is we're going to be making kind of a Python version of it. Not too fancy, but just kind of the same idea. So let's get started. I'm going to be using the Turtle Module. As probably you guys know, I do love the Turtle Module. And what I want to do is, this is something I haven't done in a lot of my videos, but I'm actually going to set the width and height of the window. Now I did a little bit of math and I figured out what this looked like, a little bit of experimentation. And depending on how many words you do or what you actually design, you're going to probably need to change this. So note how I have put width and height in capital letters. And this is what we do when a value does not change in the program. So I'm going to go ahead and set up my turtle window. And I'm going to say win equals turtle.screen. And I'm going to give it a title. And I'm going to call this light. Oh, go ahead. Obviously light bright. I guess simulator. It's not really an emulator. It's a simulator by at Tokio Eddeck. As I said, that's me. And I'm going to make the background color black. So just like the original. And then this next line is something I don't usually do, but I'm going to use win.setup. And what this lets me do is probably a couple of different things, but in this case, I'm going to be setting the width and the height of the turtle window. And then if you guys recall, my last line is going to be win.mainloop, not moonloop, mainloop, and parentheses. So I'm going to go ahead and run this here in genie and see what happens. And you'll see we've got this nice small window is about 800 pixels wide, 820 by 140. Now you notice there's actually a little scrolling thing here. You can just ignore that. Okay, so here's what we're going to be doing. Now the original light bright, and we're going to kind of stick to that, had eight colors. So I'm going to be creating a dictionary called color codes. And you'll see why in a minute. And so I've got eight color codes. So I'm going to go ahead and again, this is dictionary. So I'm going to go ahead and just copy that 2, 3, 4, 5, 6, 7, 8. I don't need a comma. And then I'm going to go ahead and close out my dictionary. So the eight color codes are R. Well, I'm using R. O, Y, G, B. And what are the other ones? V. I'm going to use V. And I'm going to use W. And I'm going to use P. And I'm actually going to need one more for black. And I'm going to use a space to represent black. And you'll see why I'm doing it this way in a minute. So R is red. O is orange. Y is yellow. G is green. V is blue. V is going to be purple. Not violet. That might work. I'm not really sure I haven't tested it. P is going to be pink. Now you can, of course, add whatever colors you like. But we don't need that. Now it's a good idea at this point. This is something I emphasize to my students. You know, they ignore me all the time. I emphasize to my students is that test your code often. So you can see it still pops up. There's no errors. So I can assume that probably this dictionary was created correctly. What beginners tend to do is they tend to just type everything in and then try to debug. And of course, it just never really works. So again, this is the turtle module. And what we're going to be doing is we're going to be creating a turtle object to draw on the screen. So I'm going to go ahead and create my turtle object. I'm going to call it a pen because that's basically what it does is it's drawing. And it is a turtle dot turtle. And that is a small t and a big t. That's important. I do not want to draw lines. I'm going to do pen up in parentheses. And I'm going to set my pen color to black as the default. And I'm going to set my pen shape to a circle. And now let's, again, I'm going to go ahead and run it and just see, make sure that's set up. Now we don't see anything because it's a black circle on a black background. So that's perfectly all right. And that is exactly what we wanted. OK, so now we need to create a function that's going to let us draw circles on the screen. So I'm going to define the function. I'm going to call it draw circle. And I'm going to be setting it three arguments. The x and y coordinates and the pen, which I just created, the pen that I'm going to be using to draw. Now the interesting thing about this, this x and y is not going to be the screen coordinates. I could do it that way. But what I want to do is I want to convert the x and y coordinates, which you'll see that we'll be having in a minute, from the light-bright coordinate system to the screen coordinate system. So watch what I do here. So I'm going to say screen x equals, and it's going to be negative width divided by 2.0 plus 20 plus x times 20. And screen y. Later I'll go through and explain why it's this way. But without seeing it drawing anything, it's probably hard to understand. 2.0 minus 20 plus y times, oops, sorry, minus y, sorry. It's different, times 20. And again, I will go back and explain all these, the math and everything I'm doing here. So I'm going to take the pen. I'm going to go to screen x and screen y. And I'm going to do pen dot stamp. So that is how we draw a circle on the screen. So what I could do here is I'm going to go ahead and I'm going to just test it for you. I'm going to say pen dot color. And we'll just make it red. And I'm going to say draw circle. And let's say 5, 5 and pen. And again, this 5 is not screen coordinates. This is in our other coordinate systems. Let's go ahead and run that and see what happens. Okay. So you can see this is 5 over and 5 rows down. So we're doing it a little bit differently to probably how you've done it before. Now if you did my maze game tutorial, this is basically the exact same thing. So the math works out exactly the same. Now here is, I don't want to say the hard part, we need to have a picture that we're going to be drawing. Okay. So I'm going to go ahead and just do something really simple. I'm going to say picture equals. Now there's a couple of different ways I could have done this. I want to do it with a list of strings. So watch what I do here. So I'm just going to go ahead and just make a black box or a red box. So I'll make it 5 by 5. So if it works with this, it's going to work with any kind of arbitrary shape. So you see here, I've created a list called picture and it is made up of strings. Now I'm just doing it this way so it's easy to tell what I'm doing on the string, or on the screen. Now I could have done this as a string and then broken it up. It would have been just as easy and the code would be more complicated, but this makes it a little bit simpler. So I'm going to run this just to make sure it's still working. And you can see I still have my window. So that's a good sign. I didn't mess up anything here. Test, test, test, and test. This is my advice to you. I hope you take it. So here's what we're going to do. I'm going to go ahead and draw my circles here. Actually I'll say maybe draw the picture. It's probably a better thing. So what I need to do is I need to iterate through each of these strings. Now each of these strings represents a row. So they are the y-coordinate, not the x-coordinate. That's a little bit confusing. So we're doing row and column. So I'm going to do 4y in range, length of picture. So in this case, the length of picture is 1, 2, 3, 4, and 5. So I'm going to go through each row. So the row actually equals picture y. So this would be picture 0, picture 1, picture 2, picture 3, and picture 4. Then what I need to do is I need to iterate through each x for x in range. And this is going to be length of the row. Now again, I could have put picture y here, but I thought this was a little bit easier for people watching the tutorial to understand. So here's what I'm going to be doing. Here's the interesting thing is that each letter represents one of these colors. So I need to pull the color out of this dictionary based on what's here. So I'm going to say color equals picture y and x. So whatever row number we have, whatever column we have, y and x. Remember, it's yx not xy. So I'm going to set the pen color. Now watch what I do here. It's color codes, color. It's a little confusing because we've got color and color codes and things here. But this color is going to be an R. It's going to be a B. It's going to be a G, for example. But we need the actual color name. So that's why we use the dictionary here to do that. So we set our color. And then we do draw circle x, y. Now note this is x, y, not y, x. And then we're going to go ahead and just send the pen along as an argument. And that basically should do it. Let's get a shot. Let's see what happens here. And there we go. So this is that R. This is that R. And you can see how we drew a nice square here. So I can go ahead and start adding things to this. I can do B, B, B. I'm not sure why I would, but... So I'm going to go ahead and run that again. And you can see because I didn't do anything with the default pen speed, you can actually kind of see it drawing. I like that effect. I'm going to leave that the way it is. As you can see here, we can start making basically any arbitrary size of drawing here. Now, if we wanted to have more rows, we'd have to change the height and the width. Depending on what we're going to be drawing. And so now since I've already done this, it took some time to do. I don't want to bore you with it. What I did was I went online and I found a... I'll show you in a second. I found a 3 by 5 font. So I went back. I'll go back and I'll show you. So I googled and I found a 3 by 5 font. So what I could do is I could kind of look at this as a model for my letters. So here's an L. Here's an I. So it's 1, 2, 3 by 1, 2, 3, 4, 5. So I could make a 3 by 5 font. And what I wanted to do was to draw the words light bright. So this would be a red L, an orange I, a yellow T, et cetera, et cetera, et cetera. So I'm going to go ahead and run that. And you should be able to see it's drawing itself. And like I said, it's going down by rows and across by columns. And there you have it. This is a light bright simulator. It's just, oh my gosh, it's just like my youth. So real quick, let's take a look at the code again. Just explain a couple of things that I kind of glossed over here. So you can see, again, this is the standard turtle stuff. Nothing surprising here. Again, you can see the numbers. I kind of, you know, I played around with it and I figured out what numbers worked. In this case, 820 worked for the width and 140 worked for the height. Each of these circles by default is 20 pixels in diameter. So 20 across and 20 down. So that kind of maybe gives you a hint as to the size we're dealing with. Again, these are the original color codes for light. You know, the light, these are the original colors that came with light bright. Now you can go ahead and you could just, you could start adding your own colors. You could add, I don't know, G for, I can't do the G. But these have to be unique. So let's say we could do L for, I'm not sure if Lavender is a color, but if you want to do Lavender, we could do that. I don't know if Lavender actually works. You can kind of play around with different colors. The only hard part really here is this formula. So the turtle module makes the center of whatever this screen is, is 00. So if we take the width, so the width is 800 and what was it, 820. So what we want to do is we want to go all the way over to the left side, which would be negative 410. So that's negative width divided by 2. It's negative 410. And then we don't want to be on this wall. We want to move over a little bit so that the center of our circle is there. That's plus 20. And then we add X. So this is column zero times 20 is zero. Next column is one times 20, two times 20, et cetera, et cetera. We do the same thing for Y, but Y is negative going down. So we start at the height divided by 2, which is 140. So plus 70 all the way over here. And then each time we want to start here at minus 20, so plus 20, minus 20. And then for each row, we subtract 20 more. That brings us down. So what's nice about this is that all we have to do is change picture and it will automatically basically kind of align everything. As long as we've done the math on the width. Now we could have probably... I could have figured out a way to do this automatically, but I think it would have confused people. So yeah, so this is just kind of a cool little throwback program, just a little thing I thought I'd put together for tonight. And you can see, again, I just really find it calming and relaxing to watch this. And there you go. That is our light-bright simulator. So if you haven't joined, please consider doing so. If you haven't subscribed, please do so. And definitely click thumbs up below. That is the least you could do to help me out. Anyway, have a great night. And as I like to say, keep on coating.