collars

_.md

[ Launch: Tributary inlet ] 8176044 by dvdrtrgn

config.json

{"description":"collars","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"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,"thumbnail":"http://i.imgur.com/Gt6QBZp.png"}

inlet.js

/*jslint es5:true, white:false */
/*globals d3 */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
(function () {
    var start = Date.now(),
    /* number of rings */
    n = 5,
    /* radius interval */
    radius = 124,
    /* angle (in degrees) we will split */
    deg = -222,
    /* width of each box */
    width = 160,
    /* time */
    t = 111,
        a = 3,
        ntheta = 22,
        speed_factor = 1 / 66,
        opacity = 0.3,
        stroke_opacity = 0.6,
        stroke_width = 11,
        fill_color = '#000000',
        stroke_colors = ['#ffffff', '#000000'],
        corners = 66;

    var colors = [
        '#D40067',
        '#4DA9DF',
        '#00ff00',
        '#ff0000',
    ];

    var k, color_scale;
    // interpolate over multiple colors
    var sw = parseInt(d3.select('svg').style('width'), 10);
    // make the sin waves extend past the width a little
    sw += (0.1 * sw);

    var sh = parseInt(d3.select('svg').style('height'), 10);

    var rings = [], i;

    for (i in d3.range(n)) {
        var speed = i * speed_factor;
        rings.push({
            radius: radius * i,
            width: width,
            speed: speed,
            phase: i,
        });
    }

    var svg = d3.select('svg');

    svg.append('rect') //
    .attr('width', sw) //
    .attr('height', sh) //
    .attr('fill', '#888888');

    svg = svg.append('svg:g') //
    .attr('transform', 'translate(' + sw / 2 + ',' + sh / 2 + ') scale(.6)');

    var updateRing = function (elapsed) {
        var rotate = function (d, i) {
            return 'rotate(' + (a * d.speed * elapsed) + ')';
        };

        var rings = svg.selectAll('g.ring') //
        .attr('transform', rotate) //
        .selectAll('rect') //
        .attr('transform', rotate) //
        //.attr('fill', fill_color)
        .attr('fill-opacity', opacity) //
        .attr('stroke', function (d, i) {
            return stroke_colors[i % 2]; //
        })
        .attr('stroke-opacity', stroke_opacity) //
        .attr('stroke-width', stroke_width) //
        .attr('rx', corners) //
        .attr('ry', corners);
    };

    function ringEnter(d, i) {
        // split up the circle into squares
        var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2),
            k = deg / theta;

        var color_scale = function (i) {
            var num_interps = colors.length - 1;

            var ord = d3.scale.linear() //
            .domain([0, theta]) //
            .range([0, num_interps]);

            var section = parseInt(ord(i), 10);
            //console.log('section', section)
            var section_size = theta / num_interps;

            // get the two colors we want to interpolate between
            var col_range = [colors[section], colors[section + 1]];

            var col_scale = d3.scale.linear() //
            .domain([section * section_size, (section + 1) * section_size]) //
            //.interpolate(d3.interpolateRgb)
            .interpolate(d3.interpolateHsl) //
            .range(col_range);
            return col_scale(i);
        };

        d3.select(this).selectAll('g') //
        .data(d3.range(theta).map(function () {
            return d;
        })) //
        .enter().append('svg:g') //
        .attr('class', 'square') //
        .attr('transform', function (_, i) {
            return 'rotate(' + i * k + ') translate(' + d.radius + ')';
        })
        .append('svg:rect') //
        .attr('x', - d.width / 2) //
        .attr('y', - d.width / 2) //
        .attr('width', d.width) //
        .attr('height', d.width) //
        .attr('fill', function (d, i) { //
            return color_scale(i);
        });
    }

    var ring = svg.selectAll('g') //
    .data(rings) //
    .enter().append('svg:g') //
    .attr('class', 'ring') //
    .each(ringEnter);

    updateRing(t);
}());
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */