2007年06月01日

Processing

ProcessingとFlash

ProcessingとFlashで同じ機能を実装して、
それぞれ比較しました。

1|矩形を動かす

■Flash

// 初期化
mc._x = 0;

// 繰り返し処理
onEnterFrame = function(){
	mc._x ++;
}
■Processing
// 初期化
int X = 0;
void setup(){
  size(200, 200);
  background(255); 
  frameRate(25);
}

// 繰り返し処理
void draw(){
  background(255); 
  fill(0);
  rect(X++, height/2, 10, 10);
}

2|ボタンを作る

■Flash

// マウスが押された
mc.onPress = function(){
	trace("press");
}

// マウスが押された
mc.onRollOver = function(){
	trace("over");
}
■Processing
int circleX, circleY;
int circleSize = 50;
color circleColor, overColor, pressColor;
boolean over = false;
boolean pressed = false;

void setup()
{
  size(200, 200);
  circleColor = color(255);
  overColor = color(204);
  pressColor = color(100);
  circleX = width/2;
  circleY = height/2;
}

void draw()
{
  update(mouseX, mouseY);                // ボタンの状態チェック
  if(pressed){                           // ボタンが押された
    fill(pressColor);
  } else if(over) {                      // ロールオーバーした
    fill(overColor);
  } else {                               // 通常時
    fill(circleColor);
  }
  ellipse(circleX, circleY, circleSize, circleSize);
}

// ボタンの状態を更新
void update(int x, int y)
{
  // ロールオーバーしたか
  if( overCircle(circleX, circleY, circleSize) ) {
    over = true;
  }else {
    over = false;
  }
  // ボタンが押されたか
  if(over && mousePressed) {
    pressed = true;
  } else {
    pressed = false;
  }
}

// ロールオーバーしているか
boolean overCircle(int x, int y, int diameter) 
{
  // マウスとの距離
  float disX = x - mouseX;
  float disY = y - mouseY;
  if(sqrt(sq(disX) + sq(disY)) < diameter/2){ // マウスとの距離が、半径より小さなとき
    return true;
  } else {                                    // 大きいとき
    return false;
  }
}