JSXGraph share
Share
Turtle bot
This code creates an interactive turtle graphics board with controls for moving forward, backward, turning, and clearing the canvas. You can record sequences of commands, play them back with animation, and toggle a grid display. Parameters like step size, angle, and speed are adjustable.
**AI generated desctiption**
| Show recording: | |
| Show grid: | |
| Step size: | |
| Angle: | |
| Time : |
<table>
<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>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" min="0" max="359"></td>
</tr>
<tr>
<td>Time : </td>
<td><input type="number" id="time" min="0" max="2000"></td>
</tr>
</table>
<p>
<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>// Define the id of your board in BOARDID
const board = JXG.JSXGraph.initBoard(BOARDID, {
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: 2,
strokeColor: 'red' } });
var is_recording = false;
var program = [];
var step;
var angle = 45;
var stepsize = 100;
var time = 300;
// 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();
}
});
// Animation
var do_step = function() {
if (step < program.length) {
eval(program[step]);
step++;
setTimeout(do_step, time);
}
}
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 });
}
});
document.getElementById('step_size').value = stepsize;
document.getElementById('angle').value = angle;
document.getElementById('time').value = time;
document.getElementById('step_size').addEventListener('change', function(evt) {
stepsize = 1 * (document.getElementById('step_size').value);
});
document.getElementById('angle').addEventListener('change', function(evt) {
angle = 1 * (document.getElementById('angle').value);
});
document.getElementById('time').addEventListener('change', function(evt) {
time = 1 * (document.getElementById('time').value);
});
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.