Processing.js - processing の文法を使わない -

mtsuyugu (2008年5月17日 00:37) | 個別ページ | トラックバック(1)

http://tsuyuguchi.com/masaaki/mt/archives/2008/05/17-0037.php のはてなブックマーク件数

Processing.js、簡単に動くモノが作れて面白いです。ということで今日も processing.js でワチャゴナしてみました。

書いたコードはこちら。

var Ring = function(){
  this.init(arguments);
}
Ring.prototype = ({
  x:0,
  y:0,
  w:0,
  c:[255,204,0,200],
  tickw: 10,
  ticka: -20,
  init: function(args){
    this.x = args[0];
    this.y = args[1];
    this.w = args[2];
    this.c = this.c.slice(0);
    if( args[3] ){
      this.c = args[3].slice(0);
    }
  },
  update: function(){
    this.w += this.tickw;
    this.c[3] += this.ticka;
    if( this.c[3] >= 255 ) this.c[3] = 255;
    if( this.c[3] <= 0 ) return false;
    
    return true;
  },
  draw: function(){
    stroke.apply( this, this.c );
    ellipse( this.x, this.y, this.w, this.w );
  }
});

var ctrl = [];
var preX = 0;
var preY = 0;

function setup(){
  size(300,300);
  background(255);
  hasBackground = true;
  ellipseMode( RADIUS );
  frameRate(20);
  noFill();
};

function draw(){
  if( mouseX != preX || mouseY != preY ){
    ctrl.push( new Ring( mouseX, mouseY, 10 ) );
    preX = mouseX;
    preY = mouseY;
  }
  for( var i = ctrl.length - 1; i >= 0; i-- ){
    var ring = ctrl[i];
    if( !ring.update() ){
      ctrl = ctrl.slice(i+1);
      break;
    }
    ring.draw();
  }
}

動作サンプルもあります。重いですが IE でも動作します。

さて、今回は変数宣言から配列やクラスにいたるまで processing の文法を使っていません。id:amachang の解説にもありますが、processing の文法で書いても Processing の初期化でパースされて、javascript に変換された上で eval されるわけですからハナから javascript で書いても問題ないというわけです。ただ、注意点もあって、prototype を定義するときのような JSON でオブジェクトを定義するときは、

と書きますが、こう書くと "{}" がパース処理で processing における配列の初期値と認識されて

と置換されてしまいます。このままでは eval が失敗するので

と括弧で囲う必要があります。

まとめ：

本家 processing で動かすつもりがなく processing.js しか使わないのなら全部 javascript で書いても問題ない。
ただ、JSON でオブジェクトを書くときは要注意。

« project euler | トップ | Processing.js を使ってみる »

トラックバック(1)

このブログ記事を参照しているブログ一覧: Processing.js - processing の文法を使わない -

このブログ記事に対するトラックバックURL: http://tsuyuguchi.com/mt/mt-tb.cgi/388

.. - .. (2010年2月 9日 17:56)

.. 続きを読む