Turtle bot

From JSXGraph Wiki
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Show recording:
Show grid:
Step size:
Angle:
Time :

The underlying JavaScript code

HTML code:

<style>
button {
  min-width:100px;
}
.record {
  background-color: #ffaaaa;
}
</style>
<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>

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: 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);
});