Bezier Curve is a smooth curve that is often used in graphic design, animation, and manufacturing. This curve is created by connecting several control points, which determine the shape and direction of the curve. The way to create it is quite simple: by determining the control points and connecting them with the curve. Bezier curves have many real-world applications, such as the pen tool, smooth and realistic animations, creating complex and precise product designs, and making beautiful and unique fonts. The advantage of using Bezier curves is that they are easy to modify and manipulate, allowing for precise designs tailored to specific needs. This program aims to visualize the Bezier curve by using either a brute force or divide-and-conquer algorithm. The user has the option to choose one of these two algorithms to simulate the Bezier curve.
- Description- Table of Contents
- Tech Stack
- How To Run
- Usage
- Author
- Additional Note
- Go
- Typescript
- Tailwind CSS
- React.js
- Mafs
You will need Node.js and npm (or yarn) if you want to run this repository locally. Follow the instructions from this link to install all the requirements if you don't have them. You will also need to install the necessary language, i.e. Go.
- Clone this project
git clone https://github.com/ninoaddict/Tucil1_13522068
- Install dependencies for the frontend
cd <project_name>/src/frontend
npm install
- Run the backend server
cd <project_name>/src/backend
go run .
- Open another terminal, and run the frontend
cd <project_name>/src/frontend
npm start
To properly run this project, ensure that the frontend is running at localhost:3000 and the backend server is running at localhost:8080. Additionally, you can test the algorithms using the provided API endpoints with POST method. The endpoint for the brute force algorithm is accessible at localhost:8080/bruteforce. As for the divide and conquer algorithm, it's available at localhost:8080/dnc. The JSON body for fetching the API endpoints should be in the following format.
{
"neff": n,
"points": [
{
x: x1,
y: y1
},
{
x: x2,
y: y2
},
...
{
x: xn,
y: yn
},
],
"iteration": k
}
-
Enter the number of control points
-
Input the number of iterations
-
Enter the coordinates of the points in the provided fields and select the algorithm type
-
Click solve to see the result
-
You can reset the Bezier curve by clicking the "Reset" button. Additionally, view the curve for each iteration up to your specified iteration number by selecting the iteration options
Name : Adril Putra Merin NIM : 13522068 Email : [email protected]
The algorithm used in this program are located within the specified path.
./src/backend/algorithm/