Intro to Coloring (Video Version)

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 typebackgroundand(, 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 isbackground,
then( ), 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 has white paint. 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 callednoStroke,
and for the first time, we see a function that doesn’t take
any parameters. We just have this empty set
of( ), and;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 anoStrokefunction, we also have anoFillfunction,
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 astrokecolor 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 changestrokecolor for his face. I’ll pick a dark tan brown-ish outline. Now I’ll pick a differentfillcolor. 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 leavestroke
andfillthe same, and move on to his mouth. His mouth is just this line, and lines don’t havefillcolors
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 thestroke. 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 thestroke,
but I will give it afillcolor. Let’s make it black
to match the frames. There we go,
our dude is colored! Awwwwww, yeah!


  1. Daniel Carvalho August 5, 2014 at 3:37 pm

    Good video, thanks.

  2. iPodBuff January 31, 2015 at 5:36 am

    Aww Yeah!!! 

  3. Star Foxx November 8, 2015 at 8:34 am

    the problem is i cannot watch the talkthroughs without it say to up load flash player

  4. Travel millionaire July 9, 2017 at 3:44 pm

    wher to do program

  5. Jan Coldwater January 6, 2018 at 11:22 am

    Do all programmers sound like they have had 3 pots of coffee? My brain operates on MORNING MODE when it comes to listening ppl speak. LOL

  6. Hayley Gibbs January 21, 2019 at 6:23 pm

    I don't remember this being on Khan Academy

Leave a Comment

Your email address will not be published. Required fields are marked *