動かす（アニメーション）

第 8 章でかめを何匹も作れるようになりました． けれども，どのかめも一瞬で動き終わってしまいます． プログラムが最後の行まで走り切ると，そこで絵は止まったままです．

今回は，絵を動かし続ける方法を覚えます． やることは驚くほど単純で，「少し動かす → 少し待つ」を 何度も何度も繰り返すだけです．テレビも映画もゲームも，原理はまったく同じです． ただし，ブラウザの上で動かすには書き方に 1 つだけ約束があります． それが今回の中心になる ontimer です．

10.1　動いて見えるしくみ

10.1.1　パラパラまんが

アニメーションと聞くと難しそうですが，正体はパラパラまんがです． 少しずつ違う絵を何枚も用意して， 次々に切り替えて見せる．それだけです．

1 コマあたりの違いはほんのわずかです． かめは 100 だけ右へずれて，22 度だけ回っただけ． それを 1 秒間に 20 回も 30 回も切り替えると，人間の目には「動いている」と見えます．

10.1.2　アニメーションの 3 ステップ

プログラムでアニメーションを作るときは，次の 3 つを繰り返します． これはどんなアニメーションでも同じです．

1. 少し待つ．すぐ次のコマに行ってしまうと，速すぎて見えない．
2. 1 コマぶんの処理をする．位置を少し変える，向きを少し回す，など．
3. 描き直す．新しい状態を画面に出す．

この 3 つのうち，3 番目は今回ほとんど気にしなくて済みます． この教材のタートルは，命令を出せば自動で画面が更新されるからです． つまり，実際に書くのは「少し待つ」と 「1 コマぶんの処理」の 2 つです．

10.1.3　ブラウザでは while True: が使えない

「少し待って，少し動かす，を繰り返す」と聞くと， 第 6 章で習った繰り返しを使って，こう書きたくなります．

while True:        # ずっと繰り返す
    t.fd(2)        # 少し動かす
    # ここで少し待ちたい

パソコンにインストールした Python なら，これで動きます． しかしブラウザの中では，これは絶対に使えません． 次のプログラムを実行して，何が起きるか確かめてください．

from turtle import *

t = Turtle()
t.shape("turtle")
t.pu()

# ブラウザではこう書いてはいけない
while True:
    t.fd(2)

done()

しばらく画面が固まったあと， 「無限ループ（while True）になっていませんか」という エラーがコンソールに出たはずです．

10.1.4　動かす中身に名前を付ける（def）

ontimer は「あとで，これを呼んでください」とお願いする命令です． お願いするからには，「これ」が何を指すのかを言えなければいけません． 「かめを 4 歩進める」という中身に 名前を付けておく必要がある，ということです．

中身に名前を付ける書き方が def です．

def step():          # 「step」という名前を付ける．うしろの : を忘れない
    t.fd(4)          # 字下げした行が，名前の「中身」
    ontimer(step, 30)

書き方の約束は 3 つだけです．

そして，ontimer に渡すときはかっこを付けません． ここだけは，はっきり区別してください．

10.2　ontimer — 「◯ミリ秒後に呼んでください」

10.2.1　いちばん小さなアニメーション

まず，かめが 1 匹，右へ進んでいくだけのプログラムを見ます． これが今回いちばん重要なプログラムです．実行してください．

from turtle import *

t = Turtle()
t.shape("turtle")
t.color("seagreen")
t.shapesize(1.6, 1.6)
t.pu()                   # 線は引かない
t.goto(-260, 0)

def step():
    t.fd(4)              # 1 コマぶん，少しだけ動かす
    ontimer(step, 30)    # 30 ミリ秒後に，もう一度 step を呼んでもらう

ontimer(step, 30)        # 最初の 1 回だけ，ここで予約する

done()

かめがゆっくり右へ進み，やがて画面の外へ出ていきます． 止めたいときは「■ 停止」を押してください．

