-
Notifications
You must be signed in to change notification settings - Fork 0
/
plotdemo016.html
78 lines (69 loc) · 3.18 KB
/
plotdemo016.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
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid curves with Smooth.js and HTML5 canvas</title>
<link href="css/blog.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<link type="text/css" href="jqui-1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet">
<script type="text/javascript" src="jqui-1.8.18/js/jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<div id = 'main' style="width:610px">
<div class="post-title">Fluid curves with Smooth.js and HTML5 canvas</div><br>
A demo using <a href = "https://github.com/osuushi/Smooth.js">Smooth.js</a> and HTML5
canvas to draw a curve through a set of points.
<br><br>
<a href = "/2012/03/19/smoothjsdemo.html">See this blog post</a> for further discussion.
You can also see the
<a href = "https://github.com/osuushi/osuushi.github.com/blob/master/js/smooth-0.1.6-demo.coffee">
CoffeeScript source.
</a>
<hr>
Drag the points below to move them. Double click to add/remove points.<br><br>
<div class = 'config-box'>
<label for="method">Method: </label>
<select id = 'method'>
<option value="linear">Linear</option>
<option value="cubic" >Cubic</option>
<option value="lanczos" selected="selected">Lanczos</option>
</select>
<label for="clip" style="margin-left:20px">Clip: </label>
<select id = 'clip'>
<option value="clamp">Clamp</option>
<option value="zero">Zero</option>
<option value="periodic">Periodic</option>
<option value="mirror">Mirror</option>
</select>
</div>
<div id='cubic-config' class='config-box method-config'>
Tension: <div id = 'cubictension' style = "display:inline-block;width:30px">0</div>
<div id="tension-slider" style="display:inline-block; margin-left:10px;width:150px;font-size:10px"></div>
</div>
<div id='lanczos-config' class='config-box method-config'>
Filter Size: <div id = 'lanczosfiltersize' style = "display:inline-block;width:30px">2</div>
<div id="lanczos-slider" style="display:inline-block; margin-left:10px;width:150px;font-size:10px"></div>
</div>
<div id = 'plot-box'></div>
<br>
The meat of the actual curve drawing is in the <code>addCurveSegment</code> function, which samples
the output of Smooth.js to create line segments approximating the function.
<h4>Notes</h4>
Nearest neighbor interpolation isn't included because the results in this case would look identical
to linear interpolation. This is because nearest neighbor is discontinuous, and the discontinuities
would be spanned by line segments.<br><br>
Windowed sinc interpolation is not included because I felt that adding a text field to let you enter
a window function was a little out of scope for a simple demo.
<br><br>
<small>
(This is tested in the latest Chrome, Firefox and Safari.<br>
I cannot vouch for other browsers.)
</small>
</div>
<div style="height:200px"> </div>
<script type="text/javascript" src = "js/Smooth-0.1.6.js"></script>
<script type= "text/javascript" src="js/smooth-0.1.6-demo.js"></script>
<link type="text/css" href="css/smooth-0.1.6-demo.css" rel="stylesheet">
</body>
</html>