depth blur prototype

_.md

[ Launch: Tributary inlet ] 7c3872d712b4d16f3960 by poezn

assets.svg

<svg width="1074" height="608" viewBox="0 0 1074 608" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
  <filter id="svgBlur1" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur class="blur blur1" in="SourceGraphic" stdDeviation="10"/>
  </filter>

  <filter id="svgBlur2" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur class="blur blur2" in="SourceGraphic" stdDeviation="0"/>
  </filter>
  <filter id="svgBlur3" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur class="blur blur3" in="SourceGraphic" stdDeviation="0"/>
  </filter>
  </defs>
  <title>
        rects
    </title>
    <desc>
        Created with Sketch.
    </desc>
    <defs/>
    <g>
        <g class="level3">
            <rect id="preRectangle-1" x="235" y="0" width="41.746" height="41.766"/>
            <rect id="preRectangle-3" x="235" y="77.196" width="41.746" height="41.766"/>
            <rect id="preRectangle-4" x="308.408" y="77.196" width="41.746" height="41.766"/>
            <rect id="preRectangle-2" x="308.408" y="0" width="41.746" height="41.766"/>
            <rect id="preRectangle-2" x="235" y="155.126" width="41.746" height="41.766"/>
            <rect id="preRectangle-3" x="153.816" y="154.392" width="41.746" height="41.766"/>
            <rect id="preRectangle-2" x="0" y="0" width="41.746" height="41.766"/>
            <rect id="preRectangle-4" x="0" y="77.196" width="41.746" height="41.766"/>
            <rect id="preRectangle-5" x="73.408" y="77.196" width="41.746" height="41.766"/>
            <rect id="preRectangle-3" x="73.408" y="0" width="41.746" height="41.766"/>
            <rect id="preRectangle-3" x="155.126" y="0" width="41.746" height="41.766"/>
            <rect x="155.126" y="77.196" width="41.746" height="41.766"/>
            <rect id="preRectangle-3" x="0" y="155.126" width="41.746" height="41.766"/>
            <rect id="preRectangle-4" x="73.408" y="155.126" width="41.746" height="41.766"/>
        </g>
        <g transform="translate(120 29)" class="level2">
            <rect id="preRectangle-1" x="0" y="0" width="87.731" height="87.771"/>
            <rect id="preRectangle-3" x="0" y="162.229" width="87.731" height="87.771"/>
            <rect id="preRectangle-4" x="154.269" y="162.229" width="87.731" height="87.771"/>
            <rect id="preRectangle-2" x="154.269" y="0" width="87.731" height="87.771"/>
            <rect id="preRectangle-2" x="326" y="0" width="87.731" height="87.771"/>
            <rect id="preRectangle-4" x="326" y="162.229" width="87.731" height="87.771"/>
            <rect id="preRectangle-2" x="0" y="326" width="87.731" height="87.771"/>
            <rect id="preRectangle-3" x="154.269" y="326" width="87.731" height="87.771"/>
        </g>
        <g transform="translate(660 19)" class="level2">
            <rect id="preRectangle-1" x="0" y="0" width="87.731" height="87.771"/>
            <rect id="preRectangle-3" x="0" y="162.229" width="87.731" height="87.771"/>
            <rect id="preRectangle-4" x="154.269" y="162.229" width="87.731" height="87.771"/>
            <rect id="preRectangle-2" x="154.269" y="0" width="87.731" height="87.771"/>
            <rect id="preRectangle-2" x="326" y="0" width="87.731" height="87.771"/>
            <rect id="preRectangle-4" x="326" y="162.229" width="87.731" height="87.771"/>
            <rect id="preRectangle-2" x="0" y="326" width="87.731" height="87.771"/>
            <rect id="preRectangle-3" x="154.269" y="326" width="87.731" height="87.771"/>
        </g>
        <g transform="translate(330 99)" class="level1">
            <rect x="0" y="0" width="178" height="178"/>
            <rect x="0" y="329" width="178" height="178"/>
            <rect x="313" y="329" width="178" height="178"/>
            <rect x="313" y="0" width="178" height="178"/>
        </g>
    </g>
</svg>

config.json

{"description":"depth blur prototype","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"assets.svg":{"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,"ajax-caching":true,"controls":{},"inline-console":true,"thumbnail":"http://i.imgur.com/SRr2Kpf.png"}

inlet.js

var currentLevel = 1;

function renderBlur() {
	g.selectAll(".blur")
	.transition()
    .duration(500)
    .attr({
      "stdDeviation": function(d, i) {
        if (i+1 != currentLevel) {
	        return Math.abs(currentLevel - (i + 1)) * 10;
        }
        return 0;
      }
    })

};

renderBlur();

d3.selectAll(".level1 rect")
.on("click", function() {
	console.log(1); currentLevel = 1; renderBlur();
  d3.selectAll(".level1 rect").transition().style("opacity", 1)
  d3.selectAll(".level2 rect, .level3 rect").transition().style("opacity", 0.5)
});

d3.selectAll(".level2 rect")
.on("click", function() {
	console.log(2); currentLevel = 2; renderBlur();
  d3.selectAll(".level2 rect").transition().style("opacity", 1)
  d3.selectAll(".level1 rect, .level3 rect").transition().style("opacity", 0.5)
});

d3.selectAll(".level3 rect")
.on("click", function() {
	console.log(3); currentLevel = 3; renderBlur();
  d3.selectAll(".level3 rect").transition().style("opacity", 1)
  d3.selectAll(".level1 rect, .level2 rect").transition().style("opacity", 0.5)
});

styles.css

#display {
	background-color: #FFF;
}

.level1 {
	fill: #4A90E2;
}

.level2 {
	fill: #F5A623;
}

.level3 {
	fill: #B8E986;
}

.level1 rect {
  filter: url(#svgBlur1);
}

.level2 rect {
  filter: url(#svgBlur2);
}

.level3 rect {
  filter: url(#svgBlur3);
}