動いているものは本のページには載せられないので， 途中の 3 コマを止めて並べた図を見てください． うすい枠は画面のふちです．

1 コマでは 4 歩しか動きません． その 4 歩を 30 ミリ秒ごとに積み重ねた結果が，この動きです．

10.2.2　ontimer の読み方

ontimer は，予約を入れる命令です．

ontimer(step, 30)
#       ~~~~  ~~
#       関数  ミリ秒

つまり ontimer(step, 30) は， 「30 ミリ秒たったら step という関数を呼んでください」という ブラウザへのお願いです．お願いしたらすぐ次の行に進みます． その場で 30 ミリ秒待つわけではありません．

10.2.3　なぜ繰り返しになるのか

while も for も使っていないのに， なぜ動き続けるのでしょうか．答えは， step の最後でもう一度 ontimer を呼んでいるからです．

1 周するたびにいったんブラウザに戻るのがポイントです． その 30 ミリ秒のあいだに，ブラウザは画面を描き直し， ボタンが押されていないかを確かめ，それから step を呼びます． だから画面が固まらないのです．

10.2.4　Screen().ontimer でもよい

本や Web で調べると，次のような書き方も出てきます．

screen = Screen()
screen.ontimer(step, 30)

ontimer はもともと画面（スクリーン）の命令なので， こちらが本来の姿です．ただし from turtle import * と書いていれば， ontimer(step, 30) と短く書いてもまったく同じです． この教材ではどちらでもかまいません． 短いほうを使うことにします．

from turtle import *

t = Turtle()
t.shape("circle")
t.color("crimson")
t.shapesize(1.5, 1.5)
t.pu()
t.goto(0, 200)
t.seth(____)             # 下（南）を向かせる

def step():
    t.____(3)            # 少しだけ前へ進む
    ontimer(____, 40)    # 40 ミリ秒後にもう一度 step を呼ぶ

ontimer(step, 40)        # 最初の 1 回を予約する

done()

10.3　動かし方は 2 通りある

「動かす」には，まったく違う 2 つのやり方があります． どちらも大事なので，順番に見ていきます．

10.3.1　かめ自身を動かす（スプライト方式）

10.2 節でやったのがこれです．かめの姿そのものを動かします． pu() してあるので線は引かれず，かめだけがすーっと動きます． ゲームのキャラクターのような動かし方なので， スプライト方式と呼ぶことにします．

from turtle import *

ht()

t = Turtle()
t.shape("turtle")
t.color("darkorange")
t.shapesize(2, 2)
t.pu()

def step():
    t.lt(3)              # 少し左に回る
    t.fd(4)              # 少し進む
    ontimer(step, 30)

ontimer(step, 30)

done()

lt(3) と fd(4) を繰り返すので，かめは円を描いて回り続けます． 第 2 章で「曲線は短い直線をつないだもの」と習ったのと，同じ考え方です． t.pd() に変えてみると軌跡が残ります．試してみてください．

図では，通った道をうすい線で描いておきました． 実際のプログラムでは pu() してあるので，この線は残りません． かめだけが，この道筋をなぞって動きます．

10.3.2　消して描き直す（クリア方式）

かめの姿は 7 種類しかありません． 自分で描いた絵を動かしたいときはどうするか． 答えは，パラパラまんがそのままです．

1. clear() で画面を消す
2. 少しずれた場所（向き・大きさ）に描き直す
3. ontimer で次のコマを予約する

ここでも 10.1.4 の def が役に立ちます． 「家を 1 軒描く」に house という名前を付けておけば， あとは少しずつ違う場所・向きで呼ぶだけでアニメーションになります．

from turtle import *

ht()             # 既定のかめの姿を消す（線は描ける）
pensize(3)
pencolor("teal")

kaku = 0         # 家の傾き

