Sine and cosine - Revision history

A WASSERMANN at 15:58, 20 February 2013

2013-02-20T15:58:49Z

← Older revision		Revision as of 15:58, 20 February 2013
Line 31:		Line 31:
	// sine:		// sine:
	var b2p1 = board2.create('point', [		var b2p1 = board2.create('point', [
	function(){ return ~~board~~.rad([1,0],[0,0],b1p1); },		function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); },
	function() { return b1p1.Y() }],		function() { return b1p1.Y() }],
	{fixed: true, trace: true, color: '#ff0000', name: 'S'});		{fixed: true, trace: true, color: '#ff0000', name: 'S'});
	// cosine:		// cosine:
	var b2p2 = board2.create('point', [		var b2p2 = board2.create('point', [
	function(){ return ~~board~~.rad([1,0],[0,0],b1p1); },		function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); },
	function() { return b1p1.X() }],		function() { return b1p1.X() }],
	{fixed: true, trace: true, color: '#0000ff', name: 'C'});		{fixed: true, trace: true, color: '#0000ff', name: 'C'});
Line 77:		Line 77:
	// sine:		// sine:
	var b2p1 = board2.create('point', [		var b2p1 = board2.create('point', [
	function(){ return ~~board~~.rad([1,0],[0,0],b1p1); },		function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); },
	function() { return b1p1.Y() }],		function() { return b1p1.Y() }],
	{fixed: true, trace: true, color: '#ff0000', name: 'S'});		{fixed: true, trace: true, color: '#ff0000', name: 'S'});
	// cosine:		// cosine:
	var b2p2 = board2.create('point', [		var b2p2 = board2.create('point', [
	function(){ return ~~board~~.rad([1,0],[0,0],b1p1); },		function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); },
	function() { return b1p1.X() }],		function() { return b1p1.X() }],
	{fixed: true, trace: true, color: '#0000ff', name: 'C'});		{fixed: true, trace: true, color: '#0000ff', name: 'C'});

Michael at 13:43, 8 June 2011

2011-06-08T13:43:02Z

Show changes

A WASSERMANN at 10:24, 25 March 2011

2011-03-25T10:24:19Z

← Older revision		Revision as of 10:24, 25 March 2011
Line 4:		Line 4:
	</html>		</html>
	<jsxgraph box="box" width="400" height="400">		<jsxgraph box="box" width="400" height="400">
	~~document.getElementById('box').style.float = 'left';~~
	var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});		var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
	board.suspendUpdate();		board.suspendUpdate();

A WASSERMANN at 10:23, 25 March 2011

2011-03-25T10:23:48Z

← Older revision		Revision as of 10:23, 25 March 2011
Line 4:		Line 4:
	</html>		</html>
	<jsxgraph box="box" width="400" height="400">		<jsxgraph box="box" width="400" height="400">
			document.getElementById('box').style.float = 'left';
	var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});		var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
	board.suspendUpdate();		board.suspendUpdate();

A WASSERMANN at 12:33, 6 February 2011

2011-02-06T12:33:15Z

← Older revision		Revision as of 12:33, 6 February 2011
Line 53:		Line 53:
	===The underlying JavaScript code===		===The underlying JavaScript code===
	<source lang="javascript">		<source lang="javascript">
			// Board 1
	var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});		var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
	~~var board2 = JXG~~.~~JSXGraph.initBoard~~(~~'box2', {originX: 50, originY: 200, unitX: 50, unitY: 150}~~);		board.suspendUpdate();
	var xax1 = board.create('axis', [[0,0], [0,1]]);		var xax1 = board.create('axis', [[0,0], [0,1]]);
	var yax1 = board.create('axis', [[0,0], [1,0]]);		var yax1 = board.create('axis', [[0,0], [1,0]]);
			var b1c1 = board.create('circle', [[0,0], [1,0]]);
			var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
			var perp = board.create('perpendicular', [xax1,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
			var perp2 = board.create('perpendicular',[yax1,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
			board.unsuspendUpdate();

			// Animation
			var animated = false;
			function animate(point, direction, count) {
			if(animated) {
			point.stopAnimation();
			animated = false;
			} else {
			point.startAnimation(direction, count);
			animated = true;
			}
			}

			// Board 2
			var board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});
			board2.suspendUpdate();
	var xax2 = board2.create('axis', [[0,0], [1,0]]);		var xax2 = board2.create('axis', [[0,0], [1,0]]);
	board2.create('axis', [[0,0], [0,1]]);		board2.create('axis', [[0,0], [0,1]]);

	board2.create('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});		board2.create('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});

	~~var b1c1 = board.create('circle', [[0,0], [1,0]]);~~
	~~var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});~~
	~~var perp = board.create('perpendicular', [xax1,b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});~~
	~~var perp2 = board.create('perpendicular',[yax1,b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});~~

	// sine:		// sine:
