LogoMark.png

p5.js

p5.js


p5.jsとは、「デザイン/アートのためのプログラミング言語」といわれるProcessingをJavaScriptに移植したライブラリです。


CONTENTS




はじめに

準備

プログラムの基本構造

myScript.jsに書く描画プログラムは、
setup()とdraw()の2つの関数で成り立ちます。

基本形の確認

黒バックの描画領域が現れて白い正方形が右へ動きます。 >DEMO
以下2つのファイルと p5.js、計3つのファイルで動作しています。

HTML5のCANVAS要素に関するAPIがラップされているので、シンプルな記述で簡単にグラフィックスが楽しめます。



簡単なアニメーション

ボールがウインドウの壁で反射して動きます。> DEMO

配列変数を使った応用

配列変数を使って複数のボールを制御する例です。
マウスのクリックで、ボールが追加されます。 > DEMO

三角関数の利用(基礎)

以下のプログラムは、三角関数による振動現象を表現します。単純に円を描くプログラムですが、fx や fy の初期値を変えるとリサージュ図形になります。
DEMO

三角関数の利用(少し応用)

上の例を応用したものです。マウスをクリックすると、その位置によって、




X, Y 2重ループ

2重ループで平面パターンを描きます。
マウスの位置が右へいくほど基本図形の半径が大きくなります。> DEMO

関数の利用

ランダムなRGB値で塗りを設定する関数を使っています。普通にJavaScriptでプログラムを書くのと同様です。> DEMO

動画のフィルタリング

動画を表示するだけであれば、HTML5のvideoタグでも実現できますが、p5jsを使うと、フィルタ処理などが簡単にできるようになります。このサンプルでは、カラーの動画をリアルタイムでモノクロ化しています。 >DEMO
処理がスムーズなChromeまたはSafariでご覧下さい。

Webカメラ映像のキャプチャー

以下、script.js における画像処理の部分の概説です。

  capture.loadPixels();   //瞬間の画像を画素配列に取得
  for (var y=0; y<height; y+=8) {
    for (var x=0; x<width; x+=8) {
      var i = y * width + x;
      var b = capture.pixels[i*4+2];
      var radius = 8*scale * (255 - b)/255;
      ellipse(x*scale, y*scale, radius, radius);
   }
 }
}

1画素4バイトで、4つのデータが別々に配列に格納されるので、例えば、i 番目の画素のRGBα情報は以下の場所でアクセス可能です。

Webカメラ映像を録画・保存




音声のキャプチャー




音声を録画・保存

PAGES

GUIDE

DATA

Last-modified: 2020-02-02 (日) 18:12:38