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

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

こんにちは！塾講師のdainarです。

今日の空はうっすらと曇っています・・・昨日は黄砂もスゴかった！

なので体調もあまり優れませんが『コツコツが勝つコツ』なので今日もがんばっていきましょう！

目次 

1. X座標とY座標を同時に動かす

2. 最後はたくさんの円を動かしてみよう♪

X座標とY座標を同時に動かす

前回のプログラムでは左右の往復運動まで、できるようになりましたね！

（つまり”X軸上だけ”の移動だったわけです）

今回はY座標の方向に動くように設定して円がナナメに動いていくように見えるプログラムを作ってみましょう。

円をナナメに動かすには、X座標方向とY座標方向に同時に動かしていくようにプログラムをつくります。

前回のプログラムで

＃移動量　dx = 1 —– X座標が「１」ずつ増える

これに　dy = 1 （yの移動量、最初は「１」つまり下方向へ移動）

そしてmove関数では、Y座標をdyの数だけ増加するようにします。

# Y座標も動かす y = y + dy

Y座標はキャンバスの上辺（= Y座標が０）と下辺（= Y座標がキャンバスの高さ）で判定処理をします。その座標で変数dyのプラスとマイナスが逆になるように設定すると、円の動きが反転するというわけです。

キャンバスの高さはwinfo_heightメソッド（winfo_widthのY座標版）で取得できます。

今回はY座標に対しても適用するようにします。

# Y座標についても同様

if y >= canvas . winfo_height ( ) : —— 下辺を超えたとき

dy = – 1 —— 上方向にする

if y <= 0 : —— 上辺を超えたとき

dy = + 1 —— 下方向にする

こうしたY座標への処理を加えることで、X座標方向とY座標方向へ同時に動くようになります。理屈はお分かりになったことと思います。こうして円がナナメに動いていき、ウィンドウの上下・左右の端で反転するので結果、円が跳ね回っているように見えるわけですね♪

そのプログラムがこちら↓↓↓

実行してみると

おおおぉ！

ちゃんと跳ね返ってきましたよーーーーー！（当たり前ですが）

実際に”動いている映像”を見ると素直に感動します( ；∀；)／

最後はたくさんの円を動かしてみよう♪

ここまで１つの円の動きについて学んできましたが、最後は１度にたくさんの円を動かしてみましょう！

たくさんの円を動かすには『リスト』を作って『ループ処理』をします。

まず１つの円の動きの処理を考えてみます。

x —— X座標を示す

y —— Y座標を示す

dx —— Xの移動量を示す

dy —— Yの移動量を示す

これを１つめの円、２つめの円、３つめの円と当てはめていけば良いのです！

１つめの円 —— x, y, dx, dy

２つめの円 —— x2, y2, dx2, dy2

３つめの円 —— x3, y3, dx3, dy3

４つめの円・・・

ただ、この調子で数が増えていくと、その分だけ変数が必要となって理解しにくくなります。そこで・・・

値をひとまとめにして扱うようにします。

その方法としてPythonの「ディクショナリ(Dictionary)」という機能を使います。ディクショナリは「キーと値のペア」となっており

例）ball = { ” x ” : 400, ” y ” : 300, ” dx “ : 1, ” dy “ : 1 }

太字の文字の部分が「キー」を表します。（ballは適当につけた変数名）

ballという変数の中には「４つ」の情報が保存されていますね。

もしX座標の値を取り出したいときは ball [ ” x “ ] のように記述します。

ディクショナリ

変数名　＝　{ キー名 : 値 , キー名 : 値 , ・・・}

となり 変数名[ “キー名” ]で参照できる仕組みになっています。

もう１つの考えは「すべての円をひとまとめにする」ということです。

３つの円の描画をするのに

canvas.create_oval(ball[“x”] – 20, ball[“y”] – 20, ball[“x”] + 20, ball[“y”] + 20, fill=”red”, width=0)

canvas.create_oval(ball2[“x”] – 20, ball2[“y”] – 20, ball2[“x”] + 20, ball2[“y”] + 20, fill=”red”, width=0)

canvas.create_oval(ball3[“x”] – 20, ball3[“y”] – 20, ball3[“x”] + 20, ball3[“y”] + 20, fill=”red”, width=0)

と、３行記述しなければなりません。１０個の円なら１０行、１００個の円なら１００行の記述になります・・・(￣◇￣;) 「い・や・だ」

そこで、もっと短くできないかと考えます。

出てきた答えは『リスト』を使うということ。

例）balls = [

{ ” x ” : 400, ” y ” : 300, ” dx ” : 1, ” dy ” : 1 } ,

{ ” x ” : 200, ” y ” : 100, ” dx ” : -1, ” dy ” : 1 } ,

{ ” x ” : 100, ” y ” : 200, ” dx ” : 1, ” dy ” : -1 }

]

このようにリストにするとスッキリしますね♪

１つめの円のX座標とY座標は

balls [ 0 ] [ ” x ” ] および balls [ 0 ] [ ” y ” ]のように取り出すことができます。

２つめの円のX座標とY座標は

balls [ 1 ] [ ” x ” ] および balls [ 1 ] [ ” y ” ] とするのでした。

最後に全体のプログラムがこちらになります↓↓↓

実行すると

鮮やかな軌跡を描いてボールが躍動しています！

じつはここまで来るのに３回、プログラミングの記述ミスをしてしまいました💦

特にコピー＆ペーストする際の書き直しを忘れたり、インデントをしていなかったり・・・

プログラムが長くなり集中力が欠けてくると、このようなミスが起こり得ます。

皆さんもご注意ください！

ただ毎回思うことですが、そのような”試行錯誤”を乗り越えた先にうまく動作している映像などを見ると疲れも吹き飛ぶ！といいますか、また１つ前進したなと思えるのです。

最後に「１０個」の円を動かすには、どのようにすれば良いでしょうか？

（意外と簡単ですよ）考えてみてくださいね♪

それでは、また！次回。

※参考図書＝『いちばんやさしいPython入門教室』大澤文孝(著) ソーテック社