Difference between revisions of "Spirograph"

From JSXGraph Wiki
Jump to navigationJump to search
m
 
(6 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], kkeepaspectratio:true});
+
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',snapWidth:0.3});
+
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',snapWidth:0.1});
+
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)+a.Value()*Math.cos((1-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)+a.Value()*Math.sin((1-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
 
     ], {strokeWidth:3, strokeColor:'#3355ff', strokeOpacity:0.7});
 
     ], {strokeWidth:3, strokeColor:'#3355ff', strokeOpacity:0.7});
 
</jsxgraph>
 
</jsxgraph>
 +
 +
===The underlying JavaScript code===
 +
<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>
 +
 +
[[Category:Examples]]
 +
[[Category:Curves]]

Latest revision as of 21: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});