[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.