Untitled

<!DOCTYPE html>
<html>
<head>
<title>Capture 1.0.2</title>
<meta charset="UTF-8"/>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="800" style="border:1px solid #d3d3d3;"></canvas>
<p id="hud">Ready...</p>
<script>

var theCanvas = document.getElementById("canvas");
var ctx = theCanvas.getContext("2d");

var n = 100; // n-body physics
var s = 1000;
var x = []; // x-coordinate
var y = []; // y-coordinate
var xv = []; // x-velocity
var yv = []; // y-velocity
var m = []; // mass
var halfPi = Math.PI / 2;

// random floating point
function randfloat(min, max) {
  return Math.random() * (max - min) + min; // min inclusive, max excluded
}

// random integer
function randint(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; // min and max inclusive
}

function init() {

  // A main star
  x[0] = 500;
  y[0] = 400;
  xv[0] = 0;
  yv[0] = 0;
  m[0] = 1; // try mass 100, 1000, and other values

  // Satellites starting in nearly circular orbits around main star
  var min = 50;
  var max = 400;

  for (var i = 1; i < s; i++) {
    var theta = randfloat(0, halfPi * 4); // Direction from star
    var radius = randfloat(min, max); // Distance from star

    var equation = (radius - min) / (max - min); // Even distribution away from central focus.
      if (equation < Math.random()) {
        radius = max - radius + min;
      }

    x[i] = x[0]+Math.sin(theta) * radius; // Locate on grid
    y[i] = y[0]+Math.cos(theta) * radius;
    xv[i] = Math.sin(theta + halfPi) * (.0012 * radius); // Circular orbit within distributed disk.
    yv[i] = Math.cos(theta + halfPi) * (.0012 * radius);
    // xv[i] = Math.sin(theta + halfPi) * Math.pow(m[0] / radius, 0.5); // Circular orbit around dominant center.
    // yv[i] = Math.cos(theta + halfPi) * Math.pow(m[0] / radius, 0.5);
    m[i] = 0;
    if (i < n) {
      m[i] = 1;
    }
  }

/*
  // Set planet 1.
    var theta = halfPi * 0;
    var radius = 100;
    x[1] = x[0]+Math.sin(theta) * radius;
    y[1] = y[0]+Math.cos(theta) * radius;
    xv[1] = Math.sin(theta + halfPi) * Math.pow(m[0] / radius, 0.5);
    yv[1] = Math.cos(theta + halfPi) * Math.pow(m[0] / radius, 0.5);
    m[1] = 10;

  // Set planet 2.
    var theta = halfPi * 2/3;
    var radius = 100;
    x[2] = x[0]+Math.sin(theta) * radius;
    y[2] = y[0]+Math.cos(theta) * radius;
    xv[2] = Math.sin(theta + halfPi) * Math.pow(m[0] / radius, 0.5);
    yv[2] = Math.cos(theta + halfPi) * Math.pow(m[0] / radius, 0.5);
    m[2] = 1;

  let xa = 0;
  let ya = 0;
  let tm = 0;
  for (var i = 0; i < n; i++) { // Average mass velocities.
    xa += xv[i]*m[i];
    ya += yv[i]*m[i];
    tm += m[i];
  }
  for (var i = 0; i < n; i++) { // Correct mass velocities to zero average.
    xv[i] += -xa/tm;
    yv[i] += -ya/tm;
  }
*/
}
init();

function mainloop() {

  for (let i = 0; i < s; i++) { // Accelerate all bodies.
    for (let j = 0; j < n; j++) { // But only test effects of n bodies (with mass).
      if (i != j) {
        let xd = x[j] - x[i];
        let yd = y[j] - y[i];
        let hyp2 = (xd * xd) + (yd * yd);
        if (hyp2 > 16) {
          iFact = (m[j] / hyp2) / Math.sqrt(hyp2);
        xv[i] += xd * iFact;
        yv[i] += yd * iFact;
        }
        else {
          iFact = m[j]*0.015625;
        xv[i] = (xv[j]*m[j]+xv[i]*m[i])/(m[j]+m[i]);
        yv[i] = (yv[j]*m[j]+yv[i]*m[i])/(m[j]+m[i]);
        xv[j] = xv[i];
        yv[j] = yv[i];
        xv[i] += xd * iFact;
        yv[i] += yd * iFact;
        }
      }
    }
    xv[i] -= .02*xv[i]*(Math.abs(500-x[i])>450)*(((500-x[i])>0)==(xv[i]<0)); // slam on brakes before escape
    yv[i] -= .02*yv[i]*(Math.abs(400-y[i])>350)*(((400-y[i])>0)==(yv[i]<0));
  }
  // xv[0] += (500-x[0])*.00001-xv[0]*.005; // centering ballast with viscosity
  // yv[0] += (400-y[0])*.00001-yv[0]*.005;
  for (let i = 0; i < s; i++) {
    //let pd = Math.ceil(Math.pow(m[i],(1/3))*3+3.01);

    //ctx.clearRect(x[i]-pd/2, y[i]-pd/2, pd*2, pd*2);

    autoFade++;
    if (autoFade > 10000 / x.length) {
      autoFade = 0;
      ctx.fillStyle = "rgba(0, 0, 0, " + (50 * 0.002) + ")";
      ctx.fillRect(0, 0, theCanvas.width, theCanvas.height);
    }

    x[i] += xv[i];
    y[i] += yv[i];
    if (Math.floor(i / 2) == i / 2) {
      ctx.fillStyle = "yellow";
    }
    else {
      ctx.fillStyle = "white";
    }
    ctx.fillRect(x[i], y[i], 3, 3);
  }
}
var autoFade = 0;

var start = setInterval(mainloop, 10);

</script>
</body>
</html>