4. INTERACT

These videos are designed to be viewed as part of "Hello Processing" a tutorial for code.org's Hour of Code.

http://hello.processing.org/

Remember all those cool exciting projects we saw earlier in the first video?

They were all animated and exploding and colors changing and moving,

all sorts of stuff happening.

Everything that we've done in this set of tutorials up until now is static drawings

that don't move, that don't change.

But what we're going to do now is look at how we can animate things.

How can we make things change?

Well first of all, we should realize, like, what does it mean for a program to animate?

What we had before was stroke, fill, rectangle, stroke, fill, ellipse.

We execute all those lines of code and we get to the end and voila,

we have our perfect drawing.

Now we want to do something different.

A program that animates runs continuously over time.

It starts, it runs, and it reruns and it reruns and it reruns.

It has to continuously draw the circle, draw the circle, draw the circle.

So we need a framework, we need a structure, we need some way of doing this besides

just having our linear list of instructions.

The way we're gonna do that is by having two sections of code, two blocks of code.

One, we're going to call "setup."

Setup is all the code that happens once at the start.

All the code that goes in setup happens once at the start.

Then we're going to have another block, another section of code that's going to be called "draw."

The code that goes in draw loops continuously over and over again.

So we might, the program is going to run forever and ever.

It's going to do some things once, then it's going to run forever and ever.

You can think about programming a game.

If you were making a game, you might have some things at the beginning,

we would set the scoreboard to 0, we would set the player's name,

we would set the player's location to the beginning spot, and then,

after that beginning setup, after that initialization,

then the things move and they change and they check and the ball hit the puck

or whatever the game might be, they draw all the elements of the game continuously.

This is the structure we're going to use.

The question of course then is, how do we type this into our code?

Do we just type "setup" and put a line underneath it?

No, there's new syntax, new strange symbols that we have to write very precisely.

And it looks like this.

Void setup with parentheses with curly bracket open, end curly bracket.

By the way, the curly brackets might actually be a character you've

never had a chance to use before.

This is a time. It's shift something on your keyboard, so if you can't find it,

pause this video and find those curly brackets.

And the curly brackets are crucial because they mark the beginning and end of setup,

meaning any code that goes inside here is the code that's going to happen

in the beginning of the program.

Now, to write draw, we follow exactly this syntax again.

We say void, draw, () another start curly bracket and another close curly bracket.

So we're now writing two blocks of code.

We put code in setup that happens once at the beginning,

code in draw that loops over and over again.

You might also be asking yourself the question like,

"yeah, I kind of get why the curly bracket is there, the parentheses,

maybe I'm willing to understand that I have to have parentheses, but what is this 'void?'"

What does void mean?

At this point, I really just have to say that void is something you should just memorize,

it's part of the definition of setup and draw.

You have to say void draw, void setup.

The more important thing that we should be looking at together is,

we wrote all this code, stroke, fill, background, rect, ellipse, all these things.

Where do they go? Do they go in setup do they go in draw?

Well, here's the thing.

What goes in setup?

What is something that you might do at the beginning of your program?

There's a function that we haven't actually taught you yet.

It's a function that's secretly been happening but we didn't put it in yet.

Now it's time to actually put it in.

That function is called "size," and it's something that makes sense to go in setup.

Size (); takes two arguments, a width and a height.

500, 400.

This makes sense.

This is defining the size, in pixels, of your canvas.

The thing that you're drawing to is 500 pixels wide and 400 pixels high.

Now this makes sense.

When your program first starts, this is something that you would do at the beginning.

You would set up the size of your canvas.

We can look at what would we put in draw?

Well in draw, we might put all of our drawing code.

We would say, "hey, I want to draw the background.

And I'm gonna have a black background. And then I'm going to set a fill.

And then I'm going to set a stroke. And then I'm gonna draw a shape,

like ellipse, blah blah blah."

Now I'm making this messy here because this is anything your heart imagines.

Anything you want to draw.

Any colors, any shapes, all of your drawing code.

So what we're actually going to do right now is switch back over to the code editor,

and in the code editor, I'm gonna add void setup and void draw.

See how those are two separate functions now? Two separate blocks of code?

Now we're gonna put size in setup, there it is.

Notice how it's indented slightly.

This is the convention to have code inside a block of code have a slight indentation.

Now we're gonna put code in draw. I'm gonna put a background and

I'm gonna put a couple different shapes.

Ready?

It's a program, remember, that runs once at the beginning and loops over and over again.

So when we run it, something really exciting should happen, right?

