A Pen by Tony.

Canvas-Dragon-Curve-v0.1.markdown

Canvas Dragon Curve v0.1

A Pen by Tony on CodePen.

License.

index.html

<canvas id="canvas" width="1200" height="800"></canvas>

script.js

var org = org || {};
org.example = org.example || {};
org.example.dragon = org.example.dragon || (function () {

        var dragonVectors = [],
                vectors = {};
        
        function Vector(chords) {
                var that = this,
                        rotated = {};
                
                that.chords = chords;
                
                that.setRotation = function(vect) {
                        that.rotated = vect;
                }
                
                that.rotate = function() {
                        return that.rotated;
                }
        }
        
        function init() {
                vectors = {
                        up: new Vector([0,-1]),
                        down: new Vector([0,1]),
                        left: new Vector([1,0]),
                        right: new Vector([-1,0])
                };
                vectors.up.setRotation(vectors.left);
                vectors.left.setRotation(vectors.down);
                vectors.down.setRotation(vectors.right);
                vectors.right.setRotation(vectors.up);
                
                dragonVectors = [vectors.left];
        }
        
        function doIteration() {
                for(var i = dragonVectors.length; i--;) {
                        dragonVectors.push(dragonVectors[i].rotate());
                }
        }
        
        function iterate(n) {
                for(;n--;) {
                        doIteration();
                }
        }
        
        function path() {
                var result = [];
                for(var i = dragonVectors.length; i--;) {
                        result.push( dragonVectors[i].chords );
                }
                
                return result;
        }
        
        return {
                init: init,
                iterate: iterate,
                path: path
        };
}());

org.example.dragon.init();
org.example.dragon.iterate(16);

var path = org.example.dragon.path(),
    scale = 2.0,
    p = {x: 150, y: 260}
ctx = document.getElementById("canvas").getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowOffsetY=20;
ctx.shadowColor="#000022";
ctx.strokeStyle="#FC0000";
ctx.moveTo(p.x,p.y);

for(var i=0; i<path.length; i++) {        
    p.x += (scale * path[i][0]);
    p.y += (scale * path[i][1]);
    ctx.lineTo(p.x, p.y);
}

ctx.stroke();