-
Notifications
You must be signed in to change notification settings - Fork 0
/
example4.html
61 lines (54 loc) · 1.22 KB
/
example4.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
<!DOCTYPE html>
<html>
<head>
<title>Spline Editor example</title>
<script src="jquery.min.js"></script>
<script src="underscore-min.js"></script> <!-- filter, map etc. -->
<script src="sylvester.js"></script> <!-- matrix inverse -->
<script src="spline-editor.js"></script>
<style>
div {
border:solid 1px black;
margin:20px;
width:320px;
height:256px;
}
img {
position: absolute;
left: 360px;
width: 100px;
}
</style>
</head>
<body>
<img src="nyan-cat.gif" alt="Nyan cat">
<div id="splineEditorDiv"></div>
The control points are draggable.
<script>
$('div').splineEditor({
initialKnots: [
[100, 140],
[160, 100],
[220, 140]
]
});
$('div').splineEditor('showPlayhead');
var x = 0;
var lastTime = new Date().getTime();
var speed = 0.10;
setInterval(function () {
// This is smoother than incrementing directly
var now = new Date().getTime();
var elapsed = now - lastTime;
lastTime = now;
x += elapsed * speed;
if (x > 320) {
x -= 320;
}
$('div').splineEditor('setPlayheadX', x);
var y = $('div').splineEditor('getY', x);
$('img').css('top', y + 'px')
}, 30);
</script>
</body>
</html>