Reflect images - Revision history

A WASSERMANN at 06:04, 16 September 2024

2024-09-16T06:04:10Z

← Older revision		Revision as of 06:04, 16 September 2024
Line 57:		Line 57:
	im1, im2, im3,		im1, im2, im3,
	t1, t2,		t1, t2,
	imurl = "./uccellino.jpg",		imurl = "/distrib/images/uccellino.jpg",
	X, Y, W, H; // Functions defining the position, width and height of the original image.		X, Y, W, H; // Functions defining the position, width and height of the original image.

A WASSERMANN at 06:03, 16 September 2024

2024-09-16T06:03:53Z

← Older revision		Revision as of 06:03, 16 September 2024
Line 9:		Line 9:
	im1, im2, im3,		im1, im2, im3,
	t1, t2,		t1, t2,
	imurl = "/distrib/uccellino.jpg",		imurl = "/distrib/images/uccellino.jpg",
	X, Y, W, H; // Functions defining the position, width and height of the original image.		X, Y, W, H; // Functions defining the position, width and height of the original image.

A WASSERMANN at 06:03, 16 September 2024

2024-09-16T06:03:31Z

← Older revision		Revision as of 06:03, 16 September 2024
Line 9:		Line 9:
	im1, im2, im3,		im1, im2, im3,
	t1, t2,		t1, t2,
	imurl = "./uccellino.jpg",		imurl = "/distrib/uccellino.jpg",
	X, Y, W, H; // Functions defining the position, width and height of the original image.		X, Y, W, H; // Functions defining the position, width and height of the original image.

A WASSERMANN at 06:02, 16 September 2024

2024-09-16T06:02:36Z

Show changes

A WASSERMANN: Undo revision 7671 by A WASSERMANN (talk)

2024-09-16T06:02:02Z

Undo revision 7671 by A WASSERMANN (talk)

