Difference between revisions of "Reflect images"

From JSXGraph Wiki
Jump to navigationJump to search
(Created page with "<jsxgraph width="500" height="600"> (function(){ var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-6,6,12,-6], axis:true}); })(); </jsxgraph> ===The JavaScript code==...")
 
Line 1: Line 1:
<jsxgraph width="500" height="600">
+
<jsxgraph width="600" height="500">
 
(function(){
 
(function(){
 
   var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-6,6,12,-6], axis:true});
 
   var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-6,6,12,-6], axis:true});
 +
  var p0, p1, p2, p3, p4, 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 = board.createElement('point', [0,3]);
 +
  p1 = board.createElement('point', [1,1]);
 +
  p2 = board.createElement('point', [-3,4]);
 +
  p3 = board.createElement('point', [10,4]);
 +
 +
  l1 = board.createElement('line', [p0, p1]);
 +
  l2 = board.createElement('line', [p2, p3]);
 +
 +
  p4 = board.createElement('point', [-2,-2]);
 +
  p5 = board.createElement('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 = board.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});
 +
  im2 = board.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});
 +
  im3 = board.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});
 +
 +
  t1 = board.createElement('transform', [l1], {type:'reflect'});
 +
  t2 = board.createElement('transform', [l2], {type:'reflect'});
 +
 +
  // Reflect im2 on l1
 +
  t1.bindTo(im2);
 +
 +
  // Reflect im2 on l1 and on l2
 +
  t1.bindTo(im3);
 +
  t2.bindTo(im3);
 +
 +
  board.update();
  
 
})();
 
})();

Revision as of 13:50, 29 July 2011

The JavaScript code

Here is the complete code to accomplish this behaviour.