367 lines
12 KiB
HTML
367 lines
12 KiB
HTML
<!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>
|
||
|
||
<a href="../">↩ Back to index</a>
|
||
|
||
<h1>3D glider sampler</h1>
|
||
|
||
<!-- line glider -->
|
||
|
||
<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>
|
||
|
||
<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 -->
|
||
|
||
<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>
|
||
|
||
<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 -->
|
||
|
||
<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>
|
||
|
||
<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 -->
|
||
|
||
<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>
|
||
|
||
<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 -->
|
||
|
||
<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. Gliders on parametric surfaces have been available for a long time; this summer’s work just made their motion more intuitive by keeping them inside the surface’s parameter range.</p>
|
||
<div id="surface-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
|
||
|
||
<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>
|