p5.jsでwebページにアニメーションを作ろう - 03　自由に作れるようになろう

さてさて、前回と前々回で、とりあえず何かを作ってweb上に公開する、というところまでやってみました。
webに公開する方法は、今後もう少し詳しく解説していきますので前回のでわからなくても全然大丈夫です！

さて、今回から数回かけて、自由にアニメーションを作れるようにしていきましょう！

自由に…とは？

p5.jsでは、単純な図形や画像ファイルを組み合わせて画像やアニメーションを作っていくことが出来ます。
見ている人の操作するマウスやクリックに反応することも出来るので、図形の書き方やマウスにどうやって反応するかなどを覚えていけば、ある程度自由にアニメーションを作ることが出来るようになります。

手始めに、前回のコードを見てみよう

前回、前々回で紹介したコードは、ランダムな場所に円を描く、ということを高速で行うというものでした。

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

function draw() { 
   for (var i = 0; i < 10; i++) { 
   fill(0,0,random(200,255));
   noStroke() ;
   ellipse(random(width), random(height), 20, 20); 
 } 
}

まず、最初の

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

の部分で、キャンバスのサイズを決定しています。
setup(){}の中で行われているのはそれだけです。

次に、

function draw(){ ... }

の中を見ていきましょう。

　実は、function setup(){ }の中に書かれたコードは1度しか実行されませんが、function draw(){ ... }の中は、止めるまで無限に実行され続けます。

そのため、たった4行のコードですが、画面が変化し続けるのです。
さて、肝心の中身ですが。

   for (var i = 0; i < 10; i++) { 
   fill(0,0,random(200,255));
   noStroke() ;
   ellipse(random(width), random(height), 20, 20); 
 } 

1行目の

for(var i = 0;i < 10 ;i++){  }

これはfor loopという、この { }の中を何度も実行するための構文です。
for loopについては、ちょっと難しいので、また後ほど詳しくご紹介します。
が、この場合ですと10回繰り返されます。この i < 10の数字を変えれば、繰り返す回数を変更することが出来ます。 i < 100にすれば、100回実行されます。

fill()

さて、次の行です。

fill(0,0,random(200,255));

このfill()は、これ以降に描かれる図形を、指定した色で塗りつぶせ、という命令です。
何色で塗りつぶすのかは、()の中に書いた数字によって決まります。
fill(赤の強さ, 緑の強さ, 青の強さ)　となります。

random()

今回は、赤と緑は0で、青の強さのところに random(200,255)　と書いてあります。
このrandom()は、指定した数字〜数字の間の値をランダムに出せ、という命令です。
今回の場合、random(200,255)ですので、200〜254の間の数字が、この行が実行されるたびにランダムに出現します。
そのたび、何度も繰り返しているだけにも関わらず、毎回塗られる色が少しずつ変化するのです。

noStroke()

この命令は、図形の枠線を描くな、という命令です。
逆に、fillのように

stroke(255,0,0);

などとして、枠線を好きな色に変更することも出来ます。

ellipse()

最後に、

ellipse(random(width), random(height), 20, 20); 

です、これは円を描け、という命令です。
先ほど出てきたrandom()が使われているので、毎回円が描かれる場所がランダムに変化します。
詳しく言えば、

ellipse(キャンバスの左端からの距離, キャンバスの上端からの距離, 横幅, 縦幅);

という風に、場所と大きさを指定することが出来ます。

今回は、左からの距離と上からの距離がランダムなため、場所が毎回変わったのです。
そして、random()の中の数字として、数字ではなくwidthという見慣れない単語が指定されています。
これは、最初に createCanvas()で、指定した横幅に等しい数字に置き換えられて解釈されます。
同じく、heightもキャンバスの縦幅に置き換えられて解釈されます。

この場合、画面の0（左端）〜画面全体の大きさの値(右端)の場所をランダムに、
画面の0（上端）〜画面全体の縦幅（下端）の場所がランダムに指定されるため、キャンバスの色々な場所に円が出現したのです。

色々と試してみてみましょう！

色を変更するための数字を変えてみるとか、randomではない値を使ってみるなどして、色々試してみてください。
読んで理解出来なくても、試してみればなんとなくわかるようになってきます！

次回は、「変数」というのを使って、図形が動いているようにみえる、というのをやります！

                           

  関連記事