Line 71:		Line 87:
	function(){ return board.rad([1,0],[0,0],b1p1); },		function(){ return board.rad([1,0],[0,0],b1p1); },
	function() { return b1p1.Y() }],		function() { return b1p1.Y() }],
	{fixed: true, trace: true, ~~strokeColor~~: '#ff0000', name: 'S'});		{fixed: true, trace: true, color: '#ff0000', name: 'S'});
	// cosine:		// cosine:
	var b2p2 = board2.create('point', [		var b2p2 = board2.create('point', [
	function(){ return board.rad([1,0],[0,0],b1p1); },		function(){ return board.rad([1,0],[0,0],b1p1); },
	function() { return b1p1.X() }],		function() { return b1p1.X() }],
	{fixed: true, trace: true, ~~strokeColor~~: '#0000ff', name: 'C'});		{fixed: true, trace: true, color: '#0000ff', name: 'C'});
	// Dependencies (only necessary if b2p1 or b2p2 is deleted)		// Dependencies (only necessary if b2p1 or b2p2 is deleted)
	b1p1.addChild(b2p1);		b1p1.addChild(b2p1);
	b1p1.addChild(b2p2);		b1p1.addChild(b2p2);
			board2.unsuspendUpdate();

	board.addChild(board2);		board.addChild(board2);

	~~// Animation~~
	~~var animated = false;~~
	~~function animate(point, direction, count) {~~
	~~if(animated) {~~
	~~point.stopAnimation();~~
	~~animated = false;~~
	~~} else {~~
	~~point.startAnimation(direction, count);~~
	~~animated = true;~~
	}
	}
	~~</script>~~
	</source>		</source>

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

A WASSERMANN at 12:32, 6 February 2011

2011-02-06T12:32:13Z

← Older revision		Revision as of 12:32, 6 February 2011
Line 5:		Line 5:
	<jsxgraph box="box" width="400" height="400">		<jsxgraph box="box" width="400" height="400">
	var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});		var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
			board.suspendUpdate();
	var xax1 = board.create('axis', [[0,0], [0,1]]);		var xax1 = board.create('axis', [[0,0], [0,1]]);
	var yax1 = board.create('axis', [[0,0], [1,0]]);		var yax1 = board.create('axis', [[0,0], [1,0]]);
