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=1000, v=20, fps=60, wa=Math.sqrt(1.15), a=0.005;
var mfps=fps, ms=1000/fps, sms=ms;
var isDragging = false, numBall;
context.font = "12px Arial";

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

ball[n] = {};
ball[n].r = 80;
ball[n].x = 320;
ball[n].y = 300;
ball[n].vx = 0
ball[n].vy = 0;
ball[n].m = ball[n].r*ball[n].r;
ball[n].a = Math.sqrt(0.1);
ball[n].ax = 0;
ball[n].ay = 0;


ball[n+1] = {};
ball[n+1].r = 60;
ball[n+1].x = 480;
ball[n+1].y = 250;
ball[n+1].vx = 0;
ball[n+1].vy = 0;
ball[n+1].m = ball[n+1].r*ball[n+1].r;
ball[n+1].a = Math.sqrt(0.2);
ball[n+1].ax = 0;
ball[n+1].ay = 0;

canvas.onmousedown = canvasClick;   
window.onmouseup = stopDragging;
window.onmousemove = dragCircle;

function canvasClick(event) {
  if (event.which == 1) {
    for (i=0; i<2; i++) {
      var mouseX=event.pageX-canvas.offsetLeft-0.5;
      var mouseY=event.pageY-canvas.offsetTop-0.5;
      var dx=mouseX-ball[n+i].x;
      var dy=mouseY-ball[n+i].y;
      var l=dx*dx+dy*dy;
      if (l<ball[n+i].r*ball[n+i].r) {
        isDragging = true;
        numBall=i;
        ball[n+i].vx=0;
        ball[n+i].vy=0;
        return;
      }
    }
  }
}

function dragCircle(event) {
  if (isDragging == true) {
    var mouseX=event.pageX-canvas.offsetLeft-0.5;
    var mouseY=event.pageY-canvas.offsetTop-0.5;
    var dx=mouseX-ball[n+numBall].x;
    var dy=mouseY-ball[n+numBall].y;
    var l=Math.sqrt(dx*dx+dy*dy);
    ball[n+numBall].ax=a*dx/ball[n+numBall].r;
   ...