<!--
/*************************************************************
* This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
* Feel free to distribute and modify code, but keep reference to its creator
*
* Canvas Turtle provides LOGO Turtle Grpahics Javascript API
* and LOGO Turtle Grpahic language interpreter for drawing
* objects in Canvas
*
* For more information, examples and online documentation visit:
* http://webcodingeasy.com/JS-classes/Canvas-Turtle-graphics-using-javascript
**************************************************************/
-->
<html>
<head>
</head>
<body>
<div id='logo_div'></div>
<form method='post' action='' onsubmit='exec(document.getElementById("length").value,document.getElementById("depth").value, document.getElementById("angle").value); return false;'>
<p>Depth: <input type='text' id='depth' value='14'/></p>
<p>Angle: <input type='text' id='angle' value='60'/></p>
<p>Length: <input type='text' id='length' value='200'/></p>
<p><input type='submit' value='Draw'/></p>
</form>
<script src="./canvas_turtle.packed.js" type="text/javascript"></script>
<script>
var l = new canvas_turtle("logo_div", {
//width of canvas
width: 800,
//height of canvas
height: 600,
//start value for x axis
});
function a(x, y, ang)
{
y--;
if(y > 0)
{
if(y >= 10)
{
l.color("#663300");
}
else
{
l.color("#669900");
}
l.thick(x*0.2);
l.draw(x);
var c = 0.7;
l.remember();
l.right(ang);
a(x*c, y, ang);
l.goback();
l.remember();
l.left(ang);
a(x*c, y, ang);
l.goback();
}
}
var glength = 14;
function exec(length, depth, angle){
glength = depth;
draw(length, 1, angle);
}
function draw(length, depth, angle){
if(depth <= glength)
{
l.clear();
l.right(180);
l.move(300);
l.right(180);
a(length, depth, angle);
depth++;
setTimeout(function(){
draw(length, depth, angle);
}, 150);
}
}
</script>
</body>
</html>
|
Download
