Web developer and autodidact with an interest in creative coding.
vector = [100, 50, 1]
matrix = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
]
function multiply(matrix, vector) {
return [
matrix[0][0] * vector[0] + matrix[0][1] * vector[1] + matrix[0][2] * vector[2],
matrix[1][0] * vector[0] + matrix[1][1] * vector[1] + matrix[1][2] * vector[2],
matrix[2][0] * vector[0] + matrix[2][1] * vector[1] + matrix[2][2] * vector[2],
]
}
multiply(matrix, vector)
identityMatrix = [
[1, 0, 0],
[0, 1, 0],
[0, 0, 1]
]
multiply(identityMatrix, vector)
function translationMatrix(dx, dy) {
return [
[1, 0, dx],
[0, 1, dy],
[0, 0, 1]
];
}
multiply(translationMatrix(dx, dy), vector)
function scalingMatrix(sx, sy) {
return [
[sx, 0, 0],
[ 0, sy, 0],
[ 0, 0, 1],
];
}
cornerVectors = [
[-100, -50, 1],
[ 100, -50, 1],
[ 100, 50, 1],
[-100, 50, 1],
]
scaledCornerVectors = cornerVectors.map(v => multiply(scalingMatrix(sx, sy), v))
function rotationMatrix(theta) {
return [
[Math.cos(theta), -Math.sin(theta), 0],
[Math.sin(theta), Math.cos(theta), 0],
[0, 0, 1],
]
}
rotatedCornerVectors = cornerVectors.map(v => multiply(rotationMatrix(theta), v))
function multiplyMatrix(a, b) {
return [
[
(a[0][0]*b[0][0]) + (a[0][1]*b[0][1]) + (a[0][2]*b[0][2]),
(a[0][0]*b[1][0]) + (a[0][1]*b[1][1]) + (a[0][2]*b[1][2]),
(a[0][0]*b[2][0]) + (a[0][1]*b[2][1]) + (a[0][2]*b[2][2]),
],
[
(a[1][0]*b[0][0]) + (a[1][1]*b[0][1]) + (a[1][2]*b[0][2]),
(a[1][0]*b[1][0]) + (a[1][1]*b[1][1]) + (a[1][2]*b[1][2]),
(a[1][0]*b[2][0]) + (a[1][1]*b[2][1]) + (a[1][2]*b[2][2]),
],
[
(a[2][0]*b[0][0]) + (a[2][1]*b[0][1]) + (a[2][2]*b[0][2]),
(a[2][0]*b[1][0]) + (a[2][1]*b[1][1]) + (a[2][2]*b[1][2]),
(a[2][0]*b[2][0]) + (a[2][1]*b[2][1]) + (a[2][2]*b[2][2]),
],
]
}
transformationMatrix = multiplyMatrix(
translationMatrix(translateX, translateY),
rotationMatrix(rotateTheta),
)
transformedCornerVectors = cornerVectors.map(v => {
return multiply(transformationMatrix, v);
})
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.
