JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="c"></canvas>
JavaScript
// I apologize for some of the shittiest code ever. I tried to make this for js1k but failed
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
c.width = c.height = 500;
var a = c.getContext('2d');
document.body.clientWidth; // fix bug in webkit: http://qfox.nl/weblog/218
blobs = {};
nb = 1;
np = 20;
r = 10;
inc = 2*Math.PI/np;
bound = 50;
for (i = 0; i < nb; i++) {
blob = blobs[i] = [];
blob.cx = cx = Math.random()*500;
blob.cy = cy = Math.random()*500;
for (j = 0; j < np; j++) {
p = blob[j] = {};
p.xp = p.x = cx+r*Math.cos(j*inc);
p.yp = p.y = cy+r*Math.sin(j*inc);
p.dx = p.dy = p.nx = p.ny = 0;
}
}
setInterval(function() {
/* if (Math.random()<.1) {
blob = blobs[nb++] = [];
blob.cx = cx = Math.random()*500;
blob.cy = cy = Math.random()*500;
for (j = 0; j < np; j++) {
p = blob[j] = {};
p.xp = p.x = cx+r*Math.cos(j*inc);
p.yp = p.y = cy+r*Math.sin(j*inc);
p.dx = p.dy = p.nx = p.ny = 0;
}
} */
a.clearRect(0,0,c.width,c.height);
a.beginPath();
for (i = 0; i < nb; i++) {
blob = blobs[i];
for (j=i+1;j<nb;j++) {
coll = blobs[j];
vx = coll.cx-blob.cx;
if (vx > -bound && vx < bound) {
vy = coll.cy-blob.cy;
if (vy > -bound && vy < bound) {
len = Math.sqrt(vx*vx+vy*vy);
dx = vx/len;
dy = vy/len;
for (k=0;k<np;k++) {
p1 = blob[k];
p2 = coll[k];
dp = Math.max(0, (p1.x-blob.cx)*dx+(p1.y-blob.cy)*dy-len/2);
p1.x -= dp*dx;
p1.y -= dp*dy;
dp = Math.min(0, (p2.x-coll.cx)*dx+(p2.y-coll.cy)*dy+len/2);
p2.x -= dp*dx;
p2.y -= dp*dy;
}
}
}
}
}
for (i = 0; i < nb; i++) {
...