Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: GAIB20/tugas-besar-grafkom-1-grafkonn
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v1.0
Choose a base ref
...
head repository: GAIB20/tugas-besar-grafkom-1-grafkonn
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref
  • 4 commits
  • 3 files changed
  • 3 contributors

Commits on Apr 5, 2024

  1. feat: add readme

    rifqifarhansyah committed Apr 5, 2024
    Copy the full SHA
    e934bcc View commit details
  2. Update README.md

    rifqifarhansyah authored Apr 5, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    eb7756c View commit details
  3. Copy the full SHA
    d2c2720 View commit details
  4. Copy the full SHA
    84a6244 View commit details
Showing with 204 additions and 99 deletions.
  1. +21 −24 README.md
  2. +89 −0 src/shape/Polygon-asd.tsx
  3. +94 −75 src/shape/Polygon.tsx
45 changes: 21 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
@@ -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 |
89 changes: 89 additions & 0 deletions src/shape/Polygon-asd.tsx
Original file line number Diff line number Diff line change
@@ -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];

}
}
169 changes: 94 additions & 75 deletions src/shape/Polygon.tsx
Original file line number Diff line number Diff line change
@@ -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 {}
}