turtlescale.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <html>
  2. <!--
  3. Example of using the turtle module in skulpt.
  4. Author: Brad Miller
  5. Note: One important convention, since I plan to use
  6. multiple turtle canvases on a page I am passing the runit
  7. function a prefix to use in creating the id for the following:
  8. - textarea containing the code
  9. - pre tag for any printed output
  10. - canvas tag for the turtle
  11. I've enclosed the whole group of them in a div because I was thinking
  12. at one point about creating the pre tag and the canvas tag on the fly
  13. the more I think about it the more I wonder...
  14. -->
  15. <head>
  16. <script src="skulpt.js" type="text/javascript"></script>
  17. <script src="builtin.js" type="text/javascript"></script>
  18. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" ></script>
  19. </head>
  20. <body>
  21. <script type="text/javascript">
  22. function outf(text) {
  23. var mypre = document.getElementById(Sk.pre);
  24. mypre.innerHTML = mypre.innerHTML + text;
  25. }
  26. function builtinRead(x)
  27. {
  28. if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
  29. throw "File not found: '" + x + "'";
  30. return Sk.builtinFiles["files"][x];
  31. }
  32. function runit(myDiv) {
  33. var prog = document.getElementById(myDiv + "_code").value;
  34. var mypre = document.getElementById(myDiv + "_pre");
  35. mypre.innerHTML = '';
  36. Sk.canvas = myDiv + "_canvas";
  37. Sk.pre = myDiv + "_pre";
  38. // The following lines reset the canvas so that each time the run button
  39. // is pressed the turtle(s) get a clean canvas.
  40. var can = document.getElementById(Sk.canvas);
  41. can.width = can.width;
  42. if (Sk.tg) {
  43. Sk.tg.canvasInit = false;
  44. Sk.tg.turtleList = [];
  45. }
  46. // configure Skulpt output function, and module reader
  47. Sk.configure({output:outf,
  48. read: builtinRead
  49. });
  50. try {
  51. Sk.importMainWithBody("<stdin>", false, prog);
  52. } catch (e) {
  53. alert(e);
  54. }
  55. }
  56. </script>
  57. <h3>Try This</h3>
  58. <div id="example1">
  59. <form>
  60. <textarea edit_id="eta_5" id="example1_code" cols="60" rows="10">
  61. import turtle
  62. import math
  63. t = turtle.Turtle()
  64. s = turtle.Turtle()
  65. t.setworldcoordinates(-3.14,-1.0,3.14,1)
  66. t.color('blue')
  67. s.color('red')
  68. t.width(2)
  69. s.width(2)
  70. t.up()
  71. s.up()
  72. t.goto(-3.14,math.sin(-3.14))
  73. s.goto(-3.14,math.cos(-3.14))
  74. t.down()
  75. s.down()
  76. t.speed(4)
  77. s.speed(4)
  78. i = -3.14
  79. while i <= 3.14:
  80. t.goto(i,math.sin(i))
  81. s.goto(i,math.cos(i))
  82. t.dot(5,'red')
  83. s.dot(5,'blue')
  84. i += 0.1
  85. </textarea>
  86. <button onclick="runit('example1')" type="button">Run</button>
  87. </form>
  88. <canvas id="example1_canvas" height="500" width="800"
  89. style="border-style: solid;"></canvas>
  90. <pre id="example1_pre"></pre>
  91. </div>
  92. </body>
  93. </html>