-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
109 lines (106 loc) · 3.32 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>LOGO</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
overflow:hidden;
}
#canvas {
width: 50%;
float: left;
}
#console {
float: right;
height: 100%;
}
#console textarea {
font-family: "Andale Mono", Menlo, Consolas, Courier;
}
</style>
</head>
<body>
<form id="console">
<textarea id="program" rows="30" cols="80">; Configure the number of bands to draw.
Make "radius 6
Make "count 0
CS
Repeat :radius [
Make "segs :count
SetPenColour SUM :count 1
Repeat 6 [
Repeat :segs [
Repeat 2 [ Forward 20 Right 60 ]
Forward 20
PenUp Back 20 PenDown
Left 120
]
Forward 20 Right 60
]
; Move out to the next band.
PenUp Left 120 Repeat 2 [ Forward 20 Right 60 ] PenDown
Make "count SUM :count 1
]
</textarea>
<div><a id="run" href="#">Run</a></div>
</form>
<svg xmlns="http://www.w3.org/2000/svg" id="canvas" align="xMidYMid" viewBox="0 0 400 400" >
<!-- Move to the center and flip Y axis so positive Y is up. -->
<g id="slate" transform="translate(200,200) scale(1,-1)">
<circle id="origin" cx='0' cy='0' r='3' fill='gainsboro' stroke='lightgray' />
<path id="turtle" d="M 00 15 L 5 0 L -5 0 z" fill="black" fill-opacity="0.4"
stroke="dimgray" stroke-opacity="0.8" stroke-width="1" />
</g>
</svg>
<script src="logo.js" type="text/javascript" charset="utf-8"></script>
<script>
// var con = document.getElementById('console');
// con.style.width = window.innerWidth / 2 + "px";
// con.style.height = window.innerHeight + "px";
var path;
var logo = new Logo();
logo
.on('turtle.change', function(turtle) {
// Headings (angles) are measured in degrees clockwise from the positive Y
// axis.
var t = document.getElementById('turtle')
, transform = 'translate(' + turtle.x + ',' + turtle.y +') rotate(' + -turtle.angle + ')';
t.setAttribute('transform', transform);
t.setAttribute('fill', turtle.color);
t.setAttribute('stroke', turtle.color);
t.setAttribute('visibility', turtle.visible ? 'visible' : 'hidden')
})
.on('path.start', function(info) {
path = document.createElementNS("http://www.w3.org/2000/svg","path");
path.classList.add('trail');
path.setAttribute('d', 'M ' + info.x + ',' + info.y);
path.setAttribute('fill', 'none');
path.setAttribute('stroke', info.color);
path.setAttribute('stroke-width', 2);
document.getElementById('slate').appendChild(path);
})
.on('path.delta', function(info) {
if (path) {
path.setAttribute('d', path.getAttribute('d') + ' l ' + info.dx + ',' + info.dy);
}
})
.on('path.end', function () {
path = null;
})
.on('path.remove_all', function () {
var paths = document.getElementsByClassName('trail');
while (paths.length) {
paths[0].remove();
}
})
;
document.getElementById('run').addEventListener('click', function(e) {
e.preventDefault();
logo.runInput(document.getElementById('program').value);
}, false);
</script>
</body>
</html>