Difference between revisions of "Turtle Graphics"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
|||
(64 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
+ | This is a very basic implementation of turtle graphics in JavaScript with [http://jsxgraph.org JSXGraph]. | ||
+ | [http://u2d.com/turtle_js/index.html CanvasTurtle] does the same on browsers which support the ''canvas'' element. | ||
+ | |||
+ | * [[List of available commands]] | ||
+ | |||
+ | ===Snowflake and Branches Example=== | ||
<html> | <html> | ||
− | < | + | <form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;"> |
− | + | function side(size, level) { | |
− | < | + | if (level==0) { |
− | + | t.fd(size); | |
− | + | return; | |
− | + | } | |
− | + | side(size/3, level-1); | |
− | + | t.lt(60); | |
− | + | side(size/3, level-1); | |
− | + | t.rt(120); | |
− | + | side(size/3, level-1); | |
− | + | t.lt(60); | |
− | + | side(size/3, level-1); | |
− | + | } | |
− | + | ||
− | + | function snowflake(size, level) { | |
− | + | for (var i=0;i<3;i++) { | |
− | + | side(size, level); | |
− | + | t.rt(120); | |
− | + | }; | |
− | + | } | |
− | + | ||
+ | t.clearScreen(); | ||
+ | t.hideTurtle(); | ||
+ | t.setPenSize(1) | ||
+ | t.setPenColor("#000000") | ||
+ | t.lt(30); | ||
+ | t.setPos(0,-100); | ||
+ | snowflake(250, 4); | ||
+ | </textarea> | ||
+ | <textarea id="input2" rows=7 cols=35 wrap="off" style="width:300px"> | ||
+ | function branch(length, level) | ||
+ | { | ||
+ | if(level == 0) return | ||
+ | t.fd(length) | ||
+ | t.lt(45) | ||
+ | branch(length/2, level-1) | ||
+ | t.rt(90) | ||
+ | branch(length/2, level-1) | ||
+ | t.lt(45) | ||
+ | t.bk(length) | ||
+ | } | ||
+ | |||
+ | function lbranch(length, angle, level) | ||
+ | { | ||
+ | t.fd(2*length) | ||
+ | node(length, angle, level) | ||
+ | t.bk(2*length) | ||
+ | } | ||
+ | function rbranch(length, angle, level) | ||
+ | { | ||
+ | t.fd(length) | ||
+ | node(length, angle, level) | ||
+ | t.bk(length) | ||
+ | } | ||
− | + | function node(length, angle, level) | |
− | + | { | |
− | + | if (level == 0) return; | |
− | + | t.lt(angle) | |
− | + | lbranch(length, angle, level -1) | |
− | + | t.rt(2*angle) | |
− | + | rbranch(length, angle, level-1) | |
− | + | t.lt(angle) | |
− | + | } | |
− | |||
− | |||
− | |||
− | + | t.clearScreen() | |
− | + | t.hideTurtle(); | |
− | + | //branch(100,6) | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | t.setPenSize(5) | |
− | + | t.setPenColor("#008800") | |
− | + | t.setPos(30, -150) | |
− | + | lbranch(25, 20, 7) | |
− | + | </textarea><br /> | |
− | + | <input type="button" value="run example 1" onClick="run(1)"> | |
− | + | <input type="button" value="run example 2" onClick="run(2)"> | |
− | + | </form> | |
− | + | </html> | |
− | + | <jsxgraph width="600" height="600" box="box"> | |
− | + | var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 300, 300, -300]}); | |
− | + | var t = brd.create('turtle'); | |
− | + | function run(nr) { | |
− | + | brd.suspendUpdate(); | |
− | + | eval(document.getElementById('input'+nr).value); | |
− | + | brd.unsuspendUpdate(); | |
− | + | } | |
− | + | </jsxgraph> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | ===References=== | |
− | + | * The snowflake and branches example have been adapted from the excellent [http://u2d.com/turtle_js/index.html CanvasTurtle] | |
− | |||
− | |||
− | |||
− | |||
− | + | ===The turtle graphics code=== | |
− | + | <source lang="html4strict"> | |
− | + | <form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;"> | |
− | + | turtle code... | |
− | + | </textarea> | |
− | + | <input type="button" value="run example 1" onClick="run(1)"> | |
− | + | </source> | |
− | |||
− | |||
− | |||
− | + | <source lang="javascript"> | |
− | + | var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 300, 300, -300]}); | |
− | + | var t = brd.create('turtle'); | |
− | |||
− | + | function run(nr) { | |
− | + | brd.suspendUpdate(); | |
− | + | eval($('input'+nr).value); | |
− | + | brd.unsuspendUpdate(); | |
− | eval($('input').value); | ||
} | } | ||
− | + | </source> | |
− | </ | ||
− | |||
[[Category:Examples]] | [[Category:Examples]] | ||
+ | [[Category:Turtle Graphics]] | ||
+ | [[Category:Fractals]] |
Latest revision as of 08:40, 9 June 2011
This is a very basic implementation of turtle graphics in JavaScript with JSXGraph. CanvasTurtle does the same on browsers which support the canvas element.
Snowflake and Branches Example
References
- The snowflake and branches example have been adapted from the excellent CanvasTurtle
The turtle graphics code
<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
turtle code...
</textarea>
<input type="button" value="run example 1" onClick="run(1)">
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 300, 300, -300]});
var t = brd.create('turtle');
function run(nr) {
brd.suspendUpdate();
eval($('input'+nr).value);
brd.unsuspendUpdate();
}