Transformations - Revision history

A WASSERMANN at 00:13, 15 February 2010

2010-02-15T00:13:54Z

← Older revision		Revision as of 00:13, 15 February 2010
Line 90:		Line 90:
	var p3 = brd1.create('point', [p2,t], {name:'B'});		var p3 = brd1.create('point', [p2,t], {name:'B'});
	brd1.create('circle',[p1,p2]);		brd1.create('circle',[p1,p2]);
			})();
	</jsxgraph>		</jsxgraph>

Line 99:		Line 100:
	var p3 = brd1.create('point', [p2,t], {name:'B'});		var p3 = brd1.create('point', [p2,t], {name:'B'});
	brd1.create('circle',[p1,p2]);		brd1.create('circle',[p1,p2]);
	~~})();~~
	</source>		</source>

Line 118:		Line 118:
	// Rotate the square around point sq[0]		// Rotate the square around point sq[0]
	var rot = brd2.create('transform', [function(){return s.Value();},sq[0]], {type:'rotate'});		var rot = brd2.create('transform', [function(){return s.Value();},sq[0]], {type:'rotate'});
	rot.bindTo(sq.slice(1));		rot.bindTo(sq.slice(1)); // Apply the rotation to all but the first point of the polygon

	brd2.update();		brd2.update();
Line 125:		Line 125:

	<source lang="javascript">		<source lang="javascript">
			var s = brd2.create('slider', [[-1,-1],[2,-1],[0,0,2*Math.PI]],{name:'angle'});
			// Construct a square with the help of transformations
			var sq = [];
			sq[0] = brd2.create('point', [0,0], {name:'Drag me', style:5});
			var right = brd2.create('transform', [2,0], {type:'translate'});
			var up = brd2.create('transform', [0,2], {type:'translate'});
			sq[1] = brd2.create('point', [sq[0],right], {style:7});
			sq[2] = brd2.create('point', [sq[0],[right,up]], {style:7});
			sq[3] = brd2.create('point', [sq[0],up], {style:7});
			var pol = brd2.create('polygon',sq);

			// Rotate the square around point sq[0]
			var rot = brd2.create('transform', [function(){return s.Value();},sq[0]], {type:'rotate'});
			rot.bindTo(sq.slice(1)); // Apply the rotation to all but the first point of the polygon

			brd2.update();
	</source>		</source>

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

A WASSERMANN at 00:12, 15 February 2010

2010-02-15T00:12:33Z

← Older revision		Revision as of 00:12, 15 February 2010
Line 83:		Line 83:
	===Examples===		===Examples===
	<jsxgraph width="500" height="500" box="box1">		<jsxgraph width="500" height="500" box="box1">
			(function(){
	var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[-2,4,4,-2],keepaspectratio:true});		var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[-2,4,4,-2],keepaspectratio:true});
	var p1 = brd1.create('point', [-1,0], {style:6, name:'C'});		var p1 = brd1.create('point', [-1,0], {style:6, name:'C'});
