Drip 'n' Snip

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け
p5js

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

2016/08/22



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

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

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

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

変数

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

例えば、こんな感じ。

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

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

つ づ く

NEXT
Kindle Unlimited日本上陸!登録しないともはや損しかない!

  関連記事

p5js
p5.jsでwebページにアニメーションを作ろう - 07 function

前回は完成目標と配列について書きました。 今回はfunctionという仕組みと ...

p5js
p5.jsでwebページにアニメーションを作ろう - 06 目標と配列

↑こういうのが作れるようになれば、もう後はアイデア次第で大抵のものが作れてしまい ...

artboard
【スクリプトあり】p5.jsで簡単に要素にパーティクルを追加する

こんにちは! 時々、webサイトのヘッダや背景に、こういうパーティクルが動いてい ...

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

さてさて、前回と前々回で、とりあえず何かを作ってweb上に公開する、というところ ...

p5js
p5.jsでwebページにアニメーションを作ろう - 08 オブジェクト

こんにちは、人間の僕です。("株式会社人間"様とは無関係です) 前回に引き続きp ...

-p5.js