add move polygon and recolor polygon

index.html

@@ -7,6 +7,8 @@
             <div class="item"> 
                <button onclick="createRectangle()">Draw Rectangle</button>
                <div class="spaceBox"></div>
+               <button onclick="createPolygon()">Draw Polygon</button>
+               <div class="spaceBox"></div>
                <button onclick="enterMode(modes.MOVING)">Enter Moving Mode</button>
                <div class="spaceBox"></div>
                <button onclick="enterMode(modes.RESIZING)">Enter Resizing Mode</button>
@@ -33,6 +35,7 @@
 
       <script src="point.js"></script>
       <script src="rectangle.js"></script>
+      <script src="polygon.js"></script>
       <script src="utils.js"></script>
       <script src="index.js"></script>
    </body>

index.js

@@ -11,8 +11,8 @@ function canvasClick(e) {
     controlPoint.movePoint(translatedMidPoint.x, translatedMidPoint.y);
   } else {
     if (!selectedObject) {
-      let selectedRectangles = getAllSelectedRectangle(translatedMidPoint);
-      selectedObject = selectedRectangles[selectedRectangles.length - 1];
+      let selected = getAllSelected(translatedMidPoint);
+      selectedObject = selected[selected.length - 1];
     } else {
       selectedObject = null;
     }
@@ -41,7 +41,27 @@ function createPolygon() {
   }
 }
 
-function getAllSelectedRectangle(cursor) {
+function insidePolygon(point, polygon) {
+  // ray-casting algorithm based on
+  // https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html/pnpoly.html
+
+  let x = point.x, y = point.y;
+  let vs = polygon.vertices;
+  let inside = false;
+  // dikurangi 3 karena vertice terakhir isinya midpoint
+  for (let i = 0, j = Math.floor(vs.length/3) - 4; i < Math.floor(vs.length/3) - 3; j = i++) {
+      let xi = vs[i*3], yi = vs[i*3+1];
+      let xj = vs[j*3], yj = vs[j*3+1];
+
+      let intersect = ((yi > y) != (yj > y))
+          && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
+      if (intersect) inside = !inside;
+  }
+
+  return inside;
+};
+
+function getAllSelected(cursor) {
   //get all triangles that its area contains our mouse cursor
   let result = [];
   for (let i = 0; i < canvasObject.length; i++) {
@@ -55,6 +75,11 @@ function getAllSelectedRectangle(cursor) {
       ) {
         result.push(rect);
       }
+    } else if (canvasObject[i] instanceof Polygon) {
+      let poly = canvasObject[i];
+      if (insidePolygon(cursor, poly)) {
+        result.push(poly);
+      }
     }
   }
   return result;
@@ -68,7 +93,11 @@ function canvasMove(e) {
       console.log(cursor);
       let translatedMidPoint = translatePointCoordinate(cursor.x, cursor.y);
       console.log(translatedMidPoint);
-      selectedObject.moveRectangle(translatedMidPoint);
+      if (selectedObject instanceof Rectangle) {
+        selectedObject.moveRectangle(translatedMidPoint);
+      } else {
+        selectedObject.movePolygon(translatedMidPoint);
+      }
     }, 10);
   } else if (currentMode == modes.RESIZING && selectedObject) {
     setTimeout(function () {

polygon.js

@@ -56,9 +56,6 @@ class Polygon {
     }
 
     drawOnCanvas() {
-      console.log("polygon");
-      console.log(this.vertices);
-      console.log(this.indices);
         let vertex_buffer = getVerticesBuffer(this.vertices);
         let index_buffer = getIndicesBuffer(this.indices);
         let vertShader = getVertexShader();
@@ -68,6 +65,11 @@ class Polygon {
         bindVertexBuffer(shaderProgram, vertex_buffer, index_buffer);
         gl.drawElements(gl.TRIANGLES, this.indices.length, gl.UNSIGNED_SHORT, 0);
     }
+
+    changeColor(newColor) {
+        this.color = newColor;
+        renderAll();
+    }
 
     movePolygon(newMidPoint) {
         this.midPoint = newMidPoint;