Shear transformation: Difference between revisions

From JSXGraph Wiki
(Created page with "Shear transformation :<math> \varphi(x) = \begin{pmatrix}1 & 1 \\ 0& 1\end{pmatrix} </math> <jsxgraph width="500" height="500"> JXG.Options.label.autoPosition = true; JXG.Op...")
 
No edit summary
 
(24 intermediate revisions by the same user not shown)
Line 2: Line 2:


:<math>
:<math>
\varphi(x) = \begin{pmatrix}1 & 1 \\ 0& 1\end{pmatrix}
\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\lambda}
</math>
</math>


Line 8: Line 12:
JXG.Options.label.autoPosition = true;
JXG.Options.label.autoPosition = true;
JXG.Options.text.fontSize = 20;
JXG.Options.text.fontSize = 20;
JXG.Options.line.strokeWidth = 1;
var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5, 14, 14, -5], axis: true});
var x = board.defaultAxes.x;
var y = board.defaultAxes.y;
var q = board.create('point', [2, 10], {name: 'q', snapToGrid: false});
var q1 = board.create('point', [
        () => q.X() + q.Y(),
        () => q.Y()
    ], {name: '&phi;(q)', color: 'blue'});
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});
var l1 = board.create('line', [q, qx], {visible: false});
var r1 = board.create('line', [[0, 0], q], {straightFirst: false});
var p = board.create('glider', [1, 3, r1], {name: 'p'});
var p1 = board.create('point', [
        () => p.X() + p.Y(),
        () => p.Y()
    ], {name: '&phi;(p)', color: 'blue'});
var px = board.create('point', [
        () => p.X(),
        () => 0
    ], {visible: false});
var r2 = board.create('line', [[0, 0], q1], {straightFirst: false});


var s3 = board.create('segment', [p, p1], {dash:2});
var s4 = board.create('segment', [px, p], {dash:2});
board.create('hatch', [s1, 1]);
board.create('hatch', [s2, 1]);
board.create('hatch', [s3, 2]);
board.create('hatch', [s4, 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;
JXG.Options.line.strokeWidth = 1;
var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5, 14, 14, -5], axis: true});
var x = board.defaultAxes.x;
var y = board.defaultAxes.y;
var q = board.create('point', [2, 10], {name: 'q', snapToGrid: false});
var q1 = board.create('point', [
        () => q.X() + q.Y(),
        () => q.Y()
    ], {name: '&phi;(q)', color: 'blue'});
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});
var l1 = board.create('line', [q, qx], {visible: false});
var r1 = board.create('line', [[0, 0], q], {straightFirst: false});
var p = board.create('glider', [1, 3, r1], {name: 'p'});
var p1 = board.create('point', [
        () => p.X() + p.Y(),
        () => p.Y()
    ], {name: '&phi;(p)', color: 'blue'});
var px = board.create('point', [
        () => p.X(),
        () => 0
    ], {visible: false});
var r2 = board.create('line', [[0, 0], q1], {straightFirst: false});
var s3 = board.create('segment', [p, p1], {dash:2});
var s4 = board.create('segment', [px, p], {dash:2});
board.create('hatch', [s1, 1]);
board.create('hatch', [s2, 1]);
board.create('hatch', [s3, 2]);
board.create('hatch', [s4, 2]);
</source>
</source>
[[Category:Examples]]
[[Category:Examples]]
[[Category:Geometry]]
[[Category:Geometry]]

Latest revision as of 13:54, 13 June 2023

Shear transformation

[math]\displaystyle{ \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]\displaystyle{ {x\choose \lambda} }[/math] are mapped to:

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

The underlying JavaScript code

JXG.Options.label.autoPosition = true;
JXG.Options.text.fontSize = 20;
JXG.Options.line.strokeWidth = 1;

var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5, 14, 14, -5], axis: true});

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

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

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});
var l1 = board.create('line', [q, qx], {visible: false});

var r1 = board.create('line', [[0, 0], q], {straightFirst: false});

var p = board.create('glider', [1, 3, r1], {name: 'p'});
var p1 = board.create('point', [
        () => p.X() + p.Y(),
        () => p.Y()
    ], {name: '&phi;(p)', color: 'blue'});

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

var r2 = board.create('line', [[0, 0], q1], {straightFirst: false});

var s3 = board.create('segment', [p, p1], {dash:2});
var s4 = board.create('segment', [px, p], {dash:2});

board.create('hatch', [s1, 1]);
board.create('hatch', [s2, 1]);

board.create('hatch', [s3, 2]);
board.create('hatch', [s4, 2]);