Add templates and challenges used in workshop
This commit is contained in:
Aaron Fenyes
commit
6354bc97fe
8 changed files with 1882 additions and 0 deletions
133
challenges/octahedron.html
Normal file
133
challenges/octahedron.html
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
<!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>
|
||||
|
||||
<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’t worry about including the colors; they’re just to emphasize how the polygons fit together.</p>
|
||||
<p>The <code>create</code> call for <code>Polygon3D</code> isn’t documented, but you can look at the polygon sampler for examples.</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>
|
||||
</body>
|
||||
</html>
|
||||
148
challenges/sphere-countours.html
Normal file
148
challenges/sphere-countours.html
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Sphere contour 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>
|
||||
|
||||
<h1>Sphere contour challenge</h1>
|
||||
<p>Can you create something like this using <a href="https://jsxgraph.org/docs/symbols/Sphere3D.html#constructor"><code>Sphere3D</code></a>, <code>Plane3D</code>, and <a href="https://jsxgraph.org/docs/symbols/IntersectionCircle3D.html"><code>IntersectionCircle3D</code></a> elements? Don’t worry about including the colors; they’re just to clarify what happens when you move the center of the sphere.</p>
|
||||
<p>The <code>visible</code> attribute will come in handy.</p>
|
||||
<p>Since the <code>create</code> call for <code>Plane3D</code> isn’t documented, I’ve included an <a href="#create-plane">example</a> below.</p>
|
||||
<div id="sphere-contours" class="jxgbox" style="width:600px; height:600px"></div>
|
||||
|
||||
<h2 id="create-plane">How to create a 3D plane</h2>
|
||||
<p>A <code>Plane3D</code> is created from a base point and two vectors. The base point can be given either in coordinates or as a <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a>. The vectors are given in coordinates.</p>
|
||||
<div id="plane-example" class="jxgbox" style="width:600px; height:600px"></div>
|
||||
|
||||
<!-- a solution to the sphere contour 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(
|
||||
'sphere-contours',
|
||||
{
|
||||
boundingbox: [-8, 8, 8,-8],
|
||||
axis: false,
|
||||
showCopyright: false,
|
||||
showNavigation: false
|
||||
}
|
||||
);
|
||||
let view = board.create(
|
||||
'view3d',
|
||||
[[-4.5, -4.5], [9, 9],
|
||||
[[0, 3], [0, 3], [0, 3]]],
|
||||
{
|
||||
xPlaneRear: {fillOpacity: 0.2, gradient: null},
|
||||
yPlaneRear: {fillOpacity: 0.2, gradient: null},
|
||||
zPlaneRear: {fillOpacity: 0.2, gradient: null}
|
||||
}
|
||||
);
|
||||
|
||||
// create a base point
|
||||
const nCuts = 3*4 + 1;
|
||||
let cutPositions = Array.from({length: nCuts}, (_, k) => 0.25*k);
|
||||
let cuttingPlanes = cutPositions.map(
|
||||
x => view.create(
|
||||
'plane3d',
|
||||
[[x, 1.5, 1.5], [0, 1, 0], [0, 0, 1]],
|
||||
{visible: false}
|
||||
)
|
||||
);
|
||||
|
||||
// create a center for a sphere
|
||||
let center = view.create(
|
||||
'point3d',
|
||||
[1.5, 1.5, 1.5],
|
||||
{
|
||||
withLabel: false,
|
||||
size: 5,
|
||||
strokeWidth: 1,
|
||||
strokeColor: '#300060',
|
||||
fillColor: 'white',
|
||||
gradientSecondColor: '#5000a0',
|
||||
highlightStrokeColor: '#300060'
|
||||
}
|
||||
);
|
||||
|
||||
// create a sphere whose center is the point `center` and whose radius is 1
|
||||
let sphere = view.create(
|
||||
'sphere3d',
|
||||
[center, 1],
|
||||
{visible: false}
|
||||
);
|
||||
|
||||
// intersect the sphere with each of the cutting planes
|
||||
cuttingPlanes.forEach(
|
||||
(plane, k) => view.create(
|
||||
'intersectioncircle3d',
|
||||
[plane, sphere],
|
||||
{strokeColor: `rgb(${255*k/nCuts}, 0, 255)`}
|
||||
)
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- how to create a 3D plane -->
|
||||
<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(
|
||||
'plane-example',
|
||||
{
|
||||
boundingbox: [-8, 8, 8,-8],
|
||||
axis: false,
|
||||
showCopyright: false,
|
||||
showNavigation: false
|
||||
}
|
||||
);
|
||||
let view = board.create(
|
||||
'view3d',
|
||||
[[-4.5, -4.5], [9, 9],
|
||||
[[0, 3], [0, 3], [0, 3]]],
|
||||
{
|
||||
xPlaneRear: {fillOpacity: 0.2, gradient: null},
|
||||
yPlaneRear: {fillOpacity: 0.2, gradient: null},
|
||||
zPlaneRear: {fillOpacity: 0.2, gradient: null}
|
||||
}
|
||||
);
|
||||
|
||||
// create a point
|
||||
let basePoint = view.create(
|
||||
'point3d',
|
||||
[1, 1, 1],
|
||||
{
|
||||
withLabel: false,
|
||||
size: 5,
|
||||
strokeWidth: 1,
|
||||
strokeColor: '#300060',
|
||||
fillColor: 'white',
|
||||
gradientSecondColor: '#5000a0',
|
||||
highlightStrokeColor: '#300060'
|
||||
}
|
||||
);
|
||||
|
||||
// create a plane passing through the point
|
||||
let plane = view.create(
|
||||
'plane3d',
|
||||
[basePoint, [-2, 1, 1], [1, -2, 1]],
|
||||
{
|
||||
strokeWidth: 1,
|
||||
strokeColor: '#00ff80',
|
||||
strokeOpacity: 0.5,
|
||||
fillColor: '#00ff80',
|
||||
fillOpacity: 0.1,
|
||||
gradient: null
|
||||
}
|
||||
);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue