ピクトグラムアニメーション
ピクトグラムアニメーションを作ろう
アニメーションさせてみよう
下に示す(1)～(2)の2つのプログラムを入力して、実行してみましょう。
そして、その2つの違いを観察しましょう
(1) RW LUA -140 0
(2) RW LUA -140 1
ちなみにプログラムを実行するには、再生ボタンを押します。
(1) は Lesson2でやりましたね。左手を上げている人型ピクトグラムになります。
(2) は 左手を上げている人型ピクトグラムになりますが、少し様子が違います。
徐々に手が上がりました。これはアニメーションです。
1秒間かけて左上腕を関節点を中心に反時計回りに-140度、
つまり時計周りに140度回転するという意味です。
RW命令の様式と処理は以下のとおりでした．つまりarg3の値を0以外の正の数にすることでアニメーションになります。
| 命令の様式 | 処理 |
|---|---|
| RW arg1 arg2 arg3 | arg1で指定される体の部位を反時計回りにarg2 度だけarg3 秒かけて支点を中心に等速回転する．回転が終了するまで次の命令は実行されない．arg3が省略された時は0が入力されているものとして取り扱う． |
タイミングを考えたアニメーション
では次に以下の2行からなるプログラムを記述して実行します。
RW LUA -140 1
RW RUA 140 1
1秒かけて、左腕を上げてから、さらに1秒かけて右腕をあげるのがわかります。
では、１秒間かけて左腕と右腕を同時に上げるようにするにはどうすれば良いでしょう。そのためにR(Rotate 回転)命令というのがあります。
先ほどのプログラムの一行目の命令名RW（回転待ち Rotate Wait）のところをR（回転 Rotate）に変えて実行してみてください。つまり以下の通りです。
R LUA -140 1
RW RUA 140 1
R命令の仕様を下に示します。ポイントは「次の命令も同時に実行される。」という点です。
| 命令の様式 | 処理 |
|---|---|
| R arg1 arg2 arg3 | arg1で指定される体の部位を反時計回りにarg2度だけarg3秒かけて支点を中心に等速回転する．次の命令も同時に実行される．arg3が省略された時は，arg3に0が入力されているものとして取り扱う． |
同じ部位のアニメーション命令が 同時に実行される場合の注意
R命令は、「次の命令も同時に実行される。」されます。そのため、R命令では両腕が同時に上がりました。
R命令は、「次の命令も同時に実行される。」ということを注意しなければいけません。
例：手をあげる…?
R LUA -140 1
RW LUA -140 1
この命令を実行しても人型ピクトグラムは何も反応しません。
これは、左上腕(LUA)を140度1秒間で回転するのと
左上腕(LUA)を-140度1秒間で回転する命令が同時に
実行されるため、実際には両方が相殺されるからです。
例：手をあげる（３つの命令を同時に）
40(度)手をあげる命令を3つ実行します。
R RUA 40 1
R RUA 40 1
R RUA 40 1
この命令を実行するとどうなるでしょう？これは R LUA 120 1 と同一になります。
R命令とRW命令をうまく組み合わせることで人型ピクトグラムの様々なアニメーションが可能となります。
実行中のアニメーションを制御するボタン
ここまでの説明でアニメーションを作れるようになったので、実行中のアニメーションを制御する5つのボタンを改めて紹介します。
実行 早送り実行 一旦停止 再スタート クリア
実行… プログラムを最初から実行します．
早送り実行… プログラムを最初から早送りで実行します．
一旦停止… プログラムの実行を一旦停止します．このボタンを押した瞬間の状態でピクトグラムは停止します．
再スタート…一旦停止した状態から再び実行します．
クリア…プログラムを消去します．
オリジナルアニメーションピクトグラムができたら【アニメーション画像の保存の方法】
レッスン1では、画像の保存方法、レッスン2では、プログラムの保存と読込みの方法を学びました。
レッスン3の今回は、アニメーション画像として保存する方法を学びましょう。
（１） 作品を表す名称を作品名としてテキストフィールドに入力します。この例では「走る人」です．
（2） 画面真ん中上部にあるビデオアイコンの右下のチェックをオンにして、一度実行します。するとピクトグラムが通常よりゆっくり動くはずです。これは実行しながら同時にアニメーション画像を作成しています。全ての動作が完了したら、アニメーション動画が完成しています。その後に、ビデオアイコンをクリックすると保存のダイアログボックスが出ますので，指定したフォルダに、デフォルトでは、「作品名.gif」のファイル名（この例では，「走る人.gif」）で保存されます。
とりあえず、世の中にあるようなピクトグラムを作りたい方へ
これ以降は、プログラミングの諸概念を学んでいく内容になっています。とりあえず、アニメーションを含むピクトグラムを作りたい方は、最終のレッスン8「人型ピクトグラム、デザイナーになる」へ進んでください。
繰り返し
例：手をあげる
R LUA -140 1
と入力して改行キーを押すと左手があがります。
例：手を振る
手を振ってみましょう。友達と別れる時を想像してみてください。
RW LUA -140 1
RW LLA -60 0.3 // 1 往復分 手を振る
RW LLA 60 0.3
RW LLA -60 0.3 // 1 往復分 手を振る
RW LLA 60 0.3
RW LLA -60 0.3 // 1 往復分 手を振る
RW LLA 60 0.3
3回左前腕(LLA)を左右に振ることができました。では手を振ることを10回や50回にするにはどうしますか。同じ命令をたくさん記述することで実現できますが、プログラムがとても長くなってしまいますし、プログラムを見て何回振っているのかをすぐ確認することも難しくなります。そこで繰返しの処理を書く方法を学んでみましょう。「○○回やって」ということと同じです。使う命令は以下の2つです。
| 命令の様式 | 処理 |
|---|---|
| REPEAT arg1 | 対応するENDまでの命令をarg1回繰返す． |
| END | 条件文，または繰返し，または定義の終了． |
例：手を振る（繰返しを使って）
上の「手を振る」の例を、REPEATを使って書き直します。
RW LUA -140 1
REPEAT 3 // 手を振るのを 3 回繰返す
RW LLA -60 0.3 // 1 往復分 手を振る
RW LLA 60 0.3
END
さらに、前回学んだ変数の定義と組み合わせると、手を振る角度や回数を
変数で設定できるようになり、より柔軟なプログラムを書くことができます。
例：手を振る（変数を使って）
RW LUA -140 1
SET :ANGLE 60 // 曲げる前腕の角度
SET :NUM 3 // 手を振る回数
REPEAT :NUM
RW LLA -:ANGLE 0.3
RW LLA :ANGLE 0.3
END
挑戦状
3回目の挑戦状です。あなたがやりたいと思うところからやってください。チャレンジ1から順に取り組む必要はありません。また、全てのチャレンジ1に取り組む必要もありません。あなたがやりたいチャレンジに取り組んでください。
さあ、人型ピクトグラムからの挑戦状に挑戦してみましょう。
チャレンジ１
次のようなアニメーションを作成してください
0秒目から1秒かけて 両腕を 上げる。
1秒目から1秒かけて 左腕を 下ろす。
2秒目から1秒かけて 右腕を 下ろす。
参考画像
チャレンジ２
次のようなアニメーションを作成してください。
ただし REPEAT 命令を用いること。
1 秒かけて左手を曲げて、続けて1秒かけて再び左手を伸ばす
ということを 10 回 繰り返す。
参考画像
チャレンジ３
繰返しを使った自由作品を作成してみましょう。
次はレッスン4です．
本テキストの著作権は青山学院大学 社会情報学部 伊藤一成に帰属します。
© 青山学院大学 社会情報学部 伊藤一成研究室 All rights reserved.