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;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.