SAT

Copy

import {
  drawLine,
  drawGrid,
  drawPoints,
  drawPolygon,
  generateBasis,
  initApp
} from './utils/graphics/pixi/utils';
import {generatePoints} from './utils/graphics/pixi/figure';
import convexHull from './utils/graphics/2d/convex-hull';
import Shape from './utils/graphics/2d/shape';
import Vector from './utils/graphics/2d/vector';
import SAT from './utils/graphics/collision/sat';

var colorSet = [
  0x8be9fd,
  0x50fa7b,
  0xffb86c,
  0xff79c6,
  0xbd93f9,
  0xff5555,
  0xf1fa8c ];
var app = initApp('#container');
var basis = generateBasis(app);

drawGrid(app);

var points1 = convexHull(generatePoints(5, [-200, -100, 300, 100]));
var points2 = convexHull(generatePoints(5, [-300, -100, 200, 100]));

drawPoints(app, basis, points1, {color: colorSet[1], size: 3});
drawPoints(app, basis, points2, {color: colorSet[5], size: 3});
drawPolygon(app, basis, points1.concat( [points1[0]]), {color: colorSet[1], size: 3});
drawPolygon(app, basis, points2.concat( [points2[0]]), {color: colorSet[5], size: 3});

var shape1 = new Shape(points1.map(function (p) { return new Vector(p.x, p.y); }));
var shape2 = new Shape(points2.map(function (p) { return new Vector(p.x, p.y); }));
var mtv = SAT.getMTV(shape1, shape2);
console.log(mtv);

if (mtv) {
  var points = [].concat( mtv.shape.vertices );
  var dx = mtv.axis.x * mtv.overlap;
  var dy = mtv.axis.y * mtv.overlap;

drawLine(app, basis, {x: 0, y: 0}, {x: dx, y: dy}, {color: colorSet[3]});

points = points.map(function (p) {
    var point = new Vector(p.x + dx, p.y + dy);
    drawLine(app, basis, p, point, {color: colorSet[4]});
    return point;
  });
  drawPoints(app, basis, points, {color: colorSet[4], size: 3});
  drawPolygon(app, basis, points.concat( [points[0]]), {color: colorSet[4], size: 3});
}

<!DOCTYPE html>
<html>
  <head>
    <title>SAT</title>
    <link rel="stylesheet" href="http://www.3daysofprogramming.com/playground/pg.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Map,Set,Promise"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script>
    <script src="http://www.3daysofprogramming.com/playground/examples/resources/js/stats.js"></script>
  </head>
  <body>
    <div id="container" class="main">
    </div>
    <script>
      import {
        drawLine,
        drawGrid,
        drawPoints,
        drawPolygon,
        generateBasis,
        initApp
      } from './utils/graphics/pixi/utils';
      import {generatePoints} from './utils/graphics/pixi/figure';
      import convexHull from './utils/graphics/2d/convex-hull';
      import Shape from './utils/graphics/2d/shape';
      import Vector from './utils/graphics/2d/vector';
      import SAT from './utils/graphics/collision/sat';

      var colorSet = [
        0x8be9fd,
        0x50fa7b,
        0xffb86c,
        0xff79c6,
        0xbd93f9,
        0xff5555,
        0xf1fa8c ];
      var app = initApp('#container');
      var basis = generateBasis(app);

      drawGrid(app);

      var points1 = convexHull(generatePoints(5, [-200, -100, 300, 100]));
      var points2 = convexHull(generatePoints(5, [-300, -100, 200, 100]));

      drawPoints(app, basis, points1, {color: colorSet[1], size: 3});
      drawPoints(app, basis, points2, {color: colorSet[5], size: 3});
      drawPolygon(app, basis, points1.concat( [points1[0]]), {color: colorSet[1], size: 3});
      drawPolygon(app, basis, points2.concat( [points2[0]]), {color: colorSet[5], size: 3});

      var shape1 = new Shape(points1.map(function (p) { return new Vector(p.x, p.y); }));
      var shape2 = new Shape(points2.map(function (p) { return new Vector(p.x, p.y); }));
      var mtv = SAT.getMTV(shape1, shape2);
      console.log(mtv);

      if (mtv) {
        var points = [].concat( mtv.shape.vertices );
        var dx = mtv.axis.x * mtv.overlap;
        var dy = mtv.axis.y * mtv.overlap;

        drawLine(app, basis, {x: 0, y: 0}, {x: dx, y: dy}, {color: colorSet[3]});

        points = points.map(function (p) {
          var point = new Vector(p.x + dx, p.y + dy);
          drawLine(app, basis, p, point, {color: colorSet[4]});
          return point;
        });
        drawPoints(app, basis, points, {color: colorSet[4], size: 3});
        drawPolygon(app, basis, points.concat( [points[0]]), {color: colorSet[4], size: 3});
      }

    </script>
  </body>
</html>