This next video - hi, by the way - is about color.
So like the previous video that I just made, I looked at shapes,
drawing shapes into a canvas, using beginner steps with p5js.
Maybe you made something just with shapes,
the natural next step is to make stuff have some color.
so maybe you had a canvas, perhaps with a rectangle on it,
maybe it has an ellipse on it,
maybe it has some lines on it,
perhaps you came up with something much more interesting design
than this.
And now we have to ask the question: How do I, everything was just black lines
and white interiors.
So how do I color these shapes?
So, to draw these shapes we learned a bunch of commands,
but really the word we should be using is 'functions'!
I showed you a bunch of functions: rect(), ellipse(), line().
These are three functions: rect() draws a rectangle,
ellipse() draws an ellipse,
line() draws a line.
These are for drawing.
Now for color there are also functions.
And I think there are three relevant ones that I want
to look at in this video.
background(),
stroke(),
and fill().
The background function will set a color for the background,
the entire canvas ... what is the color that is in the background
of the canvas? Although the word 'background' is a little bit of a misnomer here
even though I'm going to use it to set the background,
the order of when we call these functions is quite crucial!
And I will show you that as well.
stroke() is the function that sets the color for the outline of a shape.
So what is the color of the pixels of a line?
What is the color of the outline of a rectangle?
And fill() sets the color of the interior of a shape.
So let's say the code for this is: rect, something or other,
ellipse, something or other,
line, something or other.
So now we need to figure out, if I want to set the stroke or
the fill for this rectangle, where do I write these functions?
Where do I execute these commands?
If I want to set the fill or the stroke for the circle (the ellipse),
where do I write these commands?
And now, order of operations has always been important but it is particularly
important now. When you call these functions
it's like setting the color of a pen.
So before I draw the rectangle I need to set the color of my pen
to red or blue etc.
So if I wanna set the stroke or fill of this rectangle
I need to write these function calls before I execute the function rectangle.
And then if the next thing I do is ellipse()
it will also use that same stroke and fill
and line() will also use that same stroke,
not the fill!, because there is no fill for a line.
So if I want to then change the color, to have a different color
for the ellipse then I just need to add another call
to stroke() and fill() . After I draw that rectangle,
I need to set new 'pen colors' for that ellipse.
So this is part 1.
Part 1 is I need to put these things in some proper order.
Part 2 is 'what do I put inside here?'
What do I put inside these functions?
stroke(), fill(), background(), etc?
That's a very good question!
I wish I had time to answer that question.
I do. I have to answer it.
Ok, so let's erase all of this for a moment,
and let's think about color.
Now there's a lot of ways to describe color, in the world.
I could get some paint, which would just say the word 'red' on the can,
that would mean that there's red there,
but we need a mechanism, a methodology,
we need a system for defining color
in p5.js, and we're going to use [unintelligible]
And a basic way that I'm going to look at it with you is RGB color.
Meaning: a color is a combination of an amount of red,
an amount of green and and amount of blue.
So, for example:
if I say stroke(255,0,0);
what does that mean?
Well, stroke() can accept 3 arguments,
the first one being the amount of red,
the second one being the amount of green,
and the third one being the amount of blue.
So you can now sort of guess ... there's clearly
no green and blue because I've set their value to 0.
However there is some amount of red.
255? Does that mean like a little bit of red? A lot of red?
It turns out it means the maximum amount of red!
So the range for these arguments
is between 0 and 255.
Meaning there are 256 possibilities.
And I'm spending a minute to mention [ramble]
this because this way of counting will come up again and again in programming!
Let's say I said: the range is between 0 and 9,
how many possibilities are there?
There's 10, right?
I'm just gonna take a moment to prove this to myself:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9.
Woah!
Right, I counted to 10!
This is confusing. See? I got to 9 but there are 10.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9.
Boy, I really have turned into a crazy person,
counting on my fingers in a room by myself,
with cameras pointing at me!
So this is the range. Why does it have this range?
It has to do with the way that information is stored
in the computer's memory, and bits and binary numbers,
and all that stuff, and I would love,
no, actually wouldn't love, but I could talk about that more.
But you can find another video, or maybe I make another video,
or send me an e-mail or something,
we'll find a way to talk about it more.
Right now it's easiest for us to just think of: this is the range!
And you can change that range too,
there's a function in p5 that allows you to adjust that range
but for now, let's keep that range!
0 to 255.
So, by the way, fill() will also take RGB with a range of 0-255.
background() will also take the same range, RGB.
So let's go look at that now!
Ok, I have preceded here a little program
that's drawing this little alien creature
and what I would like to do is to take a moment
to add some color.
And this is an excuse to look at a couple of other things.
Number 1 is: you can add comments into your program.
The way that you add comments is with a slash, slash //
If you add // to a line of code the computer will completely ignore that line of code!
Meaning it's not executed, so you can put whatever you want.
You could write little notes to yourself, or little secret notes to a friend
who's looking at your code later, whatever you like to do.
But here you can see a typical use.
Well, this rectangle is the body of this,
this ellipse is the head,
these two ellipses are the eyes,
and these two lines are the legs.
So this is a useful thing to get a habit of this now,
if you can get yourself to do it it will make things easier later.
So, for example, if I just add fill(255,0,0); and I hit play,
you can see: everything is all red,
all the shapes have now a fill of red.
But if I come down here and say: fill(0,255,0);
and look what I have done ...
no red, all green, no blue.
And now you can see the eyes have a fill of green.
Now does anything come after the eyes?
Just the legs. And the legs don't have a fill,
so green only affected the eyes.
And I could say here: fill(0,0,255); and I could hit 'run' again
and we see now that the body is red, the eyes are green and the head is blue.
Now interestingly,
this order of operation is really important!
Notice how the head is drawn after the body.
Let's just vary briefly, move the head
above the body,
and you can see what's going on here:
that rectangle is covering that ellipse.
So p5 is going to draw the shapes, layer them in the order
of the sequence of the code in draw().
So that's a key piece!
Just in the way that this design works
is the head has got to come after the body,
so that it covers up that top portion of the rectangle.
And the same is true in terms of fill() and stroke().
If I take this red fill and put it after the body,
the body is no longer red,
because I called fill() after rect().
So that red fill has to go before rect()!
That's kind of a crucial piece of information as well.
The other thing
we should notice here
is that I have background() here.
Now let's make background() some ...
so, first of all, you can combine, you don't just have to do
all red, and no green and no blue.
[ramble]
You can obviously combine colors,
you put red and green together,
and you get something,
like ... let's put a little red, a little green and no blue,
you can see you get a different kind of green.
Let's put a lot more red ...
you get kind of a yellowish, greenish thing ...
So you can see that you can start playing around
with different amounts of red and green.
But notice how that background() there
background, you think like, it's drawing the background,
so whenever I call background() with a color it should put
everything behind, but all background() is doing
is actually filling the entire canvas with a color.
So if I were to take background() and put it at the very end
of draw() ... you can see background() is now called after all the code
I won't see anything at all!
All those things were drawn, but when we get to the end of draw()
to see the results, background() has covered everything!
So this is another reason why the order of operations is important.
And I'm mostly finished now but I want to mention two other things about color!
So let's look at something: in background(), let's say
I put 50, 50,50.
What did I get?
I got this kind of dark grey.
Let's make it: 150,150,150.
I got this light grey.
So one thing you'll notice:
if the red value equals the green value equals the blue value
you get a greyscale color.
All 0 being all black, all 255 being all white.
Why is this?
So the reason why this is, is that color here works the same way
color works with light.
If you take a bright red flashlight, and a bright green flashlight
and a bright blue flashlight, you shine em all together,
you add all the colors together, adding up colors,
you get things brighter and brighter, you'll get white.
No color, the absence of color, is black.
So greyscale color is something you might want to use kind of often
and it's inconvenient to write 150,150,150
so one of the things that you can do is also call all these functions
background(), stroke() and fill() with only a single argument!
If you use a single argument you get the greyscale color.
So that's an important thing.
The other thing I should mention,
kind of briefly,
but we'll have to dive in a little more,
these functions,
we looked at how these functions always take 3 arguments,
and now we saw how they could take one argument.
There's another possibility!
They can also take 4 arguments.
And that last argument is transparency.
Sometimes referred to as 'alpha'.
Transparency.
All the colors have been fully opaque,
so when you put a shape on top of another shape
it completely blocks out the other shape.
But if you want to create the illusion of it being see-through,
you can add a 4th argument:
0 being completely see-through, you can't even see the color at all!,
255 being 100% opaque, that's what we've been doing already.
So let's look at that very briefly.
I think a nice play to see that would be with the head,
let's see what we got here ...
So remember how that head was covering up this rectangle
What if I add a 4th argument to the fill and I say like 100?
You can see now that that head is now transparent.
So it has its own fill but you can see what's behind it.
There's obviously a ton of stuff that you could do with,
colors, and combining, and shapes, in a million
different ways. Hopefully this gives you
a basic start and what I would say is if you were working on a design
that you have done after watching a previous video,
now try to add some color with it!
And again, just to mention, what I would recommend you do ...
is go to p5js, go to 'reference',
go to 'color'
and you can see here are the functions
that you might want to take a look at.
fill(), stroke(), background(), by the way,
noFill(), if you want to have no color for the interior of your shape,
noStroke() if you don't want to have an outline,
colorMode(), that's that function I was kind of mentioning you could
change the range, if you don't wanna have your colors between 0 and 255,
you wanna go between 0 and 100,
there's also other ways of thinking about color,
you can dive into that a bit yourself
but again, the nice thing about working with p5 is you can go
here and you can just hit 'edit'
and you can play around and say: ok, this is greyscale,
and I'm gonna change it to RGB,
and run it,
and see what I get ...
but you can see there is lots of different ways you can do color
actually in p5 and I barely just scratched the surface of it!
Ok, but this has got to be the end of this video!
15 minutes long, which is a very long time,
in the Internet world,
and I'm gonna eat some lunch now before I fall over!
Ok, have a good rest of your day!
And I'll be back for more later.