0:5d8b72321f10 · flowsnake.js

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/flowsnake.css	Sat Nov 09 23:28:20 2013 +0900
@@ -0,0 +1,14 @@
+pre {
+    position: fixed;
+    font-size: 8pt;
+    bottom: 0;
+}
+
+div {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/flowsnake.js	Sat Nov 09 23:28:20 2013 +0900
@@ -0,0 +1,122 @@
+Flowsnake = function($el, width, height, order) {
+    this.$el = $el;
+    this.width = width;
+    this.height = height;
+    this.order = order;
+
+    this.init();
+
+    return this;
+};
+
+Flowsnake.prototype = {
+    a: 'a-b--b+a++aa+b-',
+    b: '+a-bb--b-a++a+b',
+
+    init: function() {
+        this.pointer = 0;
+        this.rule = this.a;
+        this.x = this.width / 2;
+        this.y = this.height;
+        this.angle = 0;
+        this.rows = [];
+
+        function fillrow(len) {
+            var str = [];
+            for (var i = 0; i < len; i++) {
+                str.push(' ');
+            }
+            return str.join('');
+        }
+
+        for (var i = 0; i < this.height; i++) {
+            this.rows.push(fillrow(this.width));
+        }
+
+        for (var i = 0; i < this.order; i++) {
+            this.rule = this.rule.replace(/a/g, 'x').replace(/b/g, 'y').replace(/x/g, this.a).replace(/y/g, this.b);
+        }
+    },
+
+    putc: function(x, y, c) {
+        function replacec(str, pos, c) {
+            return str.substr(0, pos) + c + str.substr(pos + c.length);
+        }
+
+        if (x >= 0 && x < this.width && y >= 0 && y < this.height) {
+            this.rows[y] = replacec(this.rows[y], x, c);
+        }
+    },
+
+    line: function() {
+        switch (this.angle) {
+            case 0:
+                this.putc(this.x, this.y, '__');
+                this.x += 2;
+                break;
+
+            case 60:
+                this.putc(this.x, this.y, '/');
+                this.x++;
+                this.y--;
+                break;
+
+            case 120:
+                this.x--;
+                this.putc(this.x, this.y, '\\');
+                this.y--;
+                break;
+
+            case 180:
+                this.x -= 2;
+                this.putc(this.x, this.y, '__');
+                break;
+
+            case 240:
+                this.x--;
+                this.y++;
+                this.putc(this.x, this.y, '/');
+                break;
+
+            case 300:
+                this.y++;
+                this.putc(this.x, this.y, '\\');
+                this.x++;
+                break;
+        }
+    },
+
+    step: function(visible) {
+        var redraw = false;
+
+        switch (this.rule[this.pointer]) {
+            case 'a':
+            case 'b':
+                this.line();
+                redraw = true;
+                break;
+            case '-':
+                this.angle = (this.angle + 60 + 360) % 360;
+                break;
+            case '+':
+                this.angle = (this.angle - 60 + 360) % 360;
+                break;
+        }
+
+        if (this.pointer < this.rule.length) {
+            this.pointer++;
+        }
+
+        if (visible) {
+            if (redraw) {
+                this.draw();
+            } else {
+                this.step(visible);
+            }
+        }
+    },
+
+    draw: function() {
+        this.$el.text(this.rows.join('\n'));
+    }
+};

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/index.html	Sat Nov 09 23:28:20 2013 +0900
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flowsnake</title>
+    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-nr-min.css">
+    <link rel="stylesheet" href="flowsnake.css">
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+    <script src="flowsnake.js"></script>
+  </head>
+  <body>
+    <pre></pre>
+    <div></div>
+
+    <script>
+      $(function() {
+        var flowsnake = new Flowsnake($('pre'), 160, 80, 3);
+        flowsnake.draw();
+
+        $('pre').css({'left': '50%', 'margin-left': - $('pre').width() / 2});
+
+        window.setInterval(function() {
+          flowsnake.step(true);
+        }, 50);
+      });
+    </script>
+  </body>
+</html>

flowsnake.css		file \| annotate \| diff \| comparison \| revisions
flowsnake.js		file \| annotate \| diff \| comparison \| revisions
index.html		file \| annotate \| diff \| comparison \| revisions