md `# Steradian`
steradian = {
var canvas = DOM.canvas(500, 500);
var context = canvas.getContext('2d');
context.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre
context.strokeStyle = '#444444';
var modelSize = canvas.width / 4;
var scale = modelSize / 0.8;
var cx = .001, cy = .001;
var lx = null, ly = null;
var x = 0, y = 0;
var decay = 0.95;
var move = function(e) {
e.preventDefault();
var mouseX = e.pageX;
var mouseY = e.pageY;
var canvasX = canvas.offsetLeft;
var canvasY = canvas.offsetTop;
var canvasWidth = canvas.offsetWidth;
var canvasHeight = canvas.offsetHeight;
var px = (.05*mouseX - canvasX) / canvasWidth; //change mouseX multiplier to change sensitivity of X axis
var py = (.05*mouseY - canvasY) / canvasHeight; //change mouseY multiplier to change sensitivity of Y axis
if (lx && ly) {
cx = (px - lx);
cy = (py - ly);
}
lx = px;
ly = py;
};
var leave = function() {
lx = null;
ly = null;
};
canvas.addEventListener('click', move); //mousemove
canvas.addEventListener('touch', move);
// canvas.addEventListener('touchend', leave);
// canvas.addEventListener('mousemove', move);
// canvas.addEventListener('mouseleave', leave);
// canvas.addEventListener("dragstart", move);
// canvas.addEventListener("dragend", leave);
render(function() {
cx *= decay;
cy *= decay;
x += cx;
y += cy;
context.clearRect(- canvas.width / 2, - canvas.height / 2, canvas.width, canvas.height);
var transform = Mat3.rotationX(-y * 2 * Math.PI)
.multiply(Mat3.rotationY(x * 2 * Math.PI));
var fx = function(vertex) {
return vertex.x * scale;
};
var fy = function(vertex) {
return vertex.y * scale;
};
drawAxisIndicator(context, transform);
for (var i = 0; i < modelPolygons.length; ++i) {
drawPolygon2(context, modelPolygons[i], transform, fx, fy);
}
});
return canvas;
}
Mat3 = {
function Mat3(elements) {
if (elements.length !== 9) {
throw new Error('Mat3 must have 9 elements');
}
this.element = function(x, y) {
if (x < 0 || x > 2) {
throw new Error('x must be in the range 0 -2');
}
if (y < 0 || y > 2) {
throw new Error('y must be in the range 0 - 2');
}
return elements[y * 3 + x];
};
this.multiply = function(other) {
if (!(other instanceof Vec3)
&& !(other instanceof Mat3)) {
throw new Error('vector must be either a Vec3 or Mat3');
}
if (other instanceof Vec3) {
var elements = [];
for (var y = 0; y < 3; ++y) {
var sum = 0;
for (var x = 0; x < 3; ++x) {
sum += other.element(x) * this.element(x, y);
}
elements.push(sum);
}
return new Vec3(elements);
} else {
var elements = [];
for (var z = 0; z < 3; ++z) {
for (var y = 0; y < 3; ++y) {
var sum = 0;
for (var x = 0; x < 3; ++x) {
sum += other.element(y, x) * this.element(x, z);
}
elements.push(sum);
}
}
return new Mat3(elements);
}
};
}
Mat3.identity = function() {
return new Mat3([
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
0.0, 0.0, 1.0
]);
}
Mat3.rotationX = function(angle) {
var a = Math.cos(angle);
var b = Math.sin(angle);
return new Mat3([
1.0, 0.0, 0.0,
0.0, a, -b,
0.0, b, a,
]);
};
Mat3.rotationY = function(angle) {
var a = Math.cos(angle);
var b = Math.sin(angle);
return new Mat3([
a, 0.0, b,
0.0, 1.0, 0.0,
-b, 0.0, a,
]);
};
Mat3.rotationZ = function(angle) {
var a = Math.cos(angle);
var b = Math.sin(angle);
return new Mat3([
a, -b, 0.0,
b, a, 0.0,
0.0, 0.0, 1.0,
]);
};
Mat3.isometric = function(angle) {
var a = Math.cos(angle);
var b = Math.sin(angle);
return new Mat3([
a, 0, a,
-b, 1, b,
0, 0, 0
]);
};
return Mat3;
}
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.
