JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<canvas id="c" height="500" width="500"></canvas>

JavaScript

// adapted slightly from  https://gist.github.com/Joncom/e8e8d18ebe7fe55c3894
function line_intersects(a1, a2, b1, b2) {
  if (a1 == b1 || a1 == b2 || a2 == b1 || a2 == b2) {
    // two segments which share a point we define as not intersecting
    return false;
  }
  var s1_x, s1_y, s2_x, s2_y;
  s1_x = a2.x - a1.x;
  s1_y = a2.y - a1.y;
  s2_x = b2.x - b1.x;
  s2_y = b2.y - b1.y;

  var s, t;
  s = (-s1_y * (a1.x - b1.x) + s1_x * (a1.y - b1.y)) / (-s2_x * s1_y + s1_x * s2_y);
  t = (s2_x * (a1.y - b1.y) - s2_y * (a1.x - b1.x)) / (-s2_x * s1_y + s1_x * s2_y);

  if (s >= 0 && s <= 1 && t >= 0 && t <= 1) {
    // Collision detected
    return true;
  }

  return false; // No collision
}

function generatePoints(nPoints, cWidth, cHeight) {
  var points = [];
  var nCorners = 0;
  if (false && nPoints >= 4) {
    points = [{
      x: 0,
      y: 0,
      dx: 0,
      dy: 0
    }, {
      x: 0,
      y: cHeight,
      dx: 0,
      dy: 0
    }, {
      x: cWidth,
      y: cHeight,
      dx: 0,
      dy: 0
    }, {
      x: cWidth,
      y: 0,
      dx: 0,
      dy: 0
    }];
    nCorners = 4;
  }

  for (var i = 0; i < (nPoints - nCorners); i++)
    points.push({
      x: Math.random() * cWidth,
      y: Math.random() * cHeight,
      dx: 0,
      dy: 0
    });
  return points;
}

// pretty naive approach
function pointsToSegments(points) {
  function dist(a, b) {
    return Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2);
  }
  var line_segments = [];
  for (var i = 0; i < points.length; i++) {
    var a = points[i];
    for (var o = i + 1; o < points.length; o++) {
      var b = points[o];
      line_segments.push({
        d: dist(a, b),
        a: a,
        b: b
      });
    }
  }
  line_segments.sort(function(a, b) {
    return a.d - b.d;
  });
  var culled = [line_segments[0]];
  for (var i = 1; i < line_segments.length; i++) {
    var s0 = line_segments[i];
    var intersects = false;
    for (var o = 0; o < culled.length; o++) {
      var s1 = culled[o];
  ...