← Older revision		Revision as of 06:02, 16 September 2024
Line 1:		Line 1:
	<jsxgraph width="600" height="500">		<jsxgraph width="600" height="500">
	(function(){		(function(){
	var ~~board~~ = JXG.JSXGraph.initBoard('jxgbox', {		var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,13,-2.5], grid:true});
	boundingbox: [-5, 5, 13, -2.5],		var p0, p1, p2, p3, p5,
	grid: true		l1, l2,
	});		im1, im2, im3,
	var p0, p1, p2, p3~~, p4~~, p5,		t1, t2,
	l1, l2,		imurl = "/distrib/images/uccellino.jpg",
	im1, im2, im3,		X, Y, W, H; // Functions defining the position, width and height of the original image.
	t1, t2,
	imurl = "./uccellino.jpg",
	X, Y, W, H; // Functions defining the position, width and height of the original image.

	// Define two line through four points		// Define two line through four points
	p0 = ~~board~~.create('point', [2, -2]);		p0 = brd.create('point', [2,-2]);
	p1 = ~~board~~.create('point', [2, 1]);		p1 = brd.create('point', [2,1]);
	p2 = ~~board~~.create('point', [10, -1]);		p2 = brd.create('point', [10,-1]);

	l1 = ~~board~~.create('line', [p0, p1]);		l1 = brd.create('line', [p0, p1]);
	l2 = ~~board~~.create('line', [p1, p2]);		l2 = brd.create('line', [p1, p2]);

	p4 = ~~board~~.create('point', [-2, -2]);		p4 = brd.create('point', [-2,-2]);
	p5 = ~~board~~.create('point', [1, 0]);		p5 = brd.create('point', [1,0]);

	X = function () { return Math.min(p4.X(), p5.X()); };		X = function(){ return Math.min(p4.X(), p5.X()); };
	Y = function () { return Math.min(p4.Y(), p5.Y()); };		Y = function(){ return Math.min(p4.Y(), p5.Y()); };
	W = function () { return Math.abs(p5.X() - p4.X()); };		W = function(){ return Math.abs(p5.X() -p4.X()); };
	H = function () { return Math.abs(p5.Y() - p4.Y()); };		H = function(){ return Math.abs(p5.Y() -p4.Y()); };

	im1 = ~~board~~.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });		im1 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});
	im2 = ~~board~~.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });		im2 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});
	im3 = ~~board~~.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });		im3 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});

	t1 = ~~board~~.create('transform', [l1], { type: 'reflect' });		t1 = brd.create('transform', [l1], {type:'reflect'});
	t2 = ~~board~~.create('transform', [l2], { type: 'reflect' });		t2 = brd.create('transform', [l2], {type:'reflect'});

	// Reflect im2 on l1		// Reflect im2 on l1
	t1.bindTo(im2);		t1.bindTo(im2);

	// Reflect im3 on l1 and on l2		// Reflect im3 on l1 and on l2
	t1.bindTo(im3);		t1.bindTo(im3);
	t2.bindTo(im3);		t2.bindTo(im3);

	~~board~~.update();		brd.update();

			})();
			</jsxgraph>

			===The JavaScript code===
			Here is the complete code to accomplish this behaviour.
			<source lang="javascript">
			(function(){
			var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,13,-2.5], grid:true});
			var p0, p1, p2, p3, p5,
			l1, l2,
			im1, im2, im3,
			t1, t2,
			imurl = "/distrib/images/uccellino.jpg",
			X, Y, W, H; // Functions defining the position, width and height of the original image.

			// Define two line through four points
			p0 = brd.create('point', [2,-2]);
			p1 = brd.create('point', [2,1]);
			p2 = brd.create('point', [10,-1]);

			l1 = brd.create('line', [p0, p1]);
			l2 = brd.create('line', [p1, p2]);

			p4 = brd.create('point', [-2,-2]);
			p5 = brd.create('point', [1,0]);

			X = function(){ return Math.min(p4.X(), p5.X()); };
			Y = function(){ return Math.min(p4.Y(), p5.Y()); };
			W = function(){ return Math.abs(p5.X() -p4.X()); };
			H = function(){ return Math.abs(p5.Y() -p4.Y()); };

			im1 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});
			im2 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});
			im3 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});

			t1 = brd.create('transform', [l1], {type:'reflect'});
			t2 = brd.create('transform', [l2], {type:'reflect'});

			// Reflect im2 on l1
			t1.bindTo(im2);

			// Reflect im3 on l1 and on l2
			t1.bindTo(im3);
			t2.bindTo(im3);

			brd.update();

	})();		})();

A WASSERMANN at 06:01, 16 September 2024

2024-09-16T06:01:01Z

