演習X - 制作課題(ランダムウォークする描画アニメーション表現をコードする)

X.0 課題の概要

  • これまでに学んだプログラミングの技法を用いて、自動的にアニメーションを作成するコードを作成してもらいます。
  • ただし、以下を条件とします。
  1. ランダム関数 - Math.random() - を使うこと。すなわち、実行の度に異なるアニメが出力されること。
  2. キャンバスのサイズは800x600とし、3種類の質的に異なるタイプのアニメを作成すること。
  3. 3種類のうち、少なくとも一つに、「ランダムウォーク」の要素を入れること。

X.1 ファイル構成

  •  まず、以下のリンク先から、ひな形をダウンロードして下さい。
  • ファイル構成は以下の通りです
    • FinalWork(フォルダ)
      • finalWork.html(HTMLファイル)
      • scriptAnimation.js(Javascriptファイル)
      • scriptButton.js(Buttonファイル)
  • scriptAnimation.jsの該当部分に適宜コードを追加することで課題を完成させて下さい。
  • 特に必要がない限りFinalWork.htmlとscriptButton.jsを変更する必要はありません。

X.2 画面の説明

  • FInalWork.htmlを開いて下さい。
  • 初期画面
AnimationExercise.png
  • 上部に4つのボタン下部に大きな画面がありますね。以下、説明です。
  • ボタン(CLEAR):画面をクリアするとともに、すべてのアニメーションを停止します。
  • ボタン(ANIME1):1番目のアニメーションを開始します。
  • ボタン(ANIME2):2番目のアニメーションを開始します。
  • ボタン(ANIME3):3番目のアニメーションを開始します。
  • ボタン(PICTURE):画面をPNGファイルとしてWINDOW上に保存します。

X.3 提出物、提出方法、期日など

提出物

  • 提出物は以下の3つです。
    • アニメーションファイル(ファイル一式)
      • 実質的には3つのタイマー関数の作成(scriptAnimation.js内)です。
    • アニメーションのベストショットのPNGファイル(BestShot.png)
      • PICTUREボタンを押して、最も気に入った描画の"瞬間"を記録して下さい。
      • 3つのアニメーションが混在している場合もOKとします(むしろ積極的にそうして下さい)。
      • 以下、小鷹によるBestShot.pngのサンプルです。
BestShot.png
BestShot.png
  • アニメーションの解説(Comment.txt)
    • アニメーションを設計する上で工夫した点や気に入っている点などを自由に解説してください。100字以上を目安とします。

評価

  • 3つのアニメーションが同時に再生されているときの時間的な表現のユニークさを第一に重視します。BestShot.pngは、アニメーションの中の時間的な一瞬を取り出したものであるため、評価においては、あくまで補助的な意味合いしか持ちません。これぞというBestShotをとるのに苦心するよりも、アニメーションとしての面白さを追求してください。
  • 類似の課題を昨年・一昨年とやっています。例年、僕のサンプルや、ほかの学生のサンプルに酷似しているものが続出します。そうした提出物に関しては、著しく評価が下がることを覚悟してください。場合によっては、再提出の指導をします。

期日

  • 締め切りは2月7日(日曜日)
    • 2月8日(月曜日)の午前中にチェックする予定です。

提出方法

  • アニメーションファイル
    • 共有フォルダ内の
      ToTeacher/Kodaka/FinalWork/
      内に、FinalworkXXというフォルダをアップロードして下さい
      • X.1のファイル構成は変えずに、ダウンロードしたフォルダの名称のみを変更して下さい。
      • XXには、学籍番号の下二桁が入ります。
    • 画像ファイル名は「BestShotXX.png」、解説のテキスト名は「CommentXX.txt」とし、上記のFinalWorkXXのフォルダに入れて下さい。
      • XXには、やはり学籍番号の下二桁が入ります。

X.4 ファイルの簡単な説明

X.4.1 HTMLファイルの内容

HTMLファイル(finalWork.html)のソースを示します。

