Pulse/polygonTest.html at master · JasonDykstra/Pulse · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Polygon Testing</title>
</head>
<body>
  <canvas id="canvas" width="800" height="600" style="background-color: lightblue"></canvas>

  <script type="text/javascript" src="js/projection.js"></script>
  <script type="text/javascript" src="js/vector.js"></script>
  <script type="text/javascript" src="js/methods.js"></script>
  <script type="text/javascript" src="js/polygon.js"></script>
  <script type="text/javascript" src="js/circle.js"></script>

  <script type="text/javascript">

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    // Polygon 1
    let point1 = new Vector(450, 250);
    let point2 = new Vector(500, 250);
    let point3 = new Vector(525, 300);
    let point4 = new Vector(500, 400);
    let point5 = new Vector(450, 400);
    let point6 = new Vector(425, 300);
    let points1 = [point1, point2, point3, point4, point5, point6];
    let polygon1 = new Polygon(points1);
    console.log("area1", polygon1.area);

    // Polygon 2
    let point01 = new Vector(150, 100);
    let point02 = new Vector(450, 100);
    let point03 = new Vector(450, 300);
    let point04 = new Vector(150, 300);
    let points2 = [point01, point02, point03, point04];
    let polygon2 = new Polygon(points2);
    console.log("area2", polygon2.area);

    // Circle
    let center = new Vector(170, 140);
    let circle = new Circle(center, 100, 0, Math.PI/2);

    // draw shapes
    polygon1.draw(context, "blue");
    console.log("Polygon 1:")
    console.log(polygon1);
    polygon2.draw(context, "black");
    console.log("Polygon 2:")
    console.log(polygon2);
    // circle.draw(context, "red");
    // console.log("Circle: ");
    // console.log(circle);

    let overlaps = polygon1.overlapsPolygon(polygon2, true);

    console.log("Polygon1 overlaps Polygon2: " + overlaps);
    if(overlaps != false) {
      overlaps.draw(context, new Vector(canvas.width/2, canvas.height/2), 2);
      polygon2.translate(overlaps);
      polygon2.draw(context, "Tomato");
    }


  </script>

</body>
</html>