File: curve.html

package info (click to toggle)
jsxgraph 1.3.5+dfsg1-2
  • links: PTS, VCS
  • area: main
  • in suites: bullseye, buster, sid
  • size: 26,044 kB
  • sloc: xml: 5,869; java: 1,072; python: 747; php: 192; makefile: 146; sh: 47
file content (56 lines) | stat: -rw-r--r-- 2,222 bytes parent folder | download | duplicates (2)
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="../distrib/jquery.min.js"></script>-->
<script type="text/javascript" src="/javascript/prototype/prototype.js"></script>
<script type="text/javascript" src="../src/loadjsxgraph.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:'&delta;'}); 

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>