Difference between revisions of "Rolling circle on line"

From JSXGraph Wiki
Jump to: navigation, search
 
(One intermediate revision by the same user not shown)
Line 34: Line 34:
 
brd.create('segment',[C,B],{color:'black'});  
 
brd.create('segment',[C,B],{color:'black'});  
 
brd.unsuspendUpdate();
 
brd.unsuspendUpdate();
var rol = JXG.Math.Numerics.createRoulette(line, circle, 0, Math.PI/20, 1, 100, [C,P,B]);  
+
var rol = brd.createRoulette(line, circle, 0, Math.PI/20, 1, 100, [C,P,B]);  
  
 
</jsxgraph>
 
</jsxgraph>
Line 40: Line 40:
 
===The underlying JavaScript code===
 
===The underlying JavaScript code===
 
<source lang="javascript">
 
<source lang="javascript">
 +
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-1,5,20,-1], keepaspectratio:true});
 +
brd.suspendUpdate();
 +
 +
// Line
 +
var line = brd.create('curve', [function(t) { return t;}, function(t){ return 1;}], {strokeWidth:6});
 +
 +
// Circle
 +
var P = brd.create('point',[0,1],{name:'P', trace:true});
 +
var C = brd.create('point',[0,2],{name:'C'});
 +
var circle = brd.create('curve',[
 +
                    function(t){var d = P.Dist(C),
 +
                                    beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P);
 +
                                t += beta;
 +
                                return C.X()+d*Math.cos(t);
 +
                    },
 +
                    function(t){var d = P.Dist(C),
 +
                                    beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P);
 +
                                t += beta;
 +
                                return C.Y()+d*Math.sin(t);
 +
                    },
 +
                    0,2*Math.PI],
 +
                    {strokeWidth:6, strokeColor:'green'});
 +
 +
// Point on circle
 +
var B = brd.create('glider',[0,2,circle],{name:'B', color:'blue',trace:false});
 +
brd.create('segment',[C,B],{color:'black'});
 +
brd.unsuspendUpdate();
 +
var rol = brd.createRoulette(line, circle, 0, Math.PI/20, 1, 100, [C,P,B]);
 
</source>
 
</source>
  

Latest revision as of 18:20, 23 November 2010

The underlying JavaScript code

var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-1,5,20,-1], keepaspectratio:true});
brd.suspendUpdate();

// Line
var line = brd.create('curve', [function(t) { return t;}, function(t){ return 1;}], {strokeWidth:6});

// Circle
var P = brd.create('point',[0,1],{name:'P', trace:true});
var C = brd.create('point',[0,2],{name:'C'});
var circle = brd.create('curve',[
                    function(t){var d = P.Dist(C),
                                    beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P);
                                t += beta;
                                return C.X()+d*Math.cos(t);
                    },
                    function(t){var d = P.Dist(C),
                                    beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P);
                                t += beta;
                                return C.Y()+d*Math.sin(t);
                    },
                    0,2*Math.PI],
                    {strokeWidth:6, strokeColor:'green'});

// Point on circle
var B = brd.create('glider',[0,2,circle],{name:'B', color:'blue',trace:false});
brd.create('segment',[C,B],{color:'black'}); 
brd.unsuspendUpdate();
var rol = brd.createRoulette(line, circle, 0, Math.PI/20, 1, 100, [C,P,B]);