Function term in (x,y)<\/em>:\r\n \r\n \r\n \r\n \r\n \r\n \r\n (The function might also depend on the slider value r<\/em>.)\r\n<\/p>","post":"","numboards":1,"description":"3D function plot of functions $f: {\\mathbb R}^2 \\to {\\mathbb R}, \\; (x,y) \\mapsto f(x, y)$.","dimensions":[{"width":"100%","height":null,"aspect-ratio":"1 \/ 1"}],"wider":0,"license":{"id":2,"identifier":"CC BY-SA 4.0","title":"Creative Commons Attribution ShareAlike 4.0 International","free":"- Share\r\n- Adapt","restrictions":"- Attribution\r\n- ShareAlike\r\n- No additional restrictions","with_attribution":1,"link":"https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/","image":"https:\/\/i.creativecommons.org\/l\/by-sa\/4.0\/88x31.png","rank":1},"timestamp":"2024-03-07 09:05:50","visible":1,"tags":[{"id":154,"alias":"3d-1","name":"3D"},{"id":110,"alias":"function-plotting","name":"Function plotting"}],"tag_ids":[154,110],"refers_to":[],"refers_to_ids":[],"authors":[],"authors_ids":[],"unique_ids":["jxgbox-6750f975c011c"],"code_display":"\/\/ Define the id of your board in BOARDID\n\n\/\/ Define some colors, optimized for color blinds\r\nvar colors = [JXG.palette.blue,\r\n JXG.palette.red,\r\n JXG.palette.green,\r\n JXG.palette.black,\r\n JXG.palette.purple,\r\n JXG.palette.yellow,\r\n JXG.palette.skyblue\r\n ],\r\n cnt = 0;\r\n\r\n\/\/ We make board a global variable.\r\n\/\/ This is necessary just on this platform.\r\nwindow.board = JXG.JSXGraph.initBoard(BOARDID, {\r\n boundingbox: [-8, 8, 8, -8],\r\n keepaspectratio: false,\r\n axis: false,\r\n pan: {\r\n enabled: false\r\n }\r\n});\r\n\r\nvar box = [-5, 5];\r\nvar view = board.create('view3d', [\r\n [-6, -3],\r\n [8, 8],\r\n [box, box, box]\r\n], {\r\n xPlaneRear: {visible: false}, yPlaneRear: {visible: false}\r\n});\r\n\r\n\/\/ Create a slider which might be used in the function term\r\n\/\/ using the name 'r'\r\nvar slider = board.create('slider', [[-7, -6], [5, -6], [-3, 1, 4]], { name: 'r' });\r\n\r\n\/\/ Handler for button 'plot'\r\nwindow.start_plot = function() {\r\n var txt = document.getElementById('plot_input').value,\r\n f = board.jc.snippet(txt, true, 'x,y', true), \/\/ JessieCode parsing\r\n el;\r\n\r\n el = view.create('functiongraph3d', [f, box, box], {\r\n strokeColor: colors[cnt],\r\n stepsU: 50,\r\n stepsV: 50,\r\n strokeWidth: 0.5\r\n });\r\n board.update();\r\n \/\/ Cycle through the color array\r\n cnt = (cnt + 1) % colors.length;\r\n}\r\n\r\n\/\/ Handler for button 'reset'\r\nwindow.reset_plot = function() {\r\n \/\/ Complete restart of the construction\r\n JXG.JSXGraph.freeBoard(board);\r\n board = JXG.JSXGraph.initBoard(BOARDID, {\r\n boundingbox: [-8, 8, 8, -8]\r\n });\r\n view = board.create('view3d', [\r\n [-6, -3],\r\n [8, 8],\r\n [box, box, box]\r\n ]);\r\n\r\n slider = board.create('slider', [\r\n [-7, -6],\r\n [5, -6],\r\n [-3, 1, 4]\r\n ], {\r\n name: 'r'\r\n });\r\n cnt = 0;\r\n}\r\n","code_execute_html":"<\/div>\n Share 3D function graph plotter Show plain example JSFiddle Link QR code Copy QR Download QR iFrame <iframe src="https://jsxgraph.uni-bayreuth.de/share/iframe/3d-function-graph" style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" name="JSXGraph example: 3D function graph plotter" allowfullscreen ></iframe> <iframe src="https://jsxgraph.uni-bayreuth.de/share/iframe/3d-function-graph" style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" name="JSXGraph example: 3D function graph plotter" allowfullscreen ></iframe> This code has to HTML <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> <div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; "> <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div> </div> <script type = "text/javascript"> /* This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ const BOARDID = 'board-0'; // 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; } </script> <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> <div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; "> <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div> </div> <script type = "text/javascript"> /* This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ const BOARDID = 'board-0'; // 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; } </script> JavaScript /* This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ const BOARDID = 'your_div_id'; // Insert your id here! // 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. https://creativecommons.org/licenses/by-sa/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ const BOARDID = 'your_div_id'; // Insert your id here! // 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; } Download Print 3D function graph plotter 3D Function plotting 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> <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; } // 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 you have to mention The Center of Mobile Learning with Digital Technology in the credits.
<iframe src="https://jsxgraph.uni-bayreuth.de/share/iframe/3d-function-graph" style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" name="JSXGraph example: 3D function graph plotter" allowfullscreen ></iframe>
<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> <div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; "> <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div> </div> <script type = "text/javascript"> /* This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ const BOARDID = 'board-0'; // 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; } </script>
/* This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ const BOARDID = 'your_div_id'; // Insert your id here! // 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; }
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 you have to mention The Center of Mobile Learning with Digital Technology in the credits.