< Return to Video

Intro to Animation (Video Version)

  • 0:00 - 0:03
    There are lots of ways
    to make something look animated,
  • 0:03 - 0:05
    but the basic principle
    is always the same.
  • 0:05 - 0:07
    If you take a bunch
    of drawings or pictures
  • 0:07 - 0:10
    where each one is just
    a little different from the last one,
  • 0:10 - 0:11
    and flip through them fast enough,
  • 0:11 - 0:13
    it'll look like your picture is moving.
  • 0:13 - 0:15
    Back in the good old days,
  • 0:15 - 0:17
    they used to draw
    all these pictures by hand
  • 0:17 - 0:20
    and it would take so long just to make
    a three-second animation.
  • 0:20 - 0:23
    Luckily for us, we live in the future.
  • 0:23 - 0:26
    It's actually really easy to make
    a simple animation with code.
  • 0:26 - 0:28
    And I will show you how!
  • 0:28 - 0:30
    Over on the right, you can see
    there is a cute little car
  • 0:30 - 0:32
    on a lovely yellow background.
  • 0:32 - 0:35
    And yes, yes I did design
    that car myself, thanks.
  • 0:35 - 0:36
    Anyways, over here
  • 0:36 - 0:39
    you can see we are setting
    this beautiful background color.
  • 0:39 - 0:43
    And the car doesn't have any outlines,
    so we're calling this noStroke() function.
  • 0:43 - 0:46
    And then here we're making
    a new variable, x, the position of the car
  • 0:46 - 0:47
    and giving it a value of 10.
  • 0:47 - 0:49
    And you can see
    that if we change this value,
  • 0:49 - 0:52
    then it moves the car back and forth.
  • 0:52 - 0:53
    Bring him up to 10.
  • 0:53 - 0:56
    And then over here we're setting
    the fill color of the car
  • 0:56 - 0:58
    and drawing two rectangles
    for the car body.
  • 0:58 - 1:01
    So, it looks like this first rectangle
    is for the bottom
  • 1:01 - 1:02
    and this rectangle is for the top.
  • 1:02 - 1:05
    And then here we're doing
    the same thing with the wheels.
  • 1:05 - 1:07
    We set the fill color
    and draw two ellipses:
  • 1:07 - 1:09
    One at "x + 25"
  • 1:09 - 1:10
    and "x + 75".
  • 1:10 - 1:13
    And finally we get to the new stuff.
  • 1:13 - 1:15
    This thing here is called
    a function definition.
  • 1:15 - 1:17
    You'll learn all about those later,
  • 1:17 - 1:20
    so for now, kinda just look at it
    and memorize what it looks like.
  • 1:20 - 1:24
    The important things to notice are
    this word "draw" and these brackets.
  • 1:24 - 1:27
    This opening bracket here
    and this closing bracket here.
  • 1:27 - 1:30
    This whole thing is what we call
    the draw loop, or the animation loop.
  • 1:30 - 1:33
    And everything that you put
    inside these brackets
  • 1:33 - 1:35
    gets run over and over again
    really, really fast.
  • 1:35 - 1:37
    That's why it's called a loop.
  • 1:37 - 1:39
    And then everything outside these brackets
  • 1:39 - 1:42
    gets run only once
    at the very beginning of the program.
  • 1:42 - 1:45
    So the first step in animating is to move
    all your drawing code into the brackets
  • 1:45 - 1:48
    so that your picture
    will get drawn over and over.
  • 1:48 - 1:49
    So let's do that.
  • 1:49 - 1:51
    I'm just going to pull
    all this drawing code
  • 1:51 - 1:54
    and then plop it down inside my loop.
  • 1:54 - 1:58
    And to remind myself that this
    block of code goes inside these brackets,
  • 1:58 - 2:02
    I'm just going to indent it all
    by selecting everything and pressing Tab.
  • 2:02 - 2:05
    And now I know that this code
    is inside the brackets.
  • 2:06 - 2:09
    So as you can tell,
    everything just looks totally the same;
  • 2:09 - 2:10
    nothing has changed.
  • 2:10 - 2:12
    Because the first time
    we run this draw loop,
  • 2:12 - 2:13
    the computer's going to go,
  • 2:13 - 2:17
    "Okay, make a new variable x,
    set it to 10, draw two rectangles,
  • 2:17 - 2:18
    draw two ellipses."
  • 2:18 - 2:20
    And then it's going to go
    all the way back to the top and say,
  • 2:20 - 2:24
    "Make a new variable x, set it to 10,
    draw two rectangles, draw two ellipses."
  • 2:24 - 2:27
    And then, "Make a new variable x,
    set it to 10, draw two rec--"
  • 2:27 - 2:28
    same exact thing.
  • 2:28 - 2:31
    Nothing has changed, so duh,
    you're not going to see any animation.
  • 2:31 - 2:35
    It's just drawing the same rectangles
    and ellipses on top of the old ones.
  • 2:35 - 2:38
    Remember what we said: if we want
    to make something look animated,
  • 2:38 - 2:40
    you need to change your drawing
    a little bit at a time.
  • 2:40 - 2:43
    So if I want my car to move forward,
  • 2:43 - 2:45
    I should change the value
    of this x variable, right?
  • 2:45 - 2:48
    So yeah, let's just make it...11.
  • 2:48 - 2:51
    Ah!! No!! But now it's just going
    to be 11 every single time.
  • 2:51 - 2:54
    How the heck am I supposed to get
    the value of x to keep changing
  • 2:54 - 2:57
    when the computer just runs
    the same code over and over?
  • 2:57 - 3:00
    Okay, watch this magic trick.
  • 3:00 - 3:02
    Remember, this var x
    makes a new variable.
  • 3:02 - 3:05
    When we have it inside
    the draw loop like this,
  • 3:05 - 3:08
    it makes a new variable
    called "x" every single time.
  • 3:08 - 3:11
    What we need to do is make
    this variable outside the draw loop.
  • 3:11 - 3:13
    That way it will only make it once.
  • 3:13 - 3:17
    And then, every time the computer
    runs this code and sees the variable x,
  • 3:17 - 3:22
    it'll reuse the same variable from before
    using the last value we assigned to it.
  • 3:22 - 3:25
    So I'm just gonna do that;
    I'm gonna take this variable
  • 3:25 - 3:27
    and we're gonna make it
    outside of the draw loop.
  • 3:27 - 3:30
    So right now it's only making
    that variable once.
  • 3:31 - 3:33
    And every time it runs into
    this variable x
  • 3:33 - 3:35
    it's gonna reuse the same variable.
  • 3:35 - 3:38
    And right now the last value
    we assigned to it was 11,
  • 3:38 - 3:39
    so it's always gonna be 11.
  • 3:39 - 3:41
    And here's where the magic comes in.
  • 3:41 - 3:44
    Somewhere in the draw loop,
    we're gonna change the value of x
  • 3:44 - 3:47
    to be a little more
    than it used to be, like this:
  • 3:47 - 3:52
    x gets the old value of x
    plus, let's say, 1.
  • 3:53 - 3:54
    Yay! It works!
  • 3:55 - 3:57
    Except, it's so smeary.
  • 3:57 - 3:59
    And if you're wondering
    why it looks that way,
  • 3:59 - 4:02
    it's because we forgot to draw
    this background inside the draw loop.
  • 4:02 - 4:04
    So it's drawing the car
    over and over again,
  • 4:04 - 4:07
    but you can see all the old cars
    underneath the new one.
  • 4:07 - 4:12
    So if I just pull this line
    into the top of the draw loop, like that,
  • 4:12 - 4:16
    and then press "Restart"
    so I can see my car again...
  • 4:16 - 4:18
    Yay! It's so perfect!
  • 4:18 - 4:20
    And if we wanna make the car go faster,
  • 4:20 - 4:23
    we can just change how much
    we increase x by every time.
  • 4:23 - 4:25
    So if we make it 10, whoo!
    It's off the screen!
  • 4:25 - 4:29
    And I can even make it negative,
    so x - 10 and...
  • 4:29 - 4:30
    Here it comes!
  • 4:30 - 4:32
    Make it positive again,
    whoops...
  • 4:33 - 4:35
    There it goes.
  • 4:35 - 4:37
    So here are the important things
    to remember:
  • 4:37 - 4:39
    This thing right here
    is called the draw loop.
  • 4:39 - 4:41
    You should put
    your drawing code inside here
  • 4:41 - 4:43
    so it'll get drawn over and over again.
  • 4:43 - 4:46
    And then, you wanna make
    a variable outside your draw loop.
  • 4:46 - 4:49
    It's super important to make
    the variable outside the draw loop
  • 4:49 - 4:51
    so we can reuse the same one every time.
  • 4:51 - 4:54
    Then inside the draw loop right here,
  • 4:54 - 4:56
    we're gonna change
    the variable a little bit,
  • 4:56 - 4:58
    usually by setting it to its old value,
  • 4:58 - 5:01
    plus some number--
    plus or minus some number.
  • 5:02 - 5:06
    And finally, you wanna use your variable
    somewhere in your drawing code
  • 5:06 - 5:08
    so that your drawing
    looks different every time.
  • 5:08 - 5:10
    And... that's it!
Title:
Intro to Animation (Video Version)
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:
05:11

English subtitles

Revisions