ほぼ日刊サービス開発日誌

React, firebase, 機械学習など

sponsored

processing & p5.jsの直感的な説明ー円の生成からアニメーション、ランダム増殖まで

f:id:serendipity4u:20180923110402g:plain

p5.jshはアーティスト向けビジュアルコーディングツールprocessing(Javaベース)をjavascriptで実行可能にしたものです。jsなのでDOMの操作が可能で、サイトの組み込みが非常に楽なのが特徴です。

導入

こちらのページからzipをダウンロードもしくは

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>

のCDNが利用可能です。

codepenの empty-example というボイラーテンプレートでもブラウザ実行が可能です。

動く円を描く

p5.jsを動かすための必須メソッドはsetup()draw()だけです(これはprocessingとおなじ)。

setup()は初期化に利用されるメソッドで、一回のみ実行されますが、draw()は永続的にループします。

elipse(x, y, width, height)は楕円を描きます。つまりwidth=heightにすれば円を描きます。

noStroke()は楕円のアウトラインを描かないことを意味します。

f:id:serendipity4u:20180923103253p:plain

f:id:serendipity4u:20180923103244p:plain

上が普通にelipse()で描画した円、 下がelipse()メソッドの前にnoStroke()を指定した円です。

先程、draw()`は永続的にループすると書きました。

そのため、なにかオブジェクトを動かしたいならば、draw()ループの中で変化していく(x,y)を作れば良いことになります。

background(color) でキャンバスの背景色を指定し、塗りつぶします。background(color)をdraw()の中に入れると、draw()が実行されるたびに前の画像の上に背景色を上塗りしていることになります。そのため、たとえば以下のような「円が動いているように見える、アニメーションのようなもの」が作れます。

codepen.io

実際には、円を描く→上に黄色で塗りつぶす→位置を変えて円を描く→塗りつぶす

を繰り返している、つまり、フレームごとに背景を塗りつぶしているー塗りつぶさないと前のフレームの画像が残ってしまうことに注意します。

前のフレームの画像が残る場合

codepen.io

このように、円を斜め下にずらしながら、前のフレームの画像を消さず描画すると、 直接を描いているようになりました。

setup()の中で、createCanvas(width, height)を明記することで描画する画面幅を指定することができます。明記しないとデフォルトサイズの100px*100pxになります。

文字の描画

textSize(fontSize)で文字の大きさを指定します。 text(content, x, y)で描画する文字列と位置を指定します。

draw()関数内で、フォントサイズと描画位置yを変更していくことで、動く文字列が実装できます。

codepen.io

ランダムに円を生成する

random(start, end)でランダムなfloating numberを生成できます。 random(1,1000)なら1~1000までのランダムなfloating numberが返ります。 半径radiusと描画領域x,yをランダムにしたコードのサンプルです。

codepen.io

さて、このコードに、フレームごとに背景を塗りつぶすbackground('black')を足してやると、ひじょうに慌ただしくなります。

codepen.io

慌ただしすぎるので、フレームレートをゆっくりにしてやりましょう。

codepen.io

参考

Generative Design with p5.js - [p5.js版ジェネラティブデザイン] ―ウェブでのクリエイティブ・コーディング

Generative Design with p5.js - [p5.js版ジェネラティブデザイン] ―ウェブでのクリエイティブ・コーディング

  • 作者: Benedikt Gross,Hartmut Bohnacker,Julia Laub,深津貴之,国分宏樹,Claudius Lazzeroni,Benedikt Gross(編著),Hartmut Bohnacker(編著),Julia Laub(編著),Claudius Lazzeroni(編著),美山千香士,杉本達應
  • 出版社/メーカー: ビー・エヌ・エヌ新社
  • 発売日: 2018/06/22
  • メディア: 単行本
  • この商品を含むブログを見る

p5.jsプログラミングガイド

p5.jsプログラミングガイド

What is p5.js and How to use it? – mhiratsuka – Medium