2. SHAPES

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/

Alright, we're ready to get started.

This is a very exciting moment,

'cause we're actually going to look at writing lines of code and drawing stuff to the screen.

So, what does it mean to write a line of code, right?

A line of code is an instruction.

What is the instruction we're going to start with?

The instruction we're going to start with is "draw a rectangle."

So let's see, what is a rectangle? I think we all know what a rectangle is, hopefully.

A rectangle is something that looks like this.

So what does it mean, then, to have an instruction that says "draw a rectangle?"

Well an instruction is text, and that instruction is going to look like this "rect."

A function is essentially that command, that instruction.

It's the word we use, and the function of "rect" is to draw a rectangle in the window.

So now, we have this function named "rect," we have this rectangle,

but we can't just say "draw a rectangle,"

we've got to be more specific, right?

I can't just tell you to "walk."

I might want to tell you to walk left or walk right or walk fast or walk slow.

To make a rectangle with "rect," we've got to say how wide should the rectangle be,

how high, how tall should the rectangle be, and where should it be on the screen?

Let's actually start for a moment with where should it be on the screen.

First, what do I even mean by "screen?"

You've got this computer screen, I'm in your computer screen, right?

The screen is a rectangle.

We're going to be drawing into a smaller rectangle inside your computer screen;

we're going to call that a canvas.

So I'm gonna draw a nice big rectangle here, and this is going to be the canvas.

The canvas is a coordinate system, meaning we can say

"hey, this point is the point 12, 27,"

or this point is the point 3, 102, those numbers aren't right,

but we're going to assign places in this canvas by their x coordinate and their y coordinate.

This being the x axis, and this being the y axis, right?

OK this is 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,

so this would be at pixel number 9 the way that I drew this.

What do I mean by pixel?

We have these units of measurement in life, right?

In the world, we have inches and centimeters and miles and kilometers,

well on a computer screen, our unit of measurement is a pixel.

Each pixel is a little tiny dot that has a color on your screen.

This window has a width in pixels and a height in pixels, and in fact,

the ones that we are gonna work with in this tutorial are going to have

a width of 500 and a height of 400.

So if you think about it, if the width is 500 and this is the middle,

what would the middle pixel value be? 250.

I didn't really draw this terribly to scale, but if this were the middle,

what would the middle from 0-400 be? 200.

And in fact, we're going to need to plug these values into our rectangle function.

Now I need more space to write so I'm going to start writing rectangle down here again.

Rectangle, and now we're going to need parentheses.

Parentheses, and at the end, a semicolon.

Every line of code, every instruction that we write is going to end with a semicolon.

It's going to be the function name,

followed by parentheses with stuff in the middle that we'll see in a second, and a semicolon.

What goes in the middle? Well this is that stuff.

This is the parameters of the rectangle.

It's how wide is it, how high is it, and where is it x,y.

So by the way, the rectangle's coordinate is the top left of the rectangle.

It's x,y, which is at x = 250, y = 200.

250, 200.

So we are now adding these parameters to how we define a rectangle, with an x and a y,

and now let's give it a width.

Let's say the width of this rectangle is 150 and the height of this rectangle is 100.

So now we have an x, we have a y, and now we also have a width and we also have a height.

Whoa, big moment here!

This is a big moment in our computer programming lives

if you've never done computer programming before, this is your very first line of code.

We now have a function name, we have the arguments to that function,

where is that rectangle?

Where is its x, where is its y, what is its width, and what is its height?

As soon as we write this line of code and execute it,

we're going to see this rectangle on the screen.

OK, so now something really exciting is gonna happen, hopefully.

I'm gonna get much smaller, I'm suddenly in the corner of the window,

and below me, there's a code editor.

What's a code editor? A code editor is a place where you can type code.

It's just a text box; you can type and put stuff there.

What are you gonna put there? This.

This instruction.

You don't have to do the typing yet, you're gonna get your chance;

I'm actually gonna add that line of code for you there automatically.

Look, that line of code is there. Does it look the same?

rect (250, 200, 150, 100);

That's the line of code.

So now, where are we gonna see the results of that line of code? Right over here.

Right over here, that canvas is going to appear.

How big is that canvas going to be?

That canvas is going to be 500 pixels wide and 400 pixels high.

Notice, by the way, that there's nothing in the canvas right now,

but I'm going to add some rulers above and below.

Those rulers are going to show you where the pixels are,

