JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="screen" width="300" height="300"></canvas>
CSS
body {
background-color: #ddd;
}
JavaScript
var p = [];
var pt = {};
pt.y = pt.x = 20;
pt.ys = pt.xs = 0;
while (pt.x < 100) {
p.push(new Object());
p[p.length-1].ox = p[p.length-1].x = pt.x;
p[p.length-1].oy = p[p.length-1].y = pt.y;
p[p.length-1].xs = pt.xs;
p[p.length-1].ys = pt.ys;
pt.x += 20;
}
while (pt.y < 100) {
p.push(new Object());
p[p.length-1].ox = p[p.length-1].x = pt.x;
p[p.length-1].oy = p[p.length-1].y = pt.y;
p[p.length-1].xs = pt.xs;
p[p.length-1].ys = pt.ys;
pt.y += 20;
}
while (pt.x > 20) {
p.push(new Object());
p[p.length-1].ox = p[p.length-1].x = pt.x;
p[p.length-1].oy = p[p.length-1].y = pt.y;
p[p.length-1].xs = pt.xs;
p[p.length-1].ys = pt.ys;
pt.x -= 20;
}
while (pt.y > 0) {
p.push(new Object());
p[p.length-1].ox = p[p.length-1].x = pt.x;
p[p.length-1].oy = p[p.length-1].y = pt.y;
p[p.length-1].xs = pt.xs;
p[p.length-1].ys = pt.ys;
pt.y -= 20;
}
var canvas = document.getElementById('screen');
var graphics = canvas.getContext('2d');
function ef() {
calcLoop(p);
graphics.fillStyle = "#fff";
graphics.fillRect(0, 0, canvas.width, canvas.height);
graphics.beginPath();
graphics.moveTo(p[0].x, p[0].y);
for (var n=1; n < p.length; n++) {
graphics.lineTo(p[n].x, p[n].y);
}
graphics.fillStyle = "#999";
graphics.fill();
window.requestAnimationFrame(ef);
}
canvas.onclick = function() {
n = Math.floor(Math.random()*p.length);
p[n].xs = (Math.random()-.5)*20;
p[n].ys = (Math.random()-.5)*20;
};
function calcLoop(p) {
var am = p.length;
var xd, yd, d;
var dcy = .97;
var pwr = 1/40;
var ent = .25;
for (var n=0; n<am; n++) {
p[n].xs *= dcy;
p[n].ys *= dcy;
if (p[n].xs > 11 || p[n].xs < -11) {
p[n].xs = 11 * (p[n].xs<0 ? -1 : 1);
}
p[n].xs -= (p[n].x - p[n].ox)*pwr;
p[n].ys -= (p[n].y - p[n].oy)*pwr;
p[n].x += p[n].xs;
p[n].y += p[n].ys;
}
var n2 = p.length-1;
for (var n = 0; n < am; n++) {
xd = p[n2].x-p[n].x;
yd =...