<iframe src="http://jsxgraph.uni-bayreuth.de/share/iframe/random-walks" style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" name="JSXGraph example: Random walks" allowfullscreen ></iframe>
Number of random walks: <select id="number"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="15">15</option> <option value="20" selected>20</option> <option value="30">30</option> <option value="50">50</option> <option value="100">100</option> <option value="200">200</option> </select> <input type="button" value="run simulation" onClick="run()"> <input type="button" value="clear screen" onClick="clearturtle()"> Average square of the distance between starting point and endpoint of the walks: <input type="text" value="" id="output"> <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'; var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-100, 100, 100, -100], keepaspectratio: true }); var t = board.create('turtle'); function run() { var i, j, dist, sumdist = 0.0; var stepSize = 5; t.hideTurtle(); board.suspendUpdate(); var nr = document.getElementById('number').value * 1; for (i = 0; i < nr; i++) { t.setPenColor(JXG.hsv2rgb(Math.round(Math.random() * 255), Math.random(), Math.random())); for (j = 0; j < 100; j++) { var a = Math.floor(360 * Math.random()); t.right(a); t.forward(stepSize); } dist = t.pos[0] * t.pos[0] + t.pos[1] * t.pos[1]; sumdist += dist; t.home(); } document.getElementById('output').value = (sumdist / nr).toFixed(3); board.unsuspendUpdate(); } function clearturtle() { t.cs(); } </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! var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-100, 100, 100, -100], keepaspectratio: true }); var t = board.create('turtle'); function run() { var i, j, dist, sumdist = 0.0; var stepSize = 5; t.hideTurtle(); board.suspendUpdate(); var nr = document.getElementById('number').value * 1; for (i = 0; i < nr; i++) { t.setPenColor(JXG.hsv2rgb(Math.round(Math.random() * 255), Math.random(), Math.random())); for (j = 0; j < 100; j++) { var a = Math.floor(360 * Math.random()); t.right(a); t.forward(stepSize); } dist = t.pos[0] * t.pos[0] + t.pos[1] * t.pos[1]; sumdist += dist; t.home(); } document.getElementById('output').value = (sumdist / nr).toFixed(3); board.unsuspendUpdate(); } function clearturtle() { t.cs(); }
Number of random walks: <select id="number"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="15">15</option> <option value="20" selected>20</option> <option value="30">30</option> <option value="50">50</option> <option value="100">100</option> <option value="200">200</option> </select> <input type="button" value="run simulation" onClick="run()"> <input type="button" value="clear screen" onClick="clearturtle()"> Average square of the distance between starting point and endpoint of the walks: <input type="text" value="" id="output">
// Define the id of your board in BOARDID var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-100, 100, 100, -100], keepaspectratio: true }); var t = board.create('turtle'); function run() { var i, j, dist, sumdist = 0.0; var stepSize = 5; t.hideTurtle(); board.suspendUpdate(); var nr = document.getElementById('number').value * 1; for (i = 0; i < nr; i++) { t.setPenColor(JXG.hsv2rgb(Math.round(Math.random() * 255), Math.random(), Math.random())); for (j = 0; j < 100; j++) { var a = Math.floor(360 * Math.random()); t.right(a); t.forward(stepSize); } dist = t.pos[0] * t.pos[0] + t.pos[1] * t.pos[1]; sumdist += dist; t.home(); } document.getElementById('output').value = (sumdist / nr).toFixed(3); board.unsuspendUpdate(); } function clearturtle() { t.cs(); }
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.