Polynomial curve of constant width: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 16: Line 16:
var k = brd.create('slider',[[-1,1.4],[1,1.4],[1,1,11]], {name:'k\'', snapWidth:1});
var k = brd.create('slider',[[-1,1.4],[1,1.4],[1,1,11]], {name:'k\'', snapWidth:1});


/*
var c = brd.create('curve',[function(phi, suspendUpdate){  
var p = brd.create('curve',[function(phi, suspendUpdate){
                              var kk, aa, bb;
                              if (!suspendUpdate) {
                                aa = a.Value();
                                bb = b.Value();
                                kk = 2*k.Value()+1;
                              }
                              var co = Math.cos(kk*phi*0.5);
                              return aa*co*co+bb;
                            },[0,0], 0,Math.PI*2], {curveType:'polar', strokeWidth:10, strokeColor:'#ad5544'});
*/
 
var p2 = brd.create('curve',[function(phi, suspendUpdate){  
                               var kk, aa, bb, p, ps, co, si;
                               var kk, aa, bb, p, ps, co, si;
                               if (!suspendUpdate) {
                               //if (!suspendUpdate) {
                                 aa = a.Value();
                                 aa = a.Value();
                                 bb = b.Value();
                                 bb = b.Value();
                                 kk = 2*k.Value()+1;
                                 kk = 2*k.Value()+1;
                               }
                               //}
                               co = Math.cos(kk*phi*0.5);
                               co = Math.cos(kk*phi*0.5);
                               si = Math.sin(kk*phi*0.5);
                               si = Math.sin(kk*phi*0.5);
Line 44: Line 31:
                             function(phi, suspendUpdate){  
                             function(phi, suspendUpdate){  
                               var kk, aa, bb, p, ps, co, si;
                               var kk, aa, bb, p, ps, co, si;
                               if (!suspendUpdate) {
                               //if (!suspendUpdate) {
                                 aa = a.Value();
                                 aa = a.Value();
                                 bb = b.Value();
                                 bb = b.Value();
                                 kk = 2*k.Value()+1;
                                 kk = 2*k.Value()+1;
                               }
                               //}
                               co = Math.cos(kk*phi*0.5);
                               co = Math.cos(kk*phi*0.5);
                               si = Math.sin(kk*phi*0.5);
                               si = Math.sin(kk*phi*0.5);
Line 66: Line 53:
===The underlying JavaScript code===
===The underlying JavaScript code===
<source lang="javascript">
<source lang="javascript">
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-2,2,2,-2], keepaspectratio:true});
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-8,8,8,-8], keepaspectratio:true});
brd.suspendUpdate();
brd.suspendUpdate();
var a = brd.create('slider',[[-1,1.8],[1,1.8],[-5,0.20,5]], {name:'a'});
var a = brd.create('slider',[[-1,1.8],[1,1.8],[-5,0.20,5]], {name:'a'});
Line 72: Line 59:
var k = brd.create('slider',[[-1,1.4],[1,1.4],[1,1,11]], {name:'k\'', snapWidth:1});
var k = brd.create('slider',[[-1,1.4],[1,1.4],[1,1,11]], {name:'k\'', snapWidth:1});


var p = brd.create('curve',[function(phi, suspendUpdate){  
var c = brd.create('curve',[function(phi, suspendUpdate){  
                               var kk, aa, bb;
                               var kk, aa, bb, p, ps, co, si;
                               if (!suspendUpdate) {
                              //if (!suspendUpdate) {
                                aa = a.Value();
                                bb = b.Value();
                                kk = 2*k.Value()+1;
                              //}
                              co = Math.cos(kk*phi*0.5);
                              si = Math.sin(kk*phi*0.5);
                              p  =  aa*co*co+bb;
                              ps = -aa*kk*co*si;
                              return p*Math.cos(phi)-ps*Math.sin(phi);
                            },
                            function(phi, suspendUpdate){
                              var kk, aa, bb, p, ps, co, si;
                               //if (!suspendUpdate) {
                                 aa = a.Value();
                                 aa = a.Value();
                                 bb = b.Value();
                                 bb = b.Value();
                                 kk = 2*k.Value()+1;
                                 kk = 2*k.Value()+1;
                               }
                               //}
                               var co = Math.cos(kk*phi*0.5);
                               co = Math.cos(kk*phi*0.5);
                               return aa*co*co+bb;
                               si = Math.sin(kk*phi*0.5);
                             },[0,0], 0,Math.PI*2], {curveType:'polar', strokeWidth:10, strokeColor:'#ad5544'});
                              p  =  aa*co*co+bb;
                              ps = -aa*kk*co*si;
                              return p*Math.sin(phi)+ps*Math.cos(phi);
                             },
                            0, Math.PI*2], {strokeWidth:10, strokeColor:'#ad5544'});
 
brd.unsuspendUpdate();
brd.unsuspendUpdate();
</source>
</source>

Revision as of 09:52, 7 June 2011

The curve defined by

[math]\displaystyle{ p(\phi) = a\cdot cos(k\cdot\phi/2)+b }[/math]

in polar form is smooth and of constant width for odd values of [math]\displaystyle{ k }[/math]. In the visuzalitaion with JSXGraph below [math]\displaystyle{ k }[/math] is determined

[math]\displaystyle{ k = 2k'+1. }[/math]


References

The underlying JavaScript code

var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-8,8,8,-8], keepaspectratio:true});
brd.suspendUpdate();
var a = brd.create('slider',[[-1,1.8],[1,1.8],[-5,0.20,5]], {name:'a'});
var b = brd.create('slider',[[-1,1.6],[1,1.6],[-5,1.15,10]], {name:'b'});
var k = brd.create('slider',[[-1,1.4],[1,1.4],[1,1,11]], {name:'k\'', snapWidth:1});

var c = brd.create('curve',[function(phi, suspendUpdate){ 
                              var kk, aa, bb, p, ps, co, si;
                              //if (!suspendUpdate) {
                                aa = a.Value();
                                bb = b.Value();
                                kk = 2*k.Value()+1;
                              //}
                              co = Math.cos(kk*phi*0.5);
                              si = Math.sin(kk*phi*0.5);
                              p  =  aa*co*co+bb;
                              ps = -aa*kk*co*si;
                              return p*Math.cos(phi)-ps*Math.sin(phi);
                             },
                             function(phi, suspendUpdate){ 
                              var kk, aa, bb, p, ps, co, si;
                              //if (!suspendUpdate) {
                                aa = a.Value();
                                bb = b.Value();
                                kk = 2*k.Value()+1;
                              //}
                              co = Math.cos(kk*phi*0.5);
                              si = Math.sin(kk*phi*0.5);
                              p  =  aa*co*co+bb;
                              ps = -aa*kk*co*si;
                              return p*Math.sin(phi)+ps*Math.cos(phi);
                             },
                             0, Math.PI*2], {strokeWidth:10, strokeColor:'#ad5544'});

brd.unsuspendUpdate();