40代塾講師の「ほぼ独学プログラミング日誌。」21

記事
学び
『プログラミングで切り開く、新しい未来♪』

こんにちは!
塾講師のdainarです。
桜の花もハラハラと、明日の雨で完全に散ってしまうのでしょうね・・・泣

さて、前回はマウスでクリックすることによって、その位置に円が動くプログラムを考えました。今回は「なんと!」”クリックしなくても”円が勝手に動いていくプログラムを作っていきますよ〜

目次 
1. 右へGO!
2. 往復させてみよう♪

右へGO!

では「円を右に動かして」みましょう!
円を動かすのは難しそうに見えますが、結果として”円が右に動いていくように”見えればいいのです。
では、どのように考えたらよいでしょうか?
前回”円を消す”という操作があったのを覚えていますか。

move1.png

その操作をくり返すことで「あたかも円が移動しているような」錯覚が起きたのではないでしょうか? 
− そうです!今回、この考えを利用して
「少しずつ円のX座標を増やしながら描いたり消したりをくり返す」ようにします。
そうすることで、その連続した動作で円が右に動いていくように見えます。

「描いたり消したり」するにはtkinterにある”タイマー機能”を使いましょう!
これは一定時間が過ぎた後、指定した関数を実行することができるものです。
タイマーはtkinterのafterメソッドを呼び出すことで動きます。

root = tk . Tk ( )  

rootという変数にtk(tkinter)モジュールのTkという機能が入っていると思ってください。
これに対して

root . after ( 時間 , 実行したい関数 )

とすることで指定した時間で関数が実行されていきます。
※ 時間は1000分の1秒単位で指定し、この単位を「ミリ秒」と言います。
例)「300」と指定した場合は「0.3秒後に実行する」という意味です。
円が動くようなアニメーションであれば、30(=0.03秒)〜10(=0.01秒)程度の細かな値を指定して円を描画する座標を少しずつ変えていくと、動いているように見えます。
実際のプログラムはこちら↓↓↓
move2.png

特にafterメソッドは「1回だけ」有効なので次も実行されるように、もう1度afterメソッドでmove関数を登録しています。
実際に実行してみると
move3.png

このように赤い円が残像を残しながら右へ移動していきました♪
※ もっと円を速く動かすためには root.after(5, move) などとすれば良いのですが(move関数が0.005秒に1回実行される)、パソコンの負荷が高まるのであまり小さな値にはしないようにしましょう!

往復させてみよう♪

さて、先ほどのプログラムでは円はキャンバスの端まで行っても止まらずに、そのまま移動し続けて見えなくなってしまいました・・・
そこで円がキャンバスの端に当たったら、反転して往復運動するように改良してみます。

やり方としては、キャンバスの左右の両端(canvas.winfo_width( ))を決める必要がありそうです!
円のX座標とキャンバスの左端・右端のX座標を判定し、もし超えたら反転するように設定しましょう。
ここでは話を簡単にするために、円の「中心点」が端に到達したら反転するようにします(つまり円自体は半径の分だけキャンバスからはみ出て反転)

実際のプログラムはこちら↓↓↓
move4.png

実行してみると
move5.png

円が移動して行き、中心点が端に触れると
move6.png

ifの条件文が実行されて
move7.png

向きが変わって右へ移動していく。
当たり前ですが”きちんとプログラミングしたとおりに”円が移動していることに感動を覚えてしまいました!(PCが数学(数式)を理解している!?)

皆さんはいかがですか?
次回も、もう少しだけ円を動かして行きます!
懲りずにお付き合いくださいね♪

※参考図書=『いちばんやさしいPython入門教室』大澤文孝(著) ソーテック社
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す