Turtle bot: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(38 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
<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>
</html>
<jsxgraph width="500" height="500" box="turtlebox">
<jsxgraph width="500" height="500" box="turtlebox">
const board = JXG.JSXGraph.initBoard('turtlebox', {  
const board = JXG.JSXGraph.initBoard('turtlebox', {  
    boundingbox: [-500, 500, 500, -500], axis:true
  boundingbox: [-500, 500, 500, -500],  
  axis:true,
  defaultAxes: {
    x: {
      visible:false,
      ticks: {
        label: {
          visible: false
        }
      }
    },
    y: {
      visible:false,
      ticks: {
        label: {
          visible: false
        }
      }
    }
  }
});
});


board.defaultAxes.x.setAttribute({visible:false});
// Global variables:
board.defaultAxes.y.setAttribute({visible:false});
var turtle = board.create('turtle', [0,0], {strokeWidth:2, strokeColor: 'blue', arrow: {strokeWidth: 2, strokeColor: 'red'}});
var turtle = board.create('turtle', [0,0]);
var is_recording = false;
var is_recording = false;
var program = [];
var program = [];
var step;
var step;
var angle = 90;
var angle = 45;
var stepsize = 100;
var stepsize = 100;
var time = 300;


document.getElementById("btn_forward").addEventListener("click", function(evt) {
// Event handlers:
if (is_recording) {
document.getElementById("btn_forward").addEventListener('click', function(evt) {
program.push('turtle.forward(stepsize);');
  if (is_recording) {
    if (document.getElementById("show_record").checked) { turtle.forward(100); }
    program.push('turtle.forward(stepsize);');
    } else {
    if (document.getElementById("show_record").checked) { turtle.forward(stepsize); }
    turtle.forward(stepsize);
  } else {
    }
    turtle.forward(stepsize);
   
  }
});  
});  
document.getElementById("btn_back").addEventListener("click", function(evt) {
 
if (is_recording) {
document.getElementById('btn_back').addEventListener('click', function(evt) {
program.push('turtle.back(stepsize);');
  if (is_recording) {
    if (document.getElementById("show_record").checked) { turtle.back(100); }
    program.push('turtle.back(stepsize);');
    } else {
    if (document.getElementById('show_record').checked) { turtle.back(stepsize); }
    turtle.back(stepsize);
  } else {
    }
    turtle.back(stepsize);
  }
});  
});  
document.getElementById("btn_left").addEventListener("click", function(evt) {
 
if (is_recording) {
document.getElementById('btn_left').addEventListener('click', function(evt) {
program.push('turtle.left(angle);');
  if (is_recording) {
    if (document.getElementById("show_record").checked) { turtle.left(45); }
    program.push('turtle.left(angle);');
    } else {
    if (document.getElementById('show_record').checked) { turtle.left(angle); }
    turtle.left(angle);
  } else {
    }
    turtle.left(angle);
  }
});  
});  
document.getElementById("btn_right").addEventListener("click", function(evt) {
 
if (is_recording) {
document.getElementById('btn_right').addEventListener('click', function(evt) {
program.push('turtle.right(angle);');
  if (is_recording) {
    if (document.getElementById("show_record").checked) { turtle.right(45); }
    program.push('turtle.right(angle);');
    } else {
    if (document.getElementById('show_record').checked) { turtle.right(angle); }
    turtle.right(angle);
  } else {
    }
    turtle.right(angle);
  }
});  
});  
document.getElementById("btn_clear").addEventListener("click", function(evt) {
 
turtle.clearScreen();
document.getElementById('btn_clear').addEventListener('click', function(evt) {
  turtle.clearScreen();
});  
});  


document.getElementById("btn_record").addEventListener("click", function(evt) {
document.getElementById('btn_record').addEventListener('click', function(evt) {
if (!is_recording) {
  if (!is_recording) {
is_recording = true;
    is_recording = true;
     document.getElementById("btn_record").innerHTML = "stop";
     document.getElementById('btn_record').innerHTML = 'stop';
     document.getElementById("btn_record").classList.add('record');  
     document.getElementById('btn_record').classList.add('record');  
     program = [];
     program = [];
     board.defaultAxes.x.setAttribute({visible:true});
     board.defaultAxes.x.setAttribute({visible:true});
Line 60: Line 122:
     turtle.clearScreen();
     turtle.clearScreen();
   } else {
   } else {
is_recording = false;
    is_recording = false;
     document.getElementById("btn_record").innerHTML = "record";
     document.getElementById('btn_record').innerHTML = 'record';
     document.getElementById("btn_record").classList.remove('record');  
     document.getElementById('btn_record').classList.remove('record');  
     board.defaultAxes.x.setAttribute({visible:false});
      
    board.defaultAxes.y.setAttribute({visible:false});
    if (!document.getElementById('show_grid').checked) {
      board.defaultAxes.x.setAttribute({visible:false});
      board.defaultAxes.y.setAttribute({visible:false});
    }
 
     turtle.clearScreen();
     turtle.clearScreen();
   }
   }
});  
});  


// Animation
var do_step = function() {
var do_step = function() {
if (step < program.length) {
  if (step < program.length) {
  eval(program[step]);
    eval(program[step]);
     step++;
     step++;
     setTimeout(do_step, 500);
     setTimeout(do_step, time);
   }
   }
}
}
document.getElementById("btn_play").addEventListener("click", function(evt) {
document.getElementById('btn_play').addEventListener('click', function(evt) {
    step = 0;
  step = 0;
//eval(program);
  do_step();     
  do_step();     
});  
});  


</jsxgraph>
document.getElementById('show_grid').addEventListener('change', function(evt) {
<html>
  if (document.getElementById('show_grid').checked) {
<style>
    board.defaultAxes.x.setAttribute({visible:true});
button {
    board.defaultAxes.y.setAttribute({visible:true});
  min-width:100px;
  } else {
}
    board.defaultAxes.x.setAttribute({visible:false});
.record {
    board.defaultAxes.y.setAttribute({visible:false});
  background-color: #ffaaaa;
  }
}
});
</style>
 
Show recording: <input type="checkbox" id="show_record"><br/>
document.getElementById('step_size').value = stepsize;
<button id="btn_record">record</button>
document.getElementById('angle').value = angle;
<button id="btn_play">play</button>
document.getElementById('time').value = time;
<button id="btn_clear">clear screen</button>
 
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);
});


