Difference between revisions of "Turtle Graphics"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
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 87: | 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', {originX: 300, originY: 300, unitX: 1, unitY: 1}); | var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1}); | ||
− | var t = brd. | + | 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 104: | 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... | ||
</textarea> | </textarea> | ||
<input type="button" value="run example 1" onClick="run(1)"> | <input type="button" value="run example 1" onClick="run(1)"> | ||
+ | <jsxgraph width="600" height="600" box="box0"> | ||
</source> | </source> | ||
<source lang="javascript"> | <source lang="javascript"> | ||
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1}); | var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1}); | ||
− | var t = brd. | + | var t = brd.create('turtle'); |
function run(nr) { | function run(nr) { |
Revision as of 12:04, 25 March 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)">
<jsxgraph width="600" height="600" box="box0">
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
var t = brd.create('turtle');
function run(nr) {
brd.suspendUpdate();
eval($('input'+nr).value);
brd.unsuspendUpdate();
}