3. COLOR

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/

Hi! Welcome back! You came back, which I'm very thankful for — thank you very much.

So, hopefully you enjoyed the last exercise you did, and your code is still sitting down there.

Now, by the way, during this section of the tutorial, I am going to start doing stuff,

and the code that you wrote is going to disappear.

But don't worry; there's going to be an option for you to restore it again later.

OK, so what are we missing? We've got shapes: we've got circles, we've got rectangles.

But obviously we're missing something really important in terms of art and design.

We're missing color.

So let's think about that rectangle again.

We have this rectangle.

We have this circle.

What do these shapes have? They have both an outline, which is tracing this rectangle,

which we're going to call — sorry — the "stroke." We also have the interior of the shape,

the interior of the shape which we're going to call the "fill."

So we have two colors that we have to set for every shape.

We have the stroke, which is the outline, and we have the fill, which is the interior.

And just like we learnd these function calls, these commands —

"rect" for rectangle, "ellipse" for ellipse — we're going to have functions for stroke and fill.

So it's going to look like this.

Let's say we're drawing a rectangle, and that rectangle is being drawn at some location.

Uh, I think this is something we had previously.

What we need to do now, before we say "rectangle" is we need to say "stroke" and we need to say "fill."

Every single time that we draw a shape, if we want to color it,

we need to set the stroke and fill before we call that shape function.

This is, again, a moment when order of operations matter.

We don't say, "draw a rectangle — hey it's blue, and it's red on the outside."

We say, "set a pen color..." (in a way it's like a pen)....

"Go and find my red pen and go and find my blue marker.

You use the red pen for the outside and the blue marker for the inside" when I draw that rectangle.

But there's a big question here, right? We know that when we draw a rectangle we give it an x, a y,

a width, and height: those are the values that define what it is to be a rectangle.

What values do we give a stroke or a fill? How do we tie numbers to color?

Let's say we have the number 0, and we say the number 0 means black.

And let's say we have the number 255, and the number 255 means white.

So any value in between, any value in between is some gray.

127 would be, like, half the way between white and black.

253 would be really white, but not all the way white.

Right? So can really imagine this and obviously just trying out these numbers would make much more sense.

So we could say something like "stroke (0)" and we would have a black outline.

Let's actually bring up the code editor below,

and let's add a stroke (0) and a fill for one of our shapes down there, for the rectangle below.

OK, see how the stroke and fill are placed before we call rect, and that they are setting the colors that you're seeing in the canvas on the left.

Great.

So, I want to move on quickly though, however, to … even though this is nice,

and we can see that we can do grayscale colors, really,

what you probably want to do is make all sorts of … you know, what's your favorite color?

Pink? Purple? Green? Blue? You want to make "color" color, how do we do that?

So, with one number — if we put one number here in stroke, we have a grayscale color,

but if we put three numbers in, like if I put numbers like this (255, 0, 0),

what we now have done is we've created an RGB color.

RGB: we have a little bit of red, we have some amount of green, and we have some amount of blue.

The arguments are red, green, and blue.

And it has the same … it follows the same scale as grayscale.

In the case of red, 255 is all the red you could imagine; 0 is no red.

So it's like mixing colors.

I mean, it's something you might have done, um, you know, fingerpainting, or mixing colors,

and you get a little red, you get a little blue, and you put them together,

and I think maybe you get purple, something like that.

Um, this same principle is happening here.

You're adding a variable amount of red, a variable amount of blue and mixing colors.

The thing that you should realize, though, is it's not like mixing paints,

that what color actually does on the computer is really like mixing light.

It's more like imagining that you had three flashlights — a red flashlight, a green flashlight,

and a blue flashlight — and you could turn them up or down and shine them on the same point.

So let's switch over again and open up the code editor below, and let's add a stroke and a fill.

The stroke and the fill are still there from rectangle.

Let's make the stroke red, which would be all red, (255, 0, 0),

and let's make a fill that's all blue, (0, 0, 255).

Let's run that, and now we see a red outline with a blue interior.

You probably want lots of other colors, and it might be hard to figure out what color do I want?

Well, if you notice, if you click on fill, and I'm going to do this for you, a wheel (a color picker)

pops up where you could move the mouse around and you can select the color you want,

and it shows you what are the red, what are the green, and what are the blue values for that color.

So, you can type in your values manually or you can use the color picker to set values.

We know now how to set the outline or the fill, the stroke or the fill of these shapes.

But remember, there is this canvas that we're drawing into.

But what if you want, actually, to fill in a color in the background?

So there is one more function that we are going to learn as part of this little tutorial,

which is "background ()".

So, I'm going to add that now to the code editor below, background (),

and I'm going to put a color in there that's a nice, soft yellow.

And then now we're going to run it.

We're going to see that yellow is the background.

So, why don't you take a minute, actually.

Try the color picker on the background, and pick a different color.

You're going to have to press "run your code" when you're ready.

Did the color you picked appear in the background? Hopefully it did.

OK, so this really wraps up the end of this section about color.

You know, what did we first do? We first learned we could put rectangles and ellipses of any size

anywhere on the screen.

Now we can assign any of them different strokes, different fills, and we can put a background color.

I'm going to put below an example for you to start with.

It's a nice design that has a bunch of shapes and a bunch of colors in it.

You can use this, tweak it to make your own design, or — you'll also see when this video ends —

there will be an option for you to revert back to your previous code that you had at the end of lesson 1.

So if you want to go find that creature or alien you made and start adding color to it,

that's what you could do for this exercise.

I'll talk to you later, and enjoy this exercise.