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

みなさんこんにちわ。kotaron7です。

みなさんはスマホをポケットに入れていた時に、通知が来ていないのに通知が来たと錯覚してしまったことはありませんか？？
私はたまにあるんですけれども、それにはめちゃくちゃかっこいい症候群の名前がついているんですよ。
なんだとおもいますか？幻覚の、振動、症候群、を英訳してくっつけただけなんですけど、

ファントム・バイブレーション・シンドロームといいます。

無駄にかっこいいですよね。

それでは本編です。

練習問題6-1-3

例題6-1-2 のように、円が 1個ずつ時間をかけて 右へ動きましたか？
→動かなかった。というより、円が視認できない。
Scratch の「ずっと」と、第3章の for 文——くり返しの 見え方 は同じでしょうか？
→違う。Scratchのずっとはsetupではなくてupdate？に近いと思います。
　for文はfor文でもsetupの中に入っているので一瞬で処理が完了しています。
アニメーションを作るには、なぜ for ではなく draw が必要だと思いますか？
実行して→次を実行して→また次を実行して　と繰り返すときupdateと同じ働きをしないsetupでは最初の瞬間ですべての処理を済ませてしまうから必要だと考える。

練習問題6-1-4

円が右端にあたったとき、左側から円を表示してみる。

let circleX = 1;
function setup() 
{
  createCanvas(400, 400);
}

function draw() 
{
  circleX++
  background(234, 244, 255);
  fill(180, 220, 255);
  noStroke();
  circle(circleX, 200, 80);
  if (circleX >= 400)
  {
    circleX = 0; 
  }
}

circleXを使って作った。

練習問題6-1-5

超考えてみたけど「let x」の中で足すことできないから外に出してあげないとじゃない？？

let speed = 1;
let x = 0;
function setup() {
  createCanvas(400, 400);
}

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

外に出せば超簡単なのに..わかりません。でもこれでスピードで制御できます。

練習問題6-1-7

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

この問題めちゃくちゃ俺を苦しめました。

let speed = 4;
let x = 0;
let y = 0;
function setup() 
{
  createCanvas(400, 400);
}

function draw() 
{
  background(234, 244, 255);
  stroke(80, 160, 255);
  noFill();
  circle(x, y, 80);
  y = frameCount % height;
  x = frameCount % width;
  // x++;
  // y++;
  // if (frameCount % width == 0)
  // {
  //   x = 0;
  // }
  // if (frameCount % height == 0)
  // {
  //   y = 0;
  // }
  // console.log(x);
}

なんで気づかなかったのかな…frameCountをwidthと heightで割った余りは絶対 1~ widht/heightをループしてるやん…

ずっとコメントアウトしてある処理のように、x , y を１づつ増やさないといけない、frameCountを0にしてあげないといけないけどそれは無理だ…と考えていたら、そもそものifの処理で使っているframeCount % heightで動くやん…気づかんかった。

練習問題6-1-8

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);
}

色相がぐるぐる回るようにしてみた。
さっきのめちゃくちゃ沼ったときの解決法を覚えてたのでめちゃくちゃ簡単にできてた。
本当はこのくらいの速さでできないとおかしいのに；；

おつかれさまでした

それではサラダバー

コメントする コメントをキャンセル

コメントするコメントをキャンセル