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
|
<html>
<head>
<title>JSXGraph example</title>
<link rel="stylesheet" type="text/css" href="../distrib/jsxgraph.css" />
<!--<script type="text/javascript" src="jquery-3.5.1.min.js"></script>-->
<script type="text/javascript" src="/javascript/prototype/prototype.js"></script>
<script type="text/javascript" src="../distrib/jsxgraphcore.js"></script>
</head>
<body>
<!-- Drawing area -->
<div id="box" class="jxgbox" style="width:800px; height:500px; overflow:hidden;"></div>
<!-- Drawing area -->
<div id="debug" style="display:block;"></div>
<div onclick="document.getElementById('box').style.display='none'">Hide</div>
<div onclick="document.getElementById('box').style.display='block'">Show</div>
<script type="text/javascript">
/* <![CDATA[ */
var brd = JXG.JSXGraph.initBoard('box',{axis:true, showCopyright:true, originX:300,originY:250,unitX:28,unitY:28});
//xax = brd.create('axis', [[0,0],[1,0]], {ticksDistance:10});
var a = brd.create('slider',[[2,8],[6,8],[0,3,6]],{name:'a'});
var b = brd.create('slider',[[2,7],[6,7],[0,2,6]],{name:'b'});
var A = brd.create('slider',[[2,6],[6,6],[0,3,6]],{name:'A'});
var B = brd.create('slider',[[2,5],[6,5],[0,3,6]],{name:'B'});
var delta = brd.create('slider',[[2,4],[6,4],[0,0,Math.PI]],{name:'δ'});
var c = brd.create('functiongraph',[function(x){ return b.Value()*Math.sin(a.Value()*x);}, -10, 10],
{strokeWidth:1, trace:true});
// Lissajous curve
var c = brd.create('curve',[
function(t){return A.Value()*Math.sin(a.Value()*t+delta.Value());},
function(t){return B.Value()*Math.sin(b.Value()*t);},
0, 2*Math.PI],{strokeColor:'#aa2233',strokeWidth:3, trace:false});
// Archimedean spiral
var d = brd.create('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0], 0, 8*Math.PI],
{curveType:'polar', strokewidth:3});
// Line
var e = brd.create('curve',[
function(t){return t;},
function(t){return A.Value()*t+B.Value();},
-5, 5],{strokeColor:'#1103aa',strokeWidth:3});
/*
var f = brd.create('circle',[[0,0],3]);
var g = brd.create('line',[2,1,3]);
var cd = brd.create('point',[brd.intersectionFunc(d,f,4,5)],{name:'X'});
*/
/* ]]> */
</script>
</body>
</html>
|
