Circle approximation - Revision history

A WASSERMANN at 13:32, 3 March 2021

2021-03-03T13:32:49Z

← Older revision		Revision as of 13:32, 3 March 2021
Line 1:		Line 1:
	<jsxgraph width="600" height="600" box="box">		<jsxgraph width="600" height="600" box="box">
	var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 6, 6, -6], grid: true});		var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 6, 6, -6], grid: true});
	var n = brd.~~createElement~~('slider',[[-5,5],[4.5,5],[3,4,96]],{name:'n',snapWidth:1});		var n = brd.create('slider',[[-5,5],[4.5,5],[3,4,96]],{name:'n',snapWidth:1});

	var p0 = brd.create('point',[0,0],{strokeColor:'black',fillColor:'white',name:''});		var p0 = brd.create('point',[0,0],{strokeColor:'black',fillColor:'white',name:''});
Line 53:		Line 53:
	<source lang="javascript">		<source lang="javascript">
	var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 6, 6, -6], grid: true});		var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 6, 6, -6], grid: true});
	var n = brd.~~createElement~~('slider',[[-5,5],[4.5,5],[3,4,96]],{name:'n',snapWidth:1});		var n = brd.create('slider',[[-5,5],[4.5,5],[3,4,96]],{name:'n',snapWidth:1});

	var p0 = brd.create('point',[0,0],{strokeColor:'black',fillColor:'white',name:''});		var p0 = brd.create('point',[0,0],{strokeColor:'black',fillColor:'white',name:''});

A WASSERMANN at 18:50, 22 October 2012

2012-10-22T18:50:16Z