OK, here we go, we're gonna run that code.

There it is.

Alright, yeah, I don't know how you feel,

I'm not even looking at it because there's no window, really,

I'm just in a video, but I know what it's doing, and it's static.

It's not changing.

So this might feel a little bit disappointing,

we spent all this time to add setup and draw, but our program isn't animating.

Why isn't it animating?

The reason why it's not animating is, well, inside of draw,

we're drawing the same shapes over and over again, so if we're always saying,

"Put a rectangle here, draw the background, put a rectangle here,

draw the background, put a rectangle over here,"

that rectangle's never going to move.

So now, we need a new concept.

We need to figure out, how can we vary the way the shapes are drawn each time

through this draw loop?

We might be drawing an ellipse.

And that ellipse might be at some x, some y, with some width and some height.

The values that we've been using are numbers like 250, 200.

And if the values are 250, 200, the ellipse is always at that location.

Always and forever.

Remember this thing, you know this thing that you've got on your computer,

it's called a mouse and you can move things around?

And you usually see, I'm gonna do a terrible job of drawing this,

this little mouse pointer on your screen?

Well, the mouse exists at some x and some y, right?

This is an x, y location where the mouse is.

What if I could say, draw the ellipse not at 250, but at the x location of the mouse,

wherever it might be, and the y location of the mouse, wherever it might be.

The fact is, we can do that! The way we do that is by writing a word.

The word is "mouse x mouse y."

Now this isn't magic. It's not just magic that this happens.

Processing knows, this computer programming environment

knows that when you write the word "mouse x,"

you mean, it stands in for the number that is currently the x value of the mouse.

We have now learned a really important fundamental thing in computer programming.

A fundamental concept. A variable.

Words that stand in for numbers.

A word that holds a value, this is a variable.

There's lots more to variables than this, but we've got to start here.

We now know that we can use the variables "mouse x" and "mouse y."

So I'm gonna bring the code editor back up,

and you're gonna see that there's an ellipse being drawn just at 250, 200.

There it is. It's looping, but it never changes.

Now I'm gonna replace that line of code with the ellipse at mouse x, mouse y,

and I'm gonna run it again.

OK? Take your mouse, move it over there, are you moving that circle?

We're drawing the circle over and over again, but every time we draw the circle,

we're drawing it at an updated location, wherever that mouse is.

This is the power of looping an animation loop with variation inside that loop.

If we can draw a circle at a different location,

if we can draw a circle with a different size, with a different color,

things can change, things can animate.

Just as an exercise, try swapping mouse x and mouse y,

so type mouse y where mouse x was, and mouse x where mouse y was.

Run the code yourself and see what happens.

Interesting, right?

This is a very important point.

One of the things that you can do is, these are just numbers.

Even though it makes sense intuitively to have mouse x for the x value of something,

you can also use mouse x for the value, the red value of a color.

You can use mouse y for the blue value of a color.

You could also say something, like you can do little mathematical operations.

Something you can always say are things like "mouse x plus 50"

which would draw your shape 50 pixels over from where the mouse was.

You could also do things like say "mouse x divided by 3,"

which would then take the value of mouse x, divide it by 3, and use that number.

So this is something you can really play with,

and in our example that I'm going to put below for you,

you'll see some examples of using the mouse values in

slightly more complicated mathematical operations.

OK, so we're done with this part of the tutorial,

but there's one little last piece I think that would be important to show you,

and it's something that's gonna go into the example that I'm gonna leave you with.

If you've noticed, right, we only ever had size in setup.

All of our drawing stuff goes in draw. That makes sense.

Look below, that example that's there right now, size is in setup, everything else is in draw.

Let's just try, just as an experiment, what happens if we take the line of code

called "background," and move it from draw to setup?

We're gonna move it there.

That means background is gonna be here, in setup.

That means background is only being drawn once at the beginning.

Never ever again.

What do you think's gonna happen when we run this code?

Try to guess.

And now we're gonna run it.

Move your mouse over.

Notice that the circle is leaving a trail.

It's because we've never erased the background.

So we're seeing every circle that's being drawn, and we're seeing every circle

that's being drawn in draw over and over and over and over again.

This is something that you can use, you can make this decision,

"do I want to draw the background always?

Or do I want to put the background just once in setup to create a painting program?"

So go forth, make your program animate, make things move,

make things change color if you can, and we're gonna add one more piece,

we're almost to the end of this tutorial series,

but we've got one more step we're gonna do in

learning the basics of programming in this tutorial.

OK, have fun, see you in a bit.