-
Notifications
You must be signed in to change notification settings - Fork 18
/
turtle.html
72 lines (56 loc) · 2.11 KB
/
turtle.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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Turtle Wax -- Logo-ish Turtle Graphics for HTML5 Canvas</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta name="format-detection" content="false">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<p>A demo of an open source project <a href="http://github.com/davebalmer/turtlewax">hosted on GitHub</a> by Dave Balmer</p>
<canvas id="mycanvas" height="600" width="800">
<style>
body { margin: 0; padding: 0; background: #fff; color: #000; font: 15px Helvetica; }
p { margin-left: 10px; }
a { color: #006; }
</style>
<!-- including the lib and an rgb to hsv color util function -->
<script src="pen.js"></script>
<script src="hsv.js"></script>
<script>
var p = new Pen("mycanvas");
// make a foot (or a head)
p.foot = function(angle, body, length, width) {
return this.polar(length, angle).arc(angle, angle + width, length, 1).polar(body, angle + width);
};
// quickie arc drawing function
p.arc = function(from, to, distance, res) {
var res = res || 1;
for (var i = from; i < to; i += res)
this.polar(distance, i);
return this;
};
// draw a turtle
p.turtle = function(s) {
var b = s * .6;
var f = s * .8;
this.origin().penup().polar(b, -20).begin().pendown().foot(-20, b, s, 40);
this.arc(20, 50, b).foot(50, b, f, 40).arc(90, 120, b).foot(120, b, f, 40);
this.arc(160, 170, b).polar(s, 180).polar(b, 190).arc(190, 200, b);
this.foot(200, b, f, 40).arc(240, 270, b).foot(270, b, f, 40).arc(310, 340, b).close().penup();
this.polar(s * .4, 0).pendown().arc(0, 360, s * .4).close().draw();
return this;
};
// start our drawing
p.goto(200, 200).fillstyle("#fff");
// it's turtles all the way down (or up, in this case)
for (var i = 1; i < 120; i ++) {
var c = i * 6 - 90;
p.pensize(1 + (i / 10)).penstyle(hsvtorgb(c, 1, 1));
p.turtle(i * 6).turn(50).penup().go((i + 2) * 8);
}
</script>
</body>
</html>