< Return to Video

Intro to Coloring

  • 0:03 - 0:04
    There are three steps
    you need to know about
  • 0:04 - 0:07
    to make your drawings
    splendiferously colorful.
  • 0:07 - 0:09
    Let's start by coloring
    the background.
  • 0:09 - 0:12
    To do that, just type background
    and open parentheses,
  • 0:12 - 0:14
    and the rest of the line
    will complete for you.
  • 0:14 - 0:17
    If you look closer, you'll notice that
    this is actually a function call.
  • 0:17 - 0:19
    See, we have the name
    of the function here,
  • 0:19 - 0:22
    which is background,
    then two parentheses,
  • 0:22 - 0:25
    and three parameters inside,
    separated by commas.
  • 0:25 - 0:30
    These three numbers represent
    the amount of red, green, and blue
  • 0:30 - 0:31
    in the background color.
  • 0:31 - 0:35
    The numbers can go anywhere
    between 0 and 255,
  • 0:35 - 0:37
    where 0 means
    there's none of that color,
  • 0:37 - 0:40
    and 255 means
    we're maxing out on that color.
  • 0:40 - 0:43
    Right now, I'm maxing out on red,
    and there's no green and blue.
  • 0:43 - 0:45
    That's why the background is
    a super bright red.
  • 0:45 - 0:48
    If I make the first number smaller,
    then there'll be less red,
  • 0:48 - 0:50
    so it will look like a darker red.
  • 0:50 - 0:51
    I can keep playing around
    with these numbers
  • 0:51 - 0:53
    and seeing what kind of colors
    I can come up with.
  • 0:53 - 0:56
    Or, I can use our handy dandy
    color picker,
  • 0:56 - 0:59
    which will set
    all three numbers for me.
  • 1:00 - 1:01
    Now it's important to know that
  • 1:01 - 1:03
    what this background function
    is really doing,
  • 1:03 - 1:06
    is just drawing a big colored square
    over the entire canvas.
  • 1:06 - 1:09
    If I moved it to the end
    of my program like this,
  • 1:09 - 1:10
    then it would draw that
    big background square
  • 1:10 - 1:12
    over all my shapes.
  • 1:12 - 1:14
    Maybe you're thinking,
    'that's stupid,
  • 1:14 - 1:15
    why would anybody want that?'
  • 1:15 - 1:17
    But hey, you never know.
  • 1:17 - 1:19
    We'll leave it at the top
    for now.
  • 1:19 - 1:21
    Now to color our shapes!
  • 1:21 - 1:22
    It might be helpful to think
    of the computer
  • 1:22 - 1:24
    as having a color assistant,
  • 1:24 - 1:27
    or some sort of color butler.
  • 1:27 - 1:29
    Basically some dude
    that's in charge of the colors.
  • 1:30 - 1:35
    This color dude can only hold
    one colored marker in his left hand,
  • 1:35 - 1:39
    and one bucket of paint
    in his right hand.
  • 1:39 - 1:43
    The computer uses the colored marker
    to draw all of these outlines,
  • 1:43 - 1:45
    and the bucket of paint
    to fill in the shapes.
  • 1:45 - 1:47
    Now, the marker is black,
    and the bucket of paint is white.
  • 1:47 - 1:49
    You can change the color
    of the marker
  • 1:49 - 1:52
    by calling this function, stroke.
  • 1:52 - 1:55
    It also autocompletes,
    and then you can pick a color.
  • 1:55 - 1:58
    This switches out the marker
    that color dude is holding,
  • 1:59 - 2:00
    so that all shapes drawn
    after this line
  • 2:00 - 2:02
    will be drawn
    with a pink marker.
  • 2:02 - 2:05
    Sometimes you don't want outlines
    on your shapes.
  • 2:05 - 2:07
    There's a function for that too!
  • 2:07 - 2:10
    It's called noStroke,
    and for the first time,
  • 2:10 - 2:13
    we see a function that doesn't take
    any parameters.
  • 2:13 - 2:17
    We just have this empty set
    of parentheses, and a semi-colon,
  • 2:17 - 2:19
    and now you can see our shapes
    have no outlines.
  • 2:20 - 2:22
    We can switch out
    the color dude's paint bucket
  • 2:22 - 2:25
    by calling this function, Fill.
  • 2:25 - 2:28
    Now, from this line of code forward,
  • 2:28 - 2:30
    you will fill in all the shapes
    with this bright red color.
  • 2:30 - 2:32
    Just like we have a noStroke function,
  • 2:32 - 2:37
    we also have a noFill function,
    which also takes no parameters.
  • 2:38 - 2:41
    This makes all of our shapes transparent
    - they're not filled in.
  • 2:42 - 2:44
    Now let's go ahead
    and actually color this dude.
  • 2:44 - 2:47
    We start off by drawing a triangle
    for his body.
  • 2:47 - 2:49
    I'm going to pick a stroke color for it,
  • 2:49 - 2:50
    set the outline,
  • 2:51 - 2:55
    I don't know...
    let's do a dark green.
  • 2:56 - 2:58
    Now we pick a fill color.
  • 2:59 - 3:02
    Hmm, what would be nice?
    Maybe a lighter green.
  • 3:02 - 3:04
    A lighter green.
    It's nice.
  • 3:05 - 3:08
    For his face, we don't want his face
    to have a green outline,
  • 3:08 - 3:10
    so I'll change stroke color for his face.
  • 3:13 - 3:18
    I'll pick a dark tan brown-ish outline.
  • 3:18 - 3:20
    Now I'll pick a different fill color.
  • 3:20 - 3:21
    Yikes!
  • 3:21 - 3:25
    What's a good face color? Hmm...
  • 3:25 - 3:29
    That's kind of a face color, right?
  • 3:30 - 3:33
    Now, the next two lines,
    these two ellipses, are his hands.
  • 3:33 - 3:36
    I want his hands to be
    the same color as his face.
  • 3:36 - 3:37
    So we're not going to
    switch out the marker
  • 3:37 - 3:39
    or paint bucket.
  • 3:39 - 3:41
    We're just going to leave stroke
    and fill the same,
  • 3:41 - 3:42
    and move on to his mouth.
  • 3:42 - 3:45
    His mouth is just this line,
  • 3:47 - 3:51
    and lines don't have fill colors
    because there's nothing to fill in.
  • 3:51 - 3:53
    But we can change the stroke color
    of this line.
  • 3:54 - 3:56
    Yeah, red's a pretty good color
    for his mouth.
  • 3:56 - 3:58
    Now, his glasses frames.
  • 3:58 - 4:00
    Once gain,
    we only need to set the stroke.
  • 4:00 - 4:02
    What's a good color for glasses?
  • 4:02 - 4:04
    Black is pretty classic.
  • 4:04 - 4:08
    For his glasses lenses,
  • 4:08 - 4:11
    I want the rectangles to have
    the same outline as his frame.
  • 4:11 - 4:15
    I'm not going to change the stroke,
    but I will give it a fill color.
  • 4:17 - 4:20
    Let's make it black
    to match the frames.
  • 4:20 - 4:22
    There we go,
    our dude is colored!
  • 4:22 - 4:26
    Awwwwww, yeah!
Title:
Intro to Coloring
Description:

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/

more » « less
Video Language:
English
Duration:
04:27
Daniel Hollas edited English subtitles for Intro to Coloring
April Porter edited English subtitles for Intro to Coloring
Melanie Ty edited English subtitles for Intro to Coloring
Melanie Ty edited English subtitles for Intro to Coloring
Melanie Ty edited English subtitles for Intro to Coloring
Melanie Ty edited English subtitles for Intro to Coloring
pamela-from-khan edited English subtitles for Intro to Coloring

English subtitles

Revisions