一定空間で跳ね返るデモ——2つの矩形のシミュレーション完成

var g = 180, e = 0.70;

var rects = [
{x:W*0.3,y:H*0.25,vx:150,vy:60,w:64,h:42,omega:1.5,angle:0.2,mass:1.0,hue:10},
{x:W*0.7,y:H*0.6,vx:-90,vy:-140,w:80,h:50,omega:-0.9,angle:0.6,mass:1.6,hue:190},
];

function inertia(r) { return r.mass*(r.w*r.w+r.h*r.h)/12; }

function getVerts(r) {
var hw=r.w/2,hh=r.h/2,c=Math.cos(r.angle),s=Math.sin(r.angle);
return [[-hw,-hh],[hw,-hh],[hw,hh],[-hw,hh]].map(function(p){
  return {x:r.x+p[0]*c-p[1]*s, y:r.y+p[0]*s+p[1]*c};
});
}

function applyWall(r) {
var I = inertia(r);
var verts = getVerts(r);
verts.forEach(function(v) {
  var pen, nx, ny;
  if (v.x < 0) {
    pen = -v.x; nx=1; ny=0;
  } else if (v.x > W) {
    pen = v.x-W; nx=-1; ny=0;
  } else if (v.y < 0) {
    pen = -v.y; nx=0; ny=1;
  } else if (v.y > H) {
    pen = v.y-H; nx=0; ny=-1;
  } else { return; }

  r.x += nx * pen * 0.5;
  r.y += ny * pen * 0.5;

  var rvx = r.vx - r.omega * (v.y - r.y);
  var rvy = r.vy + r.omega * (v.x - r.x);
  var vn = rvx * nx + rvy * ny;
  if (vn >= 0) return;

  var rx = v.x - r.x, ry = v.y - r.y;
  var rxn = rx * nx + ry * ny;
  var denom = 1/r.mass + (rx*ny - ry*nx)*(rx*ny - ry*nx)/I;
  var impulse = -(1+e) * vn / denom;

  r.vx += impulse * nx / r.mass;
  r.vy += impulse * ny / r.mass;
  r.omega += (rx * ny - ry * nx) * impulse / I;
});
}

function satCollide(ra, rb) {
var va=getVerts(ra), vb=getVerts(rb);
var axes=[];
[va,vb].forEach(function(v){
  for(var i=0;i<v.length;i++){
    var n=v[(i+1)%v.length];
    var ex=n.x-v[i].x, ey=n.y-v[i].y, len=Math.hypot(ex,ey)||1;
    axes.push({x:-ey/len,y:ex/len});
  }
});
var minOv=Infinity,mtvX=0,mtvY=0;
for(var ax of axes){
  var minA=Infinity,maxA=-Infinity,minB=Infinity,maxB=-Infinity;
  va.forEach(function(v){var p=v.x*ax.x+v.y*ax.y;minA=Math.min(minA,p);maxA=Math.max(maxA,p);});
  vb.forEach(function(v){var p=v.x*ax.x+v.y*ax.y;minB=Math.min(minB,p);maxB=Math.max(maxB,p);});
  var ov=Math.min(maxA,maxB)-Math.max(minA,minB);
  if(ov<=0) return null;
  if(ov<minOv){minOv=ov;mtvX=ax.x;mtvY=ax.y;}
}
return {overlap:minOv,nx:mtvX,ny:mtvY};
}

