Tributary inlet

_.md

[ Launch: Tributary inlet ] 8395444 by dvdrtrgn

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

/*jslint es5:true, white:false */
/*globals _, d3, tributary */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
tributary.trace = true;
tributary.loop = 'pingpong';
tributary.clone_opacity = 0.16;

d3.select('svg').style('background-color', '#241700');

var X = {
    xt: [0.84, - 120],
    yt: [0, - 143],
    xo: 150,
    yo: 152,
    rw: 186,
    rh: 118,
},
    scalar = 259,
    font_size = 0,
    fopacity = 0.01,
    tstroke_width = 2,
    tstroke_opacity = 0.07107,
    tcolors_a = d3.range(4).map(function () {
    return 'eef72b';
}),
    rcolors_a = d3.range(4).map(function () {
    return '#EEF72B';
}),
    tcolors_b = d3.range(4).map(function () {
    return '#EEF72B';
}),
    rcolors_b = d3.range(4).map(function () {
    return '#1212E0';
}),
    ropacity = 0.5289088,
    rstroke_width = 6,
    rstroke_opacity = 0.23938,
    corner = 25,
    n = 25,
    nx = 5,
    data_a = d3.range(n),
    data_b = d3.range(n);

tributary.init = function (g) {

    function makeSeal(id) {
        var seal = g.append('g').attr('id', id);

        seal.append('rect').classed('one', true);
        seal.append('rect').classed('two', true);
        seal.append('rect').classed('three', true);
        seal.append('rect').classed('four', true);
    }

    _.each(data_a, function (d, i) {
        makeSeal('sa' + d);
    });
    _.each(data_b, function (d, i) {
        makeSeal('sb' + d);
    });
};

tributary.run = function (g, t) {
    var xt = d3.interpolateNumber(X.xt[0], X.xt[1])(t),
        yt = d3.interpolateNumber(X.yt[0], X.yt[1])(t);

    function updateSeal(id, x, y, rcolors, tcolors) { //
        var seal = g.select('#' + id),
            tt = 'translate(' + [x, y] + ')',
            ts = 'scale(' + [1] + ')';

        seal.attr('transform', tt + ts) //
        .style({
            'font-size': font_size,
            'stroke-width': tstroke_width,
            'fill-opacity': fopacity,
        });

        seal.select('rect.one').attr({
            'transform': 'translate(' + [xt, yt] + ')rotate(' + [0, 0, 0] + ')',
            'width': X.rw,
            'height': X.rh,
        }).style({
            'fill': rcolors[0],
            'stroke': rcolors[0],
        });

        seal.select('rect.two').attr({
            'transform': 'translate(' + [-xt, - yt] + ')rotate(' + [180, 0, 0] + ')',
            'width': X.rw,
            'height': X.rh,
        }).style({
            'fill': rcolors[2],
            'stroke': rcolors[2],
        });

        seal.select('rect.three').attr({
            'transform': 'translate(' + [-yt, xt] + ')rotate(' + [90, 0, 0] + ')',
            'width': X.rw,
            'height': X.rh,
        }).style({
            'fill': rcolors[1],
            'stroke': rcolors[1],
        });

        seal.select('rect.four').attr({
            'transform': 'translate(' + [yt, - xt] + ')rotate(' + [-90, 0, 0] + ')',
            'width': X.rw,
            'height': X.rh,
        }).style({
            'fill': rcolors[3],
            'stroke': rcolors[3]
        });

        seal.selectAll('rect').attr({
            'rx': corner,
            'ry': corner,
        }).style({
            'fill-opacity': ropacity,
            'stroke-opacity': rstroke_opacity,
            'stroke-width': rstroke_width,
        });
    }
    _.each(data_a, function (d, i) {
        var x = 0.01 + (i % nx) * scalar,
            y = 0.01 + parseInt(i / nx, 10) * scalar;

        updateSeal('sa' + i, x, y, rcolors_a, tcolors_a);
    });

    _.each(data_b, function (d, i) {
        var x = X.xo + (i % nx) * scalar,
            y = X.yo + parseInt(i / nx, 10) * scalar;

        updateSeal('sb' + i, x, y, rcolors_b, tcolors_b);
    });
};