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
358
templates/glider-sampler.html
Normal file
358
templates/glider-sampler.html
Normal file
|
|
@ -0,0 +1,358 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>3D glider sampler</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>3D glider sampler</h1>
|
||||
|
||||
<h2>Line glider</h2>
|
||||
<p>The large point is a glider on the line segment defined by the two small points. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/line3d_glider.html"><code>Line3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
|
||||
<div id="line-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
|
||||
|
||||
<h2>Intersection line glider</h2>
|
||||
<p>The large point is a glider on the line where the two planes intersect.</p>
|
||||
<div id="intersection-line-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
|
||||
|
||||
<h2>Circle glider</h2>
|
||||
<p>The point is a glider on the circle. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/circle3d_glider.html"><code>Circle3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
|
||||
<p>Right now, the glider gets caught on the point where the circle starts and ends. If you can overcome this limitation, try contributing some code!</p>
|
||||
<div id="circle-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
|
||||
|
||||
<h2>Curve glider</h2>
|
||||
<p>The point is a glider on the curve. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/curve3d_glider.html"><code>Curve3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
|
||||
<div id="curve-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
|
||||
|
||||
<h2>Parametric surface glider</h2>
|
||||
<p>The point is a glider on the parametric surface. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/parametricsurface3d_glider.html"><code>ParametricSurface3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
|
||||
<div id="surface-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
|
||||
|
||||
<!-- line glider -->
|
||||
<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(
|
||||
'line-glider-board',
|
||||
{
|
||||
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 line
|
||||
let p1 = view.create(
|
||||
'point3d',
|
||||
[0.5, 0.5, 0.5],
|
||||
{
|
||||
withLabel: false,
|
||||
strokeWidth: 1,
|
||||
strokeColor: '#300060',
|
||||
fillColor: 'white',
|
||||
gradientSecondColor: '#5000a0',
|
||||
highlightStrokeColor: '#300060'
|
||||
}
|
||||
);
|
||||
let p2 = view.create(
|
||||
'point3d',
|
||||
[2.5, 2.5, 2.5],
|
||||
{
|
||||
withLabel: false,
|
||||
strokeWidth: 1,
|
||||
strokeColor: '#300060',
|
||||
fillColor: 'white',
|
||||
gradientSecondColor: '#5000a0',
|
||||
highlightStrokeColor: '#300060'
|
||||
}
|
||||
);
|
||||
let line = view.create('line3d', [p1, p2]);
|
||||
|
||||
// create a glider on the line
|
||||
let glider = view.create(
|
||||
'point3d',
|
||||
[1.5, 1.5, 1.5, line],
|
||||
{
|
||||
withLabel: false,
|
||||
size: 5,
|
||||
strokeWidth: 1,
|
||||
strokeColor: '#900060',
|
||||
fillColor: 'white',
|
||||
gradientSecondColor: '#fe00a0',
|
||||
highlightStrokeColor: '#900060'
|
||||
}
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- intersection line glider -->
|
||||
<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(
|
||||
'intersection-line-glider-board',
|
||||
{
|
||||
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 and two planes passing though it
|
||||
let basePoint = view.create(
|
||||
'point3d',
|
||||
[1, 1, 1],
|
||||
{
|
||||
withLabel: false,
|
||||
strokeWidth: 1,
|
||||
strokeColor: '#300060',
|
||||
fillColor: 'white',
|
||||
gradientSecondColor: '#5000a0',
|
||||
highlightStrokeColor: '#300060'
|
||||
}
|
||||
);
|
||||
let planeHoriz = view.create(
|
||||
'plane3d',
|
||||
[basePoint, [1, 0, 0], [0, 1, 0]],
|
||||
{
|
||||
strokeWidth: 1,
|
||||
strokeColor: '#0000ff',
|
||||
strokeOpacity: 0.5,
|
||||
fillColor: '#0000ff',
|
||||
fillOpacity: 0.1,
|
||||
gradient: null
|
||||
}
|
||||
);
|
||||
let planeSloped = view.create(
|
||||
'plane3d',
|
||||
[basePoint, [-2, 1, 1], [1, -2, 1]],
|
||||
{
|
||||
strokeWidth: 1,
|
||||
strokeColor: '#00ff80',
|
||||
strokeOpacity: 0.5,
|
||||
fillColor: '#00ff80',
|
||||
fillOpacity: 0.1,
|
||||
gradient: null
|
||||
}
|
||||
);
|
||||
|
||||
// create the line where the two planes intersect
|
||||
let intersectionLine = view.create(
|
||||
'intersectionline3d',
|
||||
[planeHoriz, planeSloped],
|
||||
{
|
||||
strokeOpacity: 0.5,
|
||||
highlightStrokeColor: 'black',
|
||||
highlightStrokeOpacity: 0.5
|
||||
}
|
||||
);
|
||||
|
||||
// create a glider on the intersection line
|
||||
let intersectionLineGlider = view.create(
|
||||
'point3d',
|
||||
[1.5, 0.5, 1, intersectionLine],
|
||||
{
|
||||
withLabel: false,
|
||||
size: 5,
|
||||
strokeWidth: 1,
|
||||
strokeColor: '#900060',
|
||||
fillColor: 'white',
|
||||
gradientSecondColor: '#fe00a0',
|
||||
highlightStrokeColor: '#900060'
|
||||
}
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- circle glider -->
|
||||
<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(
|
||||
'circle-glider-board',
|
||||
{
|
||||
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 circle
|
||||
let circle = view.create(
|
||||
'circle3d',
|
||||
[[1.5, 1.5, 1.5], [1, 1, 1], 1]
|
||||
);
|
||||
|
||||
// create a glider on the circle
|
||||
let glider = view.create(
|
||||
'point3d',
|
||||
[2, 0.5, 0.5, circle],
|
||||
{
|
||||
withLabel: false,
|
||||
size: 5,
|
||||
strokeWidth: 1,
|
||||
strokeColor: '#900060',
|
||||
fillColor: 'white',
|
||||
gradientSecondColor: '#fe00a0',
|
||||
highlightStrokeColor: '#900060'
|
||||
}
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- curve glider -->
|
||||
<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(
|
||||
'curve-glider-board',
|
||||
{
|
||||
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 3D curve
|
||||
let curve = view.create(
|
||||
'curve3d',
|
||||
[
|
||||
(t) => 2.5 + t*t*(-8 + t*t*8),
|
||||
(t) => 1.5 + t*(5 + t*t*(-20 + t*t*16)),
|
||||
(t) => 1.5 + t*(-3 + t*t*4),
|
||||
[-1, 1]
|
||||
]
|
||||
);
|
||||
|
||||
// create a gilder on the curve
|
||||
let glider = view.create(
|
||||
'point3d',
|
||||
[2.5, 1.5, 1.5, curve],
|
||||
{
|
||||
withLabel: false,
|
||||
size: 5,
|
||||
strokeWidth: 1,
|
||||
strokeColor: '#900060',
|
||||
fillColor: 'white',
|
||||
gradientSecondColor: '#fe00a0',
|
||||
highlightStrokeColor: '#900060'
|
||||
}
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- parametric surface glider -->
|
||||
<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(
|
||||
'surface-glider-board',
|
||||
{
|
||||
boundingbox: [-8, 8, 8,-8],
|
||||
axis: false,
|
||||
showCopyright: false,
|
||||
showNavigation: false
|
||||
}
|
||||
);
|
||||
let view = board.create(
|
||||
'view3d',
|
||||
[[-4.5, -4.5], [9, 9],
|
||||
[[0, 2], [0, 2], [0, 2]]],
|
||||
{
|
||||
xPlaneRear: {fillOpacity: 0.2, gradient: null},
|
||||
yPlaneRear: {fillOpacity: 0.2, gradient: null},
|
||||
zPlaneRear: {fillOpacity: 0.2, gradient: null}
|
||||
}
|
||||
);
|
||||
|
||||
// create a parametric surface, based on a modified Hammer projection
|
||||
let rModHammer = (u, v) => Math.sin(u)*Math.cos(v) / Math.sqrt(1 + 3*Math.cos(u)*Math.cos(v));
|
||||
let zModHammer = (u, v) => Math.sin(v) / Math.sqrt(1 + 3*Math.cos(u)*Math.cos(v));
|
||||
let twistFn = (u) => Math.PI/2 * Math.tanh(2*u);
|
||||
let surface = view.create('parametricsurface3d', [
|
||||
(u, v) => 1 + Math.cos(twistFn(v)) * rModHammer(u, v),
|
||||
(u, v) => 1 + Math.sin(twistFn(v)) * rModHammer(u, v),
|
||||
(u, v) => 1 + zModHammer(u, v),
|
||||
[-Math.PI/3, Math.PI/3],
|
||||
[-Math.PI/2, Math.PI/2]
|
||||
], {
|
||||
strokeColor: '#b080f0',
|
||||
stepsU: 40,
|
||||
stepsV: 60
|
||||
});
|
||||
|
||||
// create a glider on the surface
|
||||
let glider = view.create(
|
||||
'point3d',
|
||||
[1, 1, 1, surface],
|
||||
{
|
||||
withLabel: false,
|
||||
size: 5,
|
||||
strokeWidth: 1,
|
||||
strokeColor: '#900060',
|
||||
fillColor: 'white',
|
||||
gradientSecondColor: '#fe00a0',
|
||||
highlightStrokeColor: '#900060'
|
||||
}
|
||||
);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue