turtle/examples.html at master · dobbs/turtle · GitHub

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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
<title>Turtle Graphics Examples: von Koch snowflake, peano curve, and an interactive shell</title>
<script type="text/javascript" src="turtle.min.js"></script>
<script type="text/javascript" src="fractal.js"></script>
<style type="text/css">
canvas {border: 1pt solid black;}
.interactive-docs p {margin: 0;}
#js * {display:block;}
#editor {
  font-family: "Courier New", Courier, monospace;
  width: 30em; padding: .5em; margin-top: 1em; border: 1pt solid black;
}
#editor-history, #commandline-history {margin-bottom: 1em;}
#editor-history .remove, #commandline-history .remove {float: right; margin-right: 2em;}
#editor-history div:hover, #commandline-history div:hover {background-color: #ddd;}
.turtle-hide {display:none;}
#commandline-history-show {text-decoration: none;}
</style>
</head>
<body>
<div class="playback">
<canvas class="fractal" width="205" height="110"></canvas>
</div>
<div class="interactive">
<canvas id="interactivecanvas" width="205" height="200"></canvas>
<form><input id="commandline" type="text" size="36" name="commandline"></form>
<a href="" id="commandline-history-show">&#x25BA; History</a><section id="commandline-history" class="turtle-hide"></section>
</div>
<div class="interactive-docs">
<p><a href="" class="turtle-command" data-turtle-command="penup">penup</a></p>
<p><a href="" class="turtle-command" data-turtle-command="pendown">pendown</a></p>
<p><a href="" class="turtle-command" data-turtle-command="move 10">move <em>10 pixels</em></a></p>
<p><a href="" class="turtle-command" data-turtle-command="turn 15">turn <em>15 degrees</em></a></p>
<p><a href="" class="turtle-command" data-turtle-command="turn -15">turn <em>-15 degrees</em></a></p>
<p><a href="" class="turtle-command" data-turtle-command="clear">clear</a></p>
<p><a href="" class="turtle-command" data-turtle-command="home">home</a></p>
<p><a href="" class="turtle-command" data-turtle-command="pencolor black">pencolor <em>black</em></a></p>
<p><a href="" class="turtle-command" data-turtle-command="pencolor MediumSlateBlue">pencolor <em>MediumSlateBlue</em></a></p>
<p><a href="" class="turtle-command" data-turtle-command="pensize 1">pensize <em>1 pixel</em></a></p>
<p><a href="" class="turtle-command" data-turtle-command="pensize 3">pensize <em>3 pixels</em></a></p>
<p><a href="" class="turtle-command" data-turtle-command="pensize 3. pencolor Aqua">pensize 3. pencolor Aqua</a></p>
<p><a href="" class="turtle-command" data-turtle-command="move 60. turn -144">move 60. turn -144</a></p>
</div>
<form>
<textarea id="editor" cols="60" rows="40">
var T = Turtle.interactiveTurtle;

T.polygon = function polygon(sides, pixels) {
    var angle = 360/parseInt(sides);
    for(var i = sides; i--;) {
        this.move(pixels);
        this.turn(angle);
    }
    return;
};

T.flower = function flower() {
    for(var i = 5; i--;) {
        this.polygon(3, 30);
        this.turn(360/5);
    }
    T.turn(50);
    for(var i = 5; i--;) {
        this.polygon(3, 50);
        this.turn(360/5);
    }
};

T.spiral = function spiral(steps, pixels, degrees) {
    if (steps > 0) {
        this.move(pixels);
        this.turn(degrees);
        this.spiral(parseInt(steps) - 1, parseInt(pixels) + 3, parseInt(degrees));
    }
};

</textarea>
<input type="submit" value="run"></input>
</form>
<section id="editor-history"></section>
</body>
<script type="text/javascript">
(function (window, document, undefined) {
Turtle.drawFractal(document.getElementsByClassName("fractal")[0]);
var commandline = document.getElementById("commandline");
Turtle.interactiveCanvas(
    document.getElementById("interactivecanvas").getContext('2d'),
    commandline
);
window.commandline_history = new Turtle.History(commandline, window.localStorage, {
    useInputValueForRevisionName: true
});
window.commandline_history.syncLocalStorage();

var commands = document.getElementsByClassName('turtle-command');
for (var i = 0; i < commands.length; i++) {
    var link = commands.item(i);
    link.addEventListener('click', function (event) {
        event.stopPropagation();
        event.preventDefault();
        var cmd = event.target.getAttribute('data-turtle-command');
        commandline.value = cmd;
        var event = document.createEvent("HTMLEvents");
        event.initEvent("change", true, true ); // event type,bubbling,cancelable
        commandline.dispatchEvent(event);
        return false;
    });
};

document.getElementById("commandline-history-show").addEventListener("click", function (event) {
    event.stopPropagation();
    event.preventDefault();
    if (window.commandline_history.element.className.indexOf("turtle-hide") != -1) {
        event.target.innerHTML = "&#x25bc History";
        window.commandline_history.element.className = window.commandline_history.element.className.replace("turtle-hide", "").replace(/ +$/, "");
   }
    else {
        event.target.innerHTML = "&#x25ba History";
        window.commandline_history.element.className = window.commandline_history.element.className.replace(/$/, " turtle-hide");
    }
    return false;
});

var editor = document.getElementById("editor");
editor.form.addEventListener("submit", function (event) {
    event.stopPropagation();
    event.preventDefault();
    try {eval(editor.value)}
    catch (err) {console.log(err)};
    return false;
});
window.editor_history = new Turtle.History(editor, window.localStorage);
window.editor_history.syncLocalStorage();
return;
})(this, this.document);
</script>
</html>