1.2 p5.js: Color

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.