Spirograph: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary  | 
				mNo edit summary  | 
				||
| (5 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
<jsxgraph width="600" height="600">  | <jsxgraph width="600" height="600">  | ||
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5],   | var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5], keepaspectratio:true});  | ||
var R = 2.0;  | var R = 2.0;  | ||
var r = brd.create('slider',[[-3,4],[3,4],[-5,1,5]],{name:'r'  | var r = brd.create('slider',[[-3,4],[3,4],[-5,1,5]],{name:'r'});  | ||
var a = brd.create('slider',[[-3,3],[3,3],[-5,1,5]],{name:'a'  | var a = brd.create('slider',[[-3,3],[3,3],[-5,1,5]],{name:'a'});  | ||
var c = brd.create('curve',[  | var c = brd.create('curve',[  | ||
      function(t){    |       function(t){    | ||
         var r1 = r.Value();    |          var r1 = Math.round(100.0*r.Value())/100.0;   | ||
         return (R-r1)*Math.cos(r1/R*t)+  |         var a1 = Math.round(100.0*a.Value())/100.0;    | ||
         return (R-r1)*Math.cos(r1/R*t)+a1*Math.cos((1-r1/R)*t);    | |||
      },  |       },  | ||
      function(t){    |       function(t){    | ||
         var r1 = r.Value();    |          var r1 = Math.round(100.0*r.Value())/100.0;   | ||
         return (R-r1)*Math.sin(r1/R*t)+  |         var a1 = Math.round(100.0*a.Value())/100.0;    | ||
         return (R-r1)*Math.sin(r1/R*t)+a1*Math.sin((1-r1/R)*t);    | |||
      },    |       },    | ||
      -40*Math.PI,40*Math.PI  |       -40*Math.PI,40*Math.PI  | ||
| Line 20: | Line 22: | ||
===The underlying JavaScript code===  | ===The underlying JavaScript code===  | ||
<source lang="javascript">  | <source lang="javascript">  | ||
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5], keepaspectratio:true});  | |||
var R = 2.0;  | |||
var r = brd.create('slider',[[-3,4],[3,4],[-5,1,5]],{name:'r'});  | |||
var a = brd.create('slider',[[-3,3],[3,3],[-5,1,5]],{name:'a'});  | |||
var c = brd.create('curve',[  | |||
     function(t){   | |||
        var r1 = Math.round(100.0*r.Value())/100.0;   | |||
        var a1 = Math.round(100.0*a.Value())/100.0;   | |||
        return (R-r1)*Math.cos(r1/R*t)+a1*Math.cos((1-r1/R)*t);   | |||
     },  | |||
     function(t){   | |||
        var r1 = Math.round(100.0*r.Value())/100.0;   | |||
        var a1 = Math.round(100.0*a.Value())/100.0;   | |||
        return (R-r1)*Math.sin(r1/R*t)+a1*Math.sin((1-r1/R)*t);   | |||
     },   | |||
     -40*Math.PI,40*Math.PI  | |||
     ], {strokeWidth:3, strokeColor:'#3355ff', strokeOpacity:0.7});  | |||
</source>  | </source>  | ||
[[Category:Examples]]  | [[Category:Examples]]  | ||
[[Category:Curves]]  | [[Category:Curves]]  | ||
Latest revision as of 19:39, 19 July 2010
The underlying JavaScript code
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5], keepaspectratio:true});
var R = 2.0;
var r = brd.create('slider',[[-3,4],[3,4],[-5,1,5]],{name:'r'});
var a = brd.create('slider',[[-3,3],[3,3],[-5,1,5]],{name:'a'});
var c = brd.create('curve',[
     function(t){ 
        var r1 = Math.round(100.0*r.Value())/100.0; 
        var a1 = Math.round(100.0*a.Value())/100.0; 
        return (R-r1)*Math.cos(r1/R*t)+a1*Math.cos((1-r1/R)*t); 
     },
     function(t){ 
        var r1 = Math.round(100.0*r.Value())/100.0; 
        var a1 = Math.round(100.0*a.Value())/100.0; 
        return (R-r1)*Math.sin(r1/R*t)+a1*Math.sin((1-r1/R)*t); 
     }, 
     -40*Math.PI,40*Math.PI
     ], {strokeWidth:3, strokeColor:'#3355ff', strokeOpacity:0.7});