2024-10-14 07:25:12 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > Octahedron challenge< / title >
< meta charset = "UTF-8" / >
< link rel = "stylesheet" type = "text/css" href = "https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" / >
< script type = "text/javascript" charset = "UTF-8" src = "https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js" > < / script >
< / head >
< body >
2024-10-22 08:19:56 +00:00
< a href = "../" > ↩ Back to index< / a >
2024-10-22 08:15:53 +00:00
2024-10-14 07:25:12 +00:00
< h1 > Octahedron challenge< / h1 >
< p > Can you create something like this using < a href = "https://jsxgraph.org/docs/symbols/Point3D.html#constructor" > < code > Point3D< / code > < / a > and < a href = "https://jsxgraph.org/docs/symbols/Polygon3D.html#constructor" > < code > Polygon3D< / code > < / a > elements? Don’ ’ < / p >
< p > The < code > create< / code > call for < code > Polygon3D< / code > isn’ < / p >
< div id = "octahedron-from-triangles" class = "jxgbox" style = "width:600px; height:600px" > < / div >
<!-- a solution to the octahedron challenge -->
< script type = "text/javascript" >
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
{
// create a JSXGraph board and draw a 3D view on it
let board = JXG.JSXGraph.initBoard(
'octahedron-from-triangles',
{
boundingbox: [-8, 8, 8,-8],
axis: false,
showCopyright: false,
showNavigation: false
}
);
let view = board.create(
'view3d',
[[-4.5, -4.5], [9, 9],
[[0, 4], [0, 4], [0, 4]]],
{
xPlaneRear: {fillOpacity: 0.2, gradient: null},
yPlaneRear: {fillOpacity: 0.2, gradient: null},
zPlaneRear: {fillOpacity: 0.2, gradient: null},
depthOrderPoints: true
}
);
// create the vertices of the octahedron
let vertices = [];
coords = [
[1, 2, 2],
[3, 2, 2],
[2, 1, 2],
[2, 3, 2],
[2, 2, 1],
[2, 2, 3]
];
colors = [
'#f08',
'#4f0',
'#f60',
'#0af',
'#40f',
'#fb0'
];
for (i in coords) {
vertices.push(view.create(
'point3d',
coords[i],
{
withLabel: false,
size: 5,
strokeColor: 'none',
fillColor: 'white',
gradientSecondColor: colors[i],
highlightStrokeWidth: 1,
highlightStrokeColor: '#777'
}
));
}
// create the faces of the octahedron
view.create(
'polygon3d',
[vertices[0], vertices[2], vertices[5]],
{
fillColor: '#f85',
fillOpacity: 0.2,
borders: {
strokeWidth: 2,
strokeColor: '#f85',
highlightStrokeColor: '#777'
}
}
);
view.create(
'polygon3d',
[vertices[1], vertices[3], vertices[5]],
{
fillColor: '#af0',
fillOpacity: 0.2,
borders: {
strokeWidth: 2,
strokeColor: '#af0',
highlightStrokeColor: '#777'
}
}
);
view.create(
'polygon3d',
[vertices[0], vertices[3], vertices[4]],
{
fillColor: '#a0f',
fillOpacity: 0.2,
borders: {
strokeWidth: 2,
strokeColor: '#a0f',
highlightStrokeColor: '#777'
}
}
);
view.create(
'polygon3d',
[vertices[1], vertices[2], vertices[4]],
{
fillColor: '#a87',
fillOpacity: 0.2,
borders: {
strokeWidth: 2,
strokeColor: '#a87',
highlightStrokeColor: '#777'
}
}
);
}
< / script >
2024-10-22 08:15:53 +00:00
2024-10-14 07:25:12 +00:00
< / body >
< / html >
