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

2016/07/28 2016/08/22

P5.jsでインタラクティブなページを作ろう

こんにちは、僕です。

普段はメディアアートなどを嗜んでいるので（厳密な意味で言えばメディアアートではないのかも知れませんが）、今日はそんな「ちょっとアーティスティックで印象的なアニメーション」を作成して、webサイトに掲載する方法をご紹介します！
プログラミングの入門記事も兼ねるつもりなので、プログラミングに興味ある方、どうぞ安心して読んでいってください。
手始めにこんなのを作ってみたいと思います。

アニメーションってどうなってるの？

アニメーションを作成するには２通りの方法があって、１つは「映像ファイル」を用意していおいて、それを再生する方法です。しかし、この方法では毎回再生するたび全く同じ内容の映像が流れますし、見ている人の環境によって大きさを変えたり、速度を変えたり、マウスの動きに反応したり…というものを作るのは不可能です。
そこで、今回はp5.jsというJavaScriptのライブラリを使って、手軽にプログラミングでアニメーションを作成したいと思います！
この方法であれば、上記に上げた「視聴者とのコミュニケーション」が可能なうえ、毎回違う映像を出力したり、何かweb上の情報と連携したり、時間帯によって内容を変化させたり…というような事もできちゃいます。

p5.jsをダウンロードしよう

p5.jsはエディタが付属していて、特別なテキストエディタなどを用意しなくても、ソフトだけダウンロードしてくればすぐに作り始めることが出来てしまいます。すごい。
https://p5js.org/download/

↑このページからダウンロード出来ます。

このエディタだけあれば作ってみることが出来ます。
今はエディタだけダウンロードしてください。

Macもwindowsもlinuxもあるので安心です。

とりあえず何か書いてみよう

ソフトを立ち上げると、こんな画面になっているかと思います。


function setup(){

}

の、{ と　}の中に、

createCanvas(800, 600);

と書いてあげましょう。

このcreateCanvasは、アニメーションを表示する領域のサイズを決めるための関数で、例えば800,600を指定してやれば、縦800px、横600pxの領域をアニメーション用に確保することが出来ます。CSSのように単位を指定してあげる必要はありません。

この時点で実行すると、ただの灰色のウインドウが立ち上がってきます。

（この三角形をクリックすると実行できます。）

続いて、function draw(){ } の{ と }　の間に、以下のコードを書いてあげましょう。

この時点では何が起こっているかわからないかも知れませんが、とりあえずコピーするなりなんなりして、書いてあげて実行してみてください。

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

今、コード全体だとこんな感じになっています。

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