Reuleaux pentagon: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 1: Line 1:
<html><form>
<input type="button" value="start" onclick="rol.start()">
<input type="button" value="stop" onclick="rol.stop()">
<input type="button" value="one step" onclick="rol.rolling()">
</form></html>
<jsxgraph width="600" height="600">
<jsxgraph width="600" height="600">
JXG.Options.layer.polygon = 8;
JXG.Options.layer.polygon = 8;
Line 23: Line 29:
         t1*=0.5;
         t1*=0.5;
         t1 += beta;
         t1 += beta;
         return p[(n+3)%5].X()+d*Math.cos(t1);
         return p[n].X()+d*Math.cos(t1);
       },
       },
       function(t) {
       function(t) {
Line 36: Line 42:
         t1*=0.5;
         t1*=0.5;
         t1 += beta;
         t1 += beta;
         return p[(n+3)%5].Y()+d*Math.sin(t1);
         return p[n].Y()+d*Math.sin(t1);
       },
       },
       0, 0.1*2*Math.PI],
       0, 2*Math.PI],
       {color:'#093083', highlightFillColor:'#093083'});
       {color:'#093083', highlightFillColor:'#093083'});
        
        
Line 104: Line 110:
*/
*/
brd.unsuspendUpdate();
brd.unsuspendUpdate();
var createRoulette = function(c1, c2, start_c1, stepsize, time, pointlist) {
    var alpha = 0,
        t1 = start_c1,
        t2 = JXG.Math.Numerics.root(
                function(t) {
                    var c1x = c1.X(t1),
                        c1y = c1.Y(t1),
                        c2x = c2.X(t),
                        c2y = c2.Y(t);
                    return (c1x-c2x)*(c1x-c2x) + (c1y-c2y)*(c1y-c2y);
                },
                0),
        t1_new = 0.0, t2_new = 0.0,
        rotation = brd.create('transform',[function(){ return alpha;},
                                          function(){ return c1.X(t1);},
                                          function(){ return c1.Y(t1);}],
                                          {type:'rotate'}),
        linDist = function(t) {
                var mx = c1.X(t1),
                    my = c1.Y(t1),
                    c1x = mx - c1.X(t1_new),
                    c1y = my - c1.Y(t1_new),
                    c2x = mx - c2.X(t),
                    c2y = my - c2.Y(t);
                return (c1x*c1x+c1y*c1y) - (c2x*c2x+c2y*c2y);
            }, 
        interval = null;
    this.rolling = function(){
        t1_new = t1+stepsize;
        t2_new = JXG.Math.Numerics.root(linDist, t2+stepsize);
        alpha = -JXG.Math.Geometry.rad(
                    [c1.X(t1_new),c1.Y(t1_new)],
                    [c1.X(t1),c1.Y(t1)],
                    [c2.X(t2_new),c.Y(t2_new)]);
        rotation.applyOnce(pointlist);
        brd.update();
        t1 = t1_new;
        t2 = t2_new;
    };
   
    this.start = function() {
        if (time>0) {
            interval = setInterval(this.rolling, time);
        }
        return this;
    };
   
    this.stop = function() {
        clearInterval(interval);
        return this;
    };
    return this;
};
var rol = createRoulette(reuleauxPentagon, reuleauxTriangle , 0, Math.PI/20, 100, pol3.vertices); //.start();


</jsxgraph>
</jsxgraph>

Revision as of 11:57, 2 October 2010

The underlying JavaScript code

JXG.Options.layer.polygon = 8;
JXG.Options.layer.sector = 8;

var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5]});
brd.suspendUpdate();
var A = brd.create('point',[-2,-2]);
var B = brd.create('point',[2,-2]);
var pol = brd.create('regularpolygon',[A,B,5], {withLines:false, fillColor:'#093083', highlightFillColor:'#093083'});

for (var i=0;i<5;i++) {
    brd.create('arc',[pol.vertices[i],pol.vertices[(i+2)%5],pol.vertices[(i+3)%5]],{strokeColor:'#093083'});
    brd.create('sector',[pol.vertices[i],pol.vertices[(i+2)%5],pol.vertices[(i+3)%5]],
          {fillColor:'#093083', highlightFillColor:'#093083', fillOpacity:1.0, highlightFillOpacity:1.0,
           strokeWidth:0});
}


var C = brd.create('point',[-2,-2]);
var D = brd.create('point',[function(){
                             var p = A.Dist(B); 
                             return C.X()+3*(1+Math.sqrt(5))/2/5*p;
                            },
                            function(){
                             return C.Y();
                            }
                           ]);
var pol3 = brd.create('regularpolygon',[C,D,3], {withLines:false, fillColor:'#e8501f', highlightFillColor:'#e8501f'});

for (i=0;i<3;i++) {
    brd.create('arc',[pol3.vertices[i],
                      pol3.vertices[(i+1)%3],
                      pol3.vertices[(i+2)%3]], 
             {strokeColor:'#e8501f'});
    brd.create('sector',[pol3.vertices[i],
                      pol3.vertices[(i+1)%3],
                      pol3.vertices[(i+2)%3]], 
             {fillColor:'#e8501f', highlightFillColor:'#e8501f',fillOpacity:1.0, highlightFillOpacity:1.0, 
              strokeWidth:0});
}
brd.unsuspendUpdate();