radioactive-decay-sphere

by pedritomelenas

HTML

<!-- Include JSXGraph -->
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<!-- Include MathJax -->
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-svg.js"></script>

<!--change width at your will; now set to 50% of the text area-->
<div id="jxgbox" class="jxgbox" style="width:80%; aspect-ratio:1/1; margin: auto; border: 0pt solid black;">
</div>

JavaScript

JXG.Options.text.useMathJax = true;
function sphere(divID){
  var board = JXG.JSXGraph.initBoard(divID, {
              boundingbox: [-10, 10, 10, -10],
              keepaspectratio: false,
              axis: false,
              showCopyright: false,
              showNavigation: false
          });  
          
  var view = board.create(
          'view3d',
          [[-6, -3], [8, 8],
          [[-3, 3], [-3, 3], [-3, 3]]],
          {
              xPlaneRear: {fillOpacity: 0.2, gradient: null},
              yPlaneRear: {fillOpacity: 0.2, gradient: null},
              zPlaneRear: {fillOpacity: 0.2, gradient: null}
          }
      );

  var r = board.create('slider', [[-9, -8], [5, -8], [0, 2, 4]], { name: 'r' });

  var center = view.create('point3d', [0, 0, 0], {withLabel: false, size: 2});

  var sphere = view.create('sphere3d', [center, () => r.Value()], {fillOpacity: () => 1- Math.sqrt(r.Value())/4, fillColor: 'red', strokeColor: 'lightred', gradientSecondColor:'red', highlight:false });
} 

sphere('jxgbox');