3D function graph
3D function plot of functions $f: {\mathbb R}^2 \to {\mathbb R}, \; (x,y) \mapsto f(x, y)$.
Function term in (x,y):
(The function might also depend on the slider value r.)
<p>Function term in <em>(x,y)</em>:
<br>
<input type"text" id="plot_input" value="sin(x * y * r / 4)" style="width: 10em; margin-top: 1rem;">
<br>
<input type="button" id="plot_start" value="plot" onClick="start_plot();" style="width: 4em; margin-top: 1rem;">
<input type="button" id="plot_reset" value="reset" onClick="reset_plot();" style="width: 4em; margin-top: 1rem;">
<br><br>
(The function might also depend on the slider value <em>r</em>.)
</p>// Define the id of your board in BOARDID
// Define some colors, optimized for color blinds
var colors = [JXG.palette.blue,
JXG.palette.red,
JXG.palette.green,
JXG.palette.black,
JXG.palette.purple,
JXG.palette.yellow,
JXG.palette.skyblue
],
cnt = 0;
// We make board a global variable.
// This is necessary just on this platform.
window.board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-8, 8, 8, -8],
keepaspectratio: false,
axis: false,
pan: {
enabled: false
}
});
var box = [-5, 5];
var view = board.create('view3d', [
[-6, -3],
[8, 8],
[box, box, box]
], {
xPlaneRear: {visible: false}, yPlaneRear: {visible: false}
});
// Create a slider which might be used in the function term
// using the name 'r'
var slider = board.create('slider', [[-7, -6], [5, -6], [-3, 1, 4]], { name: 'r' });
// Handler for button 'plot'
window.start_plot = function() {
var txt = document.getElementById('plot_input').value,
f = board.jc.snippet(txt, true, 'x,y', true), // JessieCode parsing
el;
el = view.create('functiongraph3d', [f, box, box], {
strokeColor: colors[cnt],
stepsU: 50,
stepsV: 50,
strokeWidth: 0.5
});
board.update();
// Cycle through the color array
cnt = (cnt + 1) % colors.length;
}
// Handler for button 'reset'
window.reset_plot = function() {
// Complete restart of the construction
JXG.JSXGraph.freeBoard(board);
board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-8, 8, 8, -8]
});
view = board.create('view3d', [
[-6, -3],
[8, 8],
[box, box, box]
]);
slider = board.create('slider', [
[-7, -6],
[5, -6],
[-3, 1, 4]
], {
name: 'r'
});
cnt = 0;
}
This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note that you have to mention The Center of Mobile Learning with Digital Technology in the credits.