[MUSIC PLAYING] BRIAN YU: Welcome, everyone, to an introduction to Programming with Scratch. My name is Brian Yu and in this course, we're going to be exploring Scratch, which is a visual block-based programming language developed by the team over at MIT's Media Lab. Using Scratch, by putting together little Scratch puzzle pieces, that we'll see shortly, you'll be able to build visual stories and animations and games and other programs that you'll be able to share with others. And along the way, as we're exploring Scratch, you'll be introduced to the fundamentals of programming. We'll take a look at concepts like functions and loops and conditions and variables and other types of ideas that you'll see in programming. And even though the Scratch programming language looks a little bit different, it uses blocks instead of the more traditional text-based programming that you might see in other programming languages later, really Scratch is based on the same fundamental ideas. And it's going to use the same principles of computational thinking. So with that, let's go ahead and take a look at Scratch and dive in to our very first Scratch project. So once you go to Scratch's website, when you click on the Create button to create a new project you'll end up seeing an interface that looks like this. And we'll be exploring this interface during this course. But it's broken down into a couple of parts. Over here on the left-hand side is our block library. You're going to build Scratch projects, ultimately, by putting together blocks in some sequence in order to get the project to do something that you would like for it to do. And you can assemble those blocks together from the block library, bringing them into this middle part of the Scratch window, which is the Block Editor, where you're going to put these blocks together to decide how it is that your project should work. But before we even get to those blocks and how they work and how to put them together, today we're going to be mostly focusing on this part of the Scratch window. This rectangle you see here is what Scratch calls the stage. And it's inside of the stage that our Scratch project will live and ultimately run. And this is, when someone runs your Scratch project, what that person is ultimately going to see. We see that right now, in the Scratch stage, we just have one character, this default Scratch cat here. And each of these characters Scratch calls a sprite. A sprite, in the world of Scratch, is just some object. It could be a character, like an animal, or it could be some other object, that lives somewhere on the stage. And ultimately, we're going to learn to have the ability to program these sprites to do what we would like for it to do. Down below we see a listing of all of the sprites that are currently in our project. Right now it's just this default cat, which is called Sprite1. And we'll start to see other parts of this interface as well. But let's start today by exploring this stage and the sprites that live on that stage and how we can manipulate them. So what we'll see right now is that our default Scratch cat is currently just in the center of this stage here, but I can move it around. And I can move it around just by clicking and holding on the cat. And then I can drag it around. I can move it to one corner of the screen or I could click and drag and move it to the other corner of the screen, for example. And what you'll notice, as I start to move the Scratch cat around on the stage, is that down below a couple of values are changing, the x-value and the y-value. Right now, for example, the x-value is 177 and the y-value is 42. But if I move the Scratch cat a little bit, move it somewhere else, now the x-value is negative 156 and the y-value is negative 77. So sprites in Scratch exist on the stage. And in particular, they exist at a particular location on that stage, which is organized into an x,y coordinate grid. And so if you imagine that this rectangle here is the stage, this looks similar to an x,y coordinate grid you might have seen in a geometry class, for example, where we have the x-value, which just represents how far to the left or to the right is our character on the stage. And we have the y-value, which represents how far up or down the sprite is on the stage as well. The perfect center of the stage is point 0,0. If x is equal to 0 and y is equal to 0, then our sprite is going to be exactly at the middle of the stage. But if we increase the x-value, make it a positive value, it'll move further towards the right part of the stage. And if we decrease the x-value, make it more negative, then the sprite is going to be further to the left side of the stage. And likewise, the same thing goes for y but in the up and down direction. If I have a sprite where y is equal to 0, it's going to be perfectly level at the middle vertically. But if I increase the y-value, then our sprite is going to move up along this stage. And if I decrease the y-value, then our sprite is going to move down along that stage as well. So we'll see those x and y values come up, not only in this interface here where we see where the sprite is on the stage but also a little bit later, once we start putting blocks together to program where our sprites are going to be on the stage at any given time. So right now if I wanted to take my sprite and move it back to the perfect center of the stage, I could take it and drag it to about where I think the center is. And I might be pretty close, but if I want to be even more precise, I can go down to the X field here and change what's right now 10 to 0. And I can do the same thing for y, changing what's currently negative 8 to 0 as well. And that will perfectly center the cat in the middle of the stage here. In addition to being able to change the position of the sprite, we also have a few other controls that are in this part of the Scratch interface. Over here I have the ability to give my sprite a name. Right now my sprite is just called Sprite1, which is the default name that Scratch gives to a sprite that I create. But I could rename this, I could call this the Cat, for example. And what you'll notice is that when I rename the sprite, call it my Cat, then down below in this bottom portion of the Scratch interface, this is where I see all of the sprites in my project. Right now there's just one, but each one is labeled by its name, which right now is the Cat. And as we start to get more and more sprites that will be added to our projects, it's going to be helpful to keep track of which sprite is which by knowing what the name of any given sprite is. Underneath the place where I can name any individual sprite, I also have a toggle where I can decide whether or not that sprite should be shown on the stage. Right now we are showing the cat, but I could click this button over here to hide the cat from the stage. And if I want to bring it back, I can show it again. So I can show and hide the cat to decide whether, for any particular sprite, that sprite appears on the stage or not. I also have these other two controls. This control here controls the size of the sprite. Right now the size is 100, meaning it is at 100% size, which is the normal size for any sprite. But I can change that. If I want the sprite to be half as big, I could change the size to be 50, for example. And now the sprite is much smaller. If I want to make my sprite larger I would change it to let's say 200, for example. And now the sprite is going to be larger. But for now, I'll go ahead and keep it at 100. And over time we'll start to see that we can change the size as well by way of the blocks that will be introduced a little bit later. And then finally in these controls, I have a direction control. And the direction control, controls which way that my cat, in this case, happens to be facing. Right now it's at 90, meaning 90 degrees. In other words, the cat is facing to the right. But I could rotate the cat, spin it around, and watch as I turn this dial, I can rotate spin the cat around and have it face a different direction if I want to. And when I do, you'll notice that this direction value changes and to some number of degrees. So right now it's pointing at a 39-degree angle, but I could change that back to 90. And when I do that, now the cat is facing to the right as well. So I have this ability, using this editor here, to control a lot about the sprite. I can change its name. I can change its position, its size, what direction it's facing, whether or not it shows up on the stage or not. But really, to make our programs more interesting, we don't just want to have a cat that lives in this environment. I'd like to add some other sprites to my stage as well. So let's go ahead now and try and create a new sprite. Down here at the bottom, you'll notice that inside of this region of the Scratch editor where all of my sprites live, right now it's just the cat, there's a little plus button. And this is the Create a New Sprite button and I have a couple of options for how to do so. But if I just click on this main circular button that says, choose a Sprite. I'll end up getting a whole list of different kinds of sprites that I can create. There are animals, there are people, there's different types of sports-related sprites, or food-related sprites, and more than that. And I can look through this and try and find whatever I'd like. And let's say I want to add an animal, for example, another animal other than the cat to my Scratch program. Well up here at the top I can filter down what I'm looking for by a particular category, or if I knew exactly what I was looking for, I could search for a sprite as well. But let me go to animals, for now, just to see the various different kinds of animals that can exist here. And I think I like the fish, so we'll go ahead and take the fish and add that to my stage. And so once I do that, you'll notice a couple of things happen. One, down below in this region, where I'm keeping track of all of the sprites that are a part of my project, I now have two. I have the cat and I have the fish. And you'll notice that both now appear in the main stage area of my Scratch program. And I can move them around so that they're not overlapping with each other. So I now have one cat and one fish. Whichever one is selected, highlighted in blue down here at the bottom, that's the one I'm currently working with, where I'll currently be able to add code to it or manipulate its position or size or any of the other attributes we've seen that these sprites happen to have. So this fish, for example, is currently located at x equals 73 and y equals 70. But if I switch to the cat by clicking on the cat down at the bottom, now I'm selecting the cat. And now I see the cat's position and the cat's name and the cat's size and the cat's direction as well. So using that ability, we can add new characters. We can add new objects to our Scratch project. And if we wanted multiple of a given character we can even duplicate a particular sprite. So let's imagine that I want two fish, for example, inside of this environment. I'm going to click on the fish and then I can either right-click or I can control-click on the fish. And when I do that a little menu will pop up where I can here say, let me duplicate the fish. Let's get a second fish. And you'll notice that it's called Fish2 by default. I could change that if I wanted to but Fish2 is OK. And I'll take the two fish and separate them a little bit on the stage just by moving them around. And so now I'm starting to construct this scene. And this is why you can use Scratch to tell stories or create animations or create pieces of art, just by deciding what it is that you want to exist on this stage, and then add them to the stage as well. Now one thing you might notice is that right now because I duplicated the fish, both of the fish look identical. They're exactly the same. They're both pointed in the same direction. And I could change the direction or change the size of one of the fish to make it a little bit smaller, to make it look a little bit different from the other fish if I want a variety of different types of fish in my scene. But what I'd really like to do is change its entire overall appearance, so I have two different fish that exist on the stage instead of just two copies of what looks like the same. And so here's where we're going to introduce another concept in Scratch, which is that of costumes. Every sprite can take on different costumes. And a costume is just what that sprite happens to look like. And so let's explore now how we can change the costume for one of these fish, for example. Up at the top of the Scratch window, you'll notice a couple of tabs. The tab that's selected by default is called the Code tab. And while we haven't added any code to our projects just yet, ultimately as you start to build more complex projects, you'll be using the Code tab to take blocks of code and drag them into this code editor in order to decide what it is that you're Scratch sprites are going to do. But the tab that we're interested in now is this second tab, which is called the Costumes tab, which is going to allow us to see and edit and modify the costumes that belong to any given sprite. So let's go ahead and take one of our fish. We'll go ahead and take fish2 and head over to the Costumes tab by clicking on the Costumes tab, which is next to the Code tab up at the top of the window. And when I do that, you'll see that by default the fish has four different costumes, fish-a, fish-b, fish-c, and fish-d. Right now fish-a is selected, but I could change the costume just by clicking on a different costume. If I click on fish-b, for example, now I've got a different costume that's selected. And now you immediately see in the stage that the fish looks different. It's taken on a different costume. Even though it's the same fish, it appears visually to look different because we've changed what costume it has. And I can try changing it again. Here's fish-c, and then I can try looking at fish-d as well. So you can experiment and take a look at what costumes happen to be built in by default into any given sprite and change them if you'd like to. The cat also has different costumes. They don't look nearly as different, but what you'll notice is that the cat can be in two different costumes that are just in different leg positions. So in costume1, the legs are straight, in costume2, the legs are bent. And if you watch this sprite carefully, as I switch between the costumes, it almost looks like the cat is walking, which is why we've got those two different costumes, to give the appearance of walking if we would like to. But let's go back to the fish, which has four different costumes that I can choose from, each of which looks very different. And I'm not limited to just those four. If I wanted to create additional costumes I have the ability to create additional costumes too. How could I do that? Well, here in the costume editor, down at the bottom underneath where all of these costumes are, there is another plus button that looks very much like that button for creating a new sprite that we saw a moment ago. But this time, this is the button for creating a new costume. And here I have a couple of choices. I could search inside of Scratch's own library of costumes to find a costume that I might want. I could also paint a new costume. So if you're feeling artistic, you'd like to create a costume of your own, we could try painting our own. So I could paint my own fish, for example. And here I have a bunch of different tools that I can use to paint the costume. So I'll go ahead and use the Paintbrush tool that will just let me draw a new costume for my fish. And I can choose what color I'd like the costume to be too. So I'll go ahead and choose maybe this color, and I can start to draw something like a fish. We'll draw a fish. We'll give the fish an eye. So if you are feeling a little more creative, a little artistic, you can try and draw fish for yourself. I can use the Fill tool if I want to pick a different color maybe and fill in the fish with a particular color. So you can be creative about this too. Now of course. I do think that the fish that Scratch provided for me look a little bit nicer than the fish that I was able to draw on my own just now. But I can modify the existing costumes too. Using the same costume editor, if I wanted to fill in part of the fish with a different color, maybe I want a little bit of green in this fish. I could take a green that I happen to like by just adjusting these dials to specify what color I want. And still using the Fill tool, I could fill in parts of the fish with a little bit of green, for example, just to make the fish look exactly how I want it to look. So you have a lot of creative freedom in this costume editor. You have the ability to create an entirely new costume just by drawing it and painting it yourself, or you have the ability to take a costume that already exists and add to it by painting over it or filling it in with different colors if you'd like to. And you even have the ability, if you want, to upload a costume. If you have a photo or an image on your computer that you'd like to use as a costume in your Scratch program, you can upload it there. Or you could even take a photo with your computer's camera, if it has one, in order to add that photo as a costume as well. In addition to changing what these sprites look like, we also have the ability to give these sprites sounds that they can play. And so up at the top, you've noticed that we have a Code tab and a Costume tab, there's also a Sounds tab for the sounds that are associated with each of these different sprites. And later on, we'll see ways that we can include those sounds as part of our project. So right now the fish, by default in Scratch, has two different sounds that it has. One is called bubbles and I can play that if I'd like to. [UNDEWATER BUBBLING] And one is called ocean wave [WAVES CRASHING] So those are the sounds that are built-in as just part of the fish. And later on, as we're building stories with it, maybe at some point we'll want to play those sounds. And later in the course, we'll see ways that we can do just that. And different sprites have different sounds built-in by default. The cat, for example, if I click on the cat, has one sound by default, which is just the meow sound, which I can play. [CAT MEOWING] But if I wanted to, I could add more sounds as by recording something myself. if I wanted to record a sound to give to a sprite. And you can also upload a sound if you have a sound file on your computer that you'd like to include, maybe some music you want to go along with your project, or a sound effect, you have the ability to upload those sounds too. But let's go back to the Code tab, which we'll look at a little bit later. And now we've got our stage. We've got our stage with a cat and two fish. But right now, what's a little bit boring about my project is the background. Right now I'm just dealing with a plain white background with nothing else on it. And I'd like to make that background a little more creative as well. And so this background, we've been calling the stage. The stage is this rectangle where our sprites live. And each stage is allowed to have backdrops. The backdrop just decides what image appears behind all of the sprites. And by default when you create a Scratch project for the first time, the backdrop is just going to be solid white, but we can change that. Down at the bottom right, here we see the stage. And I have the ability by clicking on this button in the bottom right, to choose a backdrop for my project too. And so if I click Choose a Backdrop you'll see that I have a whole variety of different backdrops that I can choose from in different environments. I see I have a wintry scene if I want to create a wintry scene. We have some indoor scenes if I want to, some outside, like city scenes. And this one looks nice, it's an underwater scene, maybe. And I'll use that because I've got a bunch of fish on my stage. And so maybe it'll make sense to put my fish in an underwater scene, for example. So I'll choose that backdrop. It's called underwater1 by default, and let's use that one. So I'll click underwater1 and you'll see, immediately, the backdrop now changes. And I can now have my two fish that are living inside of this underwater scene. And much as was the case with costumes or with sounds, if I had my own image, or I wanted to draw my own image to use as the backdrop for my Scratch project, I could certainly do that as well. At this point now, the cat though is starting to feel a little out of place. I'm designing an underwater scene. I've got two different fish here. The cat, maybe, doesn't belong here. And so if ever I want to remove a sprite, here's how you could do that. I'm going to click on the cat because that's the one that I'm currently editing. And if I don't want the cat, there's a little Trash icon that appears next to whichever sprite happens to currently be selected. And if I don't want the cat to be there, I can just press that Trash icon, and that's going to remove the cat. And so now, I have this scene with these two fish that happen to be swimming around in the water. And I could change the scene if I wanted to. Maybe I want to take fish2, this yellow and green fish, and flip it around so that it's facing the other direction. So that one fish is swimming to the right and one fish is swimming to the left, for example. So how could I do that? Well, next, every fish, remember we've got a direction control for any given sprite, that controls what direction that fish happens to be facing. So if I want to take a fish and have it face to the left, for example, I could rotate, rotate, rotate, have it face towards the left, at like negative 88 or negative 90 degrees or so. But this isn't quite perfect because, as you're probably noticing, the fish is upside down now. So normally with this direction control, when I'm trying to control the direction, it's just rotating whatever the sprite is in whatever direction I tell it to rotate. But what that means is that if it starts facing the right and I rotated 180 degrees all the way to face the other direction, now suddenly it's going to be upside down. And that's maybe not what I want for it to do. But it turns out Scratch has a fix for this. And every sprite can be in a number of different rotation styles, what style it's going to use when rotating. By default, it uses this all-around style, where it can be facing any direction that we want, rotating all around. But there's also the second one that's just called Left and Right and that will just let the sprite face in one of two directions. Either it's looking to the right or it's looking to the left. And so if I change the rotation style to Left, Right by clicking on this middle button here that's got one arrow facing the right and one arrow facing the left, now when I rotate a little bit nothing happens because it's only ever going to face to the right or face to the left. But if I rotate it all the way around to the other side, now I have the sprite that's facing the other direction. And that's how I can get one sprite that's looking over to the right and there's one sprite that's looking over to the left. And I happen to like this scene. If I wanted to see it in full-screen there's a full screen icon in the upper right, where if I click on that button I now see my stage in full screen. I can see exactly what it's going to look like, which is quite nice. And I now have my first Scratch project. I haven't added any code just yet, but I've added some sprites, some characters that are part of my scene. I've added a different backdrop that I can use to my scene as well. And if I wanted to save this, because I want to make sure I can keep this and use it a little bit later, I have a few options. One option in the File menu, I can save a project to my computer. And that will download the project to my computer, such that later if I want to open it up again, I can click Load from your computer and load that file that I've just saved. But also, if you create a Scratch account by clicking on this Join Scratch button, if you don't already have it, and then sign into your account, you'll have the ability to save projects to Scratch's own website. And once you do that if you'd like to, you could share your project with the world, to send it to friends and family, and to let other people that are using Scratch have an opportunity to see your project and try it out as well. So now that we have the ability to create these sprites and put them onto the stage, we can create whatever environment we want for the story, or for the animation, or for the game, or for the other program, that we might be trying to create in Scratch. But right now these sprites aren't really doing anything. The stage is always staying the same. The fish are always the same. And, ultimately, what we're going to look at next is about programming, how it is that we can write code. And in particular, by using these blocks and assembling them together into stacks of blocks that perform various different activities and tasks, we're going to be programming these sprites in the backdrop and the stage, to do what we want them to do, to create all the more interactive stories and games and animations that we can create all through the use of Scratch. But we'll explore that next time. That's it for an introduction to Scratch for today. And next time, we'll take a look at how we can take that stage and begin programming with it as well.