jsxgraph-3d-workshop/templates/sphere-sampler.html

233 lines
6.7 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<title>Sphere 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
<h1>Sphere sampler</h1>
<!-- creating spheres -->
<h2>Creating spheres</h2>
<p>
Right now, there are two ways to create a <a href="https://jsxgraph.org/docs/symbols/Sphere3D.html#constructor"><code>Sphere3D</code></a>:
<ul>
<li>Give its center and its radius.</li>
<li>Give its center a point on it.</li>
</ul>
Point data can be given either in coordinates or as a <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a>.
</p>
<div id="creating-spheres-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(
'creating-spheres-board',
{
boundingbox: [-8, 8, 8,-8],
axis: false,
showcopyright: false,
shownavigation: false
}
);
let view = board.create(
'view3d',
[[-4.5, -4.5], [9, 9],
[[0, 4], [0, 4], [0, 4]]],
{
xPlaneRear: {fillOpacity: 0.2, gradient: null},
yPlaneRear: {fillOpacity: 0.2, gradient: null},
zPlaneRear: {fillOpacity: 0.2, gradient: null}
}
);
// create a sphere by giving:
// - its center (in coordinates)
// - its radius
view.create(
'sphere3d',
[[3, 1, 2], 0.8]
);
// create a sphere by giving:
// - its center (in coordinates)
// - a point on it (in coordinates)
view.create(
'sphere3d',
[[3, 3, 2], [3, 3, 2.8]]
);
// create a sphere by giving:
// - its center (in coordinates)
// - a point on it (as a Point3D)
let sharedPoint = view.create(
'point3d',
[1, 2, 2]
);
view.create(
'sphere3d',
[[1, 1, 2], sharedPoint]
);
// create a sphere by giving:
// - its center (as a Point3D)
// - a point on it (as a Point3D)
let center = view.create(
'point3d',
[1, 3, 2]
);
view.create(
'sphere3d',
[center, sharedPoint]
);
}
</script>
<!-- styling spheres -->
<h2>Styling spheres</h2>
<p>Here are some styling options for spheres and the points that define them.</p>
<div id="styling-spheres-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(
'styling-spheres-board',
{
boundingbox: [-8, 8, 8,-8],
axis: false,
showCopyright: false,
showNavigation: false
}
);
let view = board.create(
'view3d',
[[-4.5, -4.5], [9, 9],
[[0, 4], [0, 4], [0, 4]]],
{
xPlaneRear: {fillOpacity: 0.2, gradient: null},
yPlaneRear: {fillOpacity: 0.2, gradient: null},
zPlaneRear: {fillOpacity: 0.2, gradient: null}
}
);
// create a sphere with a custom stroke style and main color. the center is
// created at the given coordinates, with the style specified in the
// `center` attribute
view.create(
'sphere3d',
[[3, 1, 2], 0.8],
{
strokeColor: '#0080ff',
strokeOpacity: 0.5,
gradientSecondColor: '#0080ff',
center: {
size: 5,
strokeWidth: 1,
strokeColor: '#0000c0',
fillColor: 'white',
gradientSecondColor: '#0000ff',
highlightStrokeColor: '#0000c0',
withLabel: false
}
}
);
// create a sphere with a custom stroke style and main color. the center and
// a point on the sphere are created at the given coordinates, with the
// styles specified in the `center` and `point` attributes
view.create(
'sphere3d',
[[3, 3, 2], [3, 3, 2.8]],
{
strokeColor: '#4000ff',
strokeOpacity: 0.5,
gradientSecondColor: '#4000ff',
center: {
size: 5,
strokeWidth: 1,
strokeColor: '#9000c0',
fillColor: 'white',
gradientSecondColor: '#c000ff',
highlightStrokeColor: '#9000c0',
withLabel: false
},
point: {
strokeWidth: 1,
strokeColor: '#c06000',
fillColor: 'white',
gradientSecondColor: '#ff8000',
highlightStrokeColor: '#c06000',
withLabel: false
}
}
);
// create a sphere with a custom stroke style, main color, and highlight
// color
view.create(
'sphere3d',
[[1, 1, 2], 0.8],
{
strokeColor: '#4000ff',
strokeOpacity: 0.5,
fillColor: '#ff00ff',
gradientSecondColor: '#4000ff',
center: {
size: 5,
strokeWidth: 1,
strokeColor: '#9000c0',
fillColor: 'white',
gradientSecondColor: '#c000ff',
highlightStrokeColor: '#9000c0',
withLabel: false
}
}
);
// create a sphere with a custom stroke style, main color, and opacity
view.create(
'sphere3d',
[[1, 3, 2], 0.8],
{
/*strokeColor: '#0000ff',
strokeOpacity: 0.5,
fillColor: 'white',
gradient: 'radial',
gradientSecondColor: '#0000ff',
gradientFX: 0.7,
gradientFY: 0.3,
fillOpacity: 0.2,*/
strokeColor: '#0080ff',
strokeOpacity: 0.5,
gradientSecondColor: '#0080ff',
fillOpacity: 0.8,
center: {
size: 5,
strokeWidth: 1,
strokeColor: '#0000c0',
fillColor: 'white',
gradientSecondColor: '#0000ff',
highlightStrokeColor: '#0000c0',
withLabel: false
}
}
);
}
</script>
</body>
</html>