-
Notifications
You must be signed in to change notification settings - Fork 3
/
example.html
66 lines (52 loc) · 1.9 KB
/
example.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
<head>
<script src="src/jsspline.js" type="text/javascript"></script>
</head>
<body>
<h2>B-Spline Demo</h2>
<canvas id="canvas-bspline" width="900" height="500"></canvas>
<h2>Bezier Demo</h2>
<canvas id="canvas-bezier" width="900" height="500"></canvas>
<script>
var canvas_bspline = document.getElementById('canvas-bspline');
var context_bspline = canvas_bspline.getContext('2d');
var canvas_bezier = document.getElementById('canvas-bezier');
var context_bezier = canvas_bezier.getContext('2d');
var bspline = new jsspline.BSpline({
steps: 100
});
var bezier = new jsspline.Bezier({
steps: 100
});
for(var i=0; i < 20; ++i){
var x = i * 50;
var y = Math.sin(x * Math.PI / 200) * 100 + 140;
bspline.addWayPoint({x : x, y: y, z: 0});
bezier.addWayPoint({x : x, y: y, z: 0});
context_bezier.fillRect(x, y, 5, 5);
context_bspline.fillRect(x, y, 5, 5);
}
context_bspline.beginPath();
console.log("bspline interpolated: " + bspline.nodes.length);
for(var i = 1; i < bspline.nodes.length; ++i){
var x1 = bspline.nodes[i-1].x;
var y1 = bspline.nodes[i-1].y;
var x2 = bspline.nodes[i].x;
var y2 = bspline.nodes[i].y;
context_bspline.moveTo(x1, y1);
context_bspline.lineTo(x2, y2);
}
context_bspline.stroke();
context_bezier.beginPath();
for(var i = 1; i < bezier.nodes.length; ++i) {
var x1 = bezier.nodes[i-1].x;
var y1 = bezier.nodes[i-1].y;
var x2 = bezier.nodes[i].x;
var y2 = bezier.nodes[i].y;
context_bezier.moveTo(x1, y1);
context_bezier.lineTo(x2, y2);
}
context_bezier.stroke();
</script>
</body>
</html>