The Bezier Curve app allows users to create and manipulate Bezier curves on a canvas. Users can click and drag to add control points that define the shape of the curve. The app supports multiple curves, and each curve can have multiple control points.
Click here to see the app or here to see how it works in my local machine๐
-
The canvas is rendered using the p5.js library within a React component.
-
Users can create a new Bezier curve by pressing the Ctrl key.
-
Pressing the Shift key while dragging the mouse adds control points to the currently active curve.
-
Control points can be selected by clicking on them. Selected points are highlighted in yellow.
-
Selected control points can be moved by dragging them with the mouse.
-
Pressing the Delete key deletes the selected control point.
-
The app provides visual feedback by displaying different colors for active and inactive control points.
-
The Bezier curves are rendered on the canvas using the control points.
-
React: A JavaScript library for building user interfaces.
-
p5.js: A JavaScript library for creative coding and visualization.
- Clone the repository:
git clone https://github.com/ksalpern/requestum-bezier-app.git
- Install dependencies.
cd bezier-app
yarn
- Start the server.
yarn start
- The website is now working on 3000 port, hope you enjoy it ๐
-
Press the Ctrl key and click on the canvas to create a new Bezier curve.
-
Press the Shift key and click on the canvas to add control points to the current curve.
-
Click and drag control points to move them around.
-
Press the Delete key to remove a selected control point.
-
Enjoy creating and manipulating Bezier curves!