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
|
<html>
<head>
<title>JSXGraph example</title>
<link rel="stylesheet" type="text/css" href="../../distrib/jsxgraph.css" />
<script type="text/javascript" src="../../src/loadjsxgraph.js"></script>
</head>
<body>
<h2>Oscillator</h2>
<div style="width:800px">
<div id="jxgbox" class="jxgbox" style="width:800px; height:800px; float:left"></div>
</div>
<div id="debug" style="display:block;"></div>
<script type="text/javascript">
/* <![CDATA[ */
(function() {
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10], keepaspectratio: true, axis: true, grid: false}),
line = board.create('line', [[0,8], [0,-10]], {visible: false, straightFirst: false, straightLast: false}),
point = board.create('glider', [-8, -7, line], {name: 'Weight'}),
isInDragMode = false,
springHangup = board.create('point', [0, 9], {color: 'black', name: 'Spring', fixed: true}),
i, numberOfSpringRings = 10, springRings = [];
for(i=0; i<numberOfSpringRings; i++) {
springRings[i] = board.create('point', [0.5-i%2, function(i) { return function() { return springHangup.Y()-(i+1)*Math.abs((springHangup.Y() - point.Y())/(numberOfSpringRings+1))}; }(i)], {withLabel: false, color: 'black', size: 1});
if(i>0)
board.create('segment', [springRings[i-1], springRings[i]], {color: 'black', strokeWidth: 1});
}
board.create('segment', [springHangup, springRings[0]], {color: 'black', strokeWidth: 1});
board.create('segment', [springRings[numberOfSpringRings-1], point], {color: 'black', strokeWidth: 1});
function startAnimation(startY) {
point.moveAlong(function() {
var f = function(t, x) {
var c = 0.1, k = 0.5, m = 1;
return [x[1], -c / m * x[1] - k / m * x[0]];
},
area = [0, 200],
numberOfEvaluations = (area[1] - area[0]) * 100,
data = JXG.Math.Numerics.rungeKutta('heun', [startY, 0], area, numberOfEvaluations, f),
duration = 20 * 1e3;
return function(t) {
if (t >= duration)
return NaN;
return [0, data[Math.floor(t / duration * numberOfEvaluations)][0]];
}
}());
}
function hook() {
if(!isInDragMode && board.mode === board.BOARD_MODE_DRAG) {
board.stopAllAnimation();
isInDragMode = true;
}
if(isInDragMode && board.mode !== board.BOARD_MODE_DRAG) {
isInDragMode = false;
startAnimation(point.Y());
}
}
board.addHook(hook);
startAnimation(-5);
})();
/* ]]> */
</script>
</body>
</html>
|
