Difference between revisions of "Images and Transformations"

From JSXGraph Wiki
Jump to navigationJump to search
 
(12 intermediate revisions by the same user not shown)
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'' (p0) determines the position of the point ''rotate+scale'' (p1).
 +
This is realized by defining the transformation ''tOff''. It is a translation by the vector ''offset''.
 +
 +
The transformation ''tRot'' rotates the images around the point ''offset''. For this, the angle (slope) of the line
 +
[p0,p1] is determined.
 +
 +
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
 +
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(){
Line 5: Line 15:
 
   var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
 
   var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
  
   var p0 = brd.create('point', [0,0], {style:5, name:'offset'});  
+
   var p0 = brd.create('point', [-2,-1], {size:8, name:'offset', opacity:0.3});  
   var p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'});
+
 
  var li = brd.create('segment', [p0,p1] {dash:2});           // Just for illustration
+
  // 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 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 li = brd.create('segment', [p0,p1], {dash:2});          // Just for illustration
 
   //  
 
   //  
   // Translate image and point "rot+scale" by freagging 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'});  
 
   var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'});  
 
   tOff.bindTo(im);
 
   tOff.bindTo(im);
Line 23: 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;},
 
                                         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>
  
 
===The JavaScript code===
 
===The JavaScript code===
 +
Here is the complete code to accomplish this behaviour.
 
<source lang="javascript">
 
<source lang="javascript">
 +
  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 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 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 li = brd.create('segment', [p0,p1], {dash:2});          // Just for illustration
 +
  //
 +
  // 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);
 +
  tOff.bindTo(p1);
 +
       
 +
  // Rotate image around point "offset" by dragging point "rot+scale"
 +
  var tRot = brd.create('transform', [function(){return Math.atan2(p1.Y()-p0.Y(),p1.X()-p0.X())}, p0], {type:'rotate'});
 +
  tRot.bindTo(im);
 +
       
 +
  // Scale image by dragging point "rot+scale"
 +
  // We do this by moving the image back to the origin (inverse of transformation tOff),
 +
  // then scale the image (because scaling "starts from (0,0))
 +
  // 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 tScale = brd.create('transform', [function(){return p1.Dist(p0)/3;},
 +
                                        function(){return p1.Dist(p0)/3;}], {type:'scale'});
 +
  tOffInv.bindTo(im); tScale.bindTo(im); tOff.bindTo(im);
 +
  brd.update();
 +
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Latest revision as of 18:55, 3 July 2012

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 (p0) determines the position of the point rotate+scale (p1). This is realized by defining the transformation tOff. It is a translation by the vector offset.

The transformation tRot rotates the images around the point offset. For this, the angle (slope) of the line [p0,p1] is determined.

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 all transformatiuon start from the origin. Then, the scaling is done and the image is moved back to its original position.

The JavaScript code

Here is the complete code to accomplish this behaviour.

  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 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 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 li = brd.create('segment', [p0,p1], {dash:2});           // Just for illustration
  // 
  // 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);
  tOff.bindTo(p1);
        
  // Rotate image around point "offset" by dragging point "rot+scale"
  var tRot = brd.create('transform', [function(){return Math.atan2(p1.Y()-p0.Y(),p1.X()-p0.X())}, p0], {type:'rotate'}); 
  tRot.bindTo(im);
        
  // Scale image by dragging point "rot+scale"
  // We do this by moving the image back to the origin (inverse of transformation tOff),
  // then scale the image (because scaling "starts from (0,0))
  // 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 tScale = brd.create('transform', [function(){return p1.Dist(p0)/3;},
                                        function(){return p1.Dist(p0)/3;}], {type:'scale'}); 
  tOffInv.bindTo(im); tScale.bindTo(im); tOff.bindTo(im);
  brd.update();