p5.jsでwebページにアニメーションを作ろう - 04　図形を描いて動かそう

さて、前回は最初にご紹介したコードのを解説しました。
しかし、あれだけでは、どう頑張っても

円の大きさが変わる
円の出現する場所が限定される
円の色が変わる
円の出現する比率が上がる／下がる
円の枠線に色を付ける

程度の事しか出来ません。
これで自由にアニメーションを作る、と言い切るのはかなり厳しいです。

そこで、今回はランダムに出現するのではなく、指定した経路で円が「動いていく」というのをご紹介したいと思います。

変数

変数、というのを聞いたことがある方もいらっしゃるかも知れません。
変数というのは、数値を入れておくことが出来る「箱」のようなものです。
円を描く時に固定された普通の数値ではなく、この変数を指定してあげる事によって、後からその円の位置を動かすことが出来るようになります。

例えば、こんな感じ。

var x = 0;

function setup() {
  createCanvas(800,600);
}

function draw() {
  background(255);
  ellipse(x,300,50,50);
  x = x + 1;
  
}

このコードを実行していただくと、円が左からぬーーーっと出てきて、右側へ通りすぎていきます。

例によって上から順番に見ていくことにしましょう。

まず

var x = 0;

この部分は、 x という名前の変数を宣言している場所です。
xが名前で、その前に var　というキーワードが書いてあります。
このvar　こそが、「変数を宣言しますよ」という意味のあるキーワードです。
つまり、

var 名前;

と書けば、とりあえずその名前が変数として使えるようになります。これを、変数の宣言といいいます。
例では1文字ですが、なん文字でも大丈夫です。
長過ぎると使いづらいので、1文字〜10文字程度、後から見て意味のわかる名前を付けるように心がけてください。

で、今回はその x という名前の変数に 0という数字が「代入」されています。
代入と言うとなんとなく解りづらい感じがしますが、つまり 0 を入れてやる、という事です。
0が代入されたxは、次に何か別の値が代入されるまでは、ずっと0が入っています。

function setup(){ }

の前で宣言されているのもポイントです。
もしこの宣言がfunction setup(){ }の {　と }の間で宣言された場合、 function draw(){ }の中で使うことは出来ません。
プログラム全体を通して使いたい変数は、 { }の外側で宣言する、と覚えておいてください。

setup(){}の中身は前回と同じです。

さて、いよいよdraw(){ }に入ります。

function draw() {
  background(255);
  ellipse(x,300,50,50);
  x = x + 1;
  
}

background(255);

この　background(255)という命令は、背景を白で塗りつぶせ、という意味です。
この255は明るさを表していて、0だと黒、255だと白、その間の数値だと灰色になります。
またfillなどと同じようにbackground(赤、緑、青）それぞれ255段階で指定してあげることも出来ます。

次に

ellipse(x, 300, 50, 50);

これは前回扱った円を描く、という命令ですが、一番最初の数値が変数になっています。
この部分は左からの距離を指定する場所なので、つまり、「この図形は左からの距離が変化するのだな」という事が、この書き方からわかります。

つ　づ　く

                           

  関連記事