← Older revision		Revision as of 06:01, 16 September 2024
Line 1:		Line 1:
	<jsxgraph width="600" height="500">		<jsxgraph width="600" height="500">
	(function(){		(function(){
	var ~~brd~~ = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,13,-2.5], grid:true});		var board = JXG.JSXGraph.initBoard('jxgbox', {
	var p0, p1, p2, p3, p5,		boundingbox: [-5, 5, 13, -2.5],
	l1, l2,		grid: true
	im1, im2, im3,		});
	t1, t2,		var p0, p1, p2, p3, p4, p5,
	imurl = "~~/distrib/images~~/uccellino.jpg",		l1, l2,
	X, Y, W, H; // Functions defining the position, width and height of the original image.		im1, im2, im3,
			t1, t2,
			imurl = "./uccellino.jpg",
			X, Y, W, H; // Functions defining the position, width and height of the original image.

	// Define two line through four points		// Define two line through four points
	p0 = ~~brd~~.create('point', [2,-2]);		p0 = board.create('point', [2, -2]);
	p1 = ~~brd~~.create('point', [2,1]);		p1 = board.create('point', [2, 1]);
	p2 = ~~brd~~.create('point', [10,-1]);		p2 = board.create('point', [10, -1]);

	l1 = ~~brd~~.create('line', [p0, p1]);		l1 = board.create('line', [p0, p1]);
	l2 = ~~brd~~.create('line', [p1, p2]);		l2 = board.create('line', [p1, p2]);

	p4 = ~~brd~~.create('point', [-2,-2]);		p4 = board.create('point', [-2, -2]);
	p5 = ~~brd~~.create('point', [1,0]);		p5 = board.create('point', [1, 0]);

	X = function(){ return Math.min(p4.X(), p5.X()); };		X = function () { return Math.min(p4.X(), p5.X()); };
	Y = function(){ return Math.min(p4.Y(), p5.Y()); };		Y = function () { return Math.min(p4.Y(), p5.Y()); };
	W = function(){ return Math.abs(p5.X() -p4.X()); };		W = function () { return Math.abs(p5.X() - p4.X()); };
	H = function(){ return Math.abs(p5.Y() -p4.Y()); };		H = function () { return Math.abs(p5.Y() - p4.Y()); };

	im1 = ~~brd~~.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});		im1 = board.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });
	im2 = ~~brd~~.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});		im2 = board.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });
	im3 = ~~brd~~.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});		im3 = board.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });

	t1 = ~~brd~~.create('transform', [l1], {type:'reflect'});		t1 = board.create('transform', [l1], { type: 'reflect' });
	t2 = ~~brd~~.create('transform', [l2], {type:'reflect'});		t2 = board.create('transform', [l2], { type: 'reflect' });

	// Reflect im2 on l1		// Reflect im2 on l1
	t1.bindTo(im2);		t1.bindTo(im2);

	// Reflect im3 on l1 and on l2		// Reflect im3 on l1 and on l2
	t1.bindTo(im3);		t1.bindTo(im3);
	t2.bindTo(im3);		t2.bindTo(im3);

	~~brd.update();~~		board.update();

	~~})();~~
	~~</jsxgraph>~~

	~~===The JavaScript code===~~
	~~Here is the complete code to accomplish this behaviour.~~
	~~<source lang="javascript">~~
	~~(function(){~~
	~~var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,13,-2.5], grid:true});~~
	~~var p0, p1, p2, p3, p5,~~
	~~l1, l2,~~
	~~im1, im2, im3,~~
	~~t1, t2,~~
	~~imurl = "/distrib/images/uccellino.jpg",~~
	~~X, Y, W, H; // Functions defining the position, width and height of the original image.~~

	~~// Define two line through four points~~
	~~p0 = brd.create('point', [2,-2]);~~
	~~p1 = brd.create('point', [2,1]);~~
	~~p2 = brd.create('point', [10,-1]);~~

	~~l1 = brd.create('line', [p0, p1]);~~
	~~l2 = brd.create('line', [p1, p2]);~~

	~~p4 = brd.create('point', [-2,-2]);~~
	~~p5 = brd.create('point', [1,0]);~~

	~~X = function(){ return Math.min(p4.X(), p5.X()); };~~
	~~Y = function(){ return Math.min(p4.Y(), p5.Y()); };~~
	~~W = function(){ return Math.abs(p5.X() -p4.X()); };~~
	~~H = function(){ return Math.abs(p5.Y() -p4.Y()); };~~

	~~im1 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});~~
	~~im2 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});~~
	~~im3 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});~~

	~~t1 = brd.create('transform', [l1], {type:'reflect'});~~
	~~t2 = brd.create('transform', [l2], {type:'reflect'});~~

	~~// Reflect im2 on l1~~
	~~t1.bindTo(im2);~~

	~~// Reflect im3 on l1 and on l2~~
	~~t1.bindTo(im3);~~
	~~t2.bindTo(im3);~~

	~~brd~~.update();

	})();		})();

A WASSERMANN at 13:00, 3 March 2021

2021-03-03T13:00:25Z

