All right, hi.

Why is the background pink?

That is the question that I would

like to answer in this video.

Color.

Color is the next thing.

If you watched the last video, you hopefully

made some beautiful, interesting-- or not

even that beautiful, but you made your own drawing.

And you're proud of it, I'm proud of you for making it.

Now you want to add color.

And you probably looked ahead to how to do it,

and started adding color anyway.

But if you didn't, I'm going to show you how to do that.

Now, before I do that, I do want to mention

some other kind of logistical things

that I've kind of forgotten to mention.

So, one thing is, whenever I create a sketch with the p5 web

editor, I'm going to put a link to that sketch in the video's

description.

So you could go down the video description and click on it.

And so, if you go to the link to the sketch,

you're actually going to go to a page that's

going to look just like this.

It's kind of the same code, if you hit play,

it's going to have the same output.

Now, you might not have the dark theme

with high contrast turned on, so your layout

might look a little different.

But ultimately, the code is going to be the same.

But you won't have a Save option because you're looking

at a project that's made--

that I made in my account, that I've shared with you.

So bear with me for a second, I'm going to be right back.

So, I'm back.

Now, this is another sketch that I've made for another course.

And I'm going to kind of get to all this stuff,

and how all this kind of stuff works.

But, even now, look at all this complicated code.

It kind of might make some sense to you, right?

Oh, line, you know about that.

Ellipse, you know about that.

Oh, what's this x and y?

This is all stuff going to get to.

But this is a sketch called Oscillation by natureofcode,

which is a different account.

So, I can edit this code, right?

I could say, like, line 100 and then, oh, it's

doing something slightly different,

I'm not sure what exactly.

But there's no save option, where's the Save option?

You're going to want to go to File Duplicate.

And m you're going to see that it says oscillation

copy by the codingtrain.

And I could rename this, and I could

say, oscillation demo for YouTube or something,

and I've renamed my sketch.

But this is how, when you go to a sketch that I've made,

you will come to a page that says, you know, color example

by codingtrain.

And you will, then, do File Duplicate

and start writing your own.

The truth of the matters is that the stuff that I'm doing

is so simple, you don't really need to duplicate my code

to keep doing it.

But that's an important piece, as I go through future videos.

I want to mentioned that at the outset of this video.

OK, I'm not going to worry about that, I'm going to go away.

Now, we're back here.

Color.

How does color work on the computer?

Yeah, I should have thought of this before I

started recording this video.

But I'm going to say it with three syllables, RBG.

Remember this, RGB, RGB.

R stands for red, g stands for green, b stands for blue.

The way that you create a digital color

is by mixing some amount of red, some amount of green,

and some amount of blue.

So that's that that's where I want to start.

But that's the concept, how do I apply that concept to function

names, and arguments of those functions?

Well, actually, guess what?

We have done that already.

In here, there is a function that is talking about color.

Background is a function that draws

a solid color over the entire background of the canvas.

And there is, somehow, 220 sprinkles

of red, zero sprinkles of green, right?

RGB, those are the arguments.

And 200 sprinkles of blue.

And when you sprinkle that amount of red,

and that amount of blue, you get this pink.

But let's just go with this.

What if we take out all of the blue?

You can see that's pretty red.

What if I take out all of the red?

Now it's black.

What if I just put some really big numbers in here,

like, just guess, like, 1,000?

Look at that.

Now we've got white, so all the colors all mixed

together make white.

That's weird, right?

Because if you, like, worked with paint,

and you were to mix, like, a whole lot of paint

together, you get this, like, brown muddy color,

get darker and darker.

This is the way that the color mixing is working, here.

It's, like, mixing light.

So the analogy, here, is I have a red flashlight,

a green flashlight, and a blue flashlight.

And if I shine all those flashlights together

in the same spot, they mix together.

It's additive color, the more we add up

all those colors, the brighter and brighter it gets.

But, actually, this is kind of wrong,

the fact that I'm putting 1,000 in here.

So the idea, here, is we're sprinkling

a certain amount of red, and a certain amount of green,

and a certain amount of blue.

And by the way, there are other ways to set color,

but I'll get to that.

This is not the only way, because some of you watching,

are like, I heard something about HSB color.

And there's all sorts of other ways to do it,

