-
Notifications
You must be signed in to change notification settings - Fork 3
/
tg.html
57 lines (55 loc) · 1.93 KB
/
tg.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html><head>
<title>Turtle Geometry</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="turtle.min.js"></script>
<script type="text/javascript" src="tg.js"></script>
<style type="text/css">
.column {
display: block;
float: left;
width: 30em;
margin-right: 3em;
}
canvas.tg {border: 1pt solid black;}
.turtle-hide {display:none;}
#tg-commandline-history-show {text-decoration: none;}
#tg-exercises a {display: block;}
</style>
</head>
<body>
<div class="column">
<h1>Turtle Geometry exercises</h1>
<canvas width="500" height="500" id="tg-tracks" class="tg"></canvas>
<form><input id="tg-commandline" type="text" size="95" name="tg-commandline"></form>
<a href="" id="tg-commandline-history-show">► History</a><section id="tg-commandline-history" class="turtle-hide"></section>
</div>
<div class="column">
<p>
Exercises and examples from chapter one of
<a href="http://books.google.com/books/about/Turtle_geometry.html?id=3geYp44hJVcC">Turtle Geometry by Abelson and diSessa</a>
implemented in javascript. Kinda blown away by this book: only on
chapter one and this page already offers a pretty fun playground for
exploring geometry and rudimentary graphics programming.
</p>
<p>
Click some of the links below for examples and inspiration. You can
also type commands into the form below the turtle's sandbox.
Commands you type will be saved in the history below the sandbox.
</p>
<p>
Pen controls include <code>penup</code>, <code>pendown</code>,
<code>pensize <em>pixels</em></code>, and <code>pencolor
<em>color</em></code>. Any CSS color name or hex value will work
for color:
<a href="http://en.wikipedia.org/wiki/Web_colors">Wikipedia: Web Colors</a>
</p>
<p>
Have a look at the source code for these exercises if you like:
<a href="tg.js">tg.js</a>
</p>
<div id="tg-exercises" class="column">
</div>
</div>
</body>
</html>