so as you're trying to figure out where to draw stuff, those rulers will be helpful hints for you.

You can always toggle the rulers off with the toggle rulers button.

See? I toggled them off. See? I toggled them on.

Boy this is fun!

OK, now, uh, whoa, what do we gotta do?

OK, that code below? That rectangle?

It's time for us to run that code. I'm going to run it for you.

Do you see the rectangle there? That's the instruction, now you've got the rectangle.

We ran our first computer program; it's very exciting,

and now, now it's time for you to make a change.

To change the code and run your first computer program.

So try doing something like, just make the rectangle a little bit taller.

Instead of a height of 100, what if you give it a height of 200?

Change the number from 100 to 200.

Did you change that number?

Now look, I'm gonna add a button called "run this code,"

that button, if you press it, will execute the code that you've written.

Press that button. Do you see now that the rectangle is a little bit bigger?

Try making one more change.

Maybe move the rectangle to the left or right and run your code again.

You got it! Looks pretty good to me.

OK great, you know, you can always pause the video if you want more time to experiment.

So just pause the video, experiment, and hit play, and I'll keep talking.

You could also just pause the video if you wanted to stop listening to me talk;

that's quite OK with me.

OK, so this is really the fundamentals we've got here.

What I'm going to be asking you to do is make up your own design.

You can have more than one rectangle, right?

Below, I'm going to add 2 more rectangles.

Now there's 3 rectangles on the screen.

OK? So you can start to add them, put them in different places, but you know what?

You're probably going to feel quite limited to what kind of designs you can make

if all you could ever do is draw a rectangle,

so let's add one more shape to our set of shapes that we can draw.

The nice thing is we're just writing a new function, a new command,

and it's exactly the same thing as rectangle;

the only difference is we write the word ellipse,

and now we give the ellipse an x, the ellipse a y, the ellipse a width, and the ellipse a height.

With an ellipse, or at least a circle, when we think of a circle,

we think of a circle as having a diameter.

A diameter is the distance from one side of the circle to the other through the center.

So that's what a circle is.

But an ellipse can be something that's like a squashed circle that's very short,

or maybe very tall and thin, like this is an ellipse, or this is an ellipse.

And in these cases, we have a different height and a different width. Right?

The width and height, if they're equal, it's a circle, if they're different, it's an ellipse.

If you ever make these values equal, like if I say 200, 200,

and if I put this at the same location, 250, 200, we're going to get a circle.

Now where is that circle going to be?

When we drew our rectangle, we gave it an x, y location. 250, 200.

That's this point. This rectangle is drawn with that point being the corner of the rectangle.

A circle, an ellipse, is different. The x, y point we're defining is the center of that circle.

So here is our 200 pixel by, 200 pixel wide and 200 pixel tall circle.

It's right there. With the x, y at the center.

So our code editor now just has one rectangle.

It's that rectangle we drew below, and there it is in the canvas.

Let's add this line of code here, the ellipse. Let's put that ellipse there.

And I'm going to run it for you.

Look, there's the ellipse!

Now, notice something a bit strange here.

The ellipse is covering up the rectangle.

This brings up a very important point in terms of programming computer graphics.

The order that we write our lines of code is incredibly important, right?

Because if the rectangle is drawn first, the ellipse is drawn second, the ellipse is drawn on top of it.

Now, I'm going to swap those lines of code, I switch them, and run it again.

Notice now the rectangle is on top of the ellipse.

So how you choose to write the order of the shapes that you're drawing,

it's really an important point in creating your design.

Alright, I think we've really come to the end of this first tutorial,

and it's time now for you to do your first exercise.

I'm going to leave you with a code example that you can use to get started from.

So I'm filling in below a nice code example, you can see the design over here.

And what you should work on is try to make your own design.

You can make a self-portrait, or a creature or an alien.

Something friendly or scary, whatever you think.

You can design a building.

Any simple design that you can do with rectangles and ellipses.

You can use this example to build off of, or you can just erase it and start from scratch.

So take a little time to do this exercise.

When you're done, select that you're ready, and the next video will appear,

and we're gonna take the, in the next video, we're gonna do

what you're probably wondering about already, which is like,

"uh, can I make these red or blue or some color that I want?"

After you do your exercise we're going to introduce color.

So enjoy and I look forward to seeing you back, if you come back, for the next tutorial.

OK, bye bye.