JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

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

CSS

html, body, canvas {
				margin: 0;
				padding: 0;
				line-height: 0;
				background: black;
			}

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];
						if (line_intersects(s0.a, s0.b, s1.a, s1.b)) {
							intersects = true;
							break;
						}
					}
					if...