Reflect images

From JSXGraph Wiki
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

The JavaScript code

Here is the complete code to accomplish this behaviour.

(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();

})();