File: tree.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Canvas Turtle   tree.html   Download  
File: tree.html
Role: Example script
Content type: text/plain
Description: Drawing trees
Class: Canvas Turtle
Interpret and render graphic commands in a Canvas
Author: By
Last change:
Date: 12 years ago
Size: 2,027 bytes


Class file image Download
<!-- /************************************************************* * This script is developed by Arturs Sosins aka ar2rsawseen, * 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: * **************************************************************/ --> <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>