Published
Edited
Feb 9, 2020
{
var canvas = DOM.canvas(2500, 700);
var context = canvas.getContext('2d');
// context.translate(20, -1500);
//context.translate(-1050, 200); // 0 should be in the centre
context.translate(-3600, 150);
context.strokeStyle = '#AADDAA';
context.globalAlpha = 1;
//var modelSize = canvas.width / 2.5;
console.log("aaaaa");
var scale = 7;
canvas.addEventListener('click', function(event) {
console.log(event.region);
if (event.region) {
console.log('face is ' + event.region);
console.log(JSON.stringify(event));
}
});
var transform = Mat3.rotationZ(Math.PI);
// transform = Mat3.rotationX(Math.PI / 2);
var fx = function(vertex) {
return vertex.x * scale;
};
var fy = function(vertex) {
if (vertex.y == 0) vertex.y = 0.001;
return vertex.y * scale;
};
drawAxisIndicator(context, transform);
for (var i = 0; i < modelPolygons.length; ++i) {
drawPolygon_7(context, modelPolygons[i], transform, fx, fy, arr1[i]);
}
return canvas;
}
function drawPolygon_7(context, polygon, matrix, fx, fy, color) {
context.beginPath();
console.log("face " + polygon.face_name() + " color " + color);
// console.log("Move to vertex id " + polygon.vertex(0).id);
// console.log(polygon.vertex(0));
var vertex = Vertex.transform(polygon.vertex(0), matrix);
context.moveTo(fx(vertex), fy(vertex));
console.log("Move to " + fx(vertex), fy(vertex));
for (var i = 1; i < polygon.count(); ++i) {
vertex = Vertex.transform(polygon.vertex(i), matrix);
console.log(
"Line to vertex " +
i +
" " +
JSON.stringify(fx(vertex)) +
" , " +
JSON.stringify(fy(vertex))
);
//console.log(polygon.vertex(i));
context.lineTo(fx(vertex), fy(vertex));
}
vertex = Vertex.transform(polygon.vertex(0), matrix);
context.fillStyle = color;
context.fill();
var obj = { name: polygon.face_name(), color: color };
context.addHitRegion({ id: JSON.stringify(obj) });
context.closePath();
context.stroke();
}
{
var canvas = DOM.canvas(700, 300);
var context = canvas.getContext('2d');
// context.translate(20, -1500);
context.translate(-1050, 200); // 0 should be in the centre
context.strokeStyle = '#AADDAA';
context.globalAlpha = 1;
//var modelSize = canvas.width / 2.5;
console.log("aaaaa");
var scale = 7;
canvas.addEventListener('click', function(event) {
console.log(event.region);
if (event.region) {
console.log('face is ' + event.region);
}
});
var transform = Mat3.rotationZ(Math.PI / 2);
//transform = Mat3.rotationX((3 * Math.PI) / 2);
var fx = function(vertex) {
return vertex.x * scale;
};
var fy = function(vertex) {
if (vertex.y == 0) vertex.y = 0.001;
return vertex.y * scale;
};
drawAxisIndicator(context, transform);
for (var i = 0; i < modelPolygons.length; ++i) {
drawPolygon5(context, modelPolygons[i], transform, fx, fy, arr1[i]);
}
return canvas;
}
function drawPolygon5(context, polygon, matrix, fx, fy, color) {
context.beginPath();
console.log("face " + polygon.face_name());
console.log("Move to vertex id " + polygon.vertex(0).id);
console.log(polygon.vertex(0));
var vertex = Vertex.transform(polygon.vertex(0), matrix);
context.moveTo(fx(vertex), -1 * fy(vertex));
console.log("Move to " + fx(vertex), -1 * fy(vertex));
for (var i = 1; i < polygon.count(); ++i) {
vertex = Vertex.transform(polygon.vertex(i), matrix);
console.log("Line to vertex id " + i + " id " + polygon.vertex(i).id);
console.log(polygon.vertex(i));
context.lineTo(fx(vertex), -1 * fy(vertex));
}
vertex = Vertex.transform(polygon.vertex(0), matrix);
context.lineTo(fx(vertex), -1 * fy(vertex));
console.log("draw5");
context.fillStyle = color;
context.fill();
context.addHitRegion({ id: polygon.face_name() });
context.closePath();
context.stroke();
}
{
var canvas = DOM.canvas(700, 300);
var context = canvas.getContext('2d');
// context.translate(20, -1500);
context.translate(-1050, 200); // 0 should be in the centre
context.strokeStyle = '#AADDAA';
context.globalAlpha = 1;
//var modelSize = canvas.width / 2.5;
console.log("aaaaa");
var scale = 7;
canvas.addEventListener('click', function(event) {
console.log(event.region);
if (event.region) {
console.log('face is ' + event.region);
}
});
var transform = Mat3.rotationZ(Math.PI / 2);
var fx = function(vertex) {
return vertex.x * scale;
};
var fy = function(vertex) {
if (vertex.y == 0) vertex.y = 0.001;
return vertex.y * scale;
};
// drawAxisIndicator(context, transform);
for (var i = modelPolygons.length - 1; i >= 0; --i) {
drawPolygon5(context, modelPolygons[i], transform, fx, fy, arr1[i]);
}
return canvas;
}
{
var canvas = DOM.canvas(600, 400);
canvas.border = "2px";
var context = canvas.getContext('2d');
context.translate(0, -1200);
// // 0 should be in the centre
context.lineWidth = 1;
context.strokeStyle = "#000000";
context.globalAlpha = 1;
//var modelSize = canvas.width / 2;
canvas.addEventListener('click', function(event) {
console.log(event.region);
if (event.region) {
console.log('face is ' + event.region);
}
});
var scale = 2.4;
console.log("scale " + scale);
var fx = orthogonal.gx(scale);
var fy = orthogonal.gy(scale);
for (var i = modelPolygons.length - 1; i >= 0; --i) {
//console.log(modelPolygons[i]);
drawPolygon(context, modelPolygons[i], fx, fy, arr1[i]);
}
return canvas;
}
function drawPolygon(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.
console.log(polygon.face_name());
console.log("Move to " + polygon.vertex(0).id);
context.moveTo(fx(polygon.vertex(0)), -1 * fy(polygon.vertex(0)));
for (var i = 1; i < polygon.count(); ++i) {
console.log("Line to " + i + " id " + polygon.vertex(i).id);
context.lineTo(fx(polygon.vertex(i)), -1 * fy(polygon.vertex(i)));
}
console.log("Last to " + polygon.vertex(0).id);
context.lineTo(fx(polygon.vertex(0)), -1 * fy(polygon.vertex(0)));
context.fillStyle = color;
context.fill();
context.addHitRegion({
id: polygon.face_name() + " " + JSON.stringify(polygon.vertices())
});
context.stroke();
context.closePath();
}
class Vertex {
constructor(id, x, y, z) {
this.id = id;
this.x = x;
this.y = y;
this.z = z;
}
static transform(vertex, matrix) {
return Vertex.fromVec3(matrix.multiply(Vertex.toVec3(vertex)));
}
static toVec3(vertex) {
return new Vec3([vertex.x, vertex.y, vertex.z]);
}
static fromVec3(vector) {
return new Vertex(vector.element(0), vector.element(1), vector.element(2));
}
}
function Polygon(vertices, name) {
this.count = function() {
return vertices.length;
};
this.face_name = function(){
return name;
};
this.vertices = function(){
return vertices;
}
this.vertex = function(i) {
if (i < 0) {
throw new Error('Vertex index must be a positive integer')
}
if (i >= vertices.length) {
throw new Error('Vertex index out of bounds');
}
return vertices[i];
};
}
md`## Another View`
json_data_verties = [
{ id: "11", x: 150, y: -535, z: 0 },
{ id: "12", x: 180, y: -535, z: 0 },
{ id: "13", x: 180, y: -570, z: 0 },
{ id: "14", x: 150, y: -570, z: 0 },
{ id: "31", x: 180, y: -555, z: 0 },
{ id: "32", x: 210, y: -555, z: 0 },
{ id: "33", x: 210, y: -595, z: 0 },
{ id: "34", x: 180, y: -595, z: 0 },
{ id: "49", x: 180, y: -610, z: 0 },
{ id: "50", x: 150, y: -610, z: 0 },
{ id: "57", x: 210, y: -585, z: 0 },
{ id: "58", x: 240, y: -585, z: 0 },
{ id: "59", x: 240, y: -640, z: 0 },
{ id: "60", x: 210, y: -640, z: 0 },
{ id: "69", x: 150, y: -535, z: 8 },
{ id: "70", x: 180, y: -535, z: 8 },
{ id: "71", x: 180, y: -570, z: 8 },
{ id: "72", x: 150, y: -570, z: 8 },
{ id: "73", x: 180, y: -555, z: 8 },
{ id: "74", x: 210, y: -555, z: 8 },
{ id: "75", x: 210, y: -595, z: 8 },
{ id: "76", x: 180, y: -595, z: 8 },
{ id: "77", x: 180, y: -610, z: 8 },
{ id: "78", x: 150, y: -610, z: 8 },
{ id: "79", x: 210, y: -585, z: 8 },
{ id: "80", x: 240, y: -585, z: 8 },
{ id: "81", x: 240, y: -640, z: 8 },
{ id: "82", x: 210, y: -640, z: 8 }
]
function create_vertices(json_data_verties) {
var vertices = new Array();
for (var i = 0; i < json_data_verties.length; i++) {
vertices[i] = new Vertex(
json_data_verties[i].id,
json_data_verties[i].x,
json_data_verties[i].y,
json_data_verties[i].z
);
}
return vertices;
}
md`## Yet Another ....view`
{
var canvas = DOM.canvas(1000, 800);
var context = canvas.getContext('2d');
context.translate(-2000, 500);
//context.globalAlpha = 1;
//context.translate(-500, 3200);
//const ctx = canvas.getContext('2d');
context.save();
context.globalCompositeOperation = 'copy';
context.strokeStyle = 'transparent';
context.beginPath();
context.lineTo(0, 0);
context.stroke();
context.restore();
// Make the cube half the width of the canvas
var modelSize = canvas.width / 2;
var scale = modelSize * 0.1;
var step = 0;
context.globalAlpha = 1;
// Makes 0 the center of the canvas
var fx = function(vertex) {
return vertex.x * scale;
};
var fy = function(vertex) {
return vertex.y * scale * 8;
};
var fz = function(vertex) {
return vertex.z * scale * 1.1;
};
canvas.addEventListener('click', function(event) {
console.log(event.region);
if (event.region) {
console.log('face is ' + event.region);
}
});
var transform = Mat3.rotationZ(Math.PI / 2);
console.log("transform " + JSON.stringify(transform));
//drawAxisIndicator(context, transform);
for (var i = 1; i < modelPolygons.length; ++i) {
//drawPolygon
console.log(i);
console.log(modelPolygons[i]);
//drawPolygon_ORTHO_XZ(context, modelPolygons[i], fy, fz, arr1[i], transform);
drawPolygon(context, modelPolygons[i], fy, fz, arr1[i]);
}
return canvas;
}
md`Poly6:`
getColors()
//()
function get_model_faces() {
let space_1 = [19, 100, 118, 119, 120, 121, 122];
let space_2 = [39, 101, 123, 124, 125, 126, 127, 128];
let space_3 = [54, 102, 129, 130, 131, 132, 133];
let space_4 = [65, 103, 134, 135, 136, 137, 138];
let space_3_test = [54];
return [space_1, space_2, space_3, space_4];
//return [space_3_test];
}
all_faces = get_model_faces()
function get_edge_refs(faces, face_id) {
//const edge_ids = faces
// .find(f => f.id === face_id)
// .edgeRefs.map(edgeRef => edgeRef.edge_id);
const edgeRefs = faces.find(f => f.id === face_id).edgeRefs;
return edgeRefs;
}
get_edges_vertices = face =>
face.edgeRefs.map(edgeRef => ({
...edgeRef,
// edge: edgesToObject[edgeRef.edge_id],
v1: edgeRef.reverse
? verticesToObject[edgesToObject[edgeRef.edge_id].v2]
: verticesToObject[edgesToObject[edgeRef.edge_id].v1],
v2: edgeRef.reverse
? verticesToObject[edgesToObject[edgeRef.edge_id].v1]
: verticesToObject[edgesToObject[edgeRef.edge_id].v2]
}))
verticesForEdgeLookup = get_edges_vertices(facestoObject[126])
//arrayToObject( get_edges_vertices(facestoObject[54]), "edge_id")
vert_for_face = verticesForEdgeLookup.find(edgeobj => edgeobj.edge_id === "17")
verticesForEdgeObj = arrayToObject(verticesForEdgeLookup, "edge_id")
function edgeForId(edge_id, geometry) {
return geometry.edges.find(e => e.id === edge_id);
}
function edgesForFaceId(face_id, geometry) {
var edges = geometry.faces
.find(f => f.id === face_id)
.edgeRefs.map(eR => edgeForId(eR.edge_id, geometry));
// var vertices =
return edges;
}
//edgesForFaceId(facestoObject[54].id, geometry)
//get_edges(facestoObject[54], geometry.edges)
function get_edges(face, edges) {
const face_edges = edges.filter(edge =>
face.edgeRefs.map(er => er.edge_id).includes(edge.id)
);
//face.edgeRefs.map(e => ({ ...e, ..._.find(edges, { id: e.edge_id }) }));
return face_edges;
}
/*function get_vertes_ids_from_edgeRef(edge_ref_element, edges) {
const edge = edges.find(e => e.id === edge_ref_element.edge_id)
edge_ids: face.edgeRefs.map(eR => eR.edge_id)
return edge;
}
*/
function model_polygon(all_faces) {
var arr2 = new Array();
var verticesForEdge = "";
all_faces.forEach(function(space) {
space.forEach(function(face_id) {
var face = facestoObject[face_id];
var model_polygon = new Array();
var dedup;
var verticesForEdgeLookup;
verticesForEdgeLookup = get_edges_vertices(face);
console.log(verticesForEdgeLookup);
// var v =
//verticesForEdgeLookup.find(edgeobj => edgeobj.edge_id === "17")
verticesForEdgeLookup.forEach(function(edge) {
var edge_id = edge.edge_id;
// var edgeV = edgesToObject[edge_id].v1;
//console.log("edgeV " + edgeV);
var v = edge.v1;
model_polygon.push(v);
});
dedup = dropConsecutiveDups(model_polygon);
arr2.push(new Polygon(model_polygon, face_id));
});
});
return arr2;
}
function dropConsecutiveDups(arr, key = JSON.stringify) {
return arr.filter(
(item, pos) => pos === 0 || key(item) !== key(arr[pos - 1])
);
}
arr2 = model_polygon(all_faces)
geometry = ({
id: "2",
vertices: [
{ id: "11", x: 150, y: -535, z: 0 },
{ id: "12", x: 180, y: -535, z: 0 },
{ id: "13", x: 180, y: -570, z: 0 },
{ id: "14", x: 150, y: -570, z: 0 },
{ id: "31", x: 180, y: -555, z: 0 },
{ id: "32", x: 210, y: -555, z: 0 },
{ id: "33", x: 210, y: -595, z: 0 },
{ id: "34", x: 180, y: -595, z: 0 },
{ id: "49", x: 180, y: -610, z: 0 },
{ id: "50", x: 150, y: -610, z: 0 },
{ id: "57", x: 210, y: -585, z: 0 },
{ id: "58", x: 240, y: -585, z: 0 },
{ id: "59", x: 240, y: -640, z: 0 },
{ id: "60", x: 210, y: -640, z: 0 },
{ id: "69", x: 150, y: -535, z: 8 },
{ id: "70", x: 180, y: -535, z: 8 },
{ id: "71", x: 180, y: -570, z: 8 },
{ id: "72", x: 150, y: -570, z: 8 },
{ id: "73", x: 180, y: -555, z: 8 },
{ id: "74", x: 210, y: -555, z: 8 },
{ id: "75", x: 210, y: -595, z: 8 },
{ id: "76", x: 180, y: -595, z: 8 },
{ id: "77", x: 180, y: -610, z: 8 },
{ id: "78", x: 150, y: -610, z: 8 },
{ id: "79", x: 210, y: -585, z: 8 },
{ id: "80", x: 240, y: -585, z: 8 },
{ id: "81", x: 240, y: -640, z: 8 },
{ id: "82", x: 210, y: -640, z: 8 }
],
edges: [
{ id: "15", v1: "11", v2: "12" },
{ id: "17", v1: "13", v2: "14" },
{ id: "18", v1: "14", v2: "11" },
{ id: "35", v1: "31", v2: "32" },
{ id: "37", v1: "33", v2: "34" },
{ id: "40", v1: "12", v2: "31" },
{ id: "41", v1: "31", v2: "13" },
{ id: "42", v1: "34", v2: "13" },
{ id: "52", v1: "49", v2: "50" },
{ id: "53", v1: "50", v2: "14" },
{ id: "55", v1: "34", v2: "49" },
{ id: "61", v1: "57", v2: "58" },
{ id: "62", v1: "58", v2: "59" },
{ id: "63", v1: "59", v2: "60" },
{ id: "66", v1: "32", v2: "57" },
{ id: "67", v1: "57", v2: "33" },
{ id: "68", v1: "60", v2: "33" },
{ id: "83", v1: "69", v2: "70" },
{ id: "84", v1: "71", v2: "72" },
{ id: "85", v1: "72", v2: "69" },
{ id: "86", v1: "73", v2: "74" },
{ id: "87", v1: "75", v2: "76" },
{ id: "88", v1: "70", v2: "73" },
{ id: "89", v1: "73", v2: "71" },
{ id: "90", v1: "76", v2: "71" },
{ id: "91", v1: "77", v2: "78" },
{ id: "92", v1: "78", v2: "72" },
{ id: "93", v1: "76", v2: "77" },
{ id: "94", v1: "79", v2: "80" },
{ id: "95", v1: "80", v2: "81" },
{ id: "96", v1: "81", v2: "82" },
{ id: "97", v1: "74", v2: "79" },
{ id: "98", v1: "79", v2: "75" },
{ id: "99", v1: "82", v2: "75" },
{ id: "104", v1: "11", v2: "69" },
{ id: "105", v1: "12", v2: "70" },
{ id: "106", v1: "13", v2: "71" },
{ id: "107", v1: "14", v2: "72" },
{ id: "108", v1: "31", v2: "73" },
{ id: "109", v1: "32", v2: "74" },
{ id: "110", v1: "33", v2: "75" },
{ id: "111", v1: "34", v2: "76" },
{ id: "112", v1: "49", v2: "77" },
{ id: "113", v1: "50", v2: "78" },
{ id: "114", v1: "57", v2: "79" },
{ id: "115", v1: "58", v2: "80" },
{ id: "116", v1: "59", v2: "81" },
{ id: "117", v1: "60", v2: "82" }
],
faces: [
{
id: "19",
edgeRefs: [
{ edge_id: "15", reverse: false },
{ edge_id: "40", reverse: false },
{ edge_id: "41", reverse: false },
{ edge_id: "17", reverse: false },
{ edge_id: "18", reverse: false }
]
},
{
id: "39",
edgeRefs: [
{ edge_id: "35", reverse: false },
{ edge_id: "66", reverse: false },
{ edge_id: "67", reverse: false },
{ edge_id: "37", reverse: false },
{ edge_id: "42", reverse: false },
{ edge_id: "41", reverse: true }
]
},
{
id: "54",
edgeRefs: [
{ edge_id: "17", reverse: true },
{ edge_id: "42", reverse: true },
{ edge_id: "55", reverse: false },
{ edge_id: "52", reverse: false },
{ edge_id: "53", reverse: false }
]
},
{
id: "65",
edgeRefs: [
{ edge_id: "61", reverse: false },
{ edge_id: "62", reverse: false },
{ edge_id: "63", reverse: false },
{ edge_id: "68", reverse: false },
{ edge_id: "67", reverse: true }
]
},
{
id: "100",
edgeRefs: [
{ edge_id: "83", reverse: true },
{ edge_id: "88", reverse: true },
{ edge_id: "89", reverse: true },
{ edge_id: "84", reverse: true },
{ edge_id: "85", reverse: true }
]
},
{
id: "101",
edgeRefs: [
{ edge_id: "86", reverse: true },
{ edge_id: "89", reverse: false },
{ edge_id: "90", reverse: true },
{ edge_id: "87", reverse: true },
{ edge_id: "98", reverse: true },
{ edge_id: "97", reverse: true }
]
},
{
id: "102",
edgeRefs: [
{ edge_id: "84", reverse: false },
{ edge_id: "92", reverse: true },
{ edge_id: "91", reverse: true },
{ edge_id: "93", reverse: true },
{ edge_id: "90", reverse: false }
]
},
{
id: "103",
edgeRefs: [
{ edge_id: "94", reverse: true },
{ edge_id: "98", reverse: false },
{ edge_id: "99", reverse: true },
{ edge_id: "96", reverse: true },
{ edge_id: "95", reverse: true }
]
},
{
id: "118",
edgeRefs: [
{ edge_id: "83", reverse: true },
{ edge_id: "104", reverse: true },
{ edge_id: "15", reverse: false },
{ edge_id: "105", reverse: false }
]
},
{
id: "119",
edgeRefs: [
{ edge_id: "88", reverse: true },
{ edge_id: "105", reverse: true },
{ edge_id: "40", reverse: false },
{ edge_id: "108", reverse: false }
]
},
{
id: "120",
edgeRefs: [
{ edge_id: "89", reverse: true },
{ edge_id: "108", reverse: true },
{ edge_id: "41", reverse: false },
{ edge_id: "106", reverse: false }
]
},
{
id: "121",
edgeRefs: [
{ edge_id: "84", reverse: true },
{ edge_id: "106", reverse: true },
{ edge_id: "17", reverse: false },
{ edge_id: "107", reverse: false }
]
},
{
id: "122",
edgeRefs: [
{ edge_id: "85", reverse: true },
{ edge_id: "107", reverse: true },
{ edge_id: "18", reverse: false },
{ edge_id: "104", reverse: false }
]
},
{
id: "123",
edgeRefs: [
{ edge_id: "86", reverse: true },
{ edge_id: "108", reverse: true },
{ edge_id: "35", reverse: false },
{ edge_id: "109", reverse: false }
]
},
{
id: "124",
edgeRefs: [
{ edge_id: "97", reverse: true },
{ edge_id: "109", reverse: true },
{ edge_id: "66", reverse: false },
{ edge_id: "114", reverse: false }
]
},
{
id: "125",
edgeRefs: [
{ edge_id: "98", reverse: true },
{ edge_id: "114", reverse: true },
{ edge_id: "67", reverse: false },
{ edge_id: "110", reverse: false }
]
},
{
id: "126",
edgeRefs: [
{ edge_id: "87", reverse: true },
{ edge_id: "110", reverse: true },
{ edge_id: "37", reverse: false },
{ edge_id: "111", reverse: false }
]
},
{
id: "127",
edgeRefs: [
{ edge_id: "90", reverse: true },
{ edge_id: "111", reverse: true },
{ edge_id: "42", reverse: false },
{ edge_id: "106", reverse: false }
]
},
{
id: "128",
edgeRefs: [
{ edge_id: "89", reverse: true },
{ edge_id: "108", reverse: true },
{ edge_id: "41", reverse: false },
{ edge_id: "106", reverse: false }
]
},
{
id: "129",
edgeRefs: [
{ edge_id: "84", reverse: true },
{ edge_id: "106", reverse: true },
{ edge_id: "17", reverse: false },
{ edge_id: "107", reverse: false }
]
},
{
id: "130",
edgeRefs: [
{ edge_id: "90", reverse: true },
{ edge_id: "111", reverse: true },
{ edge_id: "42", reverse: false },
{ edge_id: "106", reverse: false }
]
},
{
id: "131",
edgeRefs: [
{ edge_id: "93", reverse: true },
{ edge_id: "111", reverse: true },
{ edge_id: "55", reverse: true },
{ edge_id: "112", reverse: false }
]
},
{
id: "132",
edgeRefs: [
{ edge_id: "91", reverse: true },
{ edge_id: "112", reverse: true },
{ edge_id: "52", reverse: false },
{ edge_id: "113", reverse: false }
]
},
{
id: "133",
edgeRefs: [
{ edge_id: "92", reverse: true },
{ edge_id: "113", reverse: true },
{ edge_id: "53", reverse: false },
{ edge_id: "107", reverse: false }
]
},
{
id: "134",
edgeRefs: [
{ edge_id: "94", reverse: true },
{ edge_id: "114", reverse: true },
{ edge_id: "61", reverse: false },
{ edge_id: "115", reverse: false }
]
},
{
id: "135",
edgeRefs: [
{ edge_id: "95", reverse: true },
{ edge_id: "115", reverse: true },
{ edge_id: "62", reverse: false },
{ edge_id: "116", reverse: false }
]
},
{
id: "136",
edgeRefs: [
{ edge_id: "96", reverse: true },
{ edge_id: "116", reverse: true },
{ edge_id: "63", reverse: false },
{ edge_id: "117", reverse: false }
]
},
{
id: "137",
edgeRefs: [
{ edge_id: "99", reverse: true },
{ edge_id: "117", reverse: true },
{ edge_id: "68", reverse: false },
{ edge_id: "110", reverse: false }
]
},
{
id: "138",
edgeRefs: [
{ edge_id: "98", reverse: true },
{ edge_id: "114", reverse: true },
{ edge_id: "67", reverse: false },
{ edge_id: "110", reverse: false }
]
}
]
})
modelVerts = arrayToObject(geometry.vertices, "id")
function verticesForFaceId(face_id, geometry) {
// the geo object - has to have edgeRefs.
return geometry.faces
.find(f => f.id === face_id)
.edgeRefs.map(edgeRef => {
const edge = this.edgeForId(edgeRef.edge_id, geometry),
// look up the vertex associated with v1 unless the
// edge reference on the face is reversed
vertexId = edgeRef.reverse ? edge.v2 : edge.v1;
return this.vertexForId(vertexId, geometry);
});
}
function vertexForId(vertex_id, geometry) {
return geometry.vertices.find(v => v.id === vertex_id);
}
function get_vertex_by_id(vertex_id) {
return modelVerts.find(v => v.id === vertex_id);
}
arrayToObject = (array, keyField) =>
array.reduce((obj, item) => {
obj[item[keyField]] = item;
return obj;
}, {})
edgesToObject = arrayToObject(geometry.edges, "id")
verticesToObject = arrayToObject(geometry.vertices, "id")
facestoObject = arrayToObject(geometry.faces, "id")
//Object.keys(geometry.faces).map(k => facestoObject[k])
//indexed_geo = geometry.faces.reduce((ac, p) => ({ ...ac, [p.id]: p }), {})
//geo_array = Object.keys(indexed_geo).map(k => indexed_geo[k])
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.
