Difference between revisions of "Circle"

From JSXGraph Wiki
Jump to navigationJump to search
(New page: == Circle through two points == One possibility to construct a circle is to give its center and a point defining its radius. Lets construct two points "A" and "B". <source lang="javascript"> var b...)
 
 
(9 intermediate revisions by 5 users not shown)
Line 3: Line 3:
 
Lets construct two points "A" and "B".  
 
Lets construct two points "A" and "B".  
 
<source lang="javascript">
 
<source lang="javascript">
−
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
+
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
−
var p1 = board.createElement('point',[-1,1], {name:'A',style:6});
+
var p1 = b.create('point',[0,0], {name:'A',size: 4, face: 'o'});
−
var p2 = board.createElement('point',[2,-1], {name:'B',style:6});
+
var p2 = b.create('point',[2,-1], {name:'B',size: 4, face: 'o'});
 
</source>
 
</source>
 
Then we construct a circle through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.
 
Then we construct a circle through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.
 
<source lang="javascript">
 
<source lang="javascript">
−
var li = brd.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
+
var ci = b.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
 
</source>
 
</source>
  
−
<html>
+
<jsxgraph box="jxgbox" width="500" height="200">
−
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
+
  var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
−
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
+
  var p1 = brd.create('point',[0,0], {name:'A',size: 4, face: 'o'});
−
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
+
  var p2 = brd.create('point',[2,-1], {name:'B',size: 4, face: 'o'});
−
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>
+
  var ci = brd.create('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
−
<script type="text/javascript">
+
</jsxgraph>
−
  var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
 
−
  var p1 = brd.createElement('point',[-1,1], {name:'A',style:6});
 
−
  var p2 = brd.createElement('point',[2,-1], {name:'B',style:6});
 
−
  var ci = brd.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
 
−
</script>
 
−
</html>
 
  
 
Generally it is better to use JavaScript variables and not Geometry-Element names when constructing.
 
Generally it is better to use JavaScript variables and not Geometry-Element names when constructing.
−
Now, we do the same examples with JavaScript variables. To show another variation, we use a dashed stroke style.
+
Now, we do the same examples with JavaScript variables. To show other variations, we use a dashed stroke style and set a fill color.
  
 
<source lang="javascript">
 
<source lang="javascript">
−
var ci2 = brd2.createElement('circle',[p1,p2], {strokeWidth:3, dash:2});
+
var ci2 = b.create('circle',[p1,p2],  
 +
    {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
 
</source>
 
</source>
  
−
<html>
+
<jsxgraph box="jxgbox2" width="500" height="200">
−
<div id="jxgbox2" class="jxgbox" style="width:500px; height:200px;"></div>
+
  var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]});
−
<script type="text/javascript">
+
  var p1 = brd2.create('point',[0,0], {name:'A',size: 4, face: 'o'});
−
  var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
+
  var p2 = brd2.create('point',[2,-1], {name:'B',size: 4, face: 'o'});
−
  var p1 = brd2.createElement('point',[-1,1], {name:'A',style:6});
+
  var ci2 = brd2.create('circle',[p1,p2],  
−
  var p2 = brd2.createElement('point',[2,-1], {name:'B',style:6});
+
  {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
−
  var ci2 = brd2.createElement('circle',[p1,p2], {strokeWidth:3, dash:2});
+
</jsxgraph>
−
</script>
+
 
−
</html>
+
=== Dynamic fill-opacity ===
 +
We can make the fill-opacity dynamic and make it dependent on the position of "B", i.e. the JavaScript variable "p2".
 +
 
 +
<source lang="javascript">
 +
var ci3 = b.create('circle',[p1,p2],
 +
    {strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });
 +
</source>
 +
 
 +
<jsxgraph box="jxgbox3" width="500" height="200">
 +
var brd3 = JXG.JSXGraph.initBoard('jxgbox3', {boundingbox: [-5, 2, 5, -2]});
 +
var p1 = brd3.create('point',[0,0], {name:'A',size: 4, face: 'o'});
 +
var p2 = brd3.create('point',[2,0], {name:'B',size: 4, face: 'o'});
 +
var ci3 = brd3.create('circle',[p1,p2],
 +
  {strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });
 +
</jsxgraph>
  
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Latest revision as of 10:21, 3 March 2021

Circle through two points

One possibility to construct a circle is to give its center and a point defining its radius. Lets construct two points "A" and "B". 

var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
var p1 = b.create('point',[0,0], {name:'A',size: 4, face: 'o'});
var p2 = b.create('point',[2,-1], {name:'B',size: 4, face: 'o'});

Then we construct a circle through "A" and "B". The setting of a new color and changing the stroke-width is not necessary. 

var ci = b.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});

Generally it is better to use JavaScript variables and not Geometry-Element names when constructing. Now, we do the same examples with JavaScript variables. To show other variations, we use a dashed stroke style and set a fill color. 

var ci2 = b.create('circle',[p1,p2], 
    {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});

Dynamic fill-opacity

We can make the fill-opacity dynamic and make it dependent on the position of "B", i.e. the JavaScript variable "p2". 

var ci3 = b.create('circle',[p1,p2], 
    {strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });

Retrieved from "http://jsxgraph.org/wiki/index.php?title=Circle&oldid=7124"