D3 - LiquidFun DamBreak

LiquidFunのParticleサンプル. 描画系にD3.js利用版.

by Glutamat

HTML

<script src="http://google.github.io/liquidfun/testbed/liquidfun.js"></script>
<div id="viz"></div>

JavaScript

'use strict';

//  注! グローバル変数にworldという名前でb2World用変数を用意しておかないと落ちる.
var world;
var boundsNodes = [[-1, 0], [1, 0], [1, 4], [-1, 4]]; //  境界形状
var floaters = [
	{nodes:[[-0.1, -0.2],[0.1, -0.2],[0.1, 0.2],[-0.1, 0.2]], pos:[0.5, 2]},
	{nodes:[[0, 0.2],[0.1732, -0.0866],[-0.1732, -0.0866]], pos:[-1.5, 3]}
];
var pgDefs = [		//  particleGroup毎の初期形状
	{nodes:[[0.5, 0.1], [1.9, 0.1], [1.9, 2.5], [0.5, 1.0]]},
	{nodes:[[-0.5, 0.1], [-1.9, 0.1], [-1.9, 2.5], [-0.5, 1.0]]}
];
var timeStep = 1.0 / 60.0, velocityIterations = 8, positionIterations = 3;

var liquidFunWorld = {

	init: function() {
		var gravity = new b2Vec2(0, -10);
		var boundsBody, boxShape;
		var psd, particleSystem;

		// 環境定義
		world = new b2World(gravity);

		// 剛体(static) 関連
		boundsBody= world.CreateBody(new b2BodyDef());
		boxShape = new b2ChainShape();
		boxShape.vertices = boundsNodes.map(function(node){
			return new b2Vec2(node[0], node[1]);
		});
		boxShape.CreateLoop();
		boundsBody.CreateFixtureFromShape(boxShape, 0);

/* 		// 剛体(dyanmic)関連ここから
		floaters.forEach(function(floaterDef){
		  var dynamicBodyDef = new b2BodyDef(), body, shape;
		  dynamicBodyDef.type = b2_dynamicBody;
		  body = world.CreateBody(dynamicBodyDef);
		  shape = new b2ChainShape();
		  shape.vertices = floaterDef.nodes.map(function(node){
		    return new b2Vec2(node[0], node[1]);
		  });
		  shape.CreateLoop();
		  body.CreateFixtureFromShape(shape, 1);
		  body.SetTransform(new b2Vec2(floaterDef.pos[0], floaterDef.pos[1]), 0);
		  // 質量定義
		  body.SetMassData(new b2MassData(0.1, new b2Vec2(0, 0), 0.03));
		}); */

		// Particle モジュール関連ここから
		psd = new b2ParticleSystemDef();
		psd.radius = 0.05;				 // 粒子半径
		psd.dampingStrength = 0.1; // 減衰の強さ

		particleSystem = world.CreateParticleSystem(psd);

		pgDefs.forEach(function(def){
			var shape = new b2PolygonShape(), pd = new b2ParticleGroupDef();
			shape.vertices = def.nodes.map(function(node){
				return new b2Vec2(node[0], node[1]);
			});
			pd.shape =...