Difference between revisions of "Turtle Graphics"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
|||
(4 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] | + | 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. | [http://u2d.com/turtle_js/index.html CanvasTurtle] does the same on browsers which support the ''canvas'' element. | ||
Line 6: | Line 6: | ||
===Snowflake and Branches Example=== | ===Snowflake and Branches Example=== | ||
<html> | <html> | ||
− | |||
− | |||
− | |||
− | |||
<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;"> | <form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;"> | ||
function side(size, level) { | function side(size, level) { | ||
Line 26: | Line 22: | ||
function snowflake(size, level) { | function snowflake(size, level) { | ||
− | (3 | + | for (var i=0;i<3;i++) { |
side(size, level); | side(size, level); | ||
t.rt(120); | t.rt(120); | ||
− | } | + | }; |
} | } | ||
Line 88: | Line 84: | ||
<input type="button" value="run example 2" onClick="run(2)"> | <input type="button" value="run example 2" onClick="run(2)"> | ||
</form> | </form> | ||
− | < | + | </html> |
− | + | <jsxgraph width="600" height="600" box="box"> | |
− | 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(nr) { | function run(nr) { | ||
brd.suspendUpdate(); | brd.suspendUpdate(); | ||
− | eval( | + | eval(document.getElementById('input'+nr).value); |
brd.unsuspendUpdate(); | brd.unsuspendUpdate(); | ||
} | } | ||
− | </ | + | </jsxgraph> |
− | |||
===References=== | ===References=== | ||
Line 105: | Line 100: | ||
===The turtle graphics code=== | ===The turtle graphics code=== | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;"> | <form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;"> | ||
turtle code... | turtle code... | ||
Line 117: | Line 107: | ||
<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(nr) { | function run(nr) { |
Latest revision as of 09: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();
}