Difference between revisions of "Spirograph"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
m |
||
(8 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 | ||
], {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});