<table>
document.getElementById('time').addEventListener('change', function(evt) {
<tr>
    time = 1 * (document.getElementById('time').value);
  <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>
</html>


</jsxgraph>


===The underlying JavaScript code===
===The underlying JavaScript code===
Line 128: Line 188:
}
}
</style>
</style>
Show recording: <input type="checkbox" id="show_record"><br/>
<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_record">record</button>
<button id="btn_play">play</button>
<button id="btn_play">play</button>
Line 156: Line 223:
<source lang="javascript">
<source lang="javascript">
const board = JXG.JSXGraph.initBoard('turtlebox', {  
const board = JXG.JSXGraph.initBoard('turtlebox', {  
    boundingbox: [-500, 500, 500, -500], axis:true
  boundingbox: [-500, 500, 500, -500],  
  axis:true,
  defaultAxes: {
    x: {
      visible:false,
      ticks: {
        label: {
          visible: false
        }
      }
    },
    y: {
      visible:false,
      ticks: {
        label: {
          visible: false
        }
      }
    }
  }
});
});
board.defaultAxes.x.setAttribute({visible:false});
board.defaultAxes.y.setAttribute({visible:false});


// Global variables:
// Global variables:
var turtle = board.create('turtle', [0,0]);
var turtle = board.create('turtle', [0,0], {strokeWidth:2, strokeColor: 'blue', arrow: {strokeWidth: 2, strokeColor: 'red'}});
var is_recording = false;
var is_recording = false;
var program = [];
var program = [];
var step;
var step;
var angle = 90;
var angle = 45;
var stepsize = 100;
var stepsize = 100;
var time = 300;


