<div id='simulationBox1'></div>
<div id='simulationInfo1'></div>
<div id='simulationInfo2'></div>
<script src="/matter.min.js" type="text/javascript"></script>
<script type="text/javascript">
var particleEngine = Matter.Engine.create(document.body, {render: {element:document.getElementById("simulationBox1"), options: {wireframes: true, showAngleIndicator: false}}, constraintIterations:300, positionIterations:20, timing:{timeScale: 0.1}});
var N = 100; // Number of pearls
var S = 5; // Pearl radius
var L = 10; // Link length
var M = 730; // Number of filling particles (try 730)
document.getElementById('simulationInfo1').innerHTML='<b>Simulation 1</b><br />Number of pearls: N = '+N+'<br />Pearl radius: S = '+S+'<br /> Link length: L = '+L+'<br /> Filling particle count: M = '+ M;
particleEngine.world.gravity.y = 0.04; // try 0.04
var stack = Matter.Composite.create();
for (var i = 0; i < M; i++) {
  Matter.Composite.add(stack, Matter.Bodies.circle(400+Matter.Common.random(-N*L/Math.PI/3, N*L/Math.PI/3), 15+N*L/Math.PI/2+Matter.Common.random(-N*L/Math.PI/3, N*L/Math.PI/3), Matter.Common.random(2, 8), { friction: 0, restitution: 0, density: 1, collisionFilter: {category: 1}}));
};
var bridge = Matter.Composite.create();
for (var i = 0; i < N; i++) {
  Matter.Composite.add(bridge, Matter.Bodies.circle(400 + N*L/(Math.PI*2)*Math.sin(2*Math.PI*i/N), 15+N*L/(Math.PI*2) - N*L/(Math.PI*2)*Math.cos(2*Math.PI*i/N), S, {friction: 0, restitution: 0, density:0.5, collisionFilter: {category: 2, mask: 1}, isStatic: i == 0}));
}
for (var i = 0; i < N; i++) {
  Matter.World.add(particleEngine.world, Matter.Constraint.create({bodyA: bridge.bodies[i], pointA: { x: 0, y: 0 }, bodyB: bridge.bodies[(i+1)%N], pointB: { x: 0, y: 0 }, stiffness:7, length:L,render:{strokeStyle:'#00ffff'}}));
}
Matter.World.add(particleEngine.world, [
  stack,
  bridge,
  Matter.Bodies.rectangle(400, -40, 800, 10, { isStatic: true })
]);
Matter.Events.on(particleEngine.render, "afterRender", function(a){
  var str = 'Circumference:';
  var checksum = 0;
  var len = 0;
  for (var i = 0; i < N; i++) {
    len += Math.sqrt(Math.pow(bridge.bodies[i].position.x-bridge.bodies[(i+1)%N].position.x, 2) + Math.pow(bridge.bodies[i].position.y-bridge.bodies[(i+1)%N].position.y, 2));
  }
  var x0 = bridge.bodies[0].position.x-bridge.bodies[1].position.x;
  var y0 = bridge.bodies[0].position.y-bridge.bodies[1].position.y;
  var x1 = bridge.bodies[0].position.x-bridge.bodies[N-1].position.x;
  var y1 = bridge.bodies[0].position.y-bridge.bodies[N-1].position.y;
  str += ' '+len.toString()+'<br /> Tail tip angle (degrees): '+(((Math.atan2(y1, x1) - Math.atan2(y0, x0))*180/Math.PI + 360)%360).toString()+'<p />';
  document.getElementById('simulationInfo2').innerHTML=str;
});
var lemniscate = Matter.Composite.create()
var trix = Matter.Composite.create()
for (var i = 0; i < N; i++) {
  var s = 1.9150080481545374814*(2.0*i/(N)-1);
  Matter.Composite.add(trix, Matter.Bodies.circle(400 + L*N*(s - 2*Math.tanh(s))/3.8295479369488985, 15 + L*N*(2/Math.cosh(s) - 0.57683981788998291629)/3.8295479369488985, 1, {isStatic: true}));
}
for (var i = 0; i < N; i++) {
  Matter.World.add(particleEngine.world, Matter.Constraint.create({bodyA: trix.bodies[i], bodyB: trix.bodies[(i+1)%N],render:{strokeStyle:'#ff0000'}}));
}
Matter.Engine.run(particleEngine);
</script>