Line 98:		Line 99:
	var p3 = brd1.create('point', [p2,t], {name:'B'});		var p3 = brd1.create('point', [p2,t], {name:'B'});
	brd1.create('circle',[p1,p2]);		brd1.create('circle',[p1,p2]);
			})();
	</source>		</source>

	<jsxgraph width="500" height="500" box="box2">		<jsxgraph width="500" height="500" box="box2">
	var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[-2,4,4,-2],keepaspectratio:true});		var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[-2,4,4,-2],keepaspectratio:true});
	var s = brd2.create('slider', [[-1,-1],[2,-1],[0,0,2*Math.PI],{name:'angle'});		(function(){
			var s = brd2.create('slider', [[-1,-1],[2,-1],[0,0,2*Math.PI]],{name:'angle'});
	// Construct a square with the help of transformations		// Construct a square with the help of transformations
	var sq = [];		var sq = [];
Line 118:		Line 121:

	brd2.update();		brd2.update();
			})();
	</jsxgraph>		</jsxgraph>

A WASSERMANN at 00:11, 15 February 2010

2010-02-15T00:11:29Z

← Older revision		Revision as of 00:11, 15 February 2010
Line 102:		Line 102:
	<jsxgraph width="500" height="500" box="box2">		<jsxgraph width="500" height="500" box="box2">
	var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[-2,4,4,-2],keepaspectratio:true});		var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[-2,4,4,-2],keepaspectratio:true});
			var s = brd2.create('slider', [[-1,-1],[2,-1],[0,0,2*Math.PI],{name:'angle'});
	// Construct a square with the help of transformations		// Construct a square with the help of transformations
	var sq = [];		var sq = [];
Line 113:		Line 114:

	// Rotate the square around point sq[0]		// Rotate the square around point sq[0]
	var rot = brd2.create('transform', [~~Math~~.~~PI/3~~,sq[0]], {type:'rotate'});		var rot = brd2.create('transform', [function(){return s.Value();},sq[0]], {type:'rotate'});
	rot.bindTo(sq.slice(1));		rot.bindTo(sq.slice(1));

	~~board~~.update();		brd2.update();
	</jsxgraph>		</jsxgraph>

A WASSERMANN at 00:09, 15 February 2010

2010-02-15T00:09:25Z

← Older revision		Revision as of 00:09, 15 February 2010
Line 102:		Line 102:
	<jsxgraph width="500" height="500" box="box2">		<jsxgraph width="500" height="500" box="box2">
	var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[-2,4,4,-2],keepaspectratio:true});		var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[-2,4,4,-2],keepaspectratio:true});
	var p1 = brd2.create('point', [-1,0], {style:6, ~~name~~:'C'});		// Construct a square with the help of transformations
	var t = brd2.create('transform', [~~Math.PI/3~~, p1], {type:'~~rotate~~'}); ~~// angle, rotation center~~		var sq = [];
	~~var p2~~ = brd2.create('point', [~~function(~~)~~{return p1~~.X()+1;~~},function(){return p1~~.Y(~~);}~~], {~~name~~:'A'});		sq[0] = brd2.create('point', [0,0], {name:'Drag me', style:5});
	//var p3 = brd2.create('~~point~~', [3,0], {~~name~~:'B'});		var right = brd2.create('transform', [2,0], {type:'translate'});
	t.bindTo(p2);		var up = brd2.create('transform', [0,2], {type:'translate'});
	~~brd2~~.update();		sq[1] = brd2.create('point', [sq[0],right], {style:7});
			sq[2] = brd2.create('point', [sq[0],[right,up]], {style:7});
			sq[3] = brd2.create('point', [sq[0],up], {style:7});
			var pol = brd2.create('polygon',sq);

			// Rotate the square around point sq[0]
			var rot = brd2.create('transform', [Math.PI/3,sq[0]], {type:'rotate'});
			rot.bindTo(sq.slice(1));

			board.update();
	</jsxgraph>		</jsxgraph>

A WASSERMANN at 00:06, 15 February 2010

2010-02-15T00:06:27Z

← Older revision		Revision as of 00:06, 15 February 2010
Line 107:		Line 107:
	//var p3 = brd2.create('point', [3,0], {name:'B'});		//var p3 = brd2.create('point', [3,0], {name:'B'});
	t.bindTo(p2);		t.bindTo(p2);
			brd2.update();
	</jsxgraph>		</jsxgraph>

A WASSERMANN at 00:05, 15 February 2010

2010-02-15T00:05:14Z

← Older revision		Revision as of 00:05, 15 February 2010
Line 105:		Line 105:
	var t = brd2.create('transform', [Math.PI/3, p1], {type:'rotate'}); // angle, rotation center		var t = brd2.create('transform', [Math.PI/3, p1], {type:'rotate'}); // angle, rotation center
	var p2 = brd2.create('point', [function(){return p1.X()+1;},function(){return p1.Y();}], {name:'A'});		var p2 = brd2.create('point', [function(){return p1.X()+1;},function(){return p1.Y();}], {name:'A'});
	var p3 = brd2.create('point', [3,0], {name:'A'});		//var p3 = brd2.create('point', [3,0], {name:'B'});
	t.bindTo([p2~~,p3]~~);		t.bindTo(p2);
	</jsxgraph>		</jsxgraph>

A WASSERMANN at 00:04, 15 February 2010

2010-02-15T00:04:05Z

