233 lines
6.7 KiB
HTML
233 lines
6.7 KiB
HTML
<!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>
|
|
|
|
<a href="../">↩ Back to index</a>
|
|
|
|
<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>
|