Marveling at Code
Published
Edited
Oct 10, 2019
5 stars
md`# 2D Transform Matrix on SVG
visualising how matrices look when performing different transformation on a simple SVG rectangular. Applied the transformations found in the Wiki page: [Transformation matrix](https://en.wikipedia.org/wiki/Transformation_matrix)
`
html`<img src="https://upload.wikimedia.org/wikipedia/commons/2/2c/2D_affine_transformation_matrix.svg" width=500 height=500/>`
md`## X and Y axis translation`
tex`\begin{pmatrix}
a & c & X \\
b & d & Y \\
0 & 0 & 1
\end{pmatrix}`
viewof Y = html`<input type="range" max="270"/>`
viewof X = html`<input type="range" max="270"/>`
tex`\begin{pmatrix}
a & c & ${X} \\
b & d & ${Y} \\
0 & 0 & 1
\end{pmatrix}`
html`<svg style="border: 1px dotted salmon" width="300" height="300" viewbox="0 0 300 300"><rect transform-origin="bottom left" transform="matrix(1, 0, 0, 1, ${X}, ${Y})" width="30" height="30"/></svg>`
md`## Scale about origin`
tex`\begin{pmatrix}
W & c & t_x \\
b & H & t_y \\
0 & 0 & 1
\end{pmatrix}`
viewof W = html`<input value="1" type="range" step=".01" min="1" max="5"/>`
viewof H = html`<input value="1" type="range" step=".01" min="1" max="5"/>`
html`<svg style="border: 1px dotted salmon" width="300" height="300" viewbox="0 0 300 300"><rect transform="matrix(${W}, 0, 0, ${H}, 0, 0)" width="30" height="30"/></svg>`
tex`\begin{pmatrix}
${W} & c & t_x \\
b & ${H} & t_y \\
0 & 0 & 1
\end{pmatrix}`
md`## Rotate about origin`
tex`\begin{pmatrix}
\cos^\theta & \sin^\theta & t_x \\
-\sin^\theta & \cos^\theta & t_y \\
0 & 0 & 1
\end{pmatrix}`
viewof angle = html`<input value="1" type="range" min="0" max="360"/>`
angle
radian = angle * Math.PI / 180
html`<svg style="border: 1px dotted salmon" width="300" height="300" viewbox="0 0 300 300"><rect transform="matrix(${Math.cos(radian)}, ${-Math.sin(radian)}, ${Math.sin(radian)}, ${Math.cos(radian)}, 100, 100)" width="50" height="50"/></svg>`
tex`\begin{pmatrix}
${Math.cos(radian)} & ${Math.sin(radian)} & t_x \\
${-Math.sin(radian)} & ${Math.cos(radian)} & t_y \\
0 & 0 & 1
\end{pmatrix}`
md`## Shear in X direction`
tex`\begin{pmatrix}
1 & \tan^\phi & t_x \\
0 & 1 & t_y \\
0 & 0 & 1
\end{pmatrix}`
viewof s_angle = html`<input value="1" type="range" min="0" max="90"/>`
s_angle
s_radian = s_angle * Math.PI / 180
html`<svg style="border: 1px dotted salmon" width="300" height="300" viewbox="0 0 300 300"><rect transform="matrix(1, 0, ${Math.tan(s_radian)}, 1, 100, 100)" width="50" height="50"/></svg>`
tex`\begin{pmatrix}
a & c & t_x \\
b & ${Math.tan(s_radian)} & t_y \\
0 & 0 & 1
\end{pmatrix}`
md`## Shear in Y direction`
tex`\begin{pmatrix}
1 & 0 & t_x \\
\tan^\omega & 1 & t_y \\
0 & 0 & 1
\end{pmatrix}`
viewof sy_angle = html`<input value="1" type="range" min="0" max="90"/>`
sy_angle
sy_radian = sy_angle * Math.PI / 180
html`<svg style="border: 1px dotted salmon" width="300" height="300" viewbox="0 0 300 300"><rect transform="matrix(1, ${Math.tan(sy_radian)}, 0, 1, 100, 100)" width="50" height="50"/></svg>`
tex`\begin{pmatrix}
1 & 0 & 100 \\
${Math.tan(sy_radian)} & 1 & 100 \\
0 & 0 & 1
\end{pmatrix}`
md`## Reflect about origin`
tex`\begin{pmatrix}
-1 & 0 & t_x \\
0 & -1 & t_y \\
0 & 0 & 1
\end{pmatrix}`
viewof r = html`<input value="1" step="0.1" type="range" min="-1" max="1"/>`
html`<svg style="border: 1px dotted salmon" width="300" height="300" viewbox="0 0 300 300"><rect transform="matrix(${r}, 0, 0, ${r}, 100, 100)" width="50" height="50"/></svg>`
tex`\begin{pmatrix}
${r} & 0 & 100 \\
0 & ${r} & 100 \\
0 & 0 & 1
\end{pmatrix}`
md`## Reflect about x-axis`
tex`\begin{pmatrix}
1 & 0 & t_x \\
0 & -1 & t_y \\
0 & 0 & 1
\end{pmatrix}`
viewof rx = html`<input value="1" step="0.1" type="range" min="-1" max="1"/>`
html`<svg style="border: 1px dotted salmon" width="300" height="300" viewbox="0 0 300 300"><rect transform="matrix(1, 0, 0, ${rx}, 100, 100)" width="50" height="50"/></svg>`
tex`\begin{pmatrix}
1 & 0 & 100 \\
0 & ${rx} & 100 \\
0 & 0 & 1
\end{pmatrix}`
md`## Reflect about y-axis`
tex`\begin{pmatrix}
-1 & 0 & t_x \\
0 & 1 & t_y \\
0 & 0 & 1
\end{pmatrix}`
viewof ry = html`<input value="1" step="0.1" type="range" min="-1" max="1"/>`
html`<svg style="border: 1px dotted salmon" width="300" height="300" viewbox="0 0 300 300"><rect transform="matrix(${ry}, 0, 0, 1, 100, 100)" width="50" height="50"/></svg>`
tex`\begin{pmatrix}
${ry} & 0 & 100 \\
0 & 1 & 100 \\
0 & 0 & 1
\end{pmatrix}`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