← Older revision		Revision as of 13:00, 3 March 2021
Line 10:		Line 10:

	// Define two line through four points		// Define two line through four points
	p0 = brd.~~createElement~~('point', [2,-2]);		p0 = brd.create('point', [2,-2]);
	p1 = brd.~~createElement~~('point', [2,1]);		p1 = brd.create('point', [2,1]);
	p2 = brd.~~createElement~~('point', [10,-1]);		p2 = brd.create('point', [10,-1]);

	l1 = brd.~~createElement~~('line', [p0, p1]);		l1 = brd.create('line', [p0, p1]);
	l2 = brd.~~createElement~~('line', [p1, p2]);		l2 = brd.create('line', [p1, p2]);

	p4 = brd.~~createElement~~('point', [-2,-2]);		p4 = brd.create('point', [-2,-2]);
	p5 = brd.~~createElement~~('point', [1,0]);		p5 = brd.create('point', [1,0]);

	X = function(){ return Math.min(p4.X(), p5.X()); };		X = function(){ return Math.min(p4.X(), p5.X()); };
Line 29:		Line 29:
	im3 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});		im3 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});

	t1 = brd.~~createElement~~('transform', [l1], {type:'reflect'});		t1 = brd.create('transform', [l1], {type:'reflect'});
	t2 = brd.~~createElement~~('transform', [l2], {type:'reflect'});		t2 = brd.create('transform', [l2], {type:'reflect'});

	// Reflect im2 on l1		// Reflect im2 on l1
Line 57:		Line 57:

	// Define two line through four points		// Define two line through four points
	p0 = brd.~~createElement~~('point', [2,-2]);		p0 = brd.create('point', [2,-2]);
	p1 = brd.~~createElement~~('point', [2,1]);		p1 = brd.create('point', [2,1]);
	p2 = brd.~~createElement~~('point', [10,-1]);		p2 = brd.create('point', [10,-1]);

	l1 = brd.~~createElement~~('line', [p0, p1]);		l1 = brd.create('line', [p0, p1]);
	l2 = brd.~~createElement~~('line', [p1, p2]);		l2 = brd.create('line', [p1, p2]);

	p4 = brd.~~createElement~~('point', [-2,-2]);		p4 = brd.create('point', [-2,-2]);
	p5 = brd.~~createElement~~('point', [1,0]);		p5 = brd.create('point', [1,0]);

	X = function(){ return Math.min(p4.X(), p5.X()); };		X = function(){ return Math.min(p4.X(), p5.X()); };
Line 76:		Line 76:
	im3 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});		im3 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});

	t1 = brd.~~createElement~~('transform', [l1], {type:'reflect'});		t1 = brd.create('transform', [l1], {type:'reflect'});
	t2 = brd.~~createElement~~('transform', [l2], {type:'reflect'});		t2 = brd.create('transform', [l2], {type:'reflect'});

	// Reflect im2 on l1		// Reflect im2 on l1

A WASSERMANN at 12:00, 29 July 2011

2011-07-29T12:00:59Z

← Older revision		Revision as of 12:00, 29 July 2011
Line 35:		Line 35:
	t1.bindTo(im2);		t1.bindTo(im2);

	// Reflect ~~im2~~ on l1 and on l2		// Reflect im3 on l1 and on l2
	t1.bindTo(im3);		t1.bindTo(im3);
	t2.bindTo(im3);		t2.bindTo(im3);
Line 82:		Line 82:
	t1.bindTo(im2);		t1.bindTo(im2);

	// Reflect ~~im2~~ on l1 and on l2		// Reflect im3 on l1 and on l2
	t1.bindTo(im3);		t1.bindTo(im3);
	t2.bindTo(im3);		t2.bindTo(im3);

A WASSERMANN at 12:00, 29 July 2011

2011-07-29T12:00:11Z

@@ Line 47: / Line 47: @@
 Here is the complete code to accomplish this behaviour.
 <source lang="javascript">
 </source>
 [[Category:Examples]]
 [[Category:Geometry]]

A WASSERMANN at 11:59, 29 July 2011

2011-07-29T11:59:26Z

← Older revision		Revision as of 11:59, 29 July 2011
Line 1:		Line 1:
	<jsxgraph width="600" height="500">		<jsxgraph width="600" height="500">
	(function(){		(function(){
	var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,13,-2.5], ~~keepaspectratio:false, axis~~:true});		var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,13,-2.5], grid:true});
	var p0, p1, p2, p3, p5,		var p0, p1, p2, p3, p5,
	l1, l2,		l1, l2,