Sphere sampler

by fareycircles

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>

<h1>Sphere sampler</h1>

<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>

<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>

<!-- creating spheres -->
<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...