Smiles Transcript

[00:00:01] INSTRUCTOR: Hi there, let’s implement smiles. So we have a starting world, big and empty, and we want to have some smiles in it. And when we’re putting together a complex solution, it’s a good idea to draw it out.

Start visual description. Text on slide reads:
smiles.py
• Draw out a strategy
• Identify the pieces
• What are the ideas, how do they fit together?
• Implement one piece at a time
End visual description.

[00:00:19] So this is what I mean by that. Let’s come over here, another white board, and draw out a little strategy. So we’ve got some big open space that bit’s supposed to be in. We know that bit starts up in the corner somewhere.

[00:00:34] And as bit moves across, we’re going to want to create little smiles. So we’re going to have a smile here, come down, smile again, and then bit’s going to move and draw another smile. And so as we look at this, we can see, well, we’re reproducing the smile part over and over and over.

[00:00:54] And so we probably need a function that’s going to represent that concept. Create a smile, and then we’re going to run that. But we need to understand the bounds of that function. Where does it start?

[00:01:07] Where does it finish? Do I call that function when bit is standing in front of the smile? Or do I want to call that function when bit is on the eyeball, if you will? And then where does bit finish.

[00:01:20] So we’re going to say, hey, bit starts here, and he’s going to blacken in that spot, and then go draw the smile, and then come up and blacken this spot. And then is that where bit finishes? Or do I want bit to finish on this spot right here after he’s moved over one space?

[00:01:39] And sometimes there’s no right answer or wrong answer. Just simply that you need to have picked an answer, and then you stick to that. And you understand where it begins and ends, and what goes in the middle.

[00:01:53] We call that glue code. I call one function, I’m going to call another function in a moment, but I have to bridge the gap between where one left off and where the other one is intended to pick up.

[00:02:06] So for our purposes here, let’s say that bit’s going to start on the eye, then come down and draw the grin, go up and draw the last eye, and then that’s where the function stops. And so then if we want to be anywhere else, we’re going to move bit along outside of that function in another part of the code. Start visual description. Instructor sketches out smiley faces for the problem. End visual description.

[00:02:30] So let’s come over to PyCharm and open up Smiles. Here’s a nice little Smiles file. Not a lot in it yet. So let’s make something happen. We know the pass here is just a place filler. So we can get rid of that now.

[00:02:49] So we want we can use little comments with the hash symbol. Say draw 4 smiles. And so we can say, draw a smile bit. Let’s try that again here. There. So I copied the line, pasted it in 4 times.

[00:03:15] I’m going to draw 4 smiles. Now the red squigglies here show that that function isn’t defined yet. If I hover over it, it says, unresolved reference, draw smile. I’m referring to this thing called draw smile, but I haven’t defined what that means.

[00:03:35] Now if I click on that little light bulb there, it gives me a little menu that says, do you want to create a function called draw smile? Yes I do. Right? So I’ve defined this draw smile function. It doesn’t do anything yet.

[00:03:49] But let’s give it something to do. Right? So we’re going to draw the eyeball. Draw left eye. Draw green. Draw right eye. Right? In fact, what would be good, instead of doing this as a quote, let’s make it a docstring.

Start visual description. Instructor types the following code:
@Bit.worlds(‘smiles’)
def run(bit):
# Draw four smiles
draw_smile (bit)
draw_smile (bit)
draw_smile (bit)
draw_smile (bit)
End visual description.

[00:04:07] And because it’s a docstring, include another little detail. It starts on left eye, facing right, and ends on right eye, facing right. Documenting the intent of your function in docstring is really quite helpful.

[00:04:28] Both for you, when you write it, so that you know what you’re trying to accomplish and what the specific details are, as well as when you need to go back and refer to it, you can see, okay, that’s what that function does.

[00:04:40] That’s where it starts. That’s where it ends. Alright, so, bit.paintblue will draw the left eye. And then we’re going to need to turn. And bit is facing to the right. So to go down, we’re going to have to turn further right.

[00:04:55] So bit.right. I’m going to move twice, and we can double check that. We can come over here and we can draw this out, because what does a smile look like? Well, we’ve got one of these right here, and then there’s this empty space, and then we’ve got here, here, here, and then maybe you forget, oh, what does that look like?

