JS1k 2015 - 2287 - Details - A hyped JavaScript golfing competition

_='b=wXdow,g=bHU,b=bW,h=docum!t;ke=h.cZateElem!t2000/svg	ca.app!dChild(ee}l(aa1999/xlXkhZf#p")}ndu$dfillned	ad-w	cl(dd}u,v;`av+j "+a}x,%,q,rf=(d-aJ=(C-cm=a+f-J,f=c+J+f;1<q--&&(r+1?(x%-r)):(x(%-a,cr)))}ph.body_svgpw	bphU	bydefs"~zy_paYz.idjp8n^#FFF	611)-dasharray1,5A"~BA_PaYl(BAft-familyLucida CsoleBba$lXe-shift	-3.2B.Ct!t=pHTML||"<u$ Chrome>D=.2*b,E=.2*g,F=.8*b,G=.4*g;u=[D,E];x(D,E,,9,1,,H@0I@1K=H,L=I;vjMfor(i=0;257>i;i++M0N1O2P3Q4R5];`MNv+jCH=M+O-KI=N+P-LVH=O-Q-MI=P-R-NVK=M;L=N}`KLzd	vt=0;(S(ZquestAnimatiFrame(SBstartOff$t	z.getTotalL!gY()-t++)})(^functi );@2*i+var NS^http://www.w3.org/,m,f,q,r~m,f~x(,.25*(stroke.$tAttribute=k(`.Xner(a,cZturn n^#CCC	){],"F,GidYtextp_u.push(on	")/2.3,!en$se%d,C@=u[UeightVHIXinYthZre^("_,"`w(j="~),";';for(Y in $='~j`_^ZYXVU@%$!	')with(_.split($[Y]))_=join(pop());eval(_)

Description

This is a homage to last year's entry DragonDrop - a recursive depth limited variant of the Dragon curve with Bezier spline smoothing for a stack of SVG paths.

Base64 encoded

Xz0nBWI9d1hkb3csZz1iEUhVLGI9YhFXGSxoPWRvY3VtIXQ7AmsSFWU9aC5jWmF0ZUVsZW0hdAYyMDAwL3N2ZwljA2EuYXBwIWRDaGlsZChlE2V9AmwoYRVhDgYxOTk5L3hsWGseaFpmHiNwIil9Am4SFQVkG3UkF2QBZmlsbB5uHWUXZAwJYQNkDC13GQljA2woZBNkfQV1LHY7AmBhFXYraiAiK2F9AngSLCUscSxyFQVmPShkLWEfSj0oQy1jH209YStmLUosZj1jK0orZjsxPHEtLSYmKHIrMT8oeBIHCCUHLXIpKTooeCglBy0IYSxjB3IpKSl9BXAPaC5ib2R5X3N2ZxdwAXcZCWIDcAFoVQliAwV5G2RlZnMifnoPeV9wYVkXei5pZGpwfxQ4A25eI0ZGRgk2AxQxMSkMLWRhc2hhcnJheR4xLDUXBUEbGiJ+Qg9BXxpQYVkXbChCA0EBZh10LWZhbWlseR5MdWNpZGEgQx1zb2xlF0IBYmEkbFhlLXNoaWZ0CS0zLjIDQi4aQx10IXQ9cBFIVE1MfHwiPHUkIENocm9tZT5/BUQ9LjIqYixFPS4yKmcsRj0uOCpiLEc9LjQqZzt1PVtELEVdO3goRCxFLBgsOSwxAxwYLBgsGAMFSEAwFklAMRZLPUgsTD1JO3ZqTX9mb3IoaT0wOzI1Nz5pO2krKxUFTQQwFk4EMRZPBDIWUAQzFlEENBZSBDVdO2BNEE4DditqQ39IPU0rC08tSwNJPU4rC1AtTFZIPU8tC1EtTQNJPVAtC1ItTlZLPU07TD1OfWBLEEwDegFkCXYDdD0wOygCUygVWnF1ZXN0QW5pbWF0aR1GcmFtZShTA0IBc3RhcnRPZmYkdAl6LmdldFRvdGFsTCFnWSgpLXQrKyl9KSgDAQ5eAmZ1bmN0aR0gAyk7BEAyKmkrBXZhciAGTlNeaHR0cDovL3d3dy53My5vcmcvByxtLGYscSwIcn4cbSxmfngoHiwLLjI1KigMAXN0cm9rZQ4uJHRBdHRyaWJ1dGUPPWsoEANgES5YbmVyEihhLGMTA1p0dXJuIBRuXiNDQ0MJFSl7Fl0sFyIDGEYsRxlpZFkadGV4dBsPcF8cdS5wdXNoKB1vbh4JIh8pLzIuMywhZW4kc2UlZCxDQD11W1VlaWdodFYQSBBJA1hpbll0aFpyZV4oIl8sImB3KGo9In4pLH8iOyc7Zm9yKFkgaW4gJD0nf35qYF9eWllYVlVAJSQhHx4dHBsaGRgXFhUUExIREA8ODAsJCAcGBQQDAgEnKXdpdGgoXy5zcGxpdCgkW1ldKSlfPWpvaW4ocG9wKCkpO2V2YWwoXyk=

