Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

Processing環境のJS移植 p5.js を使ってみる

p5.jsはprosessingのチームが協力して作っている、ProcessingのJS移植です。
一部関数の取り扱いが違いますが、概ねProcessingと同じ感じで開発ができます。

実際のところ

公式のWEBエディタを用いてProcessingのサンプル
Storing Inputを動かしてみます。

p5.js Web Editor

var num = 60;
var mx = new Float32Array(num);
var my = new Float32Array(num);

function setup() {
  createCanvas(480, 360);
  noStroke();
  fill(255, 153); 
}

function draw() {
  background(51); 
  
  // Cycle through the array, using a different entry on each frame. 
  // Using modulo (%) like this is faster than moving all the values over.
  var which = frameCount % num;
  mx[which] = mouseX;
  my[which] = mouseY;
  
  for (var i = 0; i < num; i++) {
    // which+1 is the smallest (the oldest in the array)
    var index = (which+1 + i) % num;
    ellipse(mx[index], my[index], i, i);
  }
}

レンダリングすると、こんな感じ。
ちゃんと軌跡がでてますね。
f:id:shuzo_kino:20191017233158p:plain

Processing(Java)から移植する際にしたこと

  • size関数をcreateCanvas関数に変更
  • 型宣言の変更。*1

ライブラリ群

ライブラリ群をみると、やはりJSベースとあってWEB系と親和性の高いものが揃っています。
JSONXMLのパーサーやDOMの操作、HTTPのGET/POSTがあるのは地味に嬉しいですね。

*1:筆者はクソザコなのでjavascriptのfloatの配列をはじめて知りました