[BELL RINGING]
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.
The ellipse is still picking up that Fill and Stroke.
It's like you're saying hey, computer thing that's drawing
the stuff, pick up this pen.
And I told it to pick up this green pen for the interior.
I meant to make it red, but I told it after it already
drew the ellipse.
So let's make this red, because that's
what I wanted to demonstrate.
But if I go, and I take this, and I put it
before it, suddenly, it's red.
So, look at that.
So I kind of want to group things.
The idea here is I can make a stroke that's like, 255,
so that's just using grayscale color.
So you can see, like, oh, the interior here is blue,
the outline is green, the interior is red,
the outline is white.
There we go.
You probably have a lot of questions,
ask them in the comments.
There's a few more things I need to cover in this video.
Why-- why, why, why--
when we looked over here in the reference,
is there a no Fill and no Stroke?
And by the way, I encourage you to go and look
at these reference pages, and read them.
Because you'll find the things that I'm explaining to you
are explained there, and probably more clearly.
And it also has examples.
Why is there no Fill and no Stroke?
Well, you might think to yourself, oh,
what if I don't want this circle to have an outline?
No outline of that circle, please.
Oh, I'll just put zero in here, right?
Zero must be like, no outline.
But, remember, zero is not no outline,
zero is an outline that is black.
And this is why, instead of Stroke,
if I say no Stroke, then, suddenly, there is no outline.
So no Stroke means no outline.
And I could say, also, instead of Fill, no Fill means no Fill.
Look at that.
So I'm just seeing the background color come through,
because I'm only drawing the outline of that shape.
Now I'm going to go back and put the Fill in.
And I realized there's a few other things
I want to talk about.
OK, so remember I said there were lots of ways?
Guess what?
There is another way.
I could have--
1, 2, 3, 4--
I could have four.
So RGB is not the whole picture, there is also RGBA.
And a stands for something called alpha.
Alpha is a word for transparency.
Meaning, is the color see-through?
What does that even mean right?
Transparency.
So by the way, the same range, right?
0 to 255, for the a.
255 is the default, meaning, that color is just all there.
Another word, by the way, is opacity.
So this idea of kind of making the color a little bit
transparent, so it's a blend with what's behind it.
Now, of course, this is all about just
creating the illusion of that.
There is no blending of the colors, nobody
painting your computer screen.
It's just a single pixel with a certain color.
But p5 knows that if you wanted to appear transparent,
it knows what colors behind it, and it
can figure out how to make that illusion happen.
So for example, if we come over here, for this ellipse, right?
This ellipse that's red, if I were to say comma 255 here,
nothing has changed.
I'm adding that alpha value.
If I put zero, there it's gone.
It's fully transparent, I can't see it at all.
If I make this 100, look at that,
you can see how it sort of looks light,
and it's blending with the background, and blending there.
So maybe I want to just give it a little bit more--
175-- and you can start to see that there.
So this is something you can play with, transparency.
So just to finish this whole thing off,
I can have one argument for anything.
Background, Fill, and Stroke is a grayscale color, 0 to 255.
Three Arguments is an RGB color with 100 percent opacity.
It is fully opaque, it is not at all transparent.
If I add the fourth argument, I get an RGB color
with some amount of transparency.
And by the way, if I just use two numbers,
then I'm having grayscale with some alpha.
So it's a grayscale value with some alpha.
So that's important to know as well.
So those are all of the options.
Now, what is your assignment?
If you're watching this and you're going to make something,
take your drawing and give it color.
Fill it with color, set the background,
set the Fill and Stroke of different shapes.
I'll give you one more little treat, here.
If I add a function called Stroke Weight,
this is a function that's not setting the color.
But you know how I'm trying to show you
that the outline of this is like, red?
I can't even see it, that's weird.
Let me make it blue.
Oh, you know why?
Because I put this.
Oh, I have so much more to show you.
That the outline is blue, but I have to, like, zoom all the way
in to show it to you.
What if I add this thing called Stroke weight?
And I just put the number one in there.
What that number one means is the outline
of a shape is one pixel wide.
It's a thin, one pixel wide outline.
I could make that eight, and suddenly, it's much thicker.
And, you know, I can zoom in just to show this to you.
I could be sort of insane and make this like, 24 or 105.
You know, it's only, like, the stroke is, like, wider
than the actual shape, itself.
But the point is just to be able to-- if you want to adjust
the width of that outline--
that's something you can do with the Stroke Weight function.
Thanks.
So, what I want to do is show you something
about code comments and errors.
This is really important, I've kind of
been skipping over that.
I'm going to do that, I'm going to make a video really
about that, separately, with the p5.js web editor.
And that will be coming next, OK?
So, you probably I watched it before you do your project,
or afterwards, whatever.
But that's going to help you a little bit.
Just kind of keeping things organized and managed, OK?
So I'll see you soon.
[BELL RINGING]
[MUSIC PLAYING]