Difference between revisions of "Turtle bot"

From JSXGraph Wiki
Jump to: navigation, search
(Created page with "<html> <style> button { min-width:100px; } .record { background-color: #ffaaaa; } </style> Show recording: <input type="checkbox" id="show_record"><br/> <button id="btn_re...")
 
(20 intermediate revisions by the same user not shown)
Line 8: Line 8:
 
}
 
}
 
</style>
 
</style>
Show recording: <input type="checkbox" id="show_record"><br/>
+
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_record">record</button>
 
<button id="btn_play">play</button>
 
<button id="btn_play">play</button>
Line 30: Line 30:
 
</table>
 
</table>
 
</html>
 
</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: 4, strokeColor: 'red'}});
var turtle = board.create('turtle', [0,0]);
 
 
var is_recording = false;
 
var is_recording = false;
 
var program = [];
 
var program = [];
Line 44: Line 63:
 
var stepsize = 100;
 
var stepsize = 100;
  
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 91: Line 114:
 
     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');  
 +
   
 +
    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.x.setAttribute({visible:false});
 
     board.defaultAxes.y.setAttribute({visible:false});
 
     board.defaultAxes.y.setAttribute({visible:false});
 +
  }
 +
});
 +
 +
</jsxgraph>
 +
 +
===The underlying JavaScript code===
 +
 +
====HTML code:====
 +
<source lang="html4strict">
 +
<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>
 +
</source>
 +
 +
====JavaScript code:====
 +
 +
 +
<source lang="javascript">
 +
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();
 
     turtle.clearScreen();
 
   }
 
   }
Line 101: Line 286:
  
 
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, 500);
 
   }
 
   }
 
}
 
}
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) {
 +
  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});
 +
  }
 +
});
 +
 
 +
</source>
 +
 
 +
[[Category:Examples]]
 +
[[Category:Turtle Graphics]]

Revision as of 10:47, 13 June 2019

Show recording: Show grid:

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