Turtle bot: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 11: | Line 11: | ||
<tr><td>Show recording: </td><td><input type="checkbox" id="show_record"></td></tr> | <tr><td>Show recording: </td><td><input type="checkbox" id="show_record"></td></tr> | ||
<tr><td>Show grid: </td><td><input type="checkbox" id="show_grid"></td></tr> | <tr><td>Show grid: </td><td><input type="checkbox" id="show_grid"></td></tr> | ||
<tr><td>Step size: </td><td><input type="number" id="step_size"></td></tr> | <tr><td>Step size: </td><td><input type="number" id="step_size" min="0" max="500"></td></tr> | ||
<tr><td>Angle: </td><td><input type="number" id="angle"></td></tr> | <tr><td>Angle: </td><td><input type="number" id="angle" min="0" max="359"></td></tr> | ||
</table> | </table> | ||
<p> | <p> |
Revision as of 08:25, 14 June 2019
Show recording: | |
Show grid: | |
Step size: | |
Angle: |
The underlying JavaScript code
HTML code:
<style>
button {
min-width:100px;
}
.record {
background-color: #ffaaaa;
}
</style>
Show recording: <input type="checkbox" id="show_record">Show grid: <input type="checkbox" id="show_grid"><br/>
<button id="btn_record">record</button>
<button id="btn_play">play</button>
<button id="btn_clear">clear screen</button>
<table>
<tr>
<td></td>
<td><button id="btn_forward">forward</button></td>
<td></td>
</tr>
<tr>
<td><button id="btn_left">left</button></td>
<td></td>
<td><button id="btn_right">right</button></td>
</tr>
<tr>
<td></td>
<td><button id="btn_back">back</button></td>
<td></td></tr>
</table>
JavaScript code:
const board = JXG.JSXGraph.initBoard('turtlebox', {
boundingbox: [-500, 500, 500, -500],
axis:true,
defaultAxes: {
x: {
visible:false,
ticks: {
label: {
visible: false
}
}
},
y: {
visible:false,
ticks: {
label: {
visible: false
}
}
}
}
});
// Global variables:
var turtle = board.create('turtle', [0,0], {strokeWidth:2, strokeColor: 'blue', arrow: {strokeWidth: 4, strokeColor: 'red'}});
var is_recording = false;
var program = [];
var step;
var angle = 90;
var stepsize = 100;
// Event handlers:
document.getElementById("btn_forward").addEventListener('click', function(evt) {
if (is_recording) {
program.push('turtle.forward(stepsize);');
if (document.getElementById("show_record").checked) { turtle.forward(stepsize); }
} else {
turtle.forward(stepsize);
}
});
document.getElementById('btn_back').addEventListener('click', function(evt) {
if (is_recording) {
program.push('turtle.back(stepsize);');
if (document.getElementById('show_record').checked) { turtle.back(stepsize); }
} else {
turtle.back(stepsize);
}
});
document.getElementById('btn_left').addEventListener('click', function(evt) {
if (is_recording) {
program.push('turtle.left(angle);');
if (document.getElementById('show_record').checked) { turtle.left(angle); }
} else {
turtle.left(angle);
}
});
document.getElementById('btn_right').addEventListener('click', function(evt) {
if (is_recording) {
program.push('turtle.right(angle);');
if (document.getElementById('show_record').checked) { turtle.right(angle); }
} else {
turtle.right(angle);
}
});
document.getElementById('btn_clear').addEventListener('click', function(evt) {
turtle.clearScreen();
});
document.getElementById('btn_record').addEventListener('click', function(evt) {
if (!is_recording) {
is_recording = true;
document.getElementById('btn_record').innerHTML = 'stop';
document.getElementById('btn_record').classList.add('record');
program = [];
board.defaultAxes.x.setAttribute({visible:true});
board.defaultAxes.y.setAttribute({visible:true});
turtle.clearScreen();
} else {
is_recording = false;
document.getElementById('btn_record').innerHTML = 'record';
document.getElementById('btn_record').classList.remove('record');
if (!document.getElementById('show_grid').checked) {
board.defaultAxes.x.setAttribute({visible:false});
board.defaultAxes.y.setAttribute({visible:false});
}
turtle.clearScreen();
}
});
var do_step = function() {
if (step < program.length) {
eval(program[step]);
step++;
setTimeout(do_step, 500);
}
}
document.getElementById('btn_play').addEventListener('click', function(evt) {
step = 0;
do_step();
});
document.getElementById('show_grid').addEventListener('change', function(evt) {
if (document.getElementById('show_grid').checked) {
board.defaultAxes.x.setAttribute({visible:true});
board.defaultAxes.y.setAttribute({visible:true});
} else {
board.defaultAxes.x.setAttribute({visible:false});
board.defaultAxes.y.setAttribute({visible:false});
}
});