← Older revision		Revision as of 18:50, 22 October 2012
Line 28:		Line 28:
	for (i=0;i<len;i++) {		for (i=0;i<len;i++) {
	rot.applyOnce(ptmp);		rot.applyOnce(ptmp);
	~~console.log(this.dataX, ptmp);~~
	this.dataX.push(ptmp.X());		this.dataX.push(ptmp.X());
	this.dataY.push(ptmp.Y());		this.dataY.push(ptmp.Y());
Line 54:		Line 53:
	<source lang="javascript">		<source lang="javascript">
	var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 6, 6, -6], grid: true});		var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 6, 6, -6], grid: true});

	~~// Slider that controls the number n of vertices of the two polygons~~
	var n = brd.createElement('slider',[[-5,5],[4.5,5],[3,4,96]],{name:'n',snapWidth:1});		var n = brd.createElement('slider',[[-5,5],[4.5,5],[3,4,96]],{name:'n',snapWidth:1});

	~~// p0, p1 define the circle 'circ'~~
	var p0 = brd.create('point',[0,0],{strokeColor:'black',fillColor:'white',name:''});		var p0 = brd.create('point',[0,0],{strokeColor:'black',fillColor:'white',name:''});
	var p1 = brd.create('point',[4,0],{strokeColor:'black',fillColor:'white',name:''});		var p1 = brd.create('point',[4,0],{strokeColor:'black',fillColor:'white',name:''});

	~~// With the help of the rotational transform 'rot' we will compute the vertices~~
	~~// of the polygons~~
	var rot = brd.create('transform', [function() {return Math.PI*2.0/n.Value();},p0], {type:'rotate'}); // angle, rotation center		var rot = brd.create('transform', [function() {return Math.PI*2.0/n.Value();},p0], {type:'rotate'}); // angle, rotation center
	var ptmp = brd.create('point',[0,0],{visible:false,withLabel:false}); // dummy point for the rotation		var ptmp = brd.create('point',[0,0],{visible:false,withLabel:false}); // dummy point for the rotation

	~~// Two curves cOut and cIn defining the inner and outer polygon. They both contain dummy paths,~~
	~~// the correct paths will be computed later.~~
	var cOut = brd.create('curve',[[0],[0]],{fillColor:'#5e9abf',highlightFillColor:'#5e9abf',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'});		var cOut = brd.create('curve',[[0],[0]],{fillColor:'#5e9abf',highlightFillColor:'#5e9abf',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'});

	~~// Construction of the circle~~
	var circ = brd.create('circle',[p0,p1],{fillColor:'#fefd4c',highlightFillColor:'#fefd4c',fillOpacity:0.5,highlightFillOpacity:0.5,strokeColor:'black',highlightStrokeColor:'black'});		var circ = brd.create('circle',[p0,p1],{fillColor:'#fefd4c',highlightFillColor:'#fefd4c',fillOpacity:0.5,highlightFillOpacity:0.5,strokeColor:'black',highlightStrokeColor:'black'});
	var cIn = brd.create('curve',[[0],[0]],{fillColor:'#d769a3',highlightFillColor:'#d769a3',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'});		var cIn = brd.create('curve',[[0,1,2],[0,1,2]],{fillColor:'#d769a3',highlightFillColor:'#d769a3',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'});

	~~// Construction of the text~~
	var tCirc = brd.create('text',[-5,-4.0,function(){		var tCirc = brd.create('text',[-5,-4.0,function(){
	return 'Area of the circle = ' + (0.0625circ.getRadius()circ.getRadius()*Math.PI).toFixed(5);		return 'Area of the circle = ' + (0.0625circ.getRadius()circ.getRadius()*Math.PI).toFixed(5);
Line 86:		Line 73:
	}],{fontSize:20});		}],{fontSize:20});

	~~// In the updateDataArray methods of the curves cIn and cOut the correct paths are computed.~~
	~~// updateDataArray() is called during the update of the curve. By default, this method~~
	~~// is empty, but it can be overwritten.~~
	//
	~~// What is done in these methods? We set the dummy point ptmp to the position of one vertex of the~~
	~~// regular polygon. Then we apply n-times the rotational transform to this point. In every step we read the new~~
	~~// coordinates of the points and add them to the path of the curve.~~
	cIn.updateDataArray = function() {		cIn.updateDataArray = function() {
	var i, len = n.Value();		var i, len = n.Value();
	this.dataX = [p0.X()+circ.getRadius()];		this.dataX = [p0.X()+circ.getRadius()];
	this.dataY = [p0.Y()];		this.dataY = [p0.Y()];
	ptmp.setPositionDirectly(JXG.COORDS_BY_USER,p0.X()+circ.getRadius(),p0.Y());		ptmp.setPositionDirectly(JXG.COORDS_BY_USER, [p0.X()+circ.getRadius(), p0.Y()]);
	for (i=0;i<len;i++) {		for (i=0;i<len;i++) {
	rot.applyOnce(ptmp);		rot.applyOnce(ptmp);
Line 110:		Line 90:
	this.dataX = [p0.X()+s];		this.dataX = [p0.X()+s];
	this.dataY = [p0.Y()];		this.dataY = [p0.Y()];
	ptmp.setPositionDirectly(JXG.COORDS_BY_USER, p0.X()+s,p0.Y());		ptmp.setPositionDirectly(JXG.COORDS_BY_USER, [p0.X()+s,p0.Y()]);
	for (i=0;i<len;i++) {		for (i=0;i<len;i++) {
	rot.applyOnce(ptmp);		rot.applyOnce(ptmp);
Line 119:		Line 99:

	brd.update();		brd.update();

	</source>		</source>

A WASSERMANN at 18:49, 22 October 2012

2012-10-22T18:49:27Z

← Older revision		Revision as of 18:49, 22 October 2012
Line 25:		Line 25:
	this.dataX = [p0.X()+circ.getRadius()];		this.dataX = [p0.X()+circ.getRadius()];
	this.dataY = [p0.Y()];		this.dataY = [p0.Y()];
	ptmp.setPositionDirectly(p0.X()+circ.getRadius(), p0.Y());		ptmp.setPositionDirectly(JXG.COORDS_BY_USER, [p0.X()+circ.getRadius(), p0.Y()]);
	for (i=0;i<len;i++) {		for (i=0;i<len;i++) {
	rot.applyOnce(ptmp);		rot.applyOnce(ptmp);
Line 39:		Line 39:
	this.dataX = [p0.X()+s];		this.dataX = [p0.X()+s];
	this.dataY = [p0.Y()];		this.dataY = [p0.Y()];
	ptmp.setPositionDirectly(JXG.COORDS_BY_USER, p0.X()+s,p0.Y());		ptmp.setPositionDirectly(JXG.COORDS_BY_USER, [p0.X()+s,p0.Y()]);
	for (i=0;i<len;i++) {		for (i=0;i<len;i++) {
	rot.applyOnce(ptmp);		rot.applyOnce(ptmp);

A WASSERMANN at 18:41, 22 October 2012

2012-10-22T18:41:29Z

← Older revision		Revision as of 18:41, 22 October 2012
Line 28:		Line 28:
	for (i=0;i<len;i++) {		for (i=0;i<len;i++) {
	rot.applyOnce(ptmp);		rot.applyOnce(ptmp);
			console.log(this.dataX, ptmp);
	this.dataX.push(ptmp.X());		this.dataX.push(ptmp.X());
	this.dataY.push(ptmp.Y());		this.dataY.push(ptmp.Y());
	}		}
	~~console.log(this.dataX, rot.matrix);~~
	}		}

A WASSERMANN at 18:40, 22 October 2012

2012-10-22T18:40:43Z

← Older revision		Revision as of 18:40, 22 October 2012
Line 31:		Line 31:
	this.dataY.push(ptmp.Y());		this.dataY.push(ptmp.Y());
	}		}
	console.log(this.dataX);		console.log(this.dataX, rot.matrix);
	}		}

A WASSERMANN at 18:39, 22 October 2012

2012-10-22T18:39:54Z

← Older revision		Revision as of 18:39, 22 October 2012
Line 31:		Line 31:
	this.dataY.push(ptmp.Y());		this.dataY.push(ptmp.Y());
	}		}
	console.log(~~len~~);		console.log(this.dataX);
	}		}

Line 51:		Line 51:
	</jsxgraph>		</jsxgraph>

	===The ~~underlying~~ JavaScript code===		===The JavaScript code===
	<source lang="javascript">		<source lang="javascript">
	var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 6, 6, -6], grid: true});		var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 6, 6, -6], grid: true});

