Images and Transformations - Revision history

A WASSERMANN at 16:55, 3 July 2012

2012-07-03T16:55:33Z

← Older revision		Revision as of 16:55, 3 July 2012
Line 21:		Line 21:
	// After applying the transformation tOff to the image and the point p1, they are moved to		// After applying the transformation tOff to the image and the point p1, they are moved to
	// (-2,-1) and (1,-1), respectively.		// (-2,-1) and (1,-1), respectively.
			var p1 = brd.create('point', [3,-1], {size:8, name:'rotate+scale', opacity:0.3});
	var im = brd.create('image',[urlImg, [0,0], [3,3]]);		var im = brd.create('image',[urlImg, [0,0], [3,3]]);
	~~var p1 = brd.create('point', [3,0], {size:8, name:'rotate+scale', opacity:0.3});~~
	var li = brd.create('segment', [p0,p1], {dash:2}); // Just for illustration		var li = brd.create('segment', [p0,p1], {dash:2}); // Just for illustration
	//		//
Line 43:		Line 43:
	function(){return p1.Dist(p0)/3;}], {type:'scale'});		function(){return p1.Dist(p0)/3;}], {type:'scale'});
	tOffInv.bindTo(im); tScale.bindTo(im); tOff.bindTo(im);		tOffInv.bindTo(im); tScale.bindTo(im); tOff.bindTo(im);
	~~brd.update();~~		brd.update();
	brd.update();
	})();		})();
	</jsxgraph>		</jsxgraph>
Line 60:		Line 59:
	// After applying the transformation tOff to the image and the point p1, they are moved to		// After applying the transformation tOff to the image and the point p1, they are moved to
	// (-2,-1) and (1,-1), respectively.		// (-2,-1) and (1,-1), respectively.
			var p1 = brd.create('point', [3,-1], {size:8, name:'rotate+scale', opacity:0.3});
	var im = brd.create('image',[urlImg, [0,0], [3,3]]);		var im = brd.create('image',[urlImg, [0,0], [3,3]]);
	~~var p1 = brd.create('point', [3,0], {size:8, name:'rotate+scale', opacity:0.3});~~
	var li = brd.create('segment', [p0,p1], {dash:2}); // Just for illustration		var li = brd.create('segment', [p0,p1], {dash:2}); // Just for illustration
	//		//
Line 82:		Line 81:
	function(){return p1.Dist(p0)/3;}], {type:'scale'});		function(){return p1.Dist(p0)/3;}], {type:'scale'});
	tOffInv.bindTo(im); tScale.bindTo(im); tOff.bindTo(im);		tOffInv.bindTo(im); tScale.bindTo(im); tOff.bindTo(im);
			brd.update();

	</source>		</source>

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

A WASSERMANN at 16:45, 3 July 2012

2012-07-03T16:45:55Z

← Older revision		Revision as of 16:45, 3 July 2012
Line 43:		Line 43:
	function(){return p1.Dist(p0)/3;}], {type:'scale'});		function(){return p1.Dist(p0)/3;}], {type:'scale'});
	tOffInv.bindTo(im); tScale.bindTo(im); tOff.bindTo(im);		tOffInv.bindTo(im); tScale.bindTo(im); tOff.bindTo(im);
			brd.update();
	brd.update();		brd.update();
	})();		})();

A WASSERMANN at 16:45, 3 July 2012

2012-07-03T16:45:38Z

← Older revision		Revision as of 16:45, 3 July 2012
Line 43:		Line 43:
	function(){return p1.Dist(p0)/3;}], {type:'scale'});		function(){return p1.Dist(p0)/3;}], {type:'scale'});
	tOffInv.bindTo(im); tScale.bindTo(im); tOff.bindTo(im);		tOffInv.bindTo(im); tScale.bindTo(im); tOff.bindTo(im);
			brd.update();
	})();		})();
	</jsxgraph>		</jsxgraph>

A WASSERMANN at 15:58, 29 July 2011

2011-07-29T15:58:28Z

← Older revision		Revision as of 15:58, 29 July 2011
Line 12:		Line 12:
	<jsxgraph with="500" height="500" box="box1">		<jsxgraph with="500" height="500" box="box1">
	(function(){		(function(){
	var brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,25,5,-25], axis:true});		var brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true});
	var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";		var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";

A WASSERMANN at 15:57, 29 July 2011

2011-07-29T15:57:43Z

← Older revision		Revision as of 15:57, 29 July 2011
Line 12:		Line 12:
	<jsxgraph with="500" height="500" box="box1">		<jsxgraph with="500" height="500" box="box1">
	(function(){		(function(){
	var brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true});		var brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,25,5,-25], axis:true});
	var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";		var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";

A WASSERMANN at 21:35, 1 January 2011

2011-01-01T21:35:06Z

