Intro to Coloring

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

There are three steps
you need to know about

to make your drawings
splendiferously colorful.

Let's start by coloring
the background.

To do that, just type background
and open parentheses,

and the rest of the line
will complete for you.

If you look closer, you'll notice that
this is actually a function call.

See, we have the name
of the function here,

which is background,
then two parentheses,

and three parameters inside,
separated by commas.

These three numbers represent
the amount of red, green, and blue

in the background color.

The numbers can go anywhere
between 0 and 255,

where 0 means
there's none of that color,

and 255 means
we're maxing out on that color.

Right now, I'm maxing out on red,
and there's no green and blue.

That's why the background is
a super bright red.

If I make the first number smaller,
then there'll be less red,

so it will look like a darker red.

I can keep playing around
with these numbers

and seeing what kind of colors
I can come up with.

Or, I can use our handy dandy
color picker,

which will set
all three numbers for me.

Now it's important to know that

what this background function
is really doing,

is just drawing a big colored square
over the entire canvas.

If I moved it to the end
of my program like this,

then it would draw that
big background square

over all my shapes.

Maybe you're thinking,
'that's stupid,

why would anybody want that?'

But hey, you never know.

We'll leave it at the top
for now.

Now to color our shapes!

It might be helpful to think
of the computer

as having a color assistant,

or some sort of color butler.

Basically some dude
that's in charge of the colors.

This color dude can only hold
one colored marker in his left hand,

and one bucket of paint
in his right hand.

The computer uses the colored marker
to draw all of these outlines,

and the bucket of paint
to fill in the shapes.

Now, the marker is black,
and the bucket of paint is white.

You can change the color
of the marker

by calling this function, stroke.

It also autocompletes,
and then you can pick a color.

This switches out the marker
that color dude is holding,

so that all shapes drawn
after this line

will be drawn
with a pink marker.

Sometimes you don't want outlines
on your shapes.

There's a function for that too!

It's called noStroke,
and for the first time,

we see a function that doesn't take
any parameters.

We just have this empty set
of parentheses, and a semi-colon,

and now you can see our shapes
have no outlines.

We can switch out
the color dude's paint bucket

by calling this function, Fill.

Now, from this line of code forward,

you will fill in all the shapes
with this bright red color.

Just like we have a noStroke function,

we also have a noFill function,
which also takes no parameters.

This makes all of our shapes transparent
- they're not filled in.

Now let's go ahead
and actually color this dude.

We start off by drawing a triangle
for his body.

I'm going to pick a stroke color for it,

set the outline,

I don't know...
let's do a dark green.

Now we pick a fill color.

Hmm, what would be nice?
Maybe a lighter green.

A lighter green.
It's nice.

For his face, we don't want his face
to have a green outline,

so I'll change stroke color for his face.

I'll pick a dark tan brown-ish outline.

Now I'll pick a different fill color.

Yikes!

What's a good face color? Hmm...

That's kind of a face color, right?

Now, the next two lines,
these two ellipses, are his hands.

I want his hands to be
the same color as his face.

So we're not going to
switch out the marker

or paint bucket.

We're just going to leave stroke
and fill the same,

and move on to his mouth.

His mouth is just this line,

and lines don't have fill colors
because there's nothing to fill in.

But we can change the stroke color
of this line.

Yeah, red's a pretty good color
for his mouth.

Now, his glasses frames.

Once gain,
we only need to set the stroke.

What's a good color for glasses?

Black is pretty classic.

For his glasses lenses,

I want the rectangles to have
the same outline as his frame.

I'm not going to change the stroke,
but I will give it a fill color.

Let's make it black
to match the frames.

There we go,
our dude is colored!

Awwwwww, yeah!