viewof a11 = Inputs. range ([- 3 , 3 ], {
step : 0.1 ,
value : 1.5 ,
label : tex `a_{11}` ,
width : 200
})
viewof a12 = Inputs. range ([- 3 , 3 ], {
step : 0.1 ,
value : 0.5 ,
label : tex `a_{12}` ,
width : 200
})
viewof a21 = Inputs. range ([- 3 , 3 ], {
step : 0.1 ,
value : - 0.5 ,
label : tex `a_{21}` ,
width : 200
})
viewof a22 = Inputs. range ([- 3 , 3 ], {
step : 0.1 ,
value : 1.2 ,
label : tex `a_{22}` ,
width : 200
})
// Vector x components
viewof x1 = Inputs. range ([- 5 , 5 ], {
step : 0.1 ,
value : 3 ,
label : tex `x_1` ,
width : 200
})
viewof x2 = Inputs. range ([- 5 , 5 ], {
step : 0.1 ,
value : 2 ,
label : tex `x_2` ,
width : 200
})
// Calculate transformed vector b = Ax
b1 = a11 * x1 + a12 * x2
b2 = a21 * x1 + a22 * x2
// Display the transformation
html `<div style="text-align: center; font-size: 1.3em; margin: 2em 0;">
<p>
${ tex `A = \b egin{bmatrix} ${ a11. toFixed (1 )} & ${ a12. toFixed (1 )} \\ ${ a21. toFixed (1 )} & ${ a22. toFixed (1 )} \e nd{bmatrix}, \q uad \b old{x} = \b egin{bmatrix} ${ x1. toFixed (1 )} \\ ${ x2. toFixed (1 )} \e nd{bmatrix}, \q uad \b old{b} = A \b old{x} = \b egin{bmatrix} ${ b1. toFixed (1 )} \\ ${ b2. toFixed (1 )} \e nd{bmatrix}` }
</p>
</div>`
gridPoints = {
const points = [];
for (let i = - 4 ; i <= 4 ; i += 0.5 ) {
for (let j = - 4 ; j <= 4 ; j += 0.5 ) {
const DomainX = i;
const DomainY = j;
const transformedX = a11 * i + a12 * j;
const transformedY = a21 * i + a22 * j;
points. push ({
origX : DomainX,
origY : DomainY,
transX : transformedX,
transY : transformedY,
isGrid : true
});
}
}
return points;
}
// Create unit vectors and their transformations
unitVectors = [
// Standard basis vectors
{origX : 0 , origY : 0 , transX : 0 , transY : 0 , type : "origin" },
{origX : 1 , origY : 0 , transX : a11, transY : a21, type : "e1" },
{origX : 0 , origY : 1 , transX : a12, transY : a22, type : "e2" },
// Input vector
{origX : 0 , origY : 0 , transX : 0 , transY : 0 , type : "origin" },
{origX : x1, origY : x2, transX : b1, transY : b2, type : "vector" }
]
// Create the plot
Plot. plot ({
style : "overflow: visible; display: block; margin: 0 auto;" ,
width : 800 ,
height : 400 ,
grid : true ,
facet : {data : [{side : "Domain" }, {side : "Codomain" }], x : "side" },
fx : {label : null , domain : ["Domain" , "Codomain" ]},
x : {label : "x_1" , domain : [- 8 , 8 ]},
y : {label : "x_2" , domain : [- 8 , 8 ]},
marks : [
// Grid axes
Plot. ruleY ([0 ], {stroke : "#ddd" }),
Plot. ruleX ([0 ], {stroke : "#ddd" }),
// Grid points (Domain)
Plot. dot (gridPoints, {
x : "origX" ,
y : "origY" ,
fx : () => "Domain" ,
r : 1 ,
fill : "#ccc" ,
fillOpacity : 0.7
}),
// Grid points (Codomain)
Plot. dot (gridPoints, {
x : "transX" ,
y : "transY" ,
fx : () => "Codomain" ,
r : 1 ,
fill : "#ccc" ,
fillOpacity : 0.7
}),
// Unit vector e1 (Domain)
Plot. arrow ([{x1 : 0 , y1 : 0 , x2 : 1 , y2 : 0 }], {
x1 : "x1" , y1 : "y1" , x2 : "x2" , y2 : "y2" ,
fx : () => "Domain" ,
stroke : "orange" ,
strokeWidth : 2 ,
fill : "orange"
}),
// Unit vector e2 (Domain)
Plot. arrow ([{x1 : 0 , y1 : 0 , x2 : 0 , y2 : 1 }], {
x1 : "x1" , y1 : "y1" , x2 : "x2" , y2 : "y2" ,
fx : () => "Domain" ,
stroke : "purple" ,
strokeWidth : 2 ,
fill : "purple"
}),
// Input vector x (Domain)
Plot. arrow ([{x1 : 0 , y1 : 0 , x2 : x1, y2 : x2}], {
x1 : "x1" , y1 : "y1" , x2 : "x2" , y2 : "y2" ,
fx : () => "Domain" ,
stroke : "steelblue" ,
strokeWidth : 3 ,
fill : "steelblue"
}),
// Codomain unit vector e1
Plot. arrow ([{x1 : 0 , y1 : 0 , x2 : a11, y2 : a21}], {
x1 : "x1" , y1 : "y1" , x2 : "x2" , y2 : "y2" ,
fx : () => "Codomain" ,
stroke : "orange" ,
strokeWidth : 2 ,
fill : "orange"
}),
// Codomain unit vector e2
Plot. arrow ([{x1 : 0 , y1 : 0 , x2 : a12, y2 : a22}], {
x1 : "x1" , y1 : "y1" , x2 : "x2" , y2 : "y2" ,
fx : () => "Codomain" ,
stroke : "purple" ,
strokeWidth : 2 ,
fill : "purple"
}),
// Codomain vector b
Plot. arrow ([{x1 : 0 , y1 : 0 , x2 : b1, y2 : b2}], {
x1 : "x1" , y1 : "y1" , x2 : "x2" , y2 : "y2" ,
fx : () => "Codomain" ,
stroke : "crimson" ,
strokeWidth : 3 ,
fill : "crimson"
}),
// Labels
Plot. text ([
{x : 1 , y : 0.2 , text : "e₁" , fx : "Domain" },
{x : 0.2 , y : 1 , text : "e₂" , fx : "Domain" },
{x : x1/ 2 , y : x2/ 2 + 0.3 , text : "x" , fx : "Domain" },
{x : a11, y : a21 + 0.2 , text : "Ae₁" , fx : "Codomain" },
{x : a12 + 0.2 , y : a22, text : "Ae₂" , fx : "Codomain" },
{x : b1/ 2 , y : b2/ 2 + 0.3 , text : "b=Ax" , fx : "Codomain" }
], {
x : "x" , y : "y" ,
fx : "fx" ,
text : "text" ,
fontSize : 12 ,
fontWeight : "bold"
})
]
})