Difference between revisions of "Lissajous curves"

From JSXGraph Wiki
Jump to navigationJump to search
Line 5: Line 5:
 
<jsxgraph board="brd" width="600" height="500">
 
<jsxgraph board="brd" width="600" height="500">
 
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,originX:300,originY:250,unitX:25,unitY:25});
 
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,originX:300,originY:250,unitX:25,unitY:25});
 +
brd.suspendUpdate();
 
var a = brd.createElement('slider',[[2,8],[6,8],[0,3,6]]); brd.createElement('text',[1,8,'a:']);
 
var a = brd.createElement('slider',[[2,8],[6,8],[0,3,6]]); brd.createElement('text',[1,8,'a:']);
 
var b = brd.createElement('slider',[[2,7],[6,7],[0,2,6]]); brd.createElement('text',[1,7,'b:']);
 
var b = brd.createElement('slider',[[2,7],[6,7],[0,2,6]]); brd.createElement('text',[1,7,'b:']);
Line 15: Line 16:
 
           function(t){return B.Value()*Math.sin(b.Value()*t);},
 
           function(t){return B.Value()*Math.sin(b.Value()*t);},
 
           0, 2*Math.PI],{strokeColor:'#aa2233',strokeWidth:3});
 
           0, 2*Math.PI],{strokeColor:'#aa2233',strokeWidth:3});
 +
brd.unsuspendUpdate();
 
</jsxgraph>
 
</jsxgraph>
  
Line 20: Line 22:
 
<jsxgraph board="brd" width="600" height="500">
 
<jsxgraph board="brd" width="600" height="500">
 
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,originX:300,originY:250,unitX:25,unitY:25});
 
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,originX:300,originY:250,unitX:25,unitY:25});
 +
brd.suspendUpdate();
 
var a = brd.createElement('slider',[[2,8],[6,8],[0,3,6]]); brd.createElement('text',[1,8,'a:']);
 
var a = brd.createElement('slider',[[2,8],[6,8],[0,3,6]]); brd.createElement('text',[1,8,'a:']);
 
var b = brd.createElement('slider',[[2,7],[6,7],[0,2,6]]); brd.createElement('text',[1,7,'b:']);
 
var b = brd.createElement('slider',[[2,7],[6,7],[0,2,6]]); brd.createElement('text',[1,7,'b:']);
Line 30: Line 33:
 
           function(t){return B.Value()*Math.sin(b.Value()*t);},
 
           function(t){return B.Value()*Math.sin(b.Value()*t);},
 
           0, 2*Math.PI],{strokeColor:'#aa2233',strokeWidth:3});
 
           0, 2*Math.PI],{strokeColor:'#aa2233',strokeWidth:3});
 +
brd.unsuspendUpdate();
 
</jsxgraph>
 
</jsxgraph>
 
</source>
 
</source>

Revision as of 01:00, 13 March 2009

Lissajous curve (Lissajous figure or Bowditch curve) is the graph of the system of parametric equations

[math]x=A\sin(at+\delta),\quad y=B\sin(bt).[/math]

<jsxgraph board="brd" width="600" height="500">
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,originX:300,originY:250,unitX:25,unitY:25});
brd.suspendUpdate();
var a = brd.createElement('slider',[[2,8],[6,8],[0,3,6]]); brd.createElement('text',[1,8,'a:']);
var b = brd.createElement('slider',[[2,7],[6,7],[0,2,6]]); brd.createElement('text',[1,7,'b:']);
var A = brd.createElement('slider',[[2,6],[6,6],[0,3,6]]); brd.createElement('text',[1,6,'A:']);
var B = brd.createElement('slider',[[2,5],[6,5],[0,3,6]]); brd.createElement('text',[1,5,'B:']);
var delta = brd.createElement('slider',[[2,4],[6,4],[0,0,Math.PI]]); brd.createElement('text',[1,4,'&delta;:']);

var c = brd.createElement('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});
brd.unsuspendUpdate();
</jsxgraph>