-
Notifications
You must be signed in to change notification settings - Fork 18
/
pen.html
123 lines (94 loc) · 3.29 KB
/
pen.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!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="500" width="800">
<style>
body { margin: 0; padding: 0; background: #666; 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="hsv.js"></script>
<script src="pen.js"></script>
<script>
// create a new pen object attached to our canvas tag
var p = new Pen("mycanvas");
// add a custom function to draw a square
p.square = function(size) {
for (var i = 0; i < 4; i++)
this.go(size).turn(90);
// to be a good function, we want to allow chaining
return this;
}
// add custom "spirograph" function based on our new square function
p.spiro = function() {
for (var i = 0; i < 36; i++)
this.square(50).turn(10);
return this;
}
// an arrow function, for grins
p.arrow = function() {
var p = this.pen;
this.pendown().turn(-150).go(20).back(20).turn(300);
this.go(20).back(20).turn(-150).close().stroke();
// restore our pen state
this.pen = p;
// again, support chaining because it's cool
return this;
}
// stupid canvas tricks
//p.canvas.scale(5, 5);
//p.canvas.translate(-600, -250);
// make single pixel lines look prettier -- don't ask
p.canvas.translate(.5, .5);
p.jump(300, 250).fillstyle("#ff0").pensize(0);
p.ray = function(d, a) {
this.begin();
return this.origin().polar(d, 0).polar(d, a).polar(0, 0).close().draw();
}
for (var i = 0; i < 18; i++) {
// pen color change for a little pazazz
p.fillstyle(hsvtorgb(p.dir + 60, 1, .9));
p.ray(1000, 10).turn(20);
}
p.turn(10);
for (var i = 0; i < 18; i++) {
// pen color change for a little pazazz
p.fillstyle(hsvtorgb(p.dir - 60, 1, .9));
p.ray(1000, 10).turn(20);
}
p.turn(-10);
// draw a container box
p.pensize(3).fillstyle("rgba(255, 255, 255, .8)");
p.jump(10, 10).right(780).down(480).left(780).up(480).close().draw();
// yes, you could go directly to the canvas if you wanna, but it won't chain
// p.fillstyle("#eee").canvas.fillRect(10, 10, 790, 490);
// draw a square
p.pensize(1).fillstyle("#ff0").jump(50, 300).square(100).draw();
// draw a spirograph
p.fillstyle().jump(300, 250).spiro().draw();
// make a complex drawing using our functions
p.jump(600, 250);
for (var i = 0; i < 18; i++) {
// pen color change for a little pazazz
p.penstyle(hsvtorgb(p.dir, 1, .9));
// draw a spiro, then rotate a bit
p.penup().go(100).pendown().spiro().penup().back(100).turn(20).draw();
}
// draw some labels
p.fillstyle("#999").font("bold 15px Helvetica").penup();
p.jump(70, 150).text("A square");
p.jump(180, 110).text("A 'spirograph' made from squares");
p.jump(480, 50).text("A pattern made from 'spirographs'");
</script>
</body>
</html>