README.md

@@ -1,30 +1,27 @@
-# React + TypeScript + Vite
+# 2D Web Based CAD (Computer-Aided Design)
+Program berbasis website ini dibuat untuk menyelesaikan Tugas Besar 1 IF3260 Grafika Komputer.
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Deskripsi program
 
-Currently, two official plugins are available:
+Sebuah program CAD 2 dimensi telah dikembangkan sebagai bagian dari Tugas Besar 1 dalam mata kuliah IF3260 Grafika Komputer untuk tahun ajaran 2023/2024. Program ini diakses melalui sebuah website dan memungkinkan pengguna untuk membuat gambar menggunakan bentuk dasar seperti garis, persegi, persegi panjang, dan poligon. Selain itu, pengguna dapat mengubah posisi, warna, sudut, serta melakukan transformasi seperti translasi dan rotasi pada bentuk-bentuk tersebut. Model gambar yang telah dibuat dapat disimpan sebagai file dengan format .txt sehingga dapat diakses dan ditampilkan kembali di kemudian hari.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Menjalankan program
+### Requirement
+- Install browser yang men-support WEBGL
+- Install [Visual Studio Code](https://code.visualstudio.com\)
+- Pada VS Code, install ekstensi <strong>Live Share</strong>
+- pastikan memiliki nodejs dan typescript
 
-## Expanding the ESLint configuration
+### How to Run
+1. Ketik npm install
+2. Ketik npm run dev
+3. Website siap digunakan
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+<a name="anggota-kelompok"></a>
 
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+## Anggota Kelompok
+| Nama                        | NIM      |
+| --------------------------- | -------- |
+| M. Rizky Syaban             | 13521119 |
+| Saddam Annais S.            | 13521121 |
+| Mohammad Rifqi Farhansyah   | 13521166 |

src/shape/Polygon-asd.tsx

@@ -0,0 +1,89 @@
+import { AbstractShape } from "./AbstractShape";
+
+export type Point = [number, number];
+
+export class Polygon extends AbstractShape {
+  vertex: Point[] = [];
+  convexHullVertex: Point[] = [];
+
+  onCreate(width: number, height: number) {
+    const size = width < height ? height : width;
+    // hexagon
+    this.vertex = [
+      [size / 2, 0],
+      [size, size / 3],
+      [size, (2 * size) / 3],
+      [size / 2, size],
+      [0, (2 * size) / 3],
+      [0, size / 3],
+    ];
+
+    this.makeLocationArr()
+    this.bufferLocSize = this.locationArr.length;
+    this.type = "polygon";
+    this.scaleFactor = 0;
+
+
+    this.color = [...v1, ...v2, ...v3, ...v3, ...v4, ...v1];
+    // 16	5
+    // 2	34
+  }
+  drawShape(): void {}
+
+
+  orientation(p: Point, q: Point, r: Point): number {
+    const value = (q[1] - p[1]) * (r[0] - q[0]) - (q[0] - p[0]) * (r[1] - q[1]);
+    if (value === 0) return 0; 
+    return value > 0 ? 1 : 2; 
+  }
+
+  convexHull(points: Point[]): Point[] {
+    const n = points.length;
+    if (n < 3) return [];
+
+    const hull: Point[] = [];
+
+    // Find the leftmost point
+    let leftmost = 0;
+    for (let i = 1; i < n; i++) {
+      if (points[i][0] < points[leftmost][0])
+        leftmost = i;
+    }
+
+    let p = leftmost;
+    let q: number;
+    do {
+      hull.push(points[p]);
+      q = (p + 1) % n;
+
+      for (let i = 0; i < n; i++) {
+        if (this.orientation(points[p], points[i], points[q]) === 2)
+          q = i;
+      }
+
+      p = q;
+    } while (p !== leftmost);
+
+    return hull;
+  }
+
+  makeLocationArr() {
+    this.convexHullVertex = this.convexHull(this.vertex)
+    let newLoc : number[] = []
+    for (let i = 1; i < this.convexHullVertex.length - 2; i++) {
+      newLoc = [...newLoc, ...this.vertex[0], ...this.vertex[i], ...this.vertex[i+1]]
+    }
+    this.locationArr = newLoc
+  }
+
+  makeColorArr() {
+    let newColor: number[] = []
+    const v1 = [Math.random(), Math.random(), Math.random(), 1];
+    const v2 = [Math.random(), Math.random(), Math.random(), 1];
+    const v3 = [Math.random(), Math.random(), Math.random(), 1];
+    const v4 = [Math.random(), Math.random(), Math.random(), 1];
+    const v5 = [Math.random(), Math.random(), Math.random(), 1];
+    const v6 = [Math.random(), Math.random(), Math.random(), 1];
+
+  }
+}

src/shape/Polygon.tsx

@@ -1,88 +1,107 @@
 import { AbstractShape } from "./AbstractShape";
 
+export type Point = [number, number];
+
 export class Polygon extends AbstractShape {
-    onCreate(width: number, height: number) {
-        const defSize = 200;
-        const defLoc = [
-            width, height, 
-            width+defSize, height+defSize, 
-            width-defSize, height+defSize];
-        this.locationArr = defLoc;
-        this.bufferLocSize = this.locationArr.length;
-        this.type = "polygon";
-        this.scaleFactor = 0;
-        const v1 = [0, 0, 0, 1];
-        const v2 = [0, 0, 0, 1];
-        const v3 = [0, 0, 0, 1];
-        this.color = [
-            ...v1,
-            ...v2,
-            ...v3,
-        ]
-    }
+  vertex: Point[] = [];
+  convexHullVertex: Point[] = [];
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onCreate(width: number, height: number) {
+    // const defSize = 200;
+    this.vertex = [
+      [width / 2, 0],
+      [width, width / 3],
+      [width, (2 * width) / 3],
+      [width / 2, width],
+      [0, (2 * width) / 3],
+      [0, width / 3],
+    ];
+
+    this.makeLocationArr();
+    this.bufferLocSize = this.locationArr.length;
+    this.type = "polygon";
+    this.scaleFactor = 0;
+    const v = [0, 0, 0, 1];
+    this.color = [
+      ...v,
+      ...v,
+      ...v,
+      ...v,
+      ...v,
+      ...v,
+      ...v,
+      ...v,
+      ...v,
+      ...v,
+      ...v,
+      ...v,
+    ];
+  }
 
-    onAddVertex(x: number, y: number): void {
-        console.log("add vertex", x, y);
-        const inputLoc = [...this.locationArr, x, y];
-        const convexHull = this.convexHull(inputLoc)
-        const data : number[] = []
-        for(let i=0;i<convexHull.length-2;i++){
-            data.push(convexHull[0][0],convexHull[0][1])
-            data.push(convexHull[i+1][0],convexHull[i+1][1])
-            data.push(convexHull[i+2][0],convexHull[i+2][1])
-        }
-        this.locationArr = data
-        this.bufferLocSize = this.locationArr.length
-        const newColor = []
-        for (let i = 0; i < this.locationArr.length; i ++) {
-            newColor.push(...[0, 0, 0, 1]);
-        }
-        console.log(newColor)
-        console.log(this.locationArr)
-        this.color = newColor;
+  onAddVertex(x: number, y: number): void {
+    console.log("add vertex", x, y);
+    // const inputLoc = [...this.locationArr, x, y];
+    this.vertex.push([x, y]);
+    // console.log(this.vertex)
+    this.makeLocationArr()
+    this.bufferLocSize = this.locationArr.length;
+    const newColor = [];
+    for (let i = 0; i < this.locationArr.length; i++) {
+      newColor.push(...[0, 0, 0, 1]);
     }
+    // console.log(newColor);
+    // console.log(this.locationArr);
+    this.color = newColor;
+  }
 
-    convexHull(inputLoc: number[]) : number[][] {
-        const points: number[][] = []
-        for(let i=0;i<inputLoc.length;i+=2){
-            points.push([inputLoc[i],inputLoc[i+1]])
-        }
+  orientation(p: Point, q: Point, r: Point): number {
+    const value = (q[1] - p[1]) * (r[0] - q[0]) - (q[0] - p[0]) * (r[1] - q[1]);
+    if (value === 0) return 0;
+    return value > 0 ? 1 : 2;
+  }
 
-        const n = points.length;
-        // There must be at least 3 points
-        if(n<=3){
-            return points
-        }
+  convexHull(points: Point[]): Point[] {
+    const n = points.length;
+    if (n < 3) return [];
 
-        const hull: number[][] = []
-        let l = 0;
-        for(let i=1;i<n;i++){
-            if(points[i][0]<points[l][0]){
-                l = i
-            }
-        }
+    const hull: Point[] = [];
 
-        let p = l,q;
-        do{
-            hull.push(points[p])
-            q = (p+1)%n
-            for(let i=0;i<n;i++){
-                if(this.orientation(points[p],points[i],points[q])==2){
-                    q = i
-                }
-            }
-            p = q
-        }while(p!=l)
-        return hull
+    // Find the leftmost point
+    let leftmost = 0;
+    for (let i = 1; i < n; i++) {
+      if (points[i][0] < points[leftmost][0]) leftmost = i;
     }
 
-    orientation(p: number[],q: number[],r: number[]): number {
-        const val = (q[1]-p[1])*(r[2]-q[2])-(q[2]-p[2])*(r[1]-q[1])
-        if(val==0){
-            return 0
-        }
-        return (val>0)?1:2
+    let p = leftmost;
+    let q: number;
+    do {
+      hull.push(points[p]);
+      q = (p + 1) % n;
+
+      for (let i = 0; i < n; i++) {
+        if (this.orientation(points[p], points[i], points[q]) === 2) q = i;
+      }
+      p = q;
+    } while (p !== leftmost);
+
+    return hull;
+  }
+
+  makeLocationArr() {
+    this.convexHullVertex = this.convexHull(this.vertex);
+    console.log(this.convexHullVertex);
+    let newLoc: number[] = [];
+    for (let i = 1; i < this.convexHullVertex.length - 1; i++) {
+      newLoc = [
+        ...newLoc,
+        ...this.convexHullVertex[0],
+        ...this.convexHullVertex[i],
+        ...this.convexHullVertex[i + 1],
+      ];
     }
-    drawShape(): void {}
-
+    this.locationArr = newLoc;
+  }
+
+  drawShape(): void {}
 }