def house(x, y, a):
    """(x, y) を左下の角として，a 度傾いた家を 1 軒描く"""
    pu()
    goto(x, y)
    seth(a)
    pd()
    lt(60)
    fd(80)
    rt(120)
    fd(80)
    rt(120)
    fd(80)
    lt(90)
    fd(80)
    lt(90)
    fd(80)
    lt(90)
    fd(80)
    lt(90)
    fd(80)
    pu()

def step():
    global kaku
    clear()                 # ① 消す
    house(-40, -40, kaku)   # ② 少し傾けて描き直す
    kaku = kaku + 5
    ontimer(step, 60)       # ③ 次のコマを予約する

ontimer(step, 60)

done()

clear() は，描いた線をすべて消す命令です． 消してから描き直すので，家が 1 軒だけ回っているように見えます． clear() を消してから実行すると， 家が重なって花のような模様になります．それも面白いので試してください．

10.3.3　どちらを使うか

from turtle import *

ht()
pensize(3)
pencolor("royalblue")

ookisa = 20

def square(s):
    """1 辺 s の正方形を中央に描く"""
    pu()
    goto(-s / 2, -s / 2)
    seth(0)
    pd()
    for i in range(4):
        fd(s)
        lt(90)
    pu()

def step():
    ____ ookisa          # 外の変数を書き換える宣言
    ____()               # 前のコマを消す
    square(ookisa)
    ookisa = ookisa + 4
    ontimer(step, ____)  # 40 ミリ秒後に次のコマ

ontimer(step, 40)

done()

10.4　速さを決める

10.4.1　待ち時間と 1 コマの移動量

アニメーションの速さは，2 つの数の組み合わせで決まります．

• ontimer のミリ秒… 1 秒に何コマ進むか
• fd や + 5 の大きさ… 1 コマでどれだけ動くか

同じ速さを，2 通りに作れることに注意してください． 「30 ミリ秒ごとに 4 ずつ」と「60 ミリ秒ごとに 8 ずつ」は， どちらも 1 秒で約 133 進みます．しかし見た目は違います． 前者のほうが滑らかで，後者はカクカクします． 待ち時間は短めに，1 コマの移動量は小さめにするのが基本です．

次の 2 枚は，1 秒ぶんのコマを全部かさねて描いたものです． 玉ひとつが 1 コマの位置を表しています．

1 秒で進む距離は同じなのに，コマの粒が違います． 左はすき間がなく，右はとびとびです． このすき間が，見たときの「カクカク」の正体です．

10.4.2　速くしすぎてはいけない

では ontimer(step, 1) と書けば究極に滑らかになるでしょうか． なりません．コンピュータの計算が追いつかなくなるからです．

とくにクリア方式では，毎コマ絵を全部描き直しています． 線が 100 本ある絵なら，1 秒間に 100 × 30 = 3000 本描くことになります． これ以上速くしても，実際のコマ数は増えず，ただ重くなるだけです．

10.5　画面の端で跳ね返らせる

10.5.1　位置を自分で持つ

10.2 節では t.fd(4) で動かしました． これは楽ですが，「今どこにいるか」を自分で把握していないので， 端に着いたかどうかの判定がしにくくなります．

そこで，位置と速度を自分の変数で持つやり方に切り替えます．

x = 0        # 今の x 座標
dx = 5       # 1 コマで進む量（速度）

def step():
    global x
    x = x + dx          # 位置を進める
    t.goto(x, 0)        # その座標へ動かす
    ontimer(step, 30)

dx という名前は「x の変化量（difference）」の意味です． 毎コマ x に dx を足すので， dx がそのまま速度になります．

10.5.2　符号を反転して跳ね返す

右へ進んでいるものを左へ向かわせるには， 速度の符号を反転するだけで済みます． dx が 5 なら -5 にする．たったそれだけです．

if x > 290:
    dx = -dx        # 右端に着いたら，向きを逆にする

dx = -dx は「今の dx の符号を入れ替えて， もう一度 dx に入れる」という意味です． 5 なら -5 に，-5 なら 5 に戻ります．

