Processing:ProcessingとBox2Dの記述の比較 - 元Webデザイナー兼コーダーの備忘録

「The Nature of Code」からProccesingとBox2dの記述の比較について取り上げます。今までの書き方と比較しながらBox2Dの基本的な書き方を見ていきます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。

前提
Processingでの記述
PBox2Dでの記述
まとめ
参考書籍

前提

クリックすると四角形が描画されるプログラムを例に違いを見ていきます。

Processingでの記述

//A list for all of our rectangles
ArrayList<Box> boxes;

void setup(){
  size(200, 200);
  boxes = new ArrayList<Box>();
}

void draw(){
  background(255);
  
  //クリックでBoxオブジェクトを生成・追加
  if(mousePressed){
    Box p = new Box(mouseX, mouseY);
    boxes.add(p);
  }
  
  //描画
  for(Box b : boxes){
    b.display();
  }
}

class Box{
  float x, y;
  float w,h;
  
  //コンストラクタ
  Box(float x_, float y_){
    x = x_;
    y = y_;
    w = 16;
    h = 16;
  }
  
  //図形の描画
  void display(){
    fill(127);
    stroke(0);
    strokeWeight(2);
    rectMode(CENTER);
    rect(x, y, w, h);
  }
}

PBox2Dでの記述

//A list for all of our rectangles
import shiffman.box2d.*;
import org.jbox2d.common.*;  //Vec2クラスを扱う
import org.jbox2d.dynamics.*;  //BodyDefクラスを扱う
import org.jbox2d.collision.shapes.*;  //PolygonShapeクラスを扱う

ArrayList<Box> boxes;
Box2DProcessing box2d;

void setup(){
  size(200, 200);
  
  //Box2Dを使うための準備
  box2d = new Box2DProcessing(this);
  box2d.createWorld();
  
  boxes = new ArrayList<Box>();
}

void draw(){
  background(255);
  
  //必須の記述
  box2d.step();
  
  //クリックでBoxオブジェクトを生成・追加
  if(mousePressed){
    Box p = new Box(mouseX, mouseY);
    boxes.add(p);
  }
  
  //図形の描画
  for(Box b : boxes){
    b.display();
  }
}

class Box{
  Body body;
  float w,h;
  
  //コンストラクタ
  Box(float x, float y){
    w = 16;
    h = 16;
    
    //ボディの定義
    BodyDef bd = new BodyDef();
    //ボディのタイプ
    bd.type = BodyType.DYNAMIC;
    //ボディの座標をワールド座標に変換・設定
    bd.position.set(box2d.coordPixelsToWorld(x, y));
    //ボディの作成
    body = box2d.createBody(bd);
    
    //形状の定義
    PolygonShape ps = new PolygonShape();
    float box2dW = box2d.scalarPixelsToWorld(w/2);
    float box2dH = box2d.scalarPixelsToWorld(h/2);
    ps.setAsBox(box2dW, box2dH);
    
    //フィクスチャの定義
    FixtureDef fd = new FixtureDef();
    //フィクスチャに形状を割り当てる
    fd.shape = ps;
    //物理パラメータの設定
    fd.density = 1; //密度
    fd.friction = 0.3;  //摩擦
    fd.restitution = 0.5; //反発係数
    
    //ボディにフィクスチャを割り当てる
    body.createFixture(fd);
  }
  
  //図形の描画
  void display(){
    //座標の取得(ワールド→ピクセル)
    Vec2 pos = box2d.getBodyPixelCoord(body);
    //角度の取得
    float a = body.getAngle();
    
    pushMatrix();
    translate(pos.x, pos.y);
    //Box2DとProcessingでは、回転方向が逆なのでマイナスをかける
    rotate(-a);
    fill(175);
    stroke(0);
    strokeWeight(2);
    rectMode(CENTER);
    rect(0, 0, w, h);
    popMatrix();
  }
}