turtleTree.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <html>
  2. <!--
  3. Example of using the turtle module in skulpt to draw a fractal tree.
  4. - Implement some part of the random module to make this more --
  5. --realistic...
  6. Author: Brad Miller
  7. Note: One important convention, since I plan to use
  8. multiple turtle canvases on a page I am passing the runit
  9. function a prefix to use in creating the id for the following:
  10. - textarea containing the code
  11. - pre tag for any printed output
  12. - canvas tag for the turtle
  13. I've enclosed the whole group of them in a div because I was thinking
  14. at one point about creating the pre tag and the canvas tag on the fly
  15. the more I think about it the more I wonder...
  16. -->
  17. <head>
  18. <script src="skulpt.js" type="text/javascript"></script>
  19. <script src="builtin.js" type="text/javascript"></script>
  20. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" ></script>
  21. </head>
  22. <body>
  23. <script type="text/javascript">
  24. function outf(text) {
  25. var mypre = document.getElementById(Sk.pre);
  26. mypre.innerHTML = mypre.innerHTML + text;
  27. }
  28. function builtinRead(x)
  29. {
  30. if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
  31. throw "File not found: '" + x + "'";
  32. return Sk.builtinFiles["files"][x];
  33. }
  34. function runit(myDiv) {
  35. var prog = document.getElementById(myDiv+"_code").value;
  36. var mypre = document.getElementById(myDiv+"_pre");
  37. mypre.innerHTML = '';
  38. Sk.canvas = myDiv+"_canvas";
  39. Sk.pre = myDiv+"_pre";
  40. Sk.configure({output:outf,
  41. read: builtinRead
  42. });
  43. try {
  44. Sk.importMainWithBody("<stdin>",false,prog);
  45. } catch (e) {
  46. alert(e);
  47. }
  48. }
  49. </script>
  50. <h3>Try This</h3>
  51. <div id="example1">
  52. <form>
  53. <textarea edit_id="eta_5" id="example1_code" cols="60" rows="10">
  54. import turtle
  55. import random
  56. def tree(trunkLength,t):
  57. if trunkLength < 5:
  58. return
  59. else:
  60. t.forward(trunkLength)
  61. tAmount = random.randint(10,30)
  62. t.right(tAmount)
  63. dsub = random.randint(5,15)
  64. tree(trunkLength-dsub,t)
  65. t.left(2*tAmount)
  66. tree(trunkLength-dsub,t)
  67. t.right(tAmount)
  68. t.backward(trunkLength)
  69. t = turtle.Turtle()
  70. t.speed(5)
  71. t.width(1)
  72. t.left(90)
  73. t.up()
  74. t.backward(300)
  75. t.down()
  76. t.color('brown')
  77. tree(85,t)
  78. </textarea>
  79. <button onclick="runit('example1')" type="button">Run</button>
  80. </form>
  81. <canvas id="example1_canvas" height="500" width="800"
  82. style="border-style: solid;"></canvas>
  83. <pre id="example1_pre"></pre>
  84. </div>
  85. </body>
  86. </html>