but this is the fundamental, basic way.

The amount that I can sprinkle has a range.

No red, none more red, is zero.

The maximum amount of red is 255.

By the way, how many numbers are there between 0 and 255

if you keep the 0?

0, 1, 2, 3, 4-- it's 256.

Again, we're back to this weird counting from zero thing.

So there's 256 possibilities, 0 through 255.

So, now, let's come back to this and see.

All right, let's go back to zero, 0, 0, 0.

Let's do 255, we can see that it's blue.

Let's do 100,000, it's the same blue.

So p5 is kind of smart enough to know

when you call the background function, if you

by accident put a number in there that's bigger than 255,

just consider it 255.

Now, you can customize those ranges for yourself,

and there's reasons why you might want to do that.

Again, I'm going to come back to that,

you can look up the function color mode for how to do that.

But let's just stay with the default, a red, a green,

and a blue.

So, I'm not really very talented visual design wise.

So I'm not going to talk to you about how

to pick beautiful colors that work well together.

You're going to have that talent yourself, I bet.

Or you might find some other resources.

But this is how it works, RGB.

One thing you might notice s, did

you notice how when they were all zero, it was black,

and they were all 255 it was white?

What happens if I make them all, like, 100?

It's, like, this gray color.

When r equals g equals b, when the red, green, and blue values

are all equal, this is something known as grayscale color.

Grayscale color is a color, saturation

is a term, its desaturated, it's a color but it's gray.

0 through 255, zero being black, 255 being white.

For shorthand, all of the color functions--

and there's more of them--

allow you to, if you want to do a grayscale function,

you can skip having more three.

And you could just use one.

So if you put one argument in the background function,

you're assuming a grayscale color.

Let's make note of this because there

are a lot of different ways.

So let's assume that there's some type of color function,

right?

Background being the one that we know right now.

If it has one argument, this is grayscale.

If it has three arguments, this is RGB.

And you can make a gray color with the RGB being equal,

but this is the way that you can call any color function.

Now what other color functions are there?

Let's go to the p 5 reference.

I don't know why I don't have that open anymore.

Let's look for color.

Oh, look at those, so many things, so many things,

setting, setting, oh.

So there's a lot of stuff about creating and reading color,

and a definite good to come back to that stuff.

This is really what we care about, setting color.

So now you want to make your new sketch.

Your next assignment is to use any and all of these.

Stroke, no Stroke, no Fill, Fill, maybe colorMode clear.

Background.

So, background we know about.

I clicked on it by accident, but that's nice,

we're looking at the reference.

But Fill and Stroke are the next concepts

that I want to talk about.

So what are the color functions--

don't use my fingers.

So color functions could be background, that's one.

Here's another one, Fill.

Here's another one, Stroke.

If this is our canvas and the shape we chose to draw is

an ellipse-- with the ellipse function--

Fill describes the interior of that shape.

Stroke describes the outline of that shape.

So let me show you what I mean by that.

If I come back to the editor, and I'm going to get

rid of the line.

And I'm just going to stay with just this rectangle, leave

background at 100.

What I want to do is, right before I draw the rectangle,

I'm going to say Fill, and I'm going to say, 0, 0, 255.

Look.

I should show you about the console on errors,

I can't believe I haven't shown you about that yet.

All right, look at this, it's blue.

The interior of that shape is blue.

Now, what's the outline?

It's black.

So by the way the default Fill in p5 is white.

And the default stroke outline is black.

But I could now say, stroke 0, 255, 0, and I'm

already driving myself crazy with my inconsistent white

space.

And we can zoom in and see the outline is now a green color.

So the interior, the Fill, is blue.

The outline is green.

What if I were to do another shape, like an ellipse,

and put that at, like, 50,50, 100, 75?

Oh, look, it's also green on the outside,

and blue on the inside.

What if I want that ellipse to be a different color?

What if I put, like, down here, Fill 0, 255, 0?

That didn't work.

Why didn't I work?

I'm saying Fill green that ellipse.

Well, order, order, remember order.

The ellipse, let's move the ellipse over,

you see how the ellipse is on top of the rectangle?

It's because it's drawn after it.

But you need to set the color of what you're about to draw.

Notice how Fill and Stroke are right before the rectangle.

Well, that's set to blue, that's set to green.