← Older revision		Revision as of 00:04, 15 February 2010
Line 100:		Line 100:
	</source>		</source>

	<jsxgraph width="500" height="500" box="~~box1~~">		<jsxgraph width="500" height="500" box="box2">
	var ~~brd1~~ = JXG.JSXGraph.initBoard('~~box1~~', {boundingbox:[-2,4,4,-2],keepaspectratio:true});		var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[-2,4,4,-2],keepaspectratio:true});
	var p1 = ~~brd1~~.create('point', [-1,0], {style:6, name:'C'});		var p1 = brd2.create('point', [-1,0], {style:6, name:'C'});
	var t = ~~brd1~~.create('transform', [Math.PI/3, p1], {type:'rotate'}); // angle, rotation center		var t = brd2.create('transform', [Math.PI/3, p1], {type:'rotate'}); // angle, rotation center
	var p2 = ~~brd1~~.create('point', [function(){return p1.X()+1;},function(){return p1.Y();}], {name:'A'});		var p2 = brd2.create('point', [function(){return p1.X()+1;},function(){return p1.Y();}], {name:'A'});
	t.bindTo(p2);		var p3 = brd2.create('point', [3,0], {name:'A'});
			t.bindTo([p2,p3]);
	</jsxgraph>		</jsxgraph>

A WASSERMANN at 00:02, 15 February 2010

2010-02-15T00:02:57Z

← Older revision		Revision as of 00:02, 15 February 2010
Line 98:		Line 98:
	var p3 = brd1.create('point', [p2,t], {name:'B'});		var p3 = brd1.create('point', [p2,t], {name:'B'});
	brd1.create('circle',[p1,p2]);		brd1.create('circle',[p1,p2]);
			</source>

			<jsxgraph width="500" height="500" box="box1">
			var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[-2,4,4,-2],keepaspectratio:true});
			var p1 = brd1.create('point', [-1,0], {style:6, name:'C'});
			var t = brd1.create('transform', [Math.PI/3, p1], {type:'rotate'}); // angle, rotation center
			var p2 = brd1.create('point', [function(){return p1.X()+1;},function(){return p1.Y();}], {name:'A'});
			t.bindTo(p2);
			</jsxgraph>

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

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

A WASSERMANN at 00:00, 15 February 2010

2010-02-15T00:00:11Z

← Older revision		Revision as of 00:00, 15 February 2010
Line 85:		Line 85:
	var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[-2,4,4,-2],keepaspectratio:true});		var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[-2,4,4,-2],keepaspectratio:true});
	var p1 = brd1.create('point', [-1,0], {style:6, name:'C'});		var p1 = brd1.create('point', [-1,0], {style:6, name:'C'});
	var t = brd1.create('transform', [Math.PI/2, p1], {type:'rotate'}); // angle, rotation center		var t = brd1.create('transform', [Math.PI/3, p1], {type:'rotate'}); // angle, rotation center
	var p2 = brd1.create('point', [2,0], {name:'A'});		var p2 = brd1.create('point', [1,0], {name:'A'});
	var p3 = brd1.create('point', [p2,t], {name:'B'});		var p3 = brd1.create('point', [p2,t], {name:'B'});
	brd1.create('circle',[p1,p2]);		brd1.create('circle',[p1,p2]);
	</jsxgraph>		</jsxgraph>

			<source lang="javascript">
			var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[-2,4,4,-2],keepaspectratio:true});
			var p1 = brd1.create('point', [-1,0], {style:6, name:'C'});
			var t = brd1.create('transform', [Math.PI/3, p1], {type:'rotate'}); // angle, rotation center
			var p2 = brd1.create('point', [1,0], {name:'A'});
			var p3 = brd1.create('point', [p2,t], {name:'B'});
			brd1.create('circle',[p1,p2]);
			</source>

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

A WASSERMANN: /* Examples */

2010-02-14T23:59:16Z

Examples

← Older revision		Revision as of 23:59, 14 February 2010
Line 86:		Line 86:
	var p1 = brd1.create('point', [-1,0], {style:6, name:'C'});		var p1 = brd1.create('point', [-1,0], {style:6, name:'C'});
	var t = brd1.create('transform', [Math.PI/2, p1], {type:'rotate'}); // angle, rotation center		var t = brd1.create('transform', [Math.PI/2, p1], {type:'rotate'}); // angle, rotation center
	var p2 = brd1.create('point', [3,0], {name:'A'});		var p2 = brd1.create('point', [2,0], {name:'A'});
	var p3 = brd1.create('point', [p2,t], {name:'B'});		var p3 = brd1.create('point', [p2,t], {name:'B'});
	brd1.create('circle',[p1,p2]);		brd1.create('circle',[p1,p2]);