Difference between revisions of "Programming turtle graphics"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
|||
| (4 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
| − | + | ==Input== | |
* [[List of available commands]] | * [[List of available commands]] | ||
<html> | <html> | ||
| − | |||
| − | |||
| − | |||
| − | |||
<form><textarea id="inputtext" rows=5 cols=35 wrap="off" style="width:600px;">t.fd(100);</textarea><br /> | <form><textarea id="inputtext" rows=5 cols=35 wrap="off" style="width:600px;">t.fd(100);</textarea><br /> | ||
<input type="button" value="run" onClick="run()"> | <input type="button" value="run" onClick="run()"> | ||
| Line 13: | Line 9: | ||
</form> | </form> | ||
</html> | </html> | ||
| − | + | ||
| − | < | + | ==Output== |
| − | + | <jsxgraph box="box" width="600" height="600"> | |
| − | + | var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 300, 300, -300]}); | |
| − | var brd = JXG.JSXGraph.initBoard('box', { | + | var t = brd.create('turtle'); |
| − | var t = | ||
function run() { | function run() { | ||
brd.suspendUpdate(); | brd.suspendUpdate(); | ||
| − | var code = | + | var code = document.getElementById('inputtext').value; |
if (code=='') { return; } | if (code=='') { return; } | ||
eval(code); | eval(code); | ||
| − | + | document.getElementById('logwindow').innerHTML += code+'\n'; | |
| − | // | + | //document.getElementById('inputtext').value = ''; |
brd.unsuspendUpdate(); | brd.unsuspendUpdate(); | ||
} | } | ||
function clearturtle() { | function clearturtle() { | ||
t.cs(); | t.cs(); | ||
| − | // | + | //document.getElementById('inputtext').value = 't.fd(100);'; |
} | } | ||
function clearlog() { | function clearlog() { | ||
| − | + | document.getElementById('logwindow').innerHTML = ''; | |
} | } | ||
| − | </ | + | </jsxgraph> |
| − | + | ||
| − | + | ==Log window== | |
<html> | <html> | ||
<pre id="logwindow" class="javascript javascript" style="font-family:monospace;"></pre> | <pre id="logwindow" class="javascript javascript" style="font-family:monospace;"></pre> | ||
</html> | </html> | ||
| − | + | ==Source code== | |
<source lang="html4strict"> | <source lang="html4strict"> | ||
| − | |||
| − | |||
| − | |||
| − | |||
<form><textarea id="inputtext" rows=3 cols=35 wrap="off" style="width:600px;">t.fd(100);</textarea><br /> | <form><textarea id="inputtext" rows=3 cols=35 wrap="off" style="width:600px;">t.fd(100);</textarea><br /> | ||
<input type="button" value="run" onClick="run()"> | <input type="button" value="run" onClick="run()"> | ||
| Line 53: | Line 44: | ||
<input type="button" value="clear log" onClick="clearlog()"> | <input type="button" value="clear log" onClick="clearlog()"> | ||
</form> | </form> | ||
| − | |||
<pre id="logwindow" class="javascript javascript" style="font-family:monospace;"></pre> | <pre id="logwindow" class="javascript javascript" style="font-family:monospace;"></pre> | ||
</source> | </source> | ||
| + | |||
<source lang="javascript"> | <source lang="javascript"> | ||
| − | var brd = JXG.JSXGraph.initBoard('box', { | + | var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 300, 300, -300]}); |
| − | var t = | + | var t = brd.create('turtle'); |
| + | |||
function run() { | function run() { | ||
brd.suspendUpdate(); | brd.suspendUpdate(); | ||
| − | var code = | + | var code = document.getElementById('inputtext').value; |
if (code=='') { return; } | if (code=='') { return; } | ||
eval(code); | eval(code); | ||
| − | + | document.getElementById('logwindow').innerHTML += code+'\n'; | |
| − | |||
brd.unsuspendUpdate(); | brd.unsuspendUpdate(); | ||
} | } | ||
| + | |||
function clearturtle() { | function clearturtle() { | ||
t.cs(); | t.cs(); | ||
| − | // | + | //document.getElementById('inputtext').value = 't.fd(100);'; |
} | } | ||
function clearlog() { | function clearlog() { | ||
| − | + | document.getElementById('logwindow').innerHTML = ''; | |
} | } | ||
| − | |||
</source> | </source> | ||
| + | |||
| + | * How to "[[Slow the turtle down]]" | ||
[[Category:Examples]] | [[Category:Examples]] | ||
[[Category:Turtle Graphics]] | [[Category:Turtle Graphics]] | ||
Latest revision as of 14:00, 8 June 2011
Contents
Input
Output
Log window
Source code
<form><textarea id="inputtext" rows=3 cols=35 wrap="off" style="width:600px;">t.fd(100);</textarea><br />
<input type="button" value="run" onClick="run()">
<input type="button" value="clear" onClick="clearturtle()">
<input type="button" value="clear log" onClick="clearlog()">
</form>
<pre id="logwindow" class="javascript javascript" style="font-family:monospace;"></pre>
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 300, 300, -300]});
var t = brd.create('turtle');
function run() {
brd.suspendUpdate();
var code = document.getElementById('inputtext').value;
if (code=='') { return; }
eval(code);
document.getElementById('logwindow').innerHTML += code+'\n';
brd.unsuspendUpdate();
}
function clearturtle() {
t.cs();
//document.getElementById('inputtext').value = 't.fd(100);';
}
function clearlog() {
document.getElementById('logwindow').innerHTML = '';
}
- How to "Slow the turtle down"