上下も同じです．y と dy を用意して， 上端・下端で dy = -dy とすれば， 画面の中で跳ね回るボールができます．

from turtle import *

ht()

t = Turtle()
t.shape("circle")
t.color("crimson")
t.shapesize(1.5, 1.5)
t.pu()

x = 0        # 位置
y = 0
dx = 6       # 速度
dy = 4

def step():
    global x, y, dx, dy

    # 位置を進める
    x = x + dx
    y = y + dy

    # 左右の壁に当たったら跳ね返る
    if x > 290 or x < -290:
        dx = -dx

    # 上下の壁に当たったら跳ね返る
    if y > 200 or y < -200:
        dy = -dy

    t.goto(x, y)
    ontimer(step, 25)

ontimer(step, 25)

done()

図ではボールの通った道をうすい線で描いてあります． dx や dy の符号が入れ替わったところが， ちょうど「く」の字に折れているのが分かります．

画面は横 620・縦 460 なので，中央から見て右端は x が約 310， 上端は y が約 230 です．そこより少し内側の 290・200 で跳ね返らせています． dx と dy の数を変えると， 飛ぶ角度と速さが変わります．いろいろ試してください．

10.5.3　端まで行ったら反対側から出す

跳ね返らせるのではなく，右端まで行ったら左端から出てくる という動かし方もあります．「流れ星」はこのやり方で作ります． こちらは符号を反転するのではなく，座標そのものを書き換えます．

if x > 310:
    x = -310        # 右端に着いたら左端へ瞬間移動

from turtle import *

ht()
pensize(3)
pencolor("gold")

x = -250        # 星の位置
y = 180
a = 0           # 星の傾き

def star(cx, cy, size, ang):
    """(cx, cy) から，ang 度傾いた大きさ size の星を描く"""
    pu()
    goto(cx, cy)
    seth(ang)
    pd()
    for i in range(5):
        fd(size)
        rt(144)
    pu()

def step():
    global x, y, a

    clear()
    star(x, y, 60, a)

    x = x + 8       # 右へ
    y = y - 5       # 下へ
    a = a + 6       # 少し回す

    # 右端まで行ったら左端へ
    if x > 300:
        x = -300

    # 下端まで行ったら上端へ
    if y < -200:
        y = 200

    ontimer(step, 40)

ontimer(step, 40)

done()

右下へ流れながら回転し，画面から出ると反対側から入ってきます． この流れ星は，次の順番で作ると途中で迷子になりません．

1. 星を描く関数を作り，まず 1 個だけ描いて動くことを確かめる
2. ontimer で，星を回すだけにしてみる
3. 座標 x を足して，右に動かす
4. 右端まで行ったら左端に戻す
5. y も足して，下にも動かす
6. 下端まで行ったら上端に戻す
7. 星の大きさを変える（size の引数）
8. 星を増やす（変数を 2 組用意する）

from turtle import *

ht()

t = Turtle()
t.shape("square")
t.color("royalblue")
t.shapesize(2, 2)
t.pu()

x = -200       # 位置
dx = 7         # 速度

def step():
    global x, ____

    x = x + dx

    if x > 290:
        dx = ____      # 右端で向きを逆にする

    if x < ____:
        dx = -dx       # 左端で向きを逆にする

    t.goto(x, 0)
    ontimer(step, 25)

ontimer(step, ____)

done()

10.6　いくつも同時に動かす

10.6.1　1 つの step でまとめて動かす

2 つ以上のものを動かす，いちばん簡単な方法は， 1 つの step の中に全部書くことです． 第 8 章の「交互に命令を出す」と同じ考え方です．

from turtle import *

ht()

a = Turtle()
a.shape("turtle")
a.color("seagreen")
a.shapesize(1.6, 1.6)
a.pu()
a.goto(-280, 80)

b = Turtle()
b.shape("circle")
b.color("crimson")
b.shapesize(1.6, 1.6)
b.pu()
b.goto(280, -80)
b.seth(180)

