雑記

06-01 アニメーションの基礎

Posted on by minto818 / 0件のコメント

練習問題6-1-3

例題6-1-2 では、draw と frameCount で円が動きました。
Scratch の「◯回繰り返す」や、第3章で学んだ for 文でも、同じ動きが作れるのではないでしょうか。

次のコードを実行し、例題6-1-2 と同じように円が1個ずつ右へ動く か確認し、次の問いに答えなさい。答えはレポートに書き、先生と話し合いなさい。

  1. 例題6-1-2 のように、円が 1個ずつ時間をかけて 右へ動きましたか？
  2. Scratch の「ずっと」と、第3章の for 文——くり返しの 見え方 は同じでしょうか？
  3. アニメーションを作るには、なぜ for ではなく draw が必要だと思いますか？

Q 例題6-1-2 のように、円が 1個ずつ時間をかけて 右へ動きましたか？
A いいえ動きませんでした。見て思ったのはdrawだと一回一回再描画されるのだと思うのですが、forだと一回ですべて描画しきってしまうのだと感じました。

Q Scratch の「ずっと」と、第3章の for 文——くり返しの 見え方 は同じでしょうか？
A いいえ違うと思います。なぜなら、for文は何回もやらなければいけない動作をまとめた形のようなものなので、画面で動かすためのものとは違うと思います。

Q アニメーションを作るには、なぜ for ではなく draw が必要だと思いますか？
A 似たような繰り返しでも、簡略化するためならばforで、表示しているものを動かすという動作をするならば、時間経過によって何度も動作するdrawを使うべきなのでしょう。

練習問題6-1-4

例題6-1-2 の円は、右端を超えると画面外へ出ていきます。
円が左端から右端まで行ったあと、また左端に戻ってくるようにプログラムを改造しなさい。

ヒント：03-05 の市松模様や 04-03 の色の配列では、ループの番号がどんどん大きくなっても、一定の範囲でくり返す計算 を使って、塗るマスや色を決めていました。x 座標にも、同じ考え方を当てはめてみましょう。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(234, 244, 255);
  fill(180, 220, 255);
  noStroke();

  circle(frameCount%height, 200, 80);
  
}

やり始めたときは右にあたったら跳ね返るのかと勘違いしていたのもあって、とても難しいのだと思っていました。ですが、色々と考えていると、ふと％を使えば０に戻ってまたカウントできることに気づき、試してみると左に戻ってくるようになりました。そして、問題を見返すとこれが正解だということに気づいて、とても嬉しかったです。

let i=0
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(234, 244, 255);
  fill(180, 220, 255);
  noStroke();
  if(frameCount>400){
    i++
    circle(frameCount-(frameCount-height)-i, 200, 80);
  }else{
    circle(frameCount, 200, 80);
  }
}

跳ね返るプログラムも作りました。
考えるのが楽しかったです。ずっと跳ね返り続けるようにもできるのかもしれませんが、ぱっと思いつかなかったので、やりませんでした。

練習問題6-1-5

速さを変えられる ように改造しなさい。
速さは speed という変数で表し、05-01 で学んだとおり setup の外（グローバル変数） として宣言してください。

完成したら、speed を 1 や 5 に変えて、動きの速さがどう変わるか試してみましょう。

let speed = 3;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(234, 244, 255);
  stroke(80, 160, 255);
  noFill();
  let x = frameCount*speed;
  circle(x, 200, 80);
}

個人的にはとても簡単でした。

練習問題6-1-6

練習問題6-1-5 のプログラムから、draw の中の background(234, 244, 255); を削除して実行しなさい。
画面はどう見えるか観察し、background があるときとないとき の違いを考察してレポートに書き、先生に確認してもらいなさい。

backgroundがないと、いままで書いた円がすべて見えてしまっている状態になっていました。
おそらく、drawを使うと一度描画したものが消えるわけではなく、すべてがもう一度上から描画されているのだと思いました。

練習問題6-1-7

練習問題6-1-5 を改造し、円の 縦位置 も frameCount を使って上下に動かしなさい。
横方向は % width でループさせ、縦方向は % height を使って画面内を行き来させてください。

let speed = 3;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(234, 244, 255);
  stroke(80, 160, 255);
  noFill();
  let xy = frameCount*speed;
  circle(xy%height, xy%height, 80);
}

斜めの動きをひとつの変数で行ってしまっているので、汎用性はなくなってしまいましたが、見やすくなったと思っています。

練習問題6-1-8

練習問題6-1-4 を改造し、円の 色 が時間とともに変化するようにしなさい。
RGB の値を変えるのではなく、色相環（しきそうかん） がぐるぐる回るようにしてみましょう。

function setup() {
  createCanvas(400, 400);
  colorMode(RGB);
  background(234, 244, 255);
}

function draw() {
  colorMode(HSB);
  let a = frameCount%360;
  fill(a, 50, 90);
  noStroke();

  let x = frameCount % width;
  circle(x, 200, 80);
}

色相環を使えるのがわかれば、別に大したことはなかったです。

練習問題6-1-9

frameCount がアニメーションで役に立つ理由を、自分の言葉で説明しなさい。
説明をレポートに書き、先生に確認してもらいなさい。

frameCountはdrawととても相性が良く、drawが一回動くたびにframeCorntが一増えるので、何か動作をさせるうえでとても使い勝手がいいと言えると思います。

感想
この６が始まってからGIFを取るようになりましたが、家のWindowsだとめっちゃ重い感じになってしまったりして、大変でした。一番難しかったのはGIFを作ることでした。

コメントする