ここからはオブジェクト指向プログラミングを使って、アニメーションを作っていきたいと思います。
まず、下のプログラムを実行してみましょう。
ここをクリックすると、以下のプログラムをダウンロードできます。
1: ※プログラム名：車を回すプログラム 2: ※作成者：秋山 優 3: ※作成日：2009.11.28 4: 5: ※授業に必要なライブラリを取り込む。 6: TurtleLibraryを参照する。 7: 8: ※環境を初期化する 9: ウィンドウを初期化する。 10: 11: ※画像を生成する 12: 画像を新規作成して、車と名付ける。 13: 車のファイル名を「car.gif」と設定する。 14: ウィンドウに車を追加する。 15: 16: ※アニメーションループ 17: 無条件で｛ 18: ※０．１秒待つ 19: ウィンドウは０．１秒待機する。 20: 21: ※処理を行う 22: 車を右に５度回す。 23: 24: ※再描画する 25: ウィンドウを再描画する。 26: ｝を繰り返す。
ここでは、画像オブジェクトを生成しています。
画像オブジェクトを生成するには、次のような命令文を書きます。
画像を新規作成して、車と名付ける。 車のファイル名を「car.gif」と設定する。
例えば上記のアニメーションで「car.gif」を使う場合は、 同じフォルダに置く必要があります。
同じフォルダに置いていないと画像が表示されません。
使える画像の種類は「.gif」「.jpg」「.jpeg」のどれかです。 「.bmp」の画像は使えないので注意してください。
RotateHouse.javaをもう一度よく見てみましょう。 特に、
無条件で｛ ※処理 ※再描画 ※待つ ｝を繰り返す。
ここの部分が、今までと異なる所で、アニメーションをするプログラムの特徴です。 どのようなアニメーションをするプログラムでも基本構造は同じです。 図解すると下のようになります。
待機する命令の中の数字を小さくすることによって、アニメーションを早くすることができます。 しかし、コンピュータの能力にも限界があります。 軽いアニメーションならば0.01秒（秒間100コマ）ぐらいまでならなんとか動きますが、 画像などを使うといくら小さい値を入れても、コンピュータの計算が追いつかなくなります。
人間が目に分かるのは、秒間30コマまでといわれています（テレビがそれぐらいです）ので、 それぐらいを目安に数値を決めると良いでしょう。
オブジェクトになっても、基本的な亀の命令はどれでも使うことができます。 次のプログラムは、円を描く車のプログラムです。
ここをクリックすると、以下のプログラムをダウンロードできます。
1: ※プログラム名：車で円を描くプログラム 2: ※作成者：秋山 優 3: ※作成日：2009.11.28 4: 5: ※授業に必要なライブラリを取り込む。 6: TurtleLibraryを参照する。 7: 8: ※環境を初期化する 9: ウィンドウを初期化する。 10: 11: ※車を生成する 12: 画像を新規作成して、車と名付ける。 13: 車のファイル名を「car.gif」と設定する。 14: ウィンドウに車を追加する。 15: 16: ※軌跡を描く準備 17: 車の筆を有効化する。 18: 19: ※アニメーションループ 20: 無条件で｛ 21: ※待つ 22: ウィンドウは０．１秒待機する。 23: 24: ※処理を行う 25: 車を５度右に回す。 26: 車を５ドット進める。 27: 28: ※再描画する 29: ウィンドウを再描画する。 30: 31: ｝を繰り返す。
「筆を有効化する」命令で、筆を下ろして軌跡が描かれるようになっています。
いままでの亀では「筆を有効化する」命令をしなくても、 最初は筆を下ろした状態から始まっていました。
しかしアニメーションでは軌跡は要らないことが多いので、 初期状態では筆を上げた状態になっています。
プログラムを書くときには、"最初の状態"を意識する必要があります。 これを「初期値」や「デフォルト値」といいます。
次に示すのは、車が右に動いていくプログラムです。
ここをクリックすると、以下のプログラムをダウンロードできます。
1: ※プログラム名：車を右に動かすプログラム 2: ※ 其の１：右に向けて動かす 3: ※作成者：秋山 優 4: ※作成日：2009.11.28 5: 6: ※授業に必要なライブラリを取り込む。 7: TurtleLibraryを参照する。 8: 9: ※環境を初期化する 10: ウィンドウを初期化する。 11: 12: ※車を生成する 13: 画像を新規作成して、車と名付ける。 14: 車のファイル名を「car.gif」と設定する。 15: ウィンドウに車を追加する。 16: 17: 車を９０度右に回す。 18: 19: ※アニメーションループ 20: 無条件で｛ 21: ※待つ 22: ウィンドウは０．１秒待機する。 23: 24: ※処理を行う 25: 車を５ドット進める。 26: 27: ※再描画する 28: ウィンドウを再描画する。 29: ｝を繰り返す。
今までの方法では、前か後ろにしか進めませんが、 車は上向きのまま、右に動かしたい場合があります。
いままでの方法でも、下のように工夫することによって目的は達成できますが、 ここでは、ＸＹ座標設定命令を使ったエレガントな解決方法を考えます。
ここをクリックすると、以下のプログラムをダウンロードできます。
1: ※プログラム名：車を右に動かすプログラム 2: ※ 其の２：上を向いたまま動かす 3: ※作成者：秋山 優 4: ※作成日：2009.11.28 5: 6: ※授業に必要なライブラリを取り込む。 7: TurtleLibraryを参照する。 8: 9: ※環境を初期化する。 10: ウィンドウを初期化する。 11: 12: ※車を生成する 13: 画像を新規作成して、車と名付ける。 14: 車のファイル名を「car.gif」と設定する。 15: ウィンドウに車を追加する。 16: 17: ※アニメーションループ 18: 無条件で｛ 19: ※待つ 20: ウィンドウは０．１秒待機する。 21: 22: ※処理を行う 23: 車を９０度右に回す。 24: 車を５ドット進める。 25: 車を９０度左に回す。 26: 27: ※再描画する 28: ウィンドウを再描画する。 29: ｝を繰り返す。
ＸＹ座標設定命令を使うと、回転せずに、好きな所にオブジェクトを移動することができます。
ここをクリックすると、以下のプログラムをダウンロードできます。
1: ※プログラム名：４台の車をワープを使って配置するプログラム 2: ※作成者：秋山 優 3: ※作成日：2009.11.28 4: 5: ※授業に必要なライブラリを取り込む。 6: TurtleLibraryを参照する。 7: 8: ※環境を初期化する。 9: ウィンドウを初期化する。 10: 11: ※車を４台生成する 12: 画像を新規作成して、車Ａと名付ける。 13: 画像を新規作成して、車Ｂと名付ける。 14: 画像を新規作成して、車Ｃと名付ける。 15: 画像を新規作成して、車Ｄと名付ける。 16: 車Ａのファイル名を「car.gif」と設定する。 17: 車Ｂのファイル名を「car.gif」と設定する。 18: 車Ｃのファイル名を「car.gif」と設定する。 19: 車Ｄのファイル名を「car.gif」と設定する。 20: ウィンドウに車Ａを追加する。 21: ウィンドウに車Ｂを追加する。 22: ウィンドウに車Ｃを追加する。 23: ウィンドウに車Ｄを追加する。 24: 25: ※アニメーションループ 26: 無条件で｛ 27: ※待つ 28: ウィンドウは０．１秒待機する。 29: 30: ※処理を行う 31: 車ＡのＸ座標を１００に設定する。 32: 車ＡのＹ座標を１００に設定する。 33: 車ＢのＸ座標を１００に設定する。 34: 車ＢのＹ座標を２００に設定する。 35: 車ＣのＸ座標を２００に設定する。 36: 車ＣのＹ座標を１００に設定する。 37: 車ＤのＸ座標を２００に設定する。 38: 車ＤのＹ座標を２００に設定する。 39: 40: ※再描画する 41: ウィンドウを再描画する。 42: 43: ｝を繰り返す。
このプログラムの実行結果は以下のようになります。
指定されたxy座標の位置に、そのオブジェクトをワープ（瞬間的に移動）させます。
現在のxy座標を取得します。
ちなみに、一般にコンピュータ環境では、数学とはちょっと違った座標体系が使われます。 亀の場合もそうです。以下のようになっているので気をつけてください。
さあ、ＸＹ座標設定命令を使って、車を右に移動しましょう。
ここをクリックすると、以下のプログラムをダウンロードできます。
1: ※プログラム名：車を右に動かすプログラム 2: ※ 其の３：上を向いたまま右に動かす（ワープを使う） 3: ※作成者：秋山 優 4: ※作成日：2009.11.28 5: 6: ※授業に必要なライブラリを取り込む。 7: TurtleLibraryを参照する。 8: 9: ※環境を初期化する。 10: ウィンドウを初期化する。 11: 12: ※車を生成 13: 画像を新規作成して、車と名付ける。 14: 車のファイル名を「car.gif」と設定する。 15: ウィンドウに車を追加する。 16: 17: 整数型を新規作成して、ｘと名付ける。※ｘ座標を入れる変数 18: 整数型を新規作成して、ｙと名付ける。※ｙ座標を入れる変数 19: 20: ※アニメーションループ 21: 無条件で｛ 22: ※待つ 23: ウィンドウは０．１秒待機する。 24: 25: ※処理を行う 26: 車のX座標を取得して、それをｘに入れる。※車のｘ座標を取得する 27: 車のX座標を取得して、それをｙに入れる。※車のｙ座標を取得する 28: 車のX座標をｘ＋５に設定する。※右に移動する 29: 30: ※再描画する 31: ウィンドウを再描画する。 32: ｝を繰り返す。
さらに、右端までいったら左端にワープするように改造します。
ここをクリックすると、以下のプログラムをダウンロードできます。
1: ※プログラム名：車を右に動かすプログラム 2: ※ 其の４：右端に行ったら左端に戻す（ワープを使う） 3: ※作成者：秋山 優 4: ※作成日：2009.11.28 5: 6: ※授業に必要なライブラリを取り込む。 7: TurtleLibraryを参照する。 8: 9: ※環境を初期化する。 10: ウィンドウを初期化する。 11: 12: ※車を生成 13: 画像を新規作成して、車と名付ける。 14: 車のファイル名を「car.gif」と設定する。 15: ウィンドウに車を追加する。 16: 17: 整数型を新規作成して、ｘと名付ける。※ｘ座標を入れる変数 18: 19: ※アニメーションループ 20: 無条件で｛ 21: ※ --- 待つ --- 22: ウィンドウは０．１秒待機する。 23: 24: ※ --- 処理を行う --- 25: 車のX座標を取得して、それをｘに入れる。※車のｘ座標を取得する 26: 27: ※右に移動する 28: 車のX座標をｘ＋５に設定する。 29: 30: ※右端だったら左端にワープ 31: ｘ≧３００であるならば｛ 32: 車のX座標を０に設定する。 33: ｝をする。 34: 35: ※ --- 再描画する --- 36: ウィンドウを再描画する。 37: ｝を繰り返す。
だんだんアニメーションらしくなってきました。
オブジェクトは、大きさを変更することもできます。
ここをクリックすると、以下のプログラムをダウンロードできます。
1: ※プログラム名：車を大きくするプログラム 2: ※ 其の１：大きさを測る 3: ※作成者：秋山 優 4: ※作成日：2009.11.28 5: 6: ※授業に必要なライブラリを取り込む。 7: TurtleLibraryを参照する。 8: 9: ※環境を初期化する。 10: ウィンドウを初期化する。 11: 12: ※車を生成 13: 画像を新規作成して、車と名付ける。 14: 車のファイル名を「car.gif」と設定する。 15: ウィンドウに車を追加する。 16: 17: 無条件で｛ 18: ※ --- 待つ --- 19: ウィンドウは０．１秒待機する。 20: 21: ※ --- 処理を行う --- 22: 車の横幅を２００に設定する。 23: 車の縦幅を２００に設定する。 24: 25: ※ --- 再描画 --- 26: ウィンドウを再描画する。 27: ｝を繰り返す。
そのオブジェクトを横幅と縦幅を、指定された大きさにします。
現在の横幅と縦幅を取得します。
アニメーションループをうまく利用すれば、徐々に大きくなっていくプログラムが書けます。
ここをクリックすると、以下のプログラムをダウンロードできます。
1: ※プログラム名：車を大きくするプログラム 2: ※ 其の２：徐々に大きくする 3: ※作成者：秋山 優 4: ※作成日：2009.11.28 5: 6: ※授業に必要なライブラリを取り込む。 7: TurtleLibraryを参照する。 8: 9: ※環境を初期化する。 10: ウィンドウを初期化する。 11: 12: ※画像を生成する 13: 画像を新規作成して、車と名付ける。 14: 車のファイル名を「car.gif」と設定する。 15: ウィンドウに車を追加する。 16: 17: 整数型を新規作成して、横幅と名付ける。※横幅を入れる変数 18: 整数型を新規作成して、縦幅と名付ける。※縦幅を入れる変数 19: 20: 無条件で｛ 21: ※ --- 待機する --- 22: ウィンドウは０．１秒待機する。 23: 24: ※ --- 処理を行う --- 25: 車の横幅を取得して、それを横幅に入れる。 26: 車の縦幅を取得して、それを縦幅に入れる。 27: 28: ※車を大きくする 29: 車の横幅を横幅＋２に設定する。 30: 車の縦幅を縦幅＋２に設定する。 31: 32: ※ --- 再描画 --- 33: ウィンドウを再描画する。 34: 35: ｝を繰り返す。
大きくなりすぎたら、小さく戻してあげましょう。
ここをクリックすると、以下のプログラムをダウンロードできます。
1: ※プログラム名：車を大きくするプログラム 2: ※ 其の３：大きくなりすぎたら小さくする 3: ※作成者：秋山 優 4: ※作成日：2009.11.28 5: 6: ※授業に必要なライブラリを取り込む。 7: TurtleLibraryを参照する。 8: 9: ※環境を初期化する。 10: ウィンドウを初期化する。 11: 12: ※家を生成 13: 画像を新規作成して、車と名付ける。 14: 車のファイル名を「CAR.gif」と設定する。 15: ウィンドウに車を追加する。 16: 17: 整数型を新規作成して、横幅と名付ける。 18: 整数型を新規作成して、縦幅と名付ける。 19: 20: 無条件で｛ 21: ※ --- 待機する --- 22: ウィンドウは０．１秒待機する。 23: 24: ※ --- 処理を行う --- 25: 車の横幅を取得して、それを横幅に入れる。 26: 車の縦幅を取得して、それを縦幅に入れる。 27: 28: ※車を大きくする 29: 車の横幅を横幅＋２に設定する。 30: 車の縦幅を縦幅＋２に設定する。 31: 32: ※横幅が大きくなりすぎたら小さくする 33: 横幅≧３００であるならば｛ 34: 車を０．２５倍する。 35: ｝をする。 36: 37: ※縦幅が大きくなりすぎたら小さくする 38: 縦幅≧３００であるならば｛ 39: 車を０．２５倍する。 40: ｝をする。 41: 42: ※再描画 43: ウィンドウを再描画する。 44: ｝を繰り返す。
そのオブジェクトを指定された倍率の大きさにします。
指定した長さだけ縦横を幅を大きくします。
指定した長さだけ縦横の幅を小さくします。
指定した長さだけ横幅を大きくします。
指定した長さだけ横幅を小さくします。
指定した長さだけ縦幅を大きくします。
指定した長さだけ縦幅を小さくします。
星の画像を使って、流れ星のプログラムを書いてみて下さい。
ダウンロードはこちらから
流れ星は、次の手順で進めていくとうまくできます。
