Published
Edited
Nov 14, 2019
2 stars
vertices = [
new Vertex(1,1,0), // Front-Bottom-Left
new Vertex(4,1,0), // Front-Bottom-right
new Vertex(1,5,0), // Rear-Bottom-Left
new Vertex(4,5,0), // Rear-Bottom-Right
new Vertex(1,1,5), // Front-Top-Left
new Vertex(4,1,5), // Front-Top-Right
new Vertex(1,5,5), // Rear-Top-Left
new Vertex( 4,5,5), // Rear-Top-Right
new Vertex(4,1,0), // Front-Bottom-Left
new Vertex(11,1,0), // Front-Bottom-right
new Vertex(4,5,0), // Rear-Bottom-Left
new Vertex( 11,5,0), // Rear-Bottom-Right
new Vertex(4,1,2), // Front-Top-Left
new Vertex(11,1,2), // Front-Top-Right
new Vertex(4,5,2), // Rear-Top-Left
new Vertex(11,5,2) // Rear-Top-Right
]
faces = [
new Polygon([vertices[0], vertices[1], vertices[5], vertices[4]]), // Front
new Polygon([vertices[2], vertices[3], vertices[7], vertices[6]]), // Rear
new Polygon([vertices[0], vertices[1], vertices[3], vertices[2]]), // Bottom
new Polygon([vertices[4], vertices[5], vertices[7], vertices[6]]), // Top
new Polygon([vertices[0], vertices[2], vertices[6], vertices[4]]), // Left
new Polygon([vertices[1], vertices[3], vertices[7], vertices[5]]), // Right
new Polygon([vertices[8], vertices[9], vertices[13], vertices[12]]), // Front
new Polygon([vertices[10], vertices[11], vertices[15], vertices[14]]), // Rear
new Polygon([vertices[8], vertices[9], vertices[11], vertices[10]]), // Bottom
new Polygon([vertices[12], vertices[13], vertices[15], vertices[14]]), // Top
new Polygon([vertices[8], vertices[10], vertices[14], vertices[12]]), // Left
new Polygon([vertices[9], vertices[11], vertices[15], vertices[13]]) // Right
]
{
var canvas = DOM.canvas(600, 300);
var context = canvas.getContext('2d');
// Make the cube half the width of the canvas
var size = canvas.width / 10;
var fx = function(vertex) {
return vertex.x * size / 4;
};
var fy = function(vertex) {
return vertex.y * size / 4;
};
// Makes 0 the center of the canvas
context.translate(canvas.width / 2, canvas.height / 2);
for (var i = 0; i < faces.length; ++i) {
drawPolygon(context, faces[i], fx, fy);
}
return canvas;
}
function drawPolygon(context, polygon, fx, fy) {
context.beginPath();
console.log(polygon.count());
// The -1 * is used to flip the y coordinate as y value increases
// as you move down the canvas.
context.moveTo(fx(polygon.vertex(0)), fy(polygon.vertex(0)));
for (var i = 1; i < polygon.count(); ++i) {
// console.log(polygon.vertex(i));
context.lineTo(fx(polygon.vertex(i)), fy(polygon.vertex(i)));
}
context.closePath();
context.stroke();
}
oblique = ({
gx: (scale, zc) => (vertex) => (vertex.x + vertex.z * zc) * scale,
gy: (scale, zc) => (vertex) => (vertex.y + vertex.z * zc) * scale,
})
{
var canvas = DOM.canvas(640, 400);
var context = canvas.getContext('2d');
context.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre
context.strokeStyle = '#222222';
var modelSize = canvas.width / 4;
var scale = modelSize / 6;
var step = 0;
render(function() {
context.clearRect(- canvas.width / 2, - canvas.height / 2, canvas.width, canvas.height);
var transform = Mat3.rotationY( Math.PI ).multiply(Mat3.rotationX(Math.PI/2));
var fx = function(vertex) {
return vertex.x * 20;
};
var fy = function(vertex) {
return vertex.y * 20;
};
drawAxisIndicator(context, transform);
for (var i = 0; i < modelPolygons.length; ++i) {
drawPolygon2(context, modelPolygons[i], transform, fx, fy);
}
});
return canvas;
}
{
var canvas = DOM.canvas(640, 400);
var context = canvas.getContext('2d');
context.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre
context.strokeStyle = '#222222';
var modelSize = canvas.width / 4;
var scale = modelSize / 6;
var step = 0;
render(function() {
context.clearRect(- canvas.width / 2, - canvas.height / 2, canvas.width, canvas.height);
var transform = Mat3.rotationX(3 * Math.PI/2);
var fx = function(vertex) {
return vertex.x * 20;
};
var fy = function(vertex) {
return vertex.y * 20;
};
drawAxisIndicator(context, transform);
for (var i = 0; i < modelPolygons.length; ++i) {
//console.log(modelPolygons[i]);
drawPolygon2(context, modelPolygons[i], transform, fx, fy);
}
});
return canvas;
}
modelPolygons = [
new Polygon([
modelVerts[0],
modelVerts[1],
modelVerts[5],
modelVerts[4]
]), // FRONT
new Polygon([
modelVerts[2],
modelVerts[3],
modelVerts[7],
modelVerts[6]
]), // REAR
new Polygon([
modelVerts[0],
modelVerts[1],
modelVerts[3],
modelVerts[2]
]), // BOTTOM
new Polygon([
modelVerts[4],
modelVerts[5],
modelVerts[7],
modelVerts[6]
]), // TOP
new Polygon([
modelVerts[0],
modelVerts[2],
modelVerts[6],
modelVerts[4]
]), // LEFT
new Polygon([
modelVerts[1],
modelVerts[3],
modelVerts[7],
modelVerts[5]
]), // RIGHT
new Polygon([
modelVerts[8],
modelVerts[9],
modelVerts[13],
modelVerts[12]
]), // FRONT
new Polygon([
modelVerts[10],
modelVerts[11],
modelVerts[15],
modelVerts[14]
]), // REAR
new Polygon([
modelVerts[8],
modelVerts[9],
modelVerts[11],
modelVerts[10]
]), // BOTTOM
new Polygon([
modelVerts[12],
modelVerts[13],
modelVerts[15],
modelVerts[14]
]), // TOP
new Polygon([
modelVerts[8],
modelVerts[10],
modelVerts[14],
modelVerts[12]
]), // LEFT
new Polygon([
modelVerts[9],
modelVerts[11],
modelVerts[15],
modelVerts[13]
]) // RIGHT
]
function drawPolygon2(context, polygon, matrix, fx, fy) {
var vertex = Vertex.transform(polygon.vertex(0), matrix);
// context.save();
context.beginPath();
context.moveTo(fx(vertex), -1 * fy(vertex));
for (var i = 1; i < polygon.count(); ++i) {
vertex = Vertex.transform(polygon.vertex(i), matrix);
context.lineTo(fx(vertex), -1 * fy(vertex));
}
context.closePath();
context.stroke();
//context.restore();
}
function drawAxisIndicator(context, matrix) {
context.save();
context.textBaseline = 'middle';
context.textAlign = 'center';
context.strokeStyle = '#F06';
context.fillStyle = '#F06';
var x = new Vec3([50.0, 0.0, 0.0]).multiply(matrix);
context.fillText('X', x.element(0), -1 * x.element(1));
drawLineFromVectors(
context,
new Vec3([0.0, 0.0, 0.0]).multiply(matrix),
new Vec3([20.0, 0.0, 0.0]).multiply(matrix)
);
context.strokeStyle = '#F90';
context.fillStyle = '#F90';
var y = new Vec3([0.0, 30.0, 0.0]).multiply(matrix);
context.fillText('Y', y.element(0), -1 * y.element(1));
drawLineFromVectors(
context,
new Vec3([0.0, 0.0, 0.0]).multiply(matrix),
new Vec3([0.0, 20.0, 0.0]).multiply(matrix)
);
context.strokeStyle = '#09C';
context.fillStyle = '#09C';
var z = new Vec3([0.0, 0.0, 30.0]).multiply(matrix);
context.fillText('Z', z.element(0), -1 * z.element(1));
drawLineFromVectors(
context,
new Vec3([0.0, 0.0, 0.0]).multiply(matrix),
new Vec3([0.0, 0.0, 20.0]).multiply(matrix)
);
context.restore();
}
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.
