2024-10-14 07:25:12 +00:00
<!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 >
2024-10-22 08:19:56 +00:00
< a href = "../" > ↩ Back to index< / a >
2024-10-22 08:15:53 +00:00
2024-10-14 07:25:12 +00:00
< h1 > 3D glider sampler< / h1 >
2024-10-21 23:31:15 +00:00
<!-- line glider -->
2024-10-14 07:25:12 +00:00
< 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'
2024-10-21 23:31:15 +00:00
}
2024-10-14 07:25:12 +00:00
);
}
< / script >
<!-- intersection line glider -->
2024-10-21 23:31:15 +00:00
< 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 >
2024-10-14 07:25:12 +00:00
< 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'
2024-10-21 23:31:15 +00:00
}
2024-10-14 07:25:12 +00:00
);
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 -->
2024-10-21 23:31:15 +00:00
< 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 >
2024-10-14 07:25:12 +00:00
< 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'
2024-10-21 23:31:15 +00:00
}
2024-10-14 07:25:12 +00:00
);
}
< / script >
<!-- curve glider -->
2024-10-21 23:31:15 +00:00
< 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 >
2024-10-14 07:25:12 +00:00
< 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'
2024-10-21 23:31:15 +00:00
}
2024-10-14 07:25:12 +00:00
);
}
< / script >
<!-- parametric surface glider -->
2024-10-21 23:31:15 +00:00
< h2 > Parametric surface glider< / h2 >
2024-10-22 08:49:25 +00:00
< 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’ ’ < / p >
2024-10-21 23:31:15 +00:00
< div id = "surface-glider-board" class = "jxgbox" style = "width:600px; height:600px" > < / div >
2024-10-14 07:25:12 +00:00
< 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 >
2024-10-21 23:31:15 +00:00
2024-10-14 07:25:12 +00:00
< / body >
< / html >