def step():
    a.fd(5)          # かめは速い
    b.fd(2)          # 玉は遅い
    ontimer(step, 30)

ontimer(step, 30)

done()

a.fd(5) と b.fd(2) のように 1 コマで動く量を変えると，速さの違いが出ます． ontimer は 1 つしかないので，コマ数は 2 つとも同じです．

どちらも同じ step の中で動いているので， コマを刻む回数はまったく同じです． 違うのは 1 コマで進む歩数だけです．

10.6.2　ontimer を 2 本立てる

コマ数そのものを変えたいときは， step を 2 つ作って，それぞれに予約を入れます． 2 本の予約は互いに関係なく回り続けます．

from turtle import *

ht()

a = Turtle()
a.shape("turtle")
a.color("seagreen")
a.shapesize(1.6, 1.6)
a.pu()
a.goto(-120, 0)

b = Turtle()
b.shape("circle")
b.color("crimson")
b.shapesize(1.6, 1.6)
b.pu()
b.goto(120, 0)

def step_a():
    a.lt(4)
    a.fd(6)
    ontimer(step_a, 20)      # 20 ミリ秒ごと（速い）

def step_b():
    b.rt(2)
    b.fd(3)
    ontimer(step_b, 60)      # 60 ミリ秒ごと（遅い）

ontimer(step_a, 20)
ontimer(step_b, 60)

done()

step_a の中では step_a を， step_b の中では step_b を予約しています． ここを取り違えると，片方が止まったり，倍速になったりします．

from turtle import *

ht()

a = Turtle()
a.shape("turtle")
a.color("seagreen")
a.shapesize(1.6, 1.6)
a.pu()
a.goto(-270, 60)

b = Turtle()
b.shape("turtle")
b.color("crimson")
b.shapesize(1.6, 1.6)
b.pu()
b.goto(-270, -60)

def step():
    a.fd(6)
    ____.fd(____)       # b は a より遅く
    ontimer(____, 30)   # 30 ミリ秒後にもう一度

ontimer(step, ____)

done()

10.7　回す・大きくする・描き足す

10.7.1　その場で回す

いちばん作りやすいアニメーションが， 「今まで作った絵を回す」です． クリア方式と，角度を持つ変数 1 つでできます．

from turtle import *

ht()
pensize(4)
pencolor("gold")

kaku = 0        # 星の傾き

def star(size, ang):
    pu()
    goto(0, 0)
    seth(ang)
    pd()
    for i in range(5):
        fd(size)
        rt(144)
    pu()

def step():
    global kaku
    clear()
    star(160, kaku)
    kaku = kaku + 5
    ontimer(step, 50)

ontimer(step, 50)

done()

kaku を + 5 ではなく - 5 にすれば逆回りです． + 20 にすれば速く回ります． 描く図形を，自分が第 2 章〜第 8 章で作った絵に差し替えてみてください．

10.7.2　大きくする・小さくする

大きさを持つ変数を 1 つ用意し，毎コマ増やします． 大きくなりすぎたら，今度は減らす． これは 10.5.2 の跳ね返りとまったく同じ仕掛けです．

from turtle import *

ht()
pensize(3)
pencolor("teal")

ookisa = 20      # 今の大きさ
d = 4            # 1 コマで変わる量

def box(s):
    """1 辺 s の正方形を中央に描く"""
    pu()
    goto(-s / 2, -s / 2)
    seth(0)
    pd()
    for i in range(4):
        fd(s)
        lt(90)
    pu()

def step():
    global ookisa, d

    clear()
    box(ookisa)

    ookisa = ookisa + d

    # 大きくなりすぎたら縮め始める
    if ookisa > 300:
        d = -d

    # 小さくなりすぎたら膨らませ始める
    if ookisa < 20:
        d = -d

    ontimer(step, 40)

ontimer(step, 40)

