JSFiddle - React, Tailwind, and code Playground

by ElijahCirioli

HTML

<canvas id="myCanvas" width="700" height="700"></canvas>

JavaScript

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

//variables
var particles = []; //list of all particles
//particle constants
const numOfParticles = 120; //how many particles to create
const maxRadius = 4; //the maximum radius of a point particle
const maxSquareDist = 10000; //the maximum length of a line between particles (squared)
const maxSpeed = 2; //the maximum x or y component of the velocity vector
//color constants
const backgroundColor = "white"; //the color of the background
const particleColor = [0, 0, 0]; //the color of a point and line [r, g, b] (alternate = [108, 173, 186])

function Particle() {
	this.x = Math.random() * canvas.width;
	this.y = Math.random() * canvas.height;
	this.r = Math.floor(Math.random() * maxRadius) + 1;
	this.velX = (Math.random() * 2 * maxSpeed) - maxSpeed;
	this.velY = (Math.random() * 2 * maxSpeed) - maxSpeed;
}

Particle.prototype.update = function() {
	this.x += this.velX;
	this.y += this.velY;
	
	//wrap horizontally
	if (this.x > canvas.width + this.r) {
		this.x = -this.r;
	} else if (this.x < -this.r) {
		this.x = canvas.width + this.r;
	}
	
	//wrap vertically
	if (this.y > canvas.height + this.r) {
		this.y = -this.r;
	} else if (this.y < -this.r) {
		this.y = canvas.height + this.r;
	}
}

Particle.prototype.draw = function() {
	//draw point
	context.fillStyle = "rgb(" + particleColor[0] + ", " + particleColor[1] + ", " + particleColor[2] + ")";
	context.beginPath();
	context.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
	context.fill();
	
	//iterate over all other particles
	for (var i = 0; i < particles.length; i++) {
		var other = particles[i];
		var dist = squareDist(this, other);
		if (this !== other && dist < maxSquareDist) {
			//draw line
			var alpha = (1.1 - (dist / maxSquareDist));
			context.strokeStyle = "rgba(" + particleColor[0] + ", " + particleColor[1] + ", " + particleColor[2] + ", " + alpha + ")";
			context.beginPath();
			context.moveTo(this.x,...