jsxgraph-3d-workshop/templates/glider-sampler.html
2024-10-22 01:49:25 -07:00

367 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 summers work just made their motion more intuitive by keeping them inside the surfaces 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>