Hi, welcome to this new lesson. On this lesson, we're
going to start working on a project that
it's going to take several videos to complete. It's going to be
our final project, and we're going to
start working in converting one of the projects that we've done in Week 4, which is the Langton's
Ant algorithm. But we're going to write it
in object oriented manner. By doing so, we're
going to be able to not only have one
ant in the screen, but multiple ants and start seeing how those interact
with one another. The ants are going to
be basically a class that is operating and communicating with a grid
class in the background. That's going to allow us to
carry the information that allows the ants to perform their behavior as
we saw on Week 4. So if you haven't seen the behavior of
the Langton's Ant, I really strongly recommend
you to start there. We really go a little bit deeper on the
behavior of the ant. In this series of videos, we're going to implemented it as an object oriented class. But at the same time, we are
going to maybe go a little bit faster over some of the
issues that we already cover. So let's start working in
processing, and here we are. So the first thing I'm
going to do is just create a new tab here and we're going to create
this grid_data class. So this grid_data class, it's going to be
the tab in which we are going to
define our class. So class grid_data, and here, what we basically want
to do with this class is something that's going to be a grid that is going to be able to hold information for us. So let's start with
the constructor. Let's define def init
function with self. I think I'm missing
a space here. As we have discussed
in previous videos, a grid requires a columns, rows. I think that we could
start with that for now. Then let's equalize this
to the external data. If you remember this from some
of the previous sessions, we are creating an internal
variable to the class, which is the self.columns
and the self.rows, which basically are created outside the class,
and parses arguments. Sorry about that. There we go. The other important bit
of data we will need, and this is not something that I will include in the constructor. It's going to be a data which is going to be
an array, so a list. So what is important
here is that we are going to do a flat list, meaning the index of
entities in the grid. It's not going to be a
multi dimensional list, so it's going to be
a single flat list. So that will determine how we actually compute
neighbor operations. So this is the minimums that
we need for this class. Let's also include as we have
been doing, main function, which we're going to call run, and it's going to use
our self and then self. Here, we're going to
use the functions or methods in a way that
this class will execute. We want to for now, maybe we're just going to
do something like display. We don't have this function yet. We have to construct it, so we can get to that in a minute. So this is the foundation
of our grid class. Let's just go back to our main
class or to our main tab, and just create the boiler
plate of what is going to be the calling of this
class into the canvas. So the first thing
we want to do is, as we have been doing. Set up. Here, I'm going to repeat
our convention 1,200 pixels in this direction, 600 in this direction. Let's use our variables now for our size. Background, it's
going to be black. Basically, we should
have a window right now. That's all good. We haven't
called the class yet. The class exists as an extension or an additional
file within our system, but we are not
calling that class. Let's just start bringing
that class in by importing, first of all, we're going
to import the file. Let's just go into grid data
class as grid data or GD. It's going to be our
short code for accessing all the functionality that
this grid class will have. We also are going to include an import random because I know we're going to need
this a bit later on. What we're trying to do
is get the instance of the grid class in the
screen and for that, we have to construct one
instance of this class. Let's call it main grid. That's going to be the
name of our main grid, and that's going to
be our only one so perhaps it could be
just called grid. But we're going to keep
that for now, so GD. We're accessing the class, and now we can actually
use the constructor. The constructor is the name
of the class, so grid data. Here we need to provide D columns so let's just
use this convention of specifying what are we
giving as an argument, columns. I'm going to do rows as well. I think that's it for now. We have two variables that are being passed
on to our class, which are the requirements
of columns and rows for our grid. There's nothing actually making this class being drawn
in the screen yet. Well, we have to
write that function. Let's just still construct. We have our first
instance of the class. I just double-checked
that everything is, so we are having an issue here. Let's just double-check
what are we doing wrong. Because we're actually
calling this function, I think we have to include some information in our method. Let's just do def
draw or display. We are going to do the display. Let's just do something
simple just to check if our class is working, let's do a rectangle at 20, 20 by 20 pixels by 20 pixels, and with a stroke rect. Now that we have our
display function, we can do our self.display. With this function now, run, if we would like to see the
small display in the main, we can actually run it
here, so main_grid.run. We're creating the
sense of the class. We're actually executing
it in the setup, and that is it. We're seeing that
we're having an issue. The spelling rows. We did row instead of rows
and there we go. Let's see. Now we can see a
small rectangle here. Things are working.
Obviously, we are not doing, in fact, a grid yet. We are just doing a rectangle. Let's go into the grid, now that we have it being executed. We can actually start
doing some initiating the data and basically
creating a grid. The first thing we want
to do is that the display is not going to be
just one rectangle, but a series of rectangles. Let's just do a for loop, or a nested four
loop in this case. For i in range 0,2 self columns. That is the first
part of the loop. The second loop will be 4j in range 0, self dot rows. We've created a nested
structure so now we would have the number of rectangles equivalent to
the columns and rows, if we actually put these
rectangles within those loops, and we want to change the data. Let's just do the feel, the strokes which is the line, it's going to be zero, and then the feel let's
just keep it wide. If we actually do this, we actually need to calculate where would these rectangles be. In x, we're going
to say i, in y, we're going to say
J and right now, we will keep 20 by 20. But we don't really know
from within the class, if you can imagine, we cannot know how big the screen is yet. We don't have information
of the image size. We are going to pass
that information, the size of the screen
or the size of the grid in a way how big would the grid be distributed and we're going to pass it
on as an argument. If you think about it right now, we could put a
multiplier here so i*10 and j*10 just to see this grid somehow
distributed over space. First of all, let's just
fix our issues or errors. We have deep, the I know, I spell rich. Let's go with that. You can see here this grid we've created so
many rectangles, but it doesn't really match
the size of our screen, and they're actually
overlapping with each other. That's because we
multiply it times 10, and the size of the
rectangle is 20. This is not very precise. We would like to keep things
very precise and making sure that we have a way of knowing
how big the screen will be. The first thing I would
like to do is expand this constructor a little bit. Let's expand with the
variable screen width and screen height in this way and we're going
to do the same thing, Self dot screen width equals screen width and self.screen height equals screen height. Now we actually should
have the information. At least the constructor
requires this information. If we try to run this,
we're going to have an error because we
are not providing that information basically in
the arguments of the class. Let's provide those now. Screen. The first one is width. This is going to be
equals to the image size. Because we've identified this to be 1,200 pixels is the
size of the screen. But this information now is
being parsed to the class. Let's copy-paste the variable
here from the class. Here, this one. In the screen height, it's going to be equivalent
to the image size in y. Nothing will change from
what we had before, but we actually have some information of the
screen in the grid class. Now we can actually
use this information to actually draw a grid that matches the edges.
How do we do that? Well, let's go into the
display function again. Here, we are going to
define the rectangle size, x equals to self.screen_width. We actually taking the width of the screen and dividing
it by the columns. Imagine that we're dividing the size by the number
of columns we want, so we are going
to get rectangles proportionate to the size of the screen depending on
how we're dividing them. But that's going to be
consistent every time we run it. If we provide the
size of the screen and the number of
columns and rows, our grid will adapt to the
entirety of the screen. We've done that for x. We will do that for y as well. Let's just use the
right variables here, screen height, and instead
of columns, we need rows. We're dividing x in
columns and y in rows. Now we actually have
this variable size, which is a rectangle size, which as you see here, this 20 is equivalent
to an arbitrary size of the rectangle for our grid, and we can actually use
the x and y that are computed by the size of the screen divided by the
number of columns and rows. We can also use the same
variables as a multiplier. The multiplier here, this 10, it's an arbitrary
number that we're multiplying the
index of the loop. You're counting 0, 1, 2, 3, and so on. You're multiplying it by
the size of the rectangle, so to create separation between each one of the rectangles. Otherwise, they would be really, really close to each other. Let's just use rectangle size x here as a multiplier
for the size, and also, I'm just giving a bit of space so you can
read it a bit better. This 10 here, it's going
to be the rectangle y. The x-coordinate is the
i times the rectangle x. The y-coordinate is j
times the rectangle y, and then rectangle x
and y are going to be the size of the rectangle.
Let's see what we have. Here we go. At least, let's double-test
that this is working. We could change the
size of the grid to something with less resolution
or with more resolution. You can see that in all cases it matches quite perfectly the size of the screen that
we have provided. You can also change
the size of the screen and that should
remain consistent. That's a pretty flexible class. This is going to be
our first video. We're going to move on to
then start giving some data to this grid. It's
not just a grid. It's actually starts
containing some data, and we're going to start
seeing how to operate with additional entities on top of this screen. I'll
see you in the next video.