Original source

var white = "#FFF";
var black = "#CCC";
var w = window;
var h = w.innerHeight;
var w = w.innerWidth;
var trackWidth = 8;

var d = document;
var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";

function createAndAppend(p, tag) {
    e = d.createElementNS(svgNS, tag);
    p.appendChild(e);
    return e;
}

function linkPath(e) {
    e.setAttributeNS(xlinkNS, "href", "#p");
}

function setAttribute(elem, name, value) {
    elem.setAttribute(name, value);
}

function layer(stroke, width) {
    var path = createAndAppend(svg, 'use');
    setAttribute(path, "fill", "none");
    setAttribute(path, "stroke", stroke);
    setAttribute(path, "stroke-width", width);
    linkPath(path);
    return path;
}

var quarter = .25;
var n = 257;
var track, pathString;

function appendToPath(str) {
    pathString += " " + str;
}

function layDragonCurveTrack(x1, y1, x2, y2) {
    track = [x1, y1];
    layTrackRecursive(x1, y1, x2, y2, 9, 1);
    track.push(x2, y2, x2, y2, x2, y2);
    track2path();
}

function layTrackRecursive(x1, y1, x2, y2, n, flip) {
    var deltax = (x2 - x1) / 2.3;
    var deltay = (y2 - y1) / 2.3;

    var xm = x1 + deltax - deltay;
    var ym = y1 + deltay + deltax;

    if (n-- > 1) {
        if (flip + 1) {
            layTrackRecursive(x1, y1, xm, ym, n, flip);
            track.push(xm, ym);
            layTrackRecursive(x2, y2, xm, ym, n, -flip);
        } else {
            layTrackRecursive(x2, y2, xm, ym, n, -flip);
            track.push(xm, ym);
            layTrackRecursive(x1, y1, xm, ym, n, flip);
        }
    }
}

function track2path() {
    var sup_x = track[0];
    var sup_y = track[1];
    var pre_x = sup_x;
    var pre_y = sup_y;

    pathString = "M";

    for (i = 0; i < n ; i++) {

        var act_x = track[i * 2 + 0];
        var act_y = track[i * 2 + 1];
        var suc_x = track[i * 2 + 2];
        var suc_y = track[i * 2 + 3];
        var suc2_x = track[i * 2 + 4];
        var suc2_y = track[i * 2 + 5];

        appendToPath(act_x);
        appendToPath(act_y);
        pathString += "C";
        sup_x = act_x + (suc_x - pre_x) * quarter;
        sup_y = act_y + (suc_y - pre_y) * quarter;
        appendToPath(sup_x);
        appendToPath(sup_y);

        sup_x = suc_x - (suc2_x - act_x) * quarter;
        sup_y = suc_y - (suc2_y - act_y) * quarter;
        appendToPath(sup_x);
        appendToPath(sup_y);

        pre_x = act_x;
        pre_y = act_y;

    }
    appendToPath(pre_x);
    appendToPath(pre_y);

    setAttribute(path, "d", pathString);
}

var svg = createAndAppend(d.body, 'svg');

setAttribute(svg, "width", w);
setAttribute(svg, "height", h);

var defs = createAndAppend(svg, 'defs');

var path = createAndAppend(defs, 'path');
path.id = "p";

layer(black, trackWidth);
layer(white, trackWidth - 2);
var sockets = layer(black, trackWidth + 3);
setAttribute(sockets, "stroke-dasharray", "1,5");


var text = createAndAppend(svg, 'text');
var textPath = createAndAppend(text, 'textPath');
linkPath(textPath);
//setAttribute(text, "font-size", trackWidth * 1.2); 
setAttribute(text, "font-family", "Lucida Console"); // "monospace"
//setAttribute(text, "letter-spacing", 1.2);
setAttribute(textPath, "baseline-shift", -trackWidth * 0.4);

textPath.textContent = svg.innerHTML || "<use Chrome>";

layDragonCurveTrack(0.2 * w, 0.2 * h, 0.8 * w, 0.4 * h);

t = 0;
(function anim() {
    requestAnimationFrame(anim);
    setAttribute(textPath, "startOffset", path.getTotalLength() - t++);
})();

JS1k: The JavaScript code golfing competition

2015 - The JS1k hype train is real!

DragonTrack