Placeholder Image

字幕列表 影片播放

  • [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.