Difference between revisions of "Hypotrochoid"

From JSXGraph Wiki
Jump to: navigation, search
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<html>
+
<jsxgraph box="jxgbox" width="500" height="500">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
+
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
+
var g1 = board.create('point', [1, -1], {size:4});
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
+
var g2 = board.create('point', [2.5, -2], {size:4});
<script language="JavaScript">
+
var g3 = board.create('point', [1, -3], {size:3});
board = JXG.JSXGraph.initBoard('jsxgbox', {originX: 250, originY: 250, unitX: 50, unitY: 50});
+
var g4 = board.create('point', [2.5, -4], {size:3});
g1 = board.createElement('point', [1, -1], {style:6});
+
var g5 = board.create('point', [-4, 1], {size:3,name:''});
g2 = board.createElement('point', [2.5, -2], {style:6});
 
g3 = board.createElement('point', [1, -3], {style:5});
 
g4 = board.createElement('point', [2.5, -4], {style:5});
 
g5 = board.createElement('point', [-4, 1], {style:5,name:''});
 
  
c1 = board.createElement('curve', [
+
var c1 = board.create('curve', [
 
       function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },
 
       function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },
 
       function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },
 
       function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },
Line 19: Line 15:
 
         });
 
         });
  
t = board.createElement('text', [function() { return g5.X()+0.2; },function() { return g5.Y()+0.25; },'X(B)=<value>X(B)</value>'],  
+
var t = board.create('text', [function() { return g5.X()+0.2; },function() { return g5.Y()+0.25; }, 'X(B)=<value>X(B)</value>'],  
 
         {  
 
         {  
 
             digits:3,  
 
             digits:3,  
             fontSize:function(){return Math.abs(g5.Y())*10+1;}
+
             fontSize:function(){return Math.abs(g5.Y())*10+1;}  
 
         });
 
         });
</script>  
+
</jsxgraph>  
</html>
+
 
 
===The JavaScript code to produce this picture===
 
===The JavaScript code to produce this picture===
<source lang="html4strict">
 
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
 
</source>
 
 
<source lang="javascript">
 
<source lang="javascript">
board = JXG.JSXGraph.initBoard('jsxgbox', {originX: 250, originY: 250, unitX: 50, unitY: 50});
+
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});
g1 = board.createElement('point', [1, -1], {style:6});
+
var g1 = board.create('point', [1, -1], {size:4});
g2 = board.createElement('point', [2.5, -2], {style:6});
+
var g2 = board.create('point', [2.5, -2], {size:4});
g3 = board.createElement('point', [1, -3], {style:5});
+
var g3 = board.create('point', [1, -3], {size:3});
g4 = board.createElement('point', [2.5, -4], {style:5});
+
var g4 = board.create('point', [2.5, -4], {size:3});
g5 = board.createElement('point', [-4, 1], {style:5,name:''});
+
var g5 = board.create('point', [-4, 1], {size:3,name:''});
  
c1 = board.createElement('curve', [
+
var c1 = board.create('curve', [
 
       function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },
 
       function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },
 
       function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },
 
       function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },
Line 48: Line 39:
 
         });
 
         });
  
t = board.createElement('text', [function() { return g5.X()+0.2; },function() { return g5.Y()+0.25; },'X(B)=<value>X(B)</value>'],  
+
var t = board.create('text', [function() { return g5.X()+0.2; },function() { return g5.Y()+0.25; },'X(B)=<value>X(B)</value>'],  
 
         {  
 
         {  
 
             digits:3,  
 
             digits:3,  

Latest revision as of 15:42, 21 February 2013

The JavaScript code to produce this picture

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});
var g1 = board.create('point', [1, -1], {size:4});
var g2 = board.create('point', [2.5, -2], {size:4});
var g3 = board.create('point', [1, -3], {size:3});
var g4 = board.create('point', [2.5, -4], {size:3});
var g5 = board.create('point', [-4, 1], {size:3,name:''});

var c1 = board.create('curve', [
       function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },
       function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },
       0,function(){ return Math.PI*7*Math.abs(g4.X());}],{
          strokeWidth:function(){return g5.Y()*3;},
          strokeOpacity:function(){return g5.Y()*0.6;}
         });

var t = board.create('text', [function() { return g5.X()+0.2; },function() { return g5.Y()+0.25; },'X(B)=<value>X(B)</value>'], 
        { 
            digits:3, 
            fontSize:function(){return Math.abs(g5.Y())*10+1;}
        });