Circle - Revision history

A WASSERMANN at 08:21, 3 March 2021

2021-03-03T08:21:45Z

← Older revision		Revision as of 08:21, 3 March 2021
Line 4:		Line 4:
	<source lang="javascript">		<source lang="javascript">
	var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});		var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
	var p1 = b.~~createElement~~('point',[0,0], {name:'A',size: 4, face: 'o'});		var p1 = b.create('point',[0,0], {name:'A',size: 4, face: 'o'});
	var p2 = b.~~createElement~~('point',[2,-1], {name:'B',size: 4, face: 'o'});		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.
Line 14:		Line 14:
	<jsxgraph box="jxgbox" width="500" height="200">		<jsxgraph box="jxgbox" width="500" height="200">
	var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});		var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
	var p1 = brd.~~createElement~~('point',[0,0], {name:'A',size: 4, face: 'o'});		var p1 = brd.create('point',[0,0], {name:'A',size: 4, face: 'o'});
	var p2 = brd.~~createElement~~('point',[2,-1], {name:'B',size: 4, face: 'o'});		var p2 = brd.create('point',[2,-1], {name:'B',size: 4, face: 'o'});
	var ci = brd.~~createElement~~('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});		var ci = brd.create('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
	</jsxgraph>		</jsxgraph>

Line 23:		Line 23:

	<source lang="javascript">		<source lang="javascript">
	var ci2 = b.~~createElement~~('circle',[p1,p2],		var ci2 = b.create('circle',[p1,p2],
	{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});		{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
	</source>		</source>
Line 29:		Line 29:
	<jsxgraph box="jxgbox2" width="500" height="200">		<jsxgraph box="jxgbox2" width="500" height="200">
	var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]});		var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]});
	var p1 = brd2.~~createElement~~('point',[0,0], {name:'A',size: 4, face: 'o'});		var p1 = brd2.create('point',[0,0], {name:'A',size: 4, face: 'o'});
	var p2 = brd2.~~createElement~~('point',[2,-1], {name:'B',size: 4, face: 'o'});		var p2 = brd2.create('point',[2,-1], {name:'B',size: 4, face: 'o'});
	var ci2 = brd2.~~createElement~~('circle',[p1,p2],		var ci2 = brd2.create('circle',[p1,p2],
	{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});		{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
	</jsxgraph>		</jsxgraph>

Michael at 12:41, 7 June 2011

2011-06-07T12:41:17Z

← Older revision		Revision as of 12:41, 7 June 2011
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 = b.createElement('point',[0,0], {name:'A',~~style~~:6});		var p1 = b.createElement('point',[0,0], {name:'A',size: 4, face: 'o'});
	var p2 = b.createElement('point',[2,-1], {name:'B',~~style~~:6});		var p2 = b.createElement('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.
Line 12:		Line 12:
	</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/jsxgraphcore.js"></script>~~		var p1 = brd.createElement('point',[0,0], {name:'A',size: 4, face: 'o'});
	~~<div id~~="jxgbox" ~~class~~="~~jxgbox~~" ~~style="width:500px;~~ height~~:200px;"></div>~~		var p2 = brd.createElement('point',[2,-1], {name:'B',size: 4, face: 'o'});
	~~<script type~~="~~text/javascript~~">
	var brd = JXG.JSXGraph.initBoard('jxgbox', {~~originX~~: ~~200~~, ~~originY: 100~~, ~~unitX: 50~~, ~~unitY: 50~~});
	var p1 = brd.createElement('point',[0,0], {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});		var ci = brd.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
	</~~script>~~		</jsxgraph>
	~~</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.
Line 32:		Line 27:
	</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.createElement('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.createElement('point',[2,-1], {name:'B',size: 4, face: 'o'});
	var p1 = brd2.createElement('point',[0,0], {name:'A',~~style~~:6});
	var p2 = brd2.createElement('point',[2,-1], {name:'B',~~style~~:6});
	var ci2 = brd2.createElement('circle',[p1,p2],		var ci2 = brd2.createElement('circle',[p1,p2],
	{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});		{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
	</~~script>~~		</jsxgraph>
	~~</html~~>

	=== Dynamic fill-opacity ===		=== Dynamic fill-opacity ===
Line 47:		Line 39:

	<source lang="javascript">		<source lang="javascript">
	var ci3 = b.~~createElement~~('circle',[p1,p2],		var ci3 = b.create('circle',[p1,p2],
	{strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });		{strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });
	</source>		</source>

	<~~html>~~		<jsxgraph box="jxgbox3" width="500" height="200">
	~~<div id~~="jxgbox3" ~~class~~="~~jxgbox" style=~~"~~width:500px;~~ height~~:200px;"></div>~~		var brd3 = JXG.JSXGraph.initBoard('jxgbox3', {boundingbox: [-5, 2, 5, -2]});
	~~<script type~~="~~text/javascript~~">		var p1 = brd3.create('point',[0,0], {name:'A',size: 4, face: 'o'});
	var brd3 = JXG.JSXGraph.initBoard('jxgbox3', {~~originX~~: ~~200~~, ~~originY: 100~~, ~~unitX: 50~~, ~~unitY: 50~~});		var p2 = brd3.create('point',[2,0], {name:'B',size: 4, face: 'o'});
	var p1 = brd3.~~createElement~~('point',[0,0], {name:'A',~~style~~:6});		var ci3 = brd3.create('circle',[p1,p2],
	var p2 = brd3.~~createElement~~('point',[2,0], {name:'B',~~style~~:6});
	var ci3 = brd3.~~createElement~~('circle',[p1,p2],
	{strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });		{strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });
	</~~script>~~		</jsxgraph>
	~~</html~~>


	[[Category:Examples]]		[[Category:Examples]]

A WASSERMANN at 15:24, 29 October 2009

2009-10-29T15:24:38Z

← Older revision		Revision as of 15:24, 29 October 2009
Line 14:		Line 14:
	<html>		<html>
	<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />		<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/prototype.js"></script>~~
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>		<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>

Michael at 19:50, 20 October 2008

2008-10-20T19:50:19Z

← Older revision		Revision as of 19:50, 20 October 2008
Line 4:		Line 4:
	<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', {originX: 200, originY: 100, unitX: 50, unitY: 50});
	var p1 = ~~board~~.createElement('point',[0,0], {name:'A',style:6});		var p1 = b.createElement('point',[0,0], {name:'A',style:6});
	var p2 = ~~board~~.createElement('point',[2,-1], {name:'B',style:6});		var p2 = b.createElement('point',[2,-1], {name:'B',style:6});
	</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.

Michael: changed brd* to b as names for instances of board in the example codes

2008-10-20T19:46:12Z

changed brd* to b as names for instances of board in the example codes

← Older revision		Revision as of 19:46, 20 October 2008
Line 9:		Line 9:
	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 ci = ~~brd~~.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});		var ci = b.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
	</source>		</source>

Line 29:		Line 29:

	<source lang="javascript">		<source lang="javascript">
	var ci2 = ~~brd2~~.createElement('circle',[p1,p2],		var ci2 = b.createElement('circle',[p1,p2],
	{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});		{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
	</source>		</source>
Line 48:		Line 48:

	<source lang="javascript">		<source lang="javascript">
	var ci3 = ~~brd3~~.createElement('circle',[p1,p2],		var ci3 = b.createElement('circle',[p1,p2],
	{strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });		{strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });
	</source>		</source>

84.147.85.152 at 20:53, 17 September 2008

2008-09-17T20:53:03Z

← Older revision		Revision as of 20:53, 17 September 2008
Line 45:		Line 45:

	=== Dynamic fill-opacity ===		=== Dynamic fill-opacity ===
	We can make the fill-opacity dynamic and make it ~~somewhat dependend~~ on position of "B".		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">		<source lang="javascript">

84.147.126.134 at 16:02, 17 September 2008

2008-09-17T16:02:02Z

← Older revision		Revision as of 16:02, 17 September 2008
Line 45:		Line 45:

	=== Dynamic fill-opacity ===		=== Dynamic fill-opacity ===
	We can make the fill-opacity dynamic and make it somewhat dependend on ~~the radius~~ of ~~the circle~~.		We can make the fill-opacity dynamic and make it somewhat dependend on position of "B".

	<source lang="javascript">		<source lang="javascript">

84.147.126.134 at 16:00, 17 September 2008

2008-09-17T16:00:51Z

@@ Line 41: / Line 41: @@
   var ci2 = brd2.createElement('circle',[p1,p2],
    {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
 </script>
 </html>

84.147.86.108 at 15:56, 17 September 2008

2008-09-17T15:56:31Z

← Older revision		Revision as of 15:56, 17 September 2008
Line 9:		Line 9:
	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 = brd.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
	</source>		</source>

84.147.86.108 at 15:55, 17 September 2008

2008-09-17T15:55:39Z

← Older revision		Revision as of 15:55, 17 September 2008
Line 4:		Line 4:
	<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', {originX: 200, originY: 100, unitX: 50, unitY: 50});
	var p1 = board.createElement('point',[-1,1], {name:'A',style:6});		var p1 = board.createElement('point',[0,0], {name:'A',style:6});
	var p2 = board.createElement('point',[2,-1], {name:'B',style:6});		var p2 = board.createElement('point',[2,-1], {name:'B',style:6});
	</source>		</source>
Line 19:		Line 19:
	<script type="text/javascript">		<script type="text/javascript">
	var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});		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 p1 = brd.createElement('point',[0,0], {name:'A',style:6});
	var p2 = brd.createElement('point',[2,-1], {name:'B',style:6});		var p2 = brd.createElement('point',[2,-1], {name:'B',style:6});
	var ci = brd.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});		var ci = brd.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
Line 26:		Line 26:

	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 = brd2.createElement('circle',[p1,p2],
			{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
	</source>		</source>

Line 36:		Line 37:
	<script type="text/javascript">		<script type="text/javascript">
	var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});		var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
	var p1 = brd2.createElement('point',[-1,1], {name:'A',style:6});		var p1 = brd2.createElement('point',[0,0], {name:'A',style:6});
	var p2 = brd2.createElement('point',[2,-1], {name:'B',style:6});		var p2 = brd2.createElement('point',[2,-1], {name:'B',style:6});
	var ci2 = brd2.createElement('circle',[p1,p2], {strokeWidth:3, dash:2});		var ci2 = brd2.createElement('circle',[p1,p2],
			{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
	</script>		</script>
	</html>		</html>