Level 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.
</p>
<p>

<strong>Usage: </strong><br/>

f(x,y)=... Enter a function and click in plot <br/>
c= ... Enter value for \(f(x,y)=c\) <br/>
To show or update the level line, click on "set level"
</p>
<p>
Internal variables:<br/>
<code>cimp</code>: curve to hold \(M=\{(x,y)\in\mathbb{R}^2:f(x,y)=c\}\)<br/>
<code>c3d</code>: curve in xy-plane on \(z_{min}\)<br/>
<code>c3d1</code>: curve in xy-plane on the graph of \(f\)<br/>
</p>

During generating <code>c3d</code> and <code>c3d1</code> it is checked, that the points will be in the box of the <code>view3d</code> object.

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

CSS

body {
  font-family: sans-serif;
}

JavaScript

JXG.Options.text.useMathJax = true;

var board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox: [-8, 8, 8, -10],
  keepaspectratio: false,
  axis: false
});
var box = [0, 4];
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
    },
  });
board.renderer.container.style.backgroundColor = '#f9f9fb';


// set variable names
var F, txtFx, txtFy, cl, c, cimp, c3d, c3d1;
var inputFun = board.create("input", [-5, 7,
  //"sin(2*x)*cos(2*y)"
  //"x^2+y^2"
  "x^0.5*y^0.5"
  , "\\(f(x,y)=\\)"
], {
  cssStyle: "width: 100px",
});
var inputPlot = board.create("button", [0.5, 7, "Plot", function() {
  plot();
}], {
  cssStyle: "width: 50px",
});
var inputLevelTxt = board.create("input", [3, 7, "1.5", "\\(c=\\)"], {
  cssStyle: "width: 25px",
});
var inputLevel = board.create("button", [5, 7, "set level", () => {
  plotContourLine();
}], {
  cssStyle: "width: 70px",
});

/* object to hold the implicit curve of a level set*/
cimp = board.create('curve', [
  [],
  []
]);
/* hold the countour line in xy-plane*/
c3d = view.create('curve3d', [
  [],
  [],
  []
], {
  strokeWidth: 3
});
/* hold the countour line on graph */
c3d1 = view.create('curve3d', [
  [],
  [],
  []
], {
  strokeWidth: 3
});
c3d.updateDataArray = function() {
  var i;
  var check;
  this.dataX = [];
  this.dataY = [];
  this.dataZ = [];
  for (i = 0; i < cimp.numberPoints; i++) {
    check = cimp.points[i].usrCoords[1];
    if (check > box[0] && check < box[1]) {
      this.dataX.push(check);
    } else {
      this.dataX.push(NaN);
    }
    check = cimp.points[i].usrCoords[2];
    if (check > box[0] && check < box[1]) {
      this.dataY.push(check);
    } else {
     ...