processing:p5js

p5.js: Processingをブラウザで動かす

Processing を javascript 形式でコーディングすることで簡単にブラウザ上でプロセッシングを動作させることができます.様々なやり方でブラウザ上での実装ができます.ここではそのやり方と最初に抑えておくべきjsでのポイント(java-Processingとjs-Processingの違い)を記述します.

Processingに慣れていればこれが一番簡単かもしれません.下記のようにp5.jsを選択すれば js モードに切り替わります.記述したプログラムを実行するとデフォルトのブラウザが開いて画面が描画されます.

試しに下記プログラムをコピペして動作を確認してみましょう.

function piet(x0, y0, x1, y1, N) {
  if (N == 0) {
    let sw = 10; //this is the stroke width for the rectangle's border
    let c = [[255,0,0], [0,0,255], [0,255,255], [255,255,0] ];
    fill(c[int(random(c.length))]);
    
    stroke(0);
    strokeWeight(sw);
    rect (x0, y0, x1-x0, y1-y0);
  } else {
    let i = int(random(x0, x1)); //Pick a random x coordinate inside the current rectangle
    let j = int(random(y0, y1)); //Pick a random y coordinate inside the current rectangle
    piet(x0, y0, i, j, N-1); // Recurse on upper left rectangle
    piet(i, y0, x1, j, N-1); // Recurse on upper right rectangle
    piet(x0, j, i, y1, N-1); // Recurse on lower left rectangle
    piet(i, j, x1, y1, N-1); // Recurse on lower right rectangle
  }  
 
}

function setup() {
  createCanvas(400, 400);
  piet(0,0,400,400,2);
}

function draw() {
}

上記が伝統的なProcessing IDEを利用した場合の実行ですが,2018年8月31日にProcessing Foundationからp5.js Web Editorがアナウンスされたことで,環境構築の手間が大きく省かれました.端的に言えば,ブラウザで動作するProcessing IDEになります.試しに下記リンクに飛んでみてください.

先ほど作成したモンドリアンのコンポジションが確認できたと思います,これは同時に編集もできます.使い方は下記動画を参照してください.ログインせずとも利用できますが,ファイルの保存やshare等の機能を利用するにはアカウントを作成し,ログインしておくとよいでしょう.

下記のオフィシャル解説がよくまとまっているので,このページを参照してください.

このページでも簡単にまとめておきます.

最初のsetupとdrawは次のようになります.

// Processingの場合
void setup(){}
void draw(){}
// p5.jsの場合
function setup(){}
function draw(){}

varとletを用いて変数を指定します.従来のマニュアル型指定ではなく自動型指定になるので,勝手によろしくやってくれるわけです.で,varとletは何が違う家というと,スコープが異なる点です.ブロックが変わると参照できないのがletで参照できるのがvarです.もうちょっと簡単にいうと,global変数はvarでローカル変数はletで宣言すると思っておけば良いです.

javascriptにおいてもclassは利用できますが,微妙に書き方が異なりますので,覚えておきましょう.クラス内のメンバ変数の宣言はjavascriptではコンストラクタ内にてthis参照付きで宣言してあげるとそれがメンバ変数として利用できるようになります.

// Processing
class Hello{
  Hello(String _message)
  {
    message = _message;
  }
  void echo(){
    print(message);
  }
  String message;
}

Hello hello = new Hello("Hello World");
void setup()
{
  hello.echo();
}
void draw()
{
}
// p5.js
class Hello {
  constructor(message) {
    this.message = message;
  }
  echo() {
    print(this.message);
  }  
}

var hello = new Hello("Hello World");

function setup() {
  hello.echo();
}
function draw() {
}

Processingに慣れているけど,p5.jsは初めて,という方にチートシート(よく使う項目を見やすく一枚のスライドにまとめたもの)があるので,以下リンクを利用するとよいでしょう.

  • processing/p5js.txt
  • 最終更新: 2020/01/08 11:10
  • by baba