Making drawings with code | Computer Programming | Khan Academy

Making drawings with code | Computer Programming | Khan Academy


– [Voiceover] Let’s begin programming by making a face with circles. To draw a circle we need
to use the ellipse command, so I’ll type ellipse in this editor. After I write a command name in a program, I always follow it with
parenthesis and a semicolon. But I don’t see an ellipse. The right side is still
that boring white canvas. Well, there’s no ellipse
yet, because I need to give more information about
where to draw the ellipse and what size it should be. Since I am drawing a
face, I want this ellipse to be smack in the center of the canvas and pretty big. I’ll type four numbers in. That’ll make that happen. And we’ll explore why they work. Ta-da, a face. Okay, so this first number, what does it control? I can change it by clicking
on it and using the number scrubber that pops up. Watch, it’s moving across the canvas. So this number controls
how far the ellipse is from the left side of the canvas. What about the second number? If I change this, the ellipse moves up and down the canvas. Okay. On to the third number. Changing this makes the ellipse wider and thinner. All right, nice. Finally, the fourth. The height, making ellipse
taller and shorter, kinda squishy. Let’s make it taller again. Okay. Now you know what all of our numbers do. The first two control the
position of the ellipse and the second two control
the size of the ellipse. We call these numbers the
parameters to the ellipse command. And actually we usually
call a command a function. So here in our program we’re
calling the ellipse function and passing it four parameters
to change how it draws the ellipse. When we describe the
parameters of a function, we usually give them nicknames,
so that we don’t have to say first and second. Let’s go through the nicknames
for these parameters. This first parameter, remember that it controls this. We call this parameter X, because we think of x as the direction it
goes across the canvas, like I’m showing here. It starts at zero and ends at 400. So that, that’s our x. This second parameter, we call it Y, because it controls this direction. And we think of y as the direction that goes down the canvas. That’s y. And it also starts at
zero up here in the corner and goes to 400 down at the bottom. So that’s x and y. We call the third parameter Width, because it controls the width, and the fourth parameter we call Height. Okay. So now we understand
what out code is doing and why it’s doing that, let’s write some more code. What, we have our face, it needs a mouth so they can eat things. I’ll make a mouth by typing
a second ellipse underneath. I’m going to use the same
x as the one before it, because I want it to be
in the center of the face, but I do want it lower down on the face. So I’ll try 250 for the y. For the size I want it
smaller than a face. Let me try 110. Okay, it’s a little, little too small. I’m just gonna widen that up a bit. All right. Next we need eyes, because
a face without eyes is pretty creepy. Let’s start with the left eye. It should be closer to the left-hand side than the center, so I’ll try 150 and it should also be closer to the top, so I’ll try 150 for y as well. And they should be small perfect circles, so I’ll try 30, 30. Okay, I don’t see my eye yet, what’s wrong? Ah, here’s the issue. Oh noes guy, our error buddy, pops up and it’s telling me
that something is wrong with the code. I am missing a semicolon. Where am I missing it? Line five, the line of
code that I just wrote, I forgot my semicolon. Classic mistake, I’ll just add it back in and here we go, we have our eye. Now, you will probably see Oh noes a lot when you’re getting started,
because this is your first time writing code and it takes time to get used to the syntax, making sure
you’re spelling things right and using the right
parenthesis and always putting that semicolon there. So don’t worry if you see him a lot, you’ll get used to him. (chuckles) All right, now finally, this is not a cyclops,
so we need one more eye. Since our next eye is pretty similar to our left eye, I’m just going to copy this line of code and paste it, and then move the x and there we go. Beautiful! My face is finished. And I might be a little bit hungry too. Mmm. Well, now you’re going to
try drawing some circles with code yourself.

17 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *