Permalink
Browse files

Merge pull request #1 from kbrock/master

In browser demo of turtle
  • Loading branch information...
davebalmer committed Jun 30, 2011
2 parents b58ac74 + 8d2a3db commit d0eb67d31e9865c2b28aeafe20aeecfad2d57664
Showing with 103 additions and 0 deletions.
  1. +103 −0 browser.html
View
@@ -0,0 +1,103 @@
+<!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">
+<style>
+ body { margin: 0; padding: 0; background: #fff; color: #000; font: 15px Helvetica; }
+ p { margin-left: 10px; }
+ a { color: #006; }
+ .hide { display: none; }
+</style>
+
+<!-- including the lib and an rgb to hsv color util function -->
+<script src="pen.js"></script>
+<script src="hsv.js"></script>
+<script>
+function $(id) {
+ return document.getElementById(id);
+}
+
+function clearCanvas() {
+ document.window.p.canvas.clearRect(0, 0, 800, 600);
+}
+
+function runJavascript() {
+ var val = $('input').value;
+ eval(val);
+ return false;
+}
+
+function showHideInput() {
+ var field = $("input");
+ field.className = (field.className === "hide" ? "show" : "hide");
+}
+
+/* reference to global pen */
+var p;
+
+window.onload = function () {
+ p = new Pen("mycanvas");
+ $("inputForm").onsubmit = runJavascript;
+ $("clearButton").onclick = clearCanvas;
+ $("showHide").onclick = showHideInput;
+};
+</script>
+</head>
+<body>
+ <form id="inputForm">
+ <p>demo
+ <input type="submit" value="run" >
+ <input id="clearButton" type="button" value="clear" >
+ <input id="showHide" type="button" value="editor" >
+ </p>
+ <textarea id="input" class="hide" style="height:600px; width:800px;">
+ // 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 &lt; 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 &lt; 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);
+ }
+
+</textarea>
+ </form>
+ <canvas id="mycanvas" height="600" width="800" ></canvas>
+</body>
+</html>

0 comments on commit d0eb67d

Please sign in to comment.