examples.html

<!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>