Line 11:		Line 12:
	var perp = board.create('perpendicular', [xax1,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);		var perp = board.create('perpendicular', [xax1,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
	var perp2 = board.create('perpendicular',[yax1,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);		var perp2 = board.create('perpendicular',[yax1,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
			board.unsuspendUpdate();

	// Animation		// Animation
Line 26:		Line 28:
	<jsxgraph box="box2" width="400" height="400">		<jsxgraph box="box2" width="400" height="400">
	var board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});		var board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});
			board2.suspendUpdate();
	var xax2 = board2.create('axis', [[0,0], [1,0]]);		var xax2 = board2.create('axis', [[0,0], [1,0]]);
	board2.create('axis', [[0,0], [0,1]]);		board2.create('axis', [[0,0], [0,1]]);
Line 43:		Line 46:
	b1p1.addChild(b2p1);		b1p1.addChild(b2p1);
	b1p1.addChild(b2p2);		b1p1.addChild(b2p2);
			board2.unsuspendUpdate();

	board.addChild(board2);		board.addChild(board2);

A WASSERMANN at 12:30, 6 February 2011

2011-02-06T12:30:43Z

← Older revision		Revision as of 12:30, 6 February 2011
Line 10:		Line 10:
	var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});		var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
	var perp = board.create('perpendicular', [xax1,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);		var perp = board.create('perpendicular', [xax1,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
	var perp2 = board.create('perpendicular',[yax1,b1p1],[{strokeColor: '#~~ff0000~~', visible: true}, {visible: false}]);		var perp2 = board.create('perpendicular',[yax1,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);

	// Animation		// Animation
Line 34:		Line 34:
	function(){ return board.rad([1,0],[0,0],b1p1); },		function(){ return board.rad([1,0],[0,0],b1p1); },
	function() { return b1p1.Y() }],		function() { return b1p1.Y() }],
	{fixed: true, trace: true, ~~strokeColor~~: '#ff0000', name: 'S'});		{fixed: true, trace: true, color: '#ff0000', name: 'S'});
	// cosine:		// cosine:
	var b2p2 = board2.create('point', [		var b2p2 = board2.create('point', [
	function(){ return board.rad([1,0],[0,0],b1p1); },		function(){ return board.rad([1,0],[0,0],b1p1); },
	function() { return b1p1.X() }],		function() { return b1p1.X() }],
	{fixed: true, trace: true, ~~strokeColor~~: '#0000ff', name: 'C'});		{fixed: true, trace: true, color: '#0000ff', name: 'C'});
	// Dependencies (only necessary if b2p1 or b2p2 is deleted)		// Dependencies (only necessary if b2p1 or b2p2 is deleted)
	b1p1.addChild(b2p1);		b1p1.addChild(b2p1);

A WASSERMANN at 12:29, 6 February 2011

2011-02-06T12:29:14Z

