プログラミング基礎ａ 第11回 Java言語による図形処理入門（３） アニメーション入門

Presentation on theme: "プログラミング基礎ａ 第11回 Java言語による図形処理入門（３） アニメーション入門"— Presentation transcript:

1 プログラミング基礎ａ 第11回 Java言語による図形処理入門（３） アニメーション入門
プログラミング基礎ａ 第11回 Java言語による図形処理入門（３） アニメーション入門 坂口利裕

2 Javaによるアニメーション表現 アニメーションの原理 プログラミング上の技法 GUIによる制御 Threadクラスによるマルチスレッド化
プログラミング基礎ａ Javaによるアニメーション表現 アニメーションの原理 プログラミング上の技法 Threadクラスによるマルチスレッド化 sleepによる動作の一時停止 GUIによる制御 プログラミング基礎ａ 坂口利裕

3 アニメーションの原理 コマ 少しずつ変化する 絵を連続的に描画 残像に残る程度の時間間隔を空ける。 2011.01.12
プログラミング基礎ａ アニメーションの原理 コマ 少しずつ変化する 絵を連続的に描画 残像に残る程度の時間間隔を空ける。 プログラミング基礎ａ 坂口利裕

4 マルチスレッド Threadクラスの オブジェクトによ り，同時進行で きる別の“流れ” を生成 init() start() run()
イベント処理 リスナなど stop() paint() イベント待ちのループ プログラミング基礎ａ

5 練習（１） プログラム内容を比較してみなさい 静止画による表現 jprog06 アニメーションによる表現 jprog07
プログラミング基礎ａ

6 jprog07のポイント init()メソッド run()メソッド paint ()メソッド プログラムが呼び出される時に1度だけ実行
反復内容の記述 repaint()による描画図形の表示→ 変数 t の更新→ （残像を発生させるために）一定時間動作を休止 paint ()メソッド アニメーションの1コマ分に相当する図形の描画 t に依存して位置を決定→ 描画メソッドを用いた描画処理 プログラミング基礎ａ

7 練習（２） 円軌道の中心からボールの中心まで線分を描くようにし，1点を中心に回っていることを強調させる メソッド paint () を修正
座標の考え方は，右図を参照 400 x -y 半径 400 プログラミング基礎ａ

8 面白みを増すための改造の例 動きを複雑にする ボールの動きに応じて色を変化させる ボール以外の図形を回転させる
プログラミング基礎ａ 面白みを増すための改造の例 動きを複雑にする ボールを増やす 逆向きに動くようにする 楕円軌道で動くようにする ボールの動きに応じて色を変化させる １周ごとに色が変化 じょじょに色が変化 軌跡に色づけ ボール以外の図形を回転させる 円以外の図形描画を使用 画像ファイルを使用 ボタンなどのGUIを追加して動作を制御できるようにする Stop/Startを制御 回転の向きを制御 運動の半径やボールの大きさ・色を指示 プログラミング基礎ａ 坂口利裕

9 練習（３） 回転するボールを独自の画像に変更する 「ペイント」で画像を作成 Imageクラスの変数を用意 drawImageで描画
キャンバスの大きさを50×50に変更 PNG形式でJavaプログラムと同じフォルダに保存 Imageクラスの変数を用意 初期化メソッドinit()で画像情報をファイルから読む drawImageで描画 描画メソッドpaint()でfillOvalの代わりに使用 プログラミング基礎ａ

10 練習（４） GUIを追加して停止・実行できるように改良 リスナー ActionListenerを追加
プログラミング基礎ａ 練習（４） GUIを追加して停止・実行できるように改良 リスナー ActionListenerを追加 動作状態を boolean型変数（たとえばisRunning）で保持 回転中→true，停止中→false Buttonオブジェクト（たとえばbtn1）を生成し画面上に登録しリスナーを追加，動作状態を初期化 イベント処理用メソッドactionPerformedを追加 ボタンがクリックされたら 動作状態を反転 動作状態に応じて Buttonのラベルを setLabel(“…”)メソッドで変更 動作状態に応じて角度の更新を行うように run を修正 プログラミング基礎ａ 坂口利裕