367 lines
11 KiB
HTML
367 lines
11 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.</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>
|