- - - - - ソース - - - - - - - - - - - - - - - - - - - - -

 以下で、簡単にポイントをまとめます。

  • まず、5-6行目で、2種類のjavascriptファイルを読み込んでいます。
    <script type="text/javascript" src="scriptButton.js"></script>
    <script type="text/javascript" src="scriptAnimation.js"></script>
    • scriptButton.jsは、ボタンのラベル描画用のscriptファイルです。今回の課題では、このファイルを改変する必要はありません。
    • scriptAnimation.jsがアニメーション処理の本体です。後述するタイマー関数の内容をこのファイルの中で記述していきます。
  • 12行目では、onLoad属性として、読み込み時に実行する二つの関数が、セミコロンを隔てて指定されています。
    <body onLoad="drawButton();drawInitial()">
    • drawButton()関数は、ボタンのラベル描画の処理を記述するもので、scriptButton.jsの中にあります。
    • drawInitial()関数は、描画用キャンバス関連のグローバルオブジェクトを取得するためのものです。
  • 13-18行目では、100x30の比較的小さいサイズのキャンバスが5つ並べられています。これらのキャンバスは全てボタンとして使われます。 全てのキャンバスには、onClick属性として諸々の関数が指定されています。これは、キャンバス内がクリックされたときに指定の関数を実行せよということを意味しています。
    <canvas id="button_C" width="100" height="30" onClick = "clearTimers();drawClear()"></canvas>
    • 描画クリア用のボタンです。clearTimers()で全てのタイマーを停止し、drawClear()でキャンバス内のイメージをクリアします。
      <canvas id="button_1" width="100" height="30" onClick = "changeTimer(1)"></canvas>
      <canvas id="button_2" width="100" height="30" onClick = "changeTimer(2)"></canvas>
      <canvas id="button_3" width="100" height="30" onClick = "changeTimer(3)"></canvas>
    • アニメーション開始のボタンです。changeTimerで、ボタンに対応するアニメーションのONとOFFを入れ替えます。別のアニメーションには影響しません(scriptAnimation.js)。
      <canvas id="button_P" width="100" height="30" onClick = "takePic();"></canvas>
    • 画像保存用のボタンです。takePic()で現在のキャンバスの描画内容をPNGファイルとして書き出し、新しいWINDOWに表示します(scriptAnimation.js)。
  • 21行目では、描画用のキャンバスが大きなサイズで(800x600)配置されています。その直前に<BR>で改行されていることに注意して下さい。
    <canvas id="main" width="800" height="600"></canvas>

X.4.2 javascriptファイルの内容

- - - - - scriptAnimation.js - - - - - - - - - - - - - - - - - - - - -

タイマーの開始と停止(101-119、43-48)

  • 101-119行目のstartTimer1()、startTimer2()、startTimer3()、のそれぞれ3つの関数の中でタイマーが開始されます。
    • タイマーを設定する場合には、2つの情報が必要となります。一つは、「タイマーによって実行したい処理(を記述した関数)」、もう一つは「タイマーを発動する時間の間隔」です。
    • setInterval関数で指定する2つの引数は、この2つの情報(関数名+時間間隔<msec>)に対応します。
      timerX = setInterval("drawTimerX()", 10);
    • 上の文によって、10msの時間間隔(1秒間に100回)でdrawTimerX()関数が実行されることが指示されます(この時間間隔は、必要があれば変更してください)。
    • なお、drawTimerX()関数は、別に定義されている必要があります(121行以降)。
    • setInterval関数は、副作用として、timerオブジェクトを返します。これをここではtimerXという変数に入れています。
    • タイマーオブジェクトは既に始まっているタイマーを中断したり再開したり停止したりするときに参照される必要があります。
  • 56-80行では、changeTimer(id)によって、idに相当するタイマーのONとOFFを繰り返しています。
    • これらの関数は、横に3つ並んだanimation開始ボタンが押された場合にそれぞれ実行される関数であることをまずは思い出して下さい(finalWork.htmlの15-17行)。
    • ON・OFFを切り替えるにあたって、現在のタイマーの状態がONなのかOFFなのかを知る必要があります。7-9行目でこれらの変数がboolean型のグローバル変数として、FALSEで初期化されています。
    • changeTimerは、タイマーがOFF(mode X==false)のときであれば、startTimerX()によってタイマーを開始し、タイマーがON(modeX==true)であれば、clearIntervalの引数にタイマーオブジェクトを指定することで、対応するタイマーオブジェクトを停止させることができます(最後に、modeXを反転させます)。
      clearInterval(timerX);
    • このように、タイマーオブジェクトは複数の関数から参照される必要があるためグローバル変数として扱われる必要があります(5行目)。

タイマー関数の記述

  • みなさんが実際にやることの中心は、drawTimer1()、drawTimer2()、drawTimer3()の中にrandom()関数を使った処理を記述することです(127-, 137-, 147-)。あるいは、必要に応じて、グローバル変数の追加(13-)、タイマー開始の初期化処理(104-、110-、116-)などを追加する必要があります。

X.5 サンプルのダウンロード


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-01-19 (火) 19:19:01 (668d)