KKostya · September 28, 2015 19:22
diff --git a/index.html b/index.html
 <style>
 .line { fill: none; stroke: black;     stroke-width: 0.5px; }
 .force { fill: none; stroke: red;     stroke-width: 0.5px; }
 .circle { fill: none; stroke: black;     stroke-width: 0.5px; }
 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>
    var N = 50, v0 = 1, k = 100, h = 0.01;
    var beads = d3.range(N).map(function(i){
        var alpha = 2*3.14159*i/N
        return { 
             x:     Math.cos(alpha),  y:    Math.sin(alpha), 
            vx: -v0*Math.sin(alpha), vy: v0*Math.cos(alpha), 
        };
    });
   
    function norm(v){return Math.sqrt(v.x*v.x + v.y*v.y);} 
    function distance(i) 
    {
        var il = i!= 0 ? i - 1 : N - 1;
        var dx = beads[i].x - beads[il].x;
        var dy = beads[i].y - beads[il].y;
        return Math.sqrt(dx*dx + dy*dy);
    }
    var d0 = distance(1) - v0*v0/(2*k*Math.sin(2*3.14159/N));
    
    function forces()
    {
        var modT = d3.range(N).map(function(i){
            return k * (1 - distance(i) / d0);
        });
        var F = d3.range(N).map(function(i){
            var il  = i!= 0 ? i - 1 : N - 1,
                dxl = beads[il].x - beads[i].x,
                dyl = beads[il].y - beads[i].y;
            var ir  = i != N - 1 ? i + 1 : 0,
                dxr = beads[ir].x - beads[i].x,
                dyr = beads[ir].y - beads[i].y;
            return {
                x: -modT[i] * dxl - modT[ir] * dxr,
                y: -modT[i] * dyl - modT[ir] * dyr,
            };
        });
        F.forEach(function(f,i) {
            f.y -= 0.05;
            if(beads[i].y < -1) f.y += 10;
        });
        return F;
    } 
    var currentF = forces(); 
    function step()
    {
        beads.forEach(function(b,i){
            b.x += h * b.vx + h * h * currentF[i].x / 2;
            b.y += h * b.vy + h * h * currentF[i].y / 2;
        });
        var newF = forces(); 
        beads.forEach(function(b,i){
            b.vx += h * (currentF[i].x + newF[i].x) / 2;
            b.vy += h * (currentF[i].y + newF[i].y) / 2;
        });
        currentF = newF;
    }
    
    var width = 960, height = 500;;
 
    var svg = d3.select("body")
                .append("svg")
                .attr("width",   width)
                .attr("height", height);
    var chainLine = svg.append("path").attr('class','line');
    var x = d3.scale.linear()
                    .range( [ 0, width])
                    .domain([    -3, 3]);
 
    var y = d3.scale.linear()
                    .range( [height, 0])
                    .domain([    -2*height/width, 4*height/width]);
    svg.append("line")
       .attr('class','line')
       .attr('x1', x(-5)).attr('x2',x( 5))
       .attr('y1', y(-1)).attr('y2',y(-1));
    var line = d3.svg.line()
                     .x(function(d) { return x(d.x); })
                     .y(function(d) { return y(d.y); });
    function update()
    {
        var ccls = svg.selectAll("circle").data(beads);
        ccls.enter().append("circle").attr("r", 3);
        ccls.attr("cx", function(d){return x(d.x);})
            .attr("cy", function(d){return y(d.y);});
        
        chainLine.attr("d", line(beads) + "Z");
 
        var frcs = svg.selectAll("line.force").data(beads);
        frcs.enter().append("line").attr('class','force');
        frcs.attr("x1", function(d,i){return x(d.x);})
            .attr("y1", function(d,i){return y(d.y);})
            .attr("x2", function(d,i){return x(d.x + 0.1*currentF[i].x/norm(currentF[i]));})
            .attr("y2", function(d,i){return y(d.y + 0.1*currentF[i].y/norm(currentF[i]));});
    }
    update();
    d3.timer(function() { 
        step();
        update();
    });
 </script>
	<style>
	.line { fill: none; stroke: black; stroke-width: 0.5px; }
	.force { fill: none; stroke: red; stroke-width: 0.5px; }
	.circle { fill: none; stroke: black; stroke-width: 0.5px; }
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var N = 50, v0 = 1, k = 100, h = 0.01;
	var beads = d3.range(N).map(function(i){
	var alpha = 23.14159i/N
	return {
	x: Math.cos(alpha), y: Math.sin(alpha),
	vx: -v0Math.sin(alpha), vy: v0Math.cos(alpha),
	};
	});

	function norm(v){return Math.sqrt(v.xv.x + v.yv.y);}
	function distance(i)
	{
	var il = i!= 0 ? i - 1 : N - 1;
	var dx = beads[i].x - beads[il].x;
	var dy = beads[i].y - beads[il].y;
	return Math.sqrt(dxdx + dydy);
	}
	var d0 = distance(1) - v0v0/(2kMath.sin(23.14159/N));

	function forces()
	{
	var modT = d3.range(N).map(function(i){
	return k * (1 - distance(i) / d0);
	});
	var F = d3.range(N).map(function(i){
	var il = i!= 0 ? i - 1 : N - 1,
	dxl = beads[il].x - beads[i].x,
	dyl = beads[il].y - beads[i].y;
	var ir = i != N - 1 ? i + 1 : 0,
	dxr = beads[ir].x - beads[i].x,
	dyr = beads[ir].y - beads[i].y;
	return {
	x: -modT[i] * dxl - modT[ir] * dxr,
	y: -modT[i] * dyl - modT[ir] * dyr,
	};
	});
	F.forEach(function(f,i) {
	f.y -= 0.05;
	if(beads[i].y < -1) f.y += 10;
	});
	return F;
	}
	var currentF = forces();
	function step()
	{
	beads.forEach(function(b,i){
	b.x += h * b.vx + h * h * currentF[i].x / 2;
	b.y += h * b.vy + h * h * currentF[i].y / 2;
	});
	var newF = forces();
	beads.forEach(function(b,i){
	b.vx += h * (currentF[i].x + newF[i].x) / 2;
	b.vy += h * (currentF[i].y + newF[i].y) / 2;
	});
	currentF = newF;
	}

	var width = 960, height = 500;;

	var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);
	var chainLine = svg.append("path").attr('class','line');
	var x = d3.scale.linear()
	.range( [ 0, width])
	.domain([ -3, 3]);

	var y = d3.scale.linear()
	.range( [height, 0])
	.domain([ -2height/width, 4height/width]);
	svg.append("line")
	.attr('class','line')
	.attr('x1', x(-5)).attr('x2',x( 5))
	.attr('y1', y(-1)).attr('y2',y(-1));
	var line = d3.svg.line()
	.x(function(d) { return x(d.x); })
	.y(function(d) { return y(d.y); });
	function update()
	{
	var ccls = svg.selectAll("circle").data(beads);
	ccls.enter().append("circle").attr("r", 3);
	ccls.attr("cx", function(d){return x(d.x);})
	.attr("cy", function(d){return y(d.y);});

	chainLine.attr("d", line(beads) + "Z");

	var frcs = svg.selectAll("line.force").data(beads);
	frcs.enter().append("line").attr('class','force');
	frcs.attr("x1", function(d,i){return x(d.x);})
	.attr("y1", function(d,i){return y(d.y);})
	.attr("x2", function(d,i){return x(d.x + 0.1*currentF[i].x/norm(currentF[i]));})
	.attr("y2", function(d,i){return y(d.y + 0.1*currentF[i].y/norm(currentF[i]));});
	}
	update();
	d3.timer(function() {
	step();
	update();
	});
	</script>