Drip 'n' Snip

ドリップン・スニップ

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

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

2016/08/22



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

こんにちは、僕です。

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

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

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

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

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

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

p5_js

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

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

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

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

sketch_js


function setup(){

}

 

の、{ と }の中に、

createCanvas(800, 600);

と書いてあげましょう。

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

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

(この三角形をクリックすると実行できます。)sketch_js

続いて、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);
 } 

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

 

Untitled

だーーーーっと画面が青く塗りつぶされていったと思います。

これ、このままwebサイトに掲載することが出来ます。

次回はこのコードをwebサイトに掲載する方法を、それ以降は、命令の意味や使い方などについてご紹介します。

間に別の記事が入るかも知れませんが、15回程度の連載を予定しているのでお付き合いください!

 

NEXT
p5.jsでwebページにアニメーションを作ろう - 02 webサイトで公開しよう

  関連記事

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

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

artboard
文字と色を指定するだけ!ファビコンジェネレーター

はい、こんにちは!僕です。 最近faviconを作る機会が多かったのですが、大抵 ...

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

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

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

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

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

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

-p5.js
-