Rolling circle on cosine: Difference between revisions

From JSXGraph Wiki
(New page: <jsxgraph width="0" height="0" box="nix"></jsxgraph> <html> <script type="text/javascript" src="/~alfred/jsxgraph/trunk/src/Roulette.js"></script> <form> <input type="button" value="start"...)
 
No edit summary
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
<jsxgraph width="0" height="0" box="nix"></jsxgraph>
<html>
<html>
<script type="text/javascript" src="/~alfred/jsxgraph/trunk/src/Roulette.js"></script>
<form>
<form>
<input type="button" value="start" onclick="rol.start()">
<input type="button" value="start" onclick="rol.start()">
Line 13: Line 11:


// Line
// Line
var line = brd.create('curve', [function(t) { return t;}, function(t){ return 0.5*Math.cos(t);}], {strokeWidth:6});
var line = brd.create('curve', [function(t) { return t;}, function(t){ return 0.5*Math.cos(t);}],  
{strokeWidth:6, strokeColor:'green'});


// Circle
// Circle
var P = brd.create('point',[0,1],{name:'P', trace:true});
var P = brd.create('point',[0,0.5],{name:'P', trace:false});
var C = brd.create('point',[0,2],{name:'C'});
var C = brd.create('point',[0,1],{name:'C'});
var circle = brd.create('curve',[
var circle = brd.create('curve',[
                     function(t){var d = P.Dist(C);
                     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);
                                 return C.X()+d*Math.cos(t);
                     },
                     },
                     function(t){var d = P.Dist(C);
                     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);
                                 return C.Y()+d*Math.sin(t);
                     },
                     },
Line 29: Line 32:


// Point on circle
// Point on circle
var B = brd.create('glider',[0,2,circle],{name:'B', color:'blue',trace:false});
var B = brd.create('glider',[0,1.5,circle],{name:'B', color:'blue',trace:true});
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, 100, [C,P,B]);  
var rol = brd.createRoulette(line, circle, 0, Math.PI/18, 1, 150, [C,P,B]);  
</jsxgraph>
</jsxgraph>


===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 0.5*Math.cos(t);}],
{strokeWidth:6, strokeColor:'green'});
// Circle
var P = brd.create('point',[0,0.5],{name:'P', trace:false});
var C = brd.create('point',[0,1],{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,1.5,circle],{name:'B', color:'blue',trace:true});
brd.create('segment',[C,B],{color:'black'});
brd.unsuspendUpdate();
var rol = brd.createRoulette(line, circle, 0, Math.PI/18, 1, 150, [C,P,B]);
</source>
</source>



Latest revision as of 17: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 0.5*Math.cos(t);}], 
{strokeWidth:6, strokeColor:'green'});

// Circle
var P = brd.create('point',[0,0.5],{name:'P', trace:false});
var C = brd.create('point',[0,1],{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,1.5,circle],{name:'B', color:'blue',trace:true});
brd.create('segment',[C,B],{color:'black'}); 
brd.unsuspendUpdate();
var rol = brd.createRoulette(line, circle, 0, Math.PI/18, 1, 150, [C,P,B]);