← Older revision		Revision as of 21:35, 1 January 2011
Line 9:		Line 9:
	Finally, we scale the image with the help of the point ''rotate+scale''.		Finally, we scale the image with the help of the point ''rotate+scale''.
	This is done by moving the lower left corner of the image back to the origin. This is necessary, because		This is done by moving the lower left corner of the image back to the origin. This is necessary, because
	all transformatiuon start from the origin. Then, the scaling is done, and the image is moved back to its position.		all transformatiuon start from the origin. Then, the scaling is done and the image is moved back to its original position.
	<jsxgraph with="500" height="500" box="box1">		<jsxgraph with="500" height="500" box="box1">
	(function(){		(function(){

A WASSERMANN at 21:33, 1 January 2011

2011-01-01T21:33:34Z

← Older revision		Revision as of 21:33, 1 January 2011
Line 38:		Line 38:
	// then scale the image (because scaling "starts from (0,0))		// then scale the image (because scaling "starts from (0,0))
	// Finally, we move the image back to point "Offset"		// Finally, we move the image back to point "Offset"
			// The scaling factor is divided by three, because the original image size is (3,3).
	var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'});		var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'});
	var tScale = brd.create('transform', [function(){return p1.Dist(p0)/3;},		var tScale = brd.create('transform', [function(){return p1.Dist(p0)/3;},
Line 74:		Line 75:
	// then scale the image (because scaling "starts from (0,0))		// then scale the image (because scaling "starts from (0,0))
	// Finally, we move the image back to point "Offset"		// Finally, we move the image back to point "Offset"
			// The scaling factor is divided by three, because the original image size is (3,3).
	var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'});		var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'});
	var tScale = brd.create('transform', [function(){return p1.Dist(p0)/3;},		var tScale = brd.create('transform', [function(){return p1.Dist(p0)/3;},

A WASSERMANN at 21:31, 1 January 2011

2011-01-01T21:31:15Z

@@ Line 1: / Line 1: @@
 Here is an example where images are combined with transformations.
-The point "offset" determines the lower left corner of the image.
+The point ''offset'' determines the lower left corner of the image.
-Additionally the point "offset" determines the position of the point "rot+scale".
+Additionally the point ''offset'' (p0) determines the position of the point ''rotate+scale'' (p1).
 <jsxgraph with="500" height="500" box="box1">
 (function(){
@@ Line 17: / Line 25: @@
    var li = brd.create('segment', [p0,p1], {dash:2});           // Just for illustration
    //
-   // Translate image and point "rot+scale" by dragging point "offset"
+   // Translate image and point "rotate+scale" by dragging point "offset"
    var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'});
    tOff.bindTo(im);
@@ Line 38: / Line 46: @@
 ===The JavaScript code===
 <source lang="javascript">
 </source>
 [[Category:Examples]]

A WASSERMANN at 21:24, 1 January 2011

2011-01-01T21:24:24Z

← Older revision		Revision as of 21:24, 1 January 2011
Line 1:		Line 1:
	Here is an example where images are combined with transformations.		Here is an example where images are combined with transformations.
			The point "offset" determines the lower left corner of the image.
			Additionally the point "offset" determines the position of the point "rot+scale".
	<jsxgraph with="500" height="500" box="box1">		<jsxgraph with="500" height="500" box="box1">
	(function(){		(function(){
Line 6:		Line 8:

	var p0 = brd.create('point', [-2,-1], {size:8, name:'offset', opacity:0.3});		var p0 = brd.create('point', [-2,-1], {size:8, name:'offset', opacity:0.3});

			// Initially we put the lower left corner of the image to (0,0) and
			// p1 to (3,0)
			// After applying the transformation tOff to the image and the point p1, they are moved to
			// (-2,-1) and (1,-1), respectively.
			var im = brd.create('image',[urlImg, [0,0], [3,3]]);
	var p1 = brd.create('point', [3,0], {size:8, name:'rotate+scale', opacity:0.3});		var p1 = brd.create('point', [3,0], {size:8, name:'rotate+scale', opacity:0.3});
	var li = brd.create('segment', [p0,p1], {dash:2}); // Just for illustration		var li = brd.create('segment', [p0,p1], {dash:2}); // Just for illustration
	~~var im = brd.create('image',[urlImg, [0,0], [3,3]]);~~
	//		//
	// Translate image and point "rot+scale" by ~~freagging~~ point "offset"		// Translate image and point "rot+scale" by dragging point "offset"
	var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'});		var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'});
	tOff.bindTo(im);		tOff.bindTo(im);

A WASSERMANN at 21:19, 1 January 2011

2011-01-01T21:19:40Z

← Older revision		Revision as of 21:19, 1 January 2011
Line 6:		Line 6:

	var p0 = brd.create('point', [-2,-1], {size:8, name:'offset', opacity:0.3});		var p0 = brd.create('point', [-2,-1], {size:8, name:'offset', opacity:0.3});
	var p1 = brd.create('point', [1,-1], {size:8, name:'rotate+scale', opacity:0.3});		var p1 = brd.create('point', [3,0], {size:8, name:'rotate+scale', opacity:0.3});
	var li = brd.create('segment', [p0,p1], {dash:2}); // Just for illustration		var li = brd.create('segment', [p0,p1], {dash:2}); // Just for illustration
	var im = brd.create('image',[urlImg, [0,0], [3,3]]);		var im = brd.create('image',[urlImg, [0,0], [3,3]]);