Start visual description. Instructor types the following code:
def draw_smile (bit):
"""Draw left eye, draw grin, draw right eye
Bit starts on left eye facing right,
and ends on right eye facing right."""
bit.paint(‘blue’)
bit.right()
bit.move()
bit.move()
End visual description.

[00:05:18] You can come back over and take a look. So there’s the eyeball, a space, a gap, it’s three grins wide. So we come over here, one right here, one right here, that’s a space, and right there.

[00:05:33] So now I’ve got a map of what I need to do. I’m going to be here, paint, turn, take two steps, paint, take a step, turn, and move over. Let’s get that far. So we can come back over here to our code.

[00:05:49] So we paint blue, turn right, move, move. Maybe here I can use some comments to break this piece up. So left eye, green. So now we’re going to do a bit.paint blue, bit.move, bit.left, bit.move, bit.paint blue.

[00:06:20] If the cursor is on a line and nothing is highlighted, doing your copy hotkey, so on Mac, it’s Command C, if you’re on Windows Control C, will copy the whole line for you. And then you can just paste it.

[00:06:37] So I can copy, move. And that can be really handy when you have to copy a little bit of code. So we’re going to paint blue, move, paint blue, move, paint blue. That should get us to this point right here.

Start visual description. Instructor adds the following code to draw_smile function:
# Grin
bit.paint(‘blue’)
bit.move()
bit.left() bit.move() bit.paint(‘blue’)
bit.move()
bit.paint(‘blue’)
bit.move()
bit.paint(‘blue’)
End visual description.

[00:06:56] So it looks like we need to move again, turn left, move and paint, and that will finish the green. So we’re going to move again, bit.left, move again, bit.paint blue. And that should have that green.

[00:07:15] Now, maybe before we get much further, we want to test this and see, are we on track or have we gotten something wrong? So let’s run smiles for a second and take a look. Now, of course, the end isn’t the part we’re interested in.

[00:07:31] We know it doesn’t end well, but the beginning. Should paint, should turn, move, paint, move, turn, paint, paint, paint. So up to this point where we had intended to go, it’s working so far.

[00:07:48] Great, let’s finish the job. So from here, we know we need to move twice. One, two, paint it again. So let’s finish that up. Right eye. Move, move, paint, blue, and then a bit.right to go from facing up to facing to the right.

Start visual description. Instructor runs code and part of a smiley face appears on the grid. End visual description.

[00:08:14] And that finishes our little contract. We said that we were going to start on the left eye facing right and then on the right eye facing right. So draw a smile now it works. That’s great. Now the question is, back to our little diagram, when bit finishes on that right eye, where does the next one start?

Start visual description. Instructor adds the following code to draw_smile function:
# Right eye
bit.move()
bit.move()
bit.paint(‘blue’)
bit.right()
End visual description.

[00:08:35] How many spaces are in the middle? Let me go back and take a look. One space. So we know that the next call to the smile is going to start on the eye. We’re going to have to move twice in between calls in order to get to that position where we want to be.

[00:08:53] So down here then, we draw a smile. We need a little bit of glue code, bit.move, bit.move, and now we’re ready to call drawSmile again. Let’s copy that line. Put a few of those in. Then the question is, how many moves at the end do we need?

[00:09:16] An easy way to find out, say let’s run smiles, see where it ends, and see what is the last little bit of code. We got all kinds of crazy business here. The bit world does not match the expected world.

[00:09:29] What’s wrong? We see that we had started drawing the smile here, and it’s telling us those were supposed to be white, and these were supposed to be blue. So what it’s telling us is we’re off by one step.

[00:09:44] We weren’t supposed to start painting right away. We were supposed to move first and then start painting. So let’s go fix that. Come in here, draw four smiles. Yeah, but let’s do a bit.move first to get it into the right position.

[00:10:01] Go from there. So let’s rerun it again, and the compare is perfect. We did it. Nice job guys, good luck.

Start visual description. Instructor runs code and 4 blue smiley faces appear on the grid.