A WASSERMANN at 18:39, 22 October 2012

2012-10-22T18:39:13Z

← Older revision		Revision as of 18:39, 22 October 2012
Line 31:		Line 31:
	this.dataY.push(ptmp.Y());		this.dataY.push(ptmp.Y());
	}		}
			console.log(len);
	}		}

A WASSERMANN at 18:38, 22 October 2012

2012-10-22T18:38:52Z

← Older revision		Revision as of 18:38, 22 October 2012
Line 25:		Line 25:
	this.dataX = [p0.X()+circ.getRadius()];		this.dataX = [p0.X()+circ.getRadius()];
	this.dataY = [p0.Y()];		this.dataY = [p0.Y()];
	ptmp.~~moveTo~~(p0.X()+circ.getRadius(), p0.Y());		ptmp.setPositionDirectly(p0.X()+circ.getRadius(), p0.Y());
	for (i=0;i<len;i++) {		for (i=0;i<len;i++) {
	rot.applyOnce(ptmp);		rot.applyOnce(ptmp);

A WASSERMANN at 18:37, 22 October 2012

2012-10-22T18:37:38Z

← Older revision		Revision as of 18:37, 22 October 2012
Line 45:		Line 45:
	}		}
	}		}
	*/
	brd.update();		brd.update();

A WASSERMANN at 18:37, 22 October 2012

2012-10-22T18:37:24Z

← Older revision		Revision as of 18:37, 22 October 2012
Line 20:		Line 20:
	return 'Area of the circumscribed ' +n.Value().toFixed(0)+ '-polygon = ' + (0.0625n.Value()circ.getRadius()circ.getRadius()Math.tan(Math.PI/n.Value())).toFixed(5);		return 'Area of the circumscribed ' +n.Value().toFixed(0)+ '-polygon = ' + (0.0625n.Value()circ.getRadius()circ.getRadius()Math.tan(Math.PI/n.Value())).toFixed(5);
	}],{fontSize:20});		}],{fontSize:20});
	/*
	cIn.updateDataArray = function() {		cIn.updateDataArray = function() {
	var i, len = n.Value();		var i, len = n.Value();
	this.dataX = [p0.X()+circ.getRadius()];		this.dataX = [p0.X()+circ.getRadius()];
	this.dataY = [p0.Y()];		this.dataY = [p0.Y()];
	ptmp.~~setPositionDirectly~~(~~JXG.COORDS_BY_USER,~~p0.X()+circ.getRadius(),p0.Y());		ptmp.moveTo(p0.X()+circ.getRadius(), p0.Y());
	for (i=0;i<len;i++) {		for (i=0;i<len;i++) {
	rot.applyOnce(ptmp);		rot.applyOnce(ptmp);