JSFiddle - React, Tailwind, and code Playground

by raxxla

HTML

<canvas id="canvas" width="800" height="600" style='border:1px solid;'></canvas>

JavaScript

var context = document.getElementById('canvas').getContext('2d');
var ball = [], n=150, v=1, fps=60;
var mfps=fps, ms=1000/fps, sms=ms;

for (var i=0; i<n; i++){
  var r = 3+6*Math.random();
  ball[i] = {};
  ball[i].x = Math.random()*(canvas.width-2*r)+r;
  ball[i].y = Math.random()*(canvas.height-2*r)+r;
  ball[i].r = r;
  ball[i].vx = v*Math.random()*Math.pow(-1, Math.round(Math.random()+1));
  ball[i].vy = v*Math.random()*Math.pow(-1, Math.round(Math.random()+1));
  ball[i].m = r*r;
}

setInterval(draw, sms);

function draw() {
  var date = new Date();
  context.clearRect(0, 0, canvas.width, canvas.height);
  var dt=1;
  for (var i=0; i<ball.length; i++) {
    findCollisions(dt);
    motion(i, dt);
    context.beginPath();
    context.arc(ball[i].x, ball[i].y, ball[i].r, 0, 2*Math.PI);
    context.stroke();
  }
  context.font = "12px Arial";
  var mms = new Date() - date;
  sms=ms-mms;
  if (sms<0) sms=0;
  fps=Math.round(1000/(sms + mms));
  if (fps<mfps) mfps=fps;
  context.fillText(fps + " fps", 4, 13);
  context.fillText(mfps + " min", 4, 26);
}

function findCollisions(dt) {
  var t, tc, q, w;
  for (var i=0; i<ball.length; i++) {
    for (var j=0; j<ball.length; j++) {
      var a=Math.pow(ball[i].vx-ball[j].vx, 2)+Math.pow(ball[i].vy-ball[j].vy, 2);
      var b=2*((ball[i].x-ball[j].x)*(ball[i].vx-ball[j].vx)+(ball[i].y-ball[j].y)*(ball[i].vy-ball[j].vy));
      var c=Math.pow(ball[i].x-ball[j].x, 2)+Math.pow(ball[i].y-ball[j].y, 2)-Math.pow(ball[i].r+ball[j].r, 2);
      var d=b*b-4*a*c;
      if (d>0) {
        d=Math.sqrt(d);
        var t1=(-b+d)/2/a;
        var t2=(-b-d)/2/a;
        if (t1<t2) {
          if (t1>0) tc=t1;
        }
        else if (t2>0) tc=t2;
      }
      if (t) {
        if (tc<t) t=tc, q=i, w=j;
      }
      else t=tc, q=i, w=j;
    }
  }
  if (t<dt) {
    for (var i=0; i<ball.length; i++) {
      motion(i, t);
    }
    dt-=t;
    collision(q, w);
  }
  else return;
  findCollisions(dt);
}

function collision(q, w) {
 ...