Difference between revisions of "Shear transformation"

From JSXGraph Wiki
Jump to navigationJump to search
Line 12: Line 12:
 
JXG.Options.label.autoPosition = true;
 
JXG.Options.label.autoPosition = true;
 
JXG.Options.text.fontSize = 20;
 
JXG.Options.text.fontSize = 20;
var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-8, 8, 8, -8], axis: true});
+
var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-10, 10, 10, -10], axis: true});
  
 
var x = board.defaultAxes.x;
 
var x = board.defaultAxes.x;
Line 28: Line 28:
 
     ], {visible: false});
 
     ], {visible: false});
  
var l1 = board.create('line', [q, q1], {strokeWidth: 1});
 
 
var s1 = board.create('segment', [q, q1], {dash:2});
 
var s1 = board.create('segment', [q, q1], {dash:2});
 
var s2 = board.create('segment', [qx, q], {dash:2});
 
var s2 = board.create('segment', [qx, q], {dash:2});
 
 
 
 
</jsxgraph>
 
</jsxgraph>
 
  
 
=== The underlying JavaScript code ===
 
=== The underlying JavaScript code ===
  
 
<source lang="javascript">
 
<source lang="javascript">
 +
JXG.Options.label.autoPosition = true;
 +
JXG.Options.text.fontSize = 20;
 +
var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-10, 10, 10, -10], axis: true});
  
 +
var x = board.defaultAxes.x;
 +
var y = board.defaultAxes.y;
  
 +
var q = board.create('point', [1, 2], {name: 'q', snapToGrid: true});
 +
var q1 = board.create('point', [
 +
        () => q.X() + q.Y(),
 +
        () => q.Y()
 +
    ], {name: '&phi;(q)'});
 +
 +
var qx = board.create('point', [
 +
        () => q.X(),
 +
        () => 0
 +
    ], {visible: false});
 +
 +
var s1 = board.create('segment', [q, q1], {dash:2});
 +
var s2 = board.create('segment', [qx, q], {dash:2});
 
</source>
 
</source>
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Geometry]]
 
[[Category:Geometry]]

Revision as of 08:19, 31 May 2021

Shear transformation

[math] \varphi: {\cal A}(\mathbb{R}^2) \to {\cal A}(\mathbb{R}^2), \; x \mapsto \begin{pmatrix}1 & 1 \\ 0& 1\end{pmatrix} [/math]

Points of the form [math]{x\choose \lambda}[/math] are mapped to:

[math] \varphi({x\choose \lambda}) = {x + \lambda\choose} [/math]

The underlying JavaScript code

JXG.Options.label.autoPosition = true;
JXG.Options.text.fontSize = 20;
var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-10, 10, 10, -10], axis: true});

var x = board.defaultAxes.x;
var y = board.defaultAxes.y;

var q = board.create('point', [1, 2], {name: 'q', snapToGrid: true});
var q1 = board.create('point', [
        () => q.X() + q.Y(),
        () => q.Y()
    ], {name: '&phi;(q)'});

var qx = board.create('point', [
        () => q.X(),
        () => 0
    ], {visible: false});

var s1 = board.create('segment', [q, q1], {dash:2});
var s2 = board.create('segment', [qx, q], {dash:2});