box2djsの作法 その10

# 概要
box2djsの作法、調べてみた。
細胞の様な物、やってみた。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/d9c40610-dbe5-6ed0-e2ce-34532f14eb71.png)


# サンプルコード

```

var b2Vec2 = Box2D.Common.Math.b2Vec2,
	b2BodyDef = Box2D.Dynamics.b2BodyDef,
	b2Body = Box2D.Dynamics.b2Body,
	b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
	b2Fixture = Box2D.Dynamics.b2Fixture,
	b2World = Box2D.Dynamics.b2World,
	b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
    var NUM = 6;
var ball = [];
var body = [];
var world = new b2World(new b2Vec2(0, 0), false);
var flg = 0;
var bodyDef = new Box2D.Dynamics.b2BodyDef;
var fixDef = new Box2D.Dynamics.b2FixtureDef;
fixDef.restitution = 0.8;
function createWall(x, y, w, h) {
	bodyDef.type = b2Body.b2_staticBody;
	bodyDef.position.x = x + w / 2;
	bodyDef.position.y = y + h / 2;
	fixDef.shape = new Box2D.Collision.Shapes.b2PolygonShape;
	fixDef.shape.SetAsBox(w / 2, h / 2);
	world.CreateBody(bodyDef).CreateFixture(fixDef);
}
function createObjects() {
    bodyDef.type = b2Body.b2_dynamicBody;
    var i, x = 1.8;
    var shape;
    for (i = 0; i < NUM; i++) 
    {
        shape = new b2CircleShape(0.1);
        fixDef.shape = shape;
        bodyDef.position.x = x;
        bodyDef.position.y = 1.0;
        body[i] = world.CreateBody(bodyDef);
        body[i].CreateFixture(fixDef);
        x -= 0.3;
    }
}
createWall(0, 0, 2, 0.1);
createWall(0, 0, 0.1, 2);
createWall(2, 0, 0.1, 2);
createWall(0, 2, 2.1, 0.1);
createObjects();
var canvas, 
    ctx, 
    ime, 
    hztank, 
    gratank, 
    timer, 
    isstart, 
    count, 
    sokudo;
var i;
canvas = document.getElementById("c");
ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(0,0,0)";
canvas.width = 400;
canvas.height = 400;
ctx.fillRect(0, 0, 400, 400);
hztank = hizumiget();
gratank = graget();
sokudo = 20;    
for (i = 0; i < NUM; i++)
{
    ball[i] = {x : Math.random() * 400, y : Math.random() * 400, s : 0.5 + i / 7 * 3};
}    
ime = ctx.getImageData(0, 0, 400, 400);
count = 0;

function hizumiget() {
    var i, 
        j, 
        hz;
    hz = [];
    for (i = 0; i < 400; i++)
    {
        hz[i] = new Float32Array(400);
        for (j = 0; j < 400; j++)
        {
            hz[i][j] = 1 / (i * i + j * j);
        }
    }
    return hz;
}
function graget() {
    var a, 
      b, 
      c, 
      col, 
      len, 
      gr, 
      r1, 
      r2, 
      c1, 
      c2, 
      c3, 
      mf;
    mf = Math.floor;
    len = 100;
    col = [[55, 32, 0], [128, 219, 51]];
    gr = [];
    atai = 0;
    step = 1 / len;
    for (a = 0; a < len; a++)
    {
        r1 = 0.5 - Math.cos(atai * Math.PI) / 2;
        r2 = 1 - r1;
        c1 = col[0][0] * r1 + col[1][0] * r2;
        c2 = col[0][1] * r1 + col[1][1] * r2;
        c3 = col[0][2] * r1 + col[1][2] * r2;
        gr[a] = [mf(c1), mf(c2), mf(c3)];
        atai += step;
    }
    return gr;
}
function meta(ime, arr, han, ritu) {
    var i, 
      j, 
      k, 
      iti, 
      col, 
      r2;    
    iti = 0;
    for (i = 0; i < 400; i++)
    {
        for (j = 0; j < 400; j++)
        {
            var d = 0;
            for (k = 0; k < arr.length; k++)
            {
                d += hztank[Math.abs(arr[k][0] - i)][Math.abs(arr[k][1] - j)] * arr[k][2];
            }
            d = 1 / Math.pow(d, 0.5);
            d = Math.abs(han - d);
            d = (d / 20 + ritu) % 2;
            if (d > 1) 
                d = 2 - d;
            d = 0.5 - Math.cos(d * Math.PI) / 2;
            d = 1 / (d + 0.00001);
            r1 = (d + ritu) % 2;
            if (r1 > 1) 
                r1 = 2 - r1;
            r1 = Math.floor(r1 * gratank.length);
            ime.data[iti] = gratank[r1][0];
            ime.data[iti + 1] = gratank[r1][1];
            ime.data[iti + 2] = gratank[r1][2];
            iti += 4;
        }
    }
}
function byouga() {
    var i, 
      b;
    b = [];
    for (i = 0; i < ball.length; i++)
    {
        bl = ball[i];
        b[i] = [Math.floor(bl.y), Math.floor(bl.x), bl. s];
    }
    meta(ime, b, 120, count / sokudo * 2);
    ctx.putImageData(ime, 0, 0);
}
var j = 2;
function loop() {
  j++;
  if (j > 5) 
    j = 0;
  var rnd = Math.random() * 2 - 1;
  body[j].ApplyImpulse(new b2Vec2(rnd, rnd), body[j].GetWorldCenter());
	world.Step(1 / 60, 10, 10);
	world.ClearForces();
  for (var i = 0; i < ball.length; i++)
  {
    var p = body[i].GetPosition();
    ball[i].x = p.x * 200;
    ball[i].y = p.y * 200;
  }    
  byouga();
	setTimeout(loop, 300);
}
loop();




```

# 成果物

https://embed.plnkr.co/plunk/UrNt901QK0yMzfpS

以上。