done()

かめの姿を大きくしたいときは話が別で， 第 8 章で習った t.shapesize(縦, 横) が使えます． 毎コマ t.shapesize(s, s) と呼べば，かめが大きくなっていきます．

10.7.3　少しずつ描き足す（描いている途中を見せる）

ここまでは，毎コマ clear() して描き直していました． 消さずに，1 コマにつき 1 本だけ描き足すとどうなるでしょうか． 絵が目の前で少しずつできあがっていくアニメーションになります．

もうひとつ新しいのは，終わりがあることです． これまでのプログラムは step の最後で必ず ontimer を 呼んでいたので，永久に動き続けました． if の中でだけ予約すれば，条件を満たさなくなったところで 予約が途切れ，アニメーションが止まります．

from turtle import *

ht()

# 題名を先に書いておく
pu()
goto(0, 150)
pencolor("#334155")
write("かめが星をえがきます", align="center", font=("Arial", 20, "bold"))

t = Turtle()
t.shape("turtle")
t.color("seagreen")
t.shapesize(1.4, 1.4)
t.pensize(4)
t.pencolor("gold")
t.pu()
t.goto(-90, -40)
t.seth(0)
t.pd()

nokori = 5           # あと何本引くか

def step():
    global nokori

    if nokori > 0:
        t.fd(180)            # 1 コマにつき 1 本だけ描き足す
        t.rt(144)
        nokori = nokori - 1
        ontimer(step, 600)   # まだ残っているので，次を予約する
    else:
        t.ht()               # 描き終わったら，かめを消して
        t.pu()
        t.goto(0, -150)
        t.pencolor("crimson")
        t.write("かんせい！", align="center", font=("Arial", 28, "bold"))
        # ここでは ontimer を呼ばない → アニメーションが止まる

ontimer(step, 600)

done()

10.8　この章で出てきた命令

表の中でうっかり忘れやすいのが ht() です． 書かないと，何も動かしていない既定のかめが画面に残り， 自分で描いた絵の上に重なって見えます．

演習

以下の演習には，出発点となるプログラムが入っています． 「▶ この演習を開く」で右側に読み込み，それを発展させて作品にしてください． できあがったら「⤓ 保存」でファイルに保存して，手元に残しておきましょう．

まとめ

• アニメーションは「少し動かす → 描き直す → 少し待つ」の繰り返し．パラパラまんがと同じ．
• ブラウザでは while True: が使えない．画面が固まり，絵も更新されない．
• def 名前(): と字下げで，動かす中身に名前を付ける．呼ぶときは 名前()，渡すときは 名前．いまは決まり文句で，仕組みは第 13 章で習う．
• ontimer(関数, ミリ秒) は「そのミリ秒後に呼んでください」という予約．関数名にかっこは付けない．
• 関数の最後でもう一度 ontimer を呼ぶと繰り返しになる．書き忘れると 1 コマで止まり，2 回書くと倍速になる．
• 動かし方は 2 通り．スプライト方式（かめ自身を動かす）とクリア方式（clear() して描き直す）．
• clear() せずに 1 コマ 1 本だけ描き足すと，絵ができあがっていく様子を見せられる．if の中だけで予約すれば，終わりのあるアニメーションになる．
• 向きを変えずに動かしたいときは t.goto(x, y)．t.fd() は「今向いている方向へ」しか進めない．
• 位置と速度を変数で持ち，関数の中で書き換えるときは global を書く（これも決まり文句．仕組みは第 13 章）．端では dx = -dx で跳ね返り，x = -310 で反対側から出る．
• 同時に動かすには，1 つの step にまとめるか，ontimer を複数立てる．
• tracer と update は，この教材では書かなくてよい．

次の回では，画面に文字を出し，見た目を整えます． write で得点や残り時間を表示し，shape と stamp で画面をにぎやかにする方法を習います． アニメーションに点数が付くと，一気にゲームらしくなります．