md`# Many thanks to original authors of the article. Stuart Wakefield and Kelley van Evert.`
{
var canvas = DOM.canvas(640, 350);
var context = canvas.getContext('2d');
context.globalAlpha = 0.2;
context.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre
context.strokeStyle = '#222222';
var modelSize = canvas.width / 2;
var scale = modelSize / 10;
var fx = orthogonal.gx(scale);
var fy = orthogonal.gy(scale);
for (var i = 0; i < modelPolygons.length; ++i) {
drawPolygon(context, faces[i], fx, fy, arr1[i]);
}
return canvas;
}
orthogonal = ({
gx: scale => vertex => vertex.x * scale,
gy: scale => vertex => vertex.y * scale
})
function drawPolygon_ORTHO(context, polygon, fx, fy, color) {
context.beginPath();
//context.strokeStyle = color;
//context.lineWidth = 8;
// 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)), -1 * fy(polygon.vertex(0)));
for (var i = 1; i < polygon.count(); i = i + 1) {
context.lineTo(fx(polygon.vertex(i)), -1 * fy(polygon.vertex(i)));
console.log("drawPolygon_ORTHO " + polygon.face_name());
}
context.fillStyle = color;
context.fill();
context.stroke();
context.closePath();
}
/*{
var canvas = DOM.canvas(640, 250);
var context = canvas.getContext('2d');
context.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre
context.strokeStyle = '#222222';
context.globalAlpha = 0.6;
var modelSize = canvas.width / 4;
var scale = modelSize / 6;
var c = 0.2;
var fx = oblique.gx(scale, c);
var fy = oblique.gy(scale, c);
for (var i = 0; i < modelPolygons.length; ++i) {
drawPolygon(context, modelPolygons[i], fx, fy, arr1[i]);
}
return canvas;
}*/
/*{
var canvas = DOM.canvas(640, 350);
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 / 6;
var scale = modelSize / 4;
var angle = Math.PI / 6; // 30 degrees
var a = Math.cos(angle);
var b = Math.sin(angle);
var fx = oblique.gx(scale, a);
var fy = oblique.gy(scale, b);
for (var i = 0; i < modelPolygons.length; ++i) {
drawPolygon(context, modelPolygons[i], fx, fy, arr1[i]);
}
return canvas;
}*/
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
function getColors(){
var arr = new Array();
for (var i = 0; i < 10; i++){
arr.push(getRandomColor());
console.log(getRandomColor());
}
return arr;
}
//getColors();
arr1 = [ "#00ffff", "#ffff00", "#ff0000", "#008000", "#bdb76b", "#006400", "#f5f5dc", "#f0ffff", "#00ffDD", "#92D585"]
function drawPolygon2(context, polygon, matrix, fx, fy, color) {
context.beginPath();
var vertex = Vertex.transform(polygon.vertex(0), matrix);
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.fillStyle = color;
context.fill();
context.addHitRegion({id: polygon.face_name() + " " + color });
context.closePath();
context.stroke();
}
function drawPolygon3(context, polygon, matrix, fx, fy, color) {
context.beginPath();
var vertex = Vertex.transform(polygon.vertex(0), matrix);
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));
}
//console.log("Face name is - " + polygon.face_name() + " " + color + " " + JSON.stringify(polygon.vertices()));
context.fillStyle = color;
context.fill();
polygon.vertices().forEach(vertex => {
{ ver: vertex.x, vertex.y, vertex.z};
});
context.addHitRegion({id: polygon.face_name() + " " + JSON.stringify(polygon.vertices())});
context.closePath();
context.stroke();
}
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.
