-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
52 lines (48 loc) · 2.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bezier Curve</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="help-text">
<h3>Welcome to the magical world of <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve" target="blank">Bézier curve</a>.</h3>
<p>The Bézier curves are drawn using the <a href="https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm" target="blank">De Casteljau's algorithm</a>.</p>
<p>
Use Bézier curve to draw cool images.
<ul type="square">
<li>Click on empty canvas to add a curve.</li>
<li>Click on a curve to select the curve.</li>
<li>
When a curve is selected:
<ul>
<li>Press <b>"ESC"</b> key to unselect.</li>
<li>Press <b>"DELETE"</b> key to remove the selected curve.</li>
<li>Click on the canvas to add a new control point.</li>
<li>Click on the control point to select it.</li>
<li>Click and drag on the control point to move it.</li>
</ul>
</li>
<li>
When a control point is selected:
<ul>
<li>Press <b>"DELETE"</b> key to remove the selected control point.</li>
</ul>
</li>
</ul>
<u>Note: Deselect the selected curve to select another curve.</u>
</p>
<p>Code available at: <a href="https://github.com/silwalanish/bezier-curve" target="blank">GitHub</a></p>
<h3>Learn More About Bézier curve:</h3>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/aVwxzDHniEw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Video: The Beauty of Bézier Curves - Freya Holmer</p>
</div>
<div class="canvas-cont" id="visualization"></div>
</div>
<script src="js/index.js" type="module"></script>
</body>
</html>