graphics/polygon.js

  1. 'use strict';
  3. var Thing = require('./thing.js');
  5. /**
  6.  * @class Polygon
  7.  * @augments Thing
  8.  */
  9. function Polygon() {
  10.     if (arguments.length !== 0) {
  11.         throw new Error(
  12.             'You should pass exactly 0 arguments to <span class="code">new Polygon()</span>'
  13.         );
  14.     }
  16.     Thing.call(this);
  17.     this.points = [];
  18.     this.width = 0; // max x-distance of points in the polygon
  19.     this.height = 0; // max y-distance of points in the polygon
  20.     this.type = 'Polygon';
  21. }
  23. Polygon.prototype = new Thing();
  24. Polygon.prototype.constructor = Polygon;
  26. /**
  27.  * Draws the polygon in the canvas.
  28.  *
  29.  * @param {CodeHSGraphics} __graphics__ - Instance of the __graphics__ module.
  30.  */
  31. Polygon.prototype.draw = function(__graphics__) {
  32.     if (this.points.length === 0) {
  33.         return;
  34.     }
  36.     var context = __graphics__.getContext();
  37.     context.fillStyle = this.color.toString();
  38.     context.beginPath();
  40.     var first = this.points[0];
  41.     context.moveTo(first.x, first.y);
  42.     for (var i = 1; i < this.points.length; i++) {
  43.         var cur = this.points[i];
  44.         context.lineTo(cur.x, cur.y);
  45.     }
  46.     context.closePath();
  47.     context.fill();
  48. };
  50. /**
  51.  * Checks if the passed point is contained in the polygon.
  52.  *
  53.  * @param {number} x - The x coordinate of the point being tested.
  54.  * @param {number} y - The y coordinate of the point being tested.
  55.  * @returns {boolean} Whether the passed point is contained in the polygon.
  56.  */
  57. Polygon.prototype.containsPoint = function(x, y) {
  58.     // https://www.eecs.umich.edu/courses/eecs380/HANDOUTS/PROJ2/InsidePoly.html
  59.     // solution 3 from above
  60.     var edges = [];
  61.     var previousOrientation = -1;
  62.     var x1, x2, y1, y2;
  63.     for (var i = 0; i < this.points.length; i++) {
  64.         x1 = this.points[i].x;
  65.         y1 = this.points[i].y;
  66.         x2 = this.points[(i + 1) % this.points.length].x;
  67.         y2 = this.points[(i + 1) % this.points.length].y;
  68.         var orientation = (y - y1) * (x2 - x1) - (x - x1) * (y2 - y1) <= 0;
  69.         if (previousOrientation < 0) {
  70.             previousOrientation = orientation;
  71.         } else {
  72.             if (previousOrientation !== orientation) {
  73.                 return false;
  74.             }
  75.         }
  76.     }
  77.     return true;
  78. };
  80. /**
  81.  * Gets the width of the rectangle.
  82.  *
  83.  * @returns {number} Width of the rectangle.
  84.  */
  85. Polygon.prototype.getWidth = function() {
  86.     return this.width;
  87. };
  89. /**
  90.  * Gets the height of the rectangle.
  91.  *
  92.  * @returns {number} Height of the rectangle.
  93.  */
  94. Polygon.prototype.getHeight = function() {
  95.     return this.height;
  96. };
  98. /**
  99.  * Adds a vertex to the polygon.
  100.  *
  101.  * @param {number} x - The x coordinate of the desired new vertex.
  102.  * @param {number} y - The y coordinate of the desired new vertex.
  103.  */
  104. Polygon.prototype.addPoint = function(x, y) {
  105.     if (arguments.length !== 2) {
  106.         throw new Error(
  107.             'You should pass exactly 2 arguments to <span class="code">addPoint(x, y)</span>'
  108.         );
  109.     }
  110.     if (typeof x !== 'number' || !isFinite(x)) {
  111.         throw new TypeError(
  112.             'Invalid value for x-coordinate. ' +
  113.                 'Make sure you are passing finite numbers to ' +
  114.                 '<span class="code">addPoint(x, y)</span>.'
  115.         );
  116.     }
  117.     if (typeof y !== 'number' || !isFinite(y)) {
  118.         throw new TypeError(
  119.             'Invalid value for y-coordinate. ' +
  120.                 'Make sure you are passing finite numbers to ' +
  121.                 '<span class="code">addPoint(x, y)</span>.'
  122.         );
  123.     }
  125.     for (var i = 0; i < this.points.length; i++) {
  126.         if (Math.abs(x - this.points[i].x) > this.width) {
  127.             this.width = Math.abs(x - this.points[i].x);
  128.         }
  129.         if (Math.abs(y - this.points[i].y) > this.height) {
  130.             this.height = Math.abs(y - this.points[i].y);
  131.         }
  132.     }
  133.     this.points.push({x: x, y: y});
  134. };
  136. /**
  137.  * Moves the entire polygon.
  138.  *
  139.  * @param {number} dx - The change in x coordinate of all starting and ending points.
  140.  * @param {number} dy - The change in y coordinate of all starting and ending points.
  141.  */
  142. Polygon.prototype.move = function(dx, dy) {
  143.     if (arguments.length !== 2) {
  144.         throw new Error('You should pass exactly 2 arguments to <span class="code">move</span>');
  145.     }
  146.     if (typeof dx !== 'number' || !isFinite(dx)) {
  147.         throw new TypeError(
  148.             'Invalid number passed for <span class="code">' +
  149.                 'dx</span>. Make sure you are passing finite numbers to <span ' +
  150.                 'class="code">move(dx, dy)</span>'
  151.         );
  152.     }
  153.     if (typeof dy !== 'number' || !isFinite(dy)) {
  154.         throw new TypeError(
  155.             'Invalid number passed for <span class="code">' +
  156.                 'dy</span>. Make sure you are passing finite numbers to <span ' +
  157.                 'class="code">move(dx, dy)</span>'
  158.         );
  159.     }
  161.     for (var i = 0; i < this.points.length; i++) {
  162.         this.points[i].x += dx;
  163.         this.points[i].y += dy;
  164.     }
  165. };
  167. module.exports = Polygon;