N-Body Problem II

forked from mbostock's block: N-Body Problem II

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #fff;
}

</style>
<canvas width="933" height="900"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height;

var n = 1000;

var nodes = d3.range(n).map(function() {
  var x = width * Math.random(),
      y =  200*Math.random();
  return {
    x: x,
    y: y,
    vx: 0.01,
    vy: 0.4
  };
});

var simulation = d3.forceSimulation(nodes)
		.alphaTarget(0.1)
    .force("charge", d3.forceManyBody().strength(0.01).distanceMax(0.1) )
    .force("center", d3.forceCenter(width / 2, 200))
    .force("Y", d3.forceY().strength(function(d,i){
      return Math.cos(i)*0.005+Math.sin(i)*0.05;                             
    	}))
    .on("tick", ticked);

function ticked() {
  context.clearRect(0, 0, width, height);
  context.fillStyle = '#3B6C73';
  context.font = "26px Helvetica Neue";
  context.fillText("[X] refugees can't wait to go to school tomorrow", 200, 500);
  context.lineWidth = 7;
  context.lineCap = "round";

for (var i = 0, node, vx, vy; i < n; ++i) {
    node = nodes[i];
    context.beginPath();
    context.moveTo(node.x, node.y);
    context.lineTo(node.x + node.vx * 0.1, node.y + node.vy * 0.1)
    context.strokeStyle = '#3B6C73';
    context.stroke();
  }
}

</script>

https://d3js.org/d3.v4.min.js