Contour lines in 3d using implicitcurve

by WigandR

HTML

<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<h2>
Level lines in 3d
</h2>
<p>
This templates demonstrates the usage of implict curves to compute level lines and plot them at the graph and in a plane.
</p>
<p>



<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>

CSS

body {
  font-family: sans-serif;
}

JavaScript

"use strict"
  JXG.Options.text.useMathJax = true;

  var board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-8, 8, 8, -10],
    keepaspectratio: false,
    axis: false
  });
  /* enter function as string here */
  //var inputFun ="x^0.5*y^0.5"    ;
  var inputFun ="s.Value()*x^2+2*t.Value()*x*y+s.Value()*y^2"    ;
  
  /* number of niveau lines */
  var niveaunum = 5;
  /* set up blue function graph and countourlines 
  var boxx = [0, 2];
  var boxy = [0, 2];
  */
  var boxx = [-1, 1.5];
  var boxy = [-1, 1.5];
  var boxz = [-1, 1.5];
  /* set view box and gray graph without contourlines*/
  var box = [-2, 2];
  var view = board.create('view3d',
    [
      [-6, -6], [8, 8],
      [box,box,box]
    ],
    {
      xPlaneRear: { visible: false },
      xPlaneRearYAxis: { visible: false },
      xPlaneRearZAxis: { visible: false },
      yPlaneRear: { visible: false },
      yPlaneRearXAxis: { visible: false },
      yPlaneRearZAxis: { visible: false },
      zPlaneRear: { visible: false },
      zPlaneRearXAxis: { visible: true },
      zPlaneRearYAxis: { visible: true },
      keepaspectratio: true,
      axesPosition: 'border'
    });

    board.renderer.container.style.backgroundColor = '#f9f9fb';

  // set variable names
  var F, txtFx, txtFy, cl, c, c2, cimp, c3d, c3d1;
  var cf=[], cf2=[], cf3=[];
  var niveauh, niveaumax, niveaumin;
  
  
  let zeropoint = view.create('point3d',[0,0,0],{visible:false});
  let plane1 = view.create(
        "plane3d",
        [zeropoint, [1,0,0], [0,1,0], [box[0],box[1]], [box[0],box[1]]],
        {
            
            //strokeOpacity: 0,
            fillOpacity: 0.2,
            strokeColor: JXG.palette.black,
            gradientSecondColor: JXG.palette.black,
            gradientSecondOpacity: 0.2
        }
      );

  var s = board.create('slider',[[-1.5,7],[2,7],[-1.5,1,1.5]],
    {name:'s',
     snapWidth:0.05,
       point1: {
         frozen: true
       },
       point2: {
         frozen: true
       ...