function resolveRects(ra, rb, mtv) {
var dx=rb.x-ra.x, dy=rb.y-ra.y;
if(dx*mtv.nx+dy*mtv.ny<0){mtv.nx=-mtv.nx;mtv.ny=-mtv.ny;}

var Ia=inertia(ra), Ib=inertia(rb);
var cx=(ra.x+rb.x)/2, cy=(ra.y+rb.y)/2;
var rax=cx-ra.x,ray=cy-ra.y,rbx=cx-rb.x,rby=cy-rb.y;

var vrelX=(ra.vx-ra.omega*ray)-(rb.vx-rb.omega*rby);
var vrelY=(ra.vy+ra.omega*rax)-(rb.vy+rb.omega*rbx);
var vn=vrelX*mtv.nx+vrelY*mtv.ny;
if(vn>0){
  var corr=mtv.overlap*0.5;
  var tm=ra.mass+rb.mass;
  ra.x-=mtv.nx*corr*(rb.mass/tm);
  ra.y-=mtv.ny*corr*(rb.mass/tm);
  rb.x+=mtv.nx*corr*(ra.mass/tm);
  rb.y+=mtv.ny*corr*(ra.mass/tm);
  return;
}

var ra_cross=rax*mtv.ny-ray*mtv.nx;
var rb_cross=rbx*mtv.ny-rby*mtv.nx;
var denom=1/ra.mass+1/rb.mass+ra_cross*ra_cross/Ia+rb_cross*rb_cross/Ib;
var impulse=-(1+e)*vn/denom;

ra.vx+=impulse*mtv.nx/ra.mass; ra.vy+=impulse*mtv.ny/ra.mass;
ra.omega+=ra_cross*impulse/Ia;
rb.vx-=impulse*mtv.nx/rb.mass; rb.vy-=impulse*mtv.ny/rb.mass;
rb.omega-=rb_cross*impulse/Ib;

var corr=mtv.overlap*0.4;
var tm=ra.mass+rb.mass;
ra.x-=mtv.nx*corr*(rb.mass/tm);
ra.y-=mtv.ny*corr*(rb.mass/tm);
rb.x+=mtv.nx*corr*(ra.mass/tm);
rb.y+=mtv.ny*corr*(ra.mass/tm);
}

function drawRect(r) {
var verts=getVerts(r);
ctx.save();
ctx.beginPath();
ctx.moveTo(verts[0].x,verts[0].y);
for(var i=1;i<verts.length;i++) ctx.lineTo(verts[i].x,verts[i].y);
ctx.closePath();
ctx.fillStyle='hsla('+r.hue+',75%,50%,0.85)';
ctx.fill();
ctx.strokeStyle='hsl('+r.hue+',80%,75%)';
ctx.lineWidth=2;
ctx.stroke();
ctx.fillStyle='rgba(255,255,0,0.8)';
ctx.beginPath(); ctx.arc(r.x,r.y,4,0,Math.PI*2); ctx.fill();

var speed=Math.hypot(r.vx,r.vy);
if(speed>10){
  var sc=0.2;
  ctx.beginPath(); ctx.moveTo(r.x,r.y); ctx.lineTo(r.x+r.vx*sc,r.y+r.vy*sc);
  ctx.strokeStyle='rgba(255,255,0,0.5)'; ctx.lineWidth=1.5; ctx.stroke();
}
ctx.restore();
}

function loop(ts) {
if (!loop.last) loop.last = ts;
var dt = Math.min((ts-loop.last)/1000, 0.04);
loop.last = ts;

rects.forEach(function(r) {
  r.vy += g * dt;
  r.vx *= (1 - 0.2*dt);
  r.vy *= (1 - 0.2*dt);
  r.omega *= (1 - 0.5*dt);
  r.x += r.vx * dt;
  r.y += r.vy * dt;
  r.angle += r.omega * dt;
});

rects.forEach(function(r){ applyWall(r); });

var mtv=satCollide(rects[0],rects[1]);
if(mtv) resolveRects(rects[0],rects[1],mtv);

ctx.fillStyle='rgba(13,17,23,0.55)';
ctx.fillRect(0,0,W,H);

ctx.strokeStyle='#2a4a5a';
ctx.lineWidth=2;
ctx.strokeRect(1,1,W-2,H-2);

rects.forEach(drawRect);

ctx.fillStyle='#4a6a7a';
ctx.font='11px monospace';
ctx.fillText('v0='+(Math.hypot(rects[0].vx,rects[0].vy)|0)+' v1='+(Math.hypot(rects[1].vx,rects[1].vy)|0),8,H-8);

requestAnimationFrame(loop);
}
requestAnimationFrame(loop);