← Older revision		Revision as of 12:29, 6 February 2011
Line 9:		Line 9:
	var b1c1 = board.create('circle', [[0,0], [1,0]]);		var b1c1 = board.create('circle', [[0,0], [1,0]]);
	var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});		var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
	var perp = board.create('perpendicular', [xax1,b1p1],{strokeColor:['#ff0000'~~,null]~~,visible:[true,false]});		var perp = board.create('perpendicular', [xax1,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
	var perp2 = board.create('perpendicular',[yax1,b1p1],{strokeColor:['#~~0000ff~~'~~,null]~~,visible:[true,false]});		var perp2 = board.create('perpendicular',[yax1,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);

	// Animation		// Animation

A WASSERMANN at 12:28, 6 February 2011

2011-02-06T12:28:30Z

@@ Line 1: / Line 1: @@
 Animation of the sine and cosine curve.
 <html>
 <a href="javascript:void(0);" onclick="animate(b1p1, -10, 41);">Click here to start and stop animation</a>.
-<table border="0">
+</html>
-<tr><td>
+<jsxgraph box="box" width="400" height="400">
   var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
   var xax1 = board.create('axis', [[0,0], [0,1]]);
   var yax1 = board.create('axis', [[0,0], [1,0]]);
   var b1c1 = board.create('circle', [[0,0], [1,0]]);
   var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
   var perp = board.create('perpendicular', [xax1,b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});
   var perp2 = board.create('perpendicular',[yax1,b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});
   // sine:
@@ Line 41: / Line 45: @@
   board.addChild(board2);
+</jsxgraph>
 ===The underlying JavaScript code===

A WASSERMANN at 07:58, 22 July 2010

2010-07-22T07:58:58Z

← Older revision		Revision as of 07:58, 22 July 2010
Line 12:		Line 12:
	</table>		</table>
	<script language="JavaScript">		<script language="JavaScript">
	board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});		var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
	board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});		var board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});
	var xax1 = board.~~createElement~~('axis', [[0,0], [0,1]]);		var xax1 = board.create('axis', [[0,0], [0,1]]);
	var yax1 = board.~~createElement~~('axis', [[0,0], [1,0]]);		var yax1 = board.create('axis', [[0,0], [1,0]]);
	var xax2 = board2.~~createElement~~('axis', [[0,0], [1,0]]);		var xax2 = board2.create('axis', [[0,0], [1,0]]);
	board2.~~createElement~~('axis', [[0,0], [0,1]]);		board2.create('axis', [[0,0], [0,1]]);

	board2.~~createElement~~('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});		board2.create('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});

	b1c1 = board.~~createElement~~('circle', [[0,0], [1,0]]);		var b1c1 = board.create('circle', [[0,0], [1,0]]);
	b1p1 = board.~~createElement~~('point', [2, 0], {slideObject: b1c1});		var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
	perp = board.~~createElement~~('perpendicular', [xax1,b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});		var perp = board.create('perpendicular', [xax1,b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});
	perp2 = board.~~createElement~~('perpendicular',[yax1,b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});		var perp2 = board.create('perpendicular',[yax1,b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});

	// sine:		// sine:
	b2p1 = board2.~~createElement~~('point', [		var b2p1 = board2.create('point', [
	function(){ return board.rad([1,0],[0,0],b1p1); },		function(){ return board.rad([1,0],[0,0],b1p1); },
	function() { return b1p1.Y() }],		function() { return b1p1.Y() }],
	{fixed: true, trace: true, strokeColor: '#ff0000', name: 'S'});		{fixed: true, trace: true, strokeColor: '#ff0000', name: 'S'});
	// cosine:		// cosine:
	b2p2 = board2.~~createElement~~('point', [		var b2p2 = board2.create('point', [
	function(){ return board.rad([1,0],[0,0],b1p1); },		function(){ return board.rad([1,0],[0,0],b1p1); },
	function() { return b1p1.X() }],		function() { return b1p1.X() }],
Line 58:		Line 58:
	===The underlying JavaScript code===		===The underlying JavaScript code===
	<source lang="javascript">		<source lang="javascript">
	board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});		var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
	board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});		var board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});
	var xax1 = board.~~createElement~~('axis', [[0,0], [0,1]]);		var xax1 = board.create('axis', [[0,0], [0,1]]);
	var yax1 = board.~~createElement~~('axis', [[0,0], [1,0]]);		var yax1 = board.create('axis', [[0,0], [1,0]]);
	var xax2 = board2.~~createElement~~('axis', [[0,0], [1,0]]);		var xax2 = board2.create('axis', [[0,0], [1,0]]);
	board2.~~createElement~~('axis', [[0,0], [0,1]]);		board2.create('axis', [[0,0], [0,1]]);

	board2.~~createElement~~('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});		board2.create('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});

	b1c1 = board.~~createElement~~('circle', [[0,0], [1,0]]);		var b1c1 = board.create('circle', [[0,0], [1,0]]);
	b1p1 = board.~~createElement~~('point', [2, 0], {slideObject: b1c1});		var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
	perp = board.~~createElement~~('perpendicular', [xax1,b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});		var perp = board.create('perpendicular', [xax1,b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});
	perp2 = board.~~createElement~~('perpendicular',[yax1,b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});		var perp2 = board.create('perpendicular',[yax1,b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});

	// sine:		// sine:
	b2p1 = board2.~~createElement~~('point', [		var b2p1 = board2.create('point', [
	function(){ return board.rad([1,0],[0,0],b1p1); },		function(){ return board.rad([1,0],[0,0],b1p1); },
	function() { return b1p1.Y() }],		function() { return b1p1.Y() }],
	{fixed: true, trace: true, strokeColor: '#ff0000', name: 'S'});		{fixed: true, trace: true, strokeColor: '#ff0000', name: 'S'});
	// cosine:		// cosine:
	b2p2 = board2.~~createElement~~('point', [		var b2p2 = board2.create('point', [
	function(){ return board.rad([1,0],[0,0],b1p1); },		function(){ return board.rad([1,0],[0,0],b1p1); },
	function() { return b1p1.X() }],		function() { return b1p1.X() }],