// Event handlers:
// Event handlers:
document.getElementById("btn_forward").addEventListener("click", function(evt) {
document.getElementById("btn_forward").addEventListener('click', function(evt) {
if (is_recording) {
  if (is_recording) {
program.push('turtle.forward(stepsize);');
    program.push('turtle.forward(stepsize);');
    if (document.getElementById("show_record").checked) { turtle.forward(100); }
    if (document.getElementById("show_record").checked) { turtle.forward(stepsize); }
    } else {
  } else {
    turtle.forward(stepsize);
    turtle.forward(stepsize);
    }
  }
   
});  
});  
document.getElementById("btn_back").addEventListener("click", function(evt) {
 
if (is_recording) {
document.getElementById('btn_back').addEventListener('click', function(evt) {
program.push('turtle.back(stepsize);');
  if (is_recording) {
    if (document.getElementById("show_record").checked) { turtle.back(100); }
    program.push('turtle.back(stepsize);');
    } else {
    if (document.getElementById('show_record').checked) { turtle.back(stepsize); }
    turtle.back(stepsize);
  } else {
    }
    turtle.back(stepsize);
  }
});  
});  
document.getElementById("btn_left").addEventListener("click", function(evt) {
 
if (is_recording) {
document.getElementById('btn_left').addEventListener('click', function(evt) {
program.push('turtle.left(angle);');
  if (is_recording) {
    if (document.getElementById("show_record").checked) { turtle.left(45); }
    program.push('turtle.left(angle);');
    } else {
    if (document.getElementById('show_record').checked) { turtle.left(angle); }
    turtle.left(angle);
  } else {
    }
    turtle.left(angle);
  }
});  
});  
document.getElementById("btn_right").addEventListener("click", function(evt) {
 
if (is_recording) {
document.getElementById('btn_right').addEventListener('click', function(evt) {
program.push('turtle.right(angle);');
  if (is_recording) {
    if (document.getElementById("show_record").checked) { turtle.right(45); }
    program.push('turtle.right(angle);');
    } else {
    if (document.getElementById('show_record').checked) { turtle.right(angle); }
    turtle.right(angle);
  } else {
    }
    turtle.right(angle);
  }
});  
});  
document.getElementById("btn_clear").addEventListener("click", function(evt) {
 
turtle.clearScreen();
document.getElementById('btn_clear').addEventListener('click', function(evt) {
  turtle.clearScreen();
});  
});  


document.getElementById("btn_record").addEventListener("click", function(evt) {
document.getElementById('btn_record').addEventListener('click', function(evt) {
if (!is_recording) {
  if (!is_recording) {
is_recording = true;
    is_recording = true;
     document.getElementById("btn_record").innerHTML = "stop";
     document.getElementById('btn_record').innerHTML = 'stop';
     document.getElementById("btn_record").classList.add('record');  
     document.getElementById('btn_record').classList.add('record');  
     program = [];
     program = [];
     board.defaultAxes.x.setAttribute({visible:true});
     board.defaultAxes.x.setAttribute({visible:true});
Line 218: Line 305:
     turtle.clearScreen();
     turtle.clearScreen();
   } else {
   } else {
is_recording = false;
    is_recording = false;
     document.getElementById("btn_record").innerHTML = "record";
     document.getElementById('btn_record').innerHTML = 'record';
     document.getElementById("btn_record").classList.remove('record');  
     document.getElementById('btn_record').classList.remove('record');  
     board.defaultAxes.x.setAttribute({visible:false});
      
    board.defaultAxes.y.setAttribute({visible:false});
    if (!document.getElementById('show_grid').checked) {
      board.defaultAxes.x.setAttribute({visible:false});
      board.defaultAxes.y.setAttribute({visible:false});
    }
 
     turtle.clearScreen();
     turtle.clearScreen();
   }
   }
});  
});  


// Animation
var do_step = function() {
var do_step = function() {
if (step < program.length) {
  if (step < program.length) {
  eval(program[step]);
    eval(program[step]);
     step++;
     step++;
     setTimeout(do_step, 500);
     setTimeout(do_step, time);
   }
   }
}
}
document.getElementById("btn_play").addEventListener("click", function(evt) {
document.getElementById('btn_play').addEventListener('click', function(evt) {
    step = 0;
  step = 0;
//eval(program);
  do_step();     
  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);
});
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Turtle Graphics]]
[[Category:Turtle Graphics]]

Latest revision as of 09:09, 18 January 2021

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