tophtucker/index.html

## index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>

<link rel="stylesheet" type="text/css" href="main.css"/>

<body>

<h1>This text will decay in 30 seconds from loading the page.</h1>
<pre class="thirty-seconds"></pre>
<img src="yeats.jpg" class="thirty-seconds">

<h1>This text will decay in 10 minutes from loading the page.</h1>
<pre class="ten-minutes"></pre>
<!-- <img src="yeats.jpg" class="ten-minutes"> -->

<h1>This text will decay from Nov. 3 to Nov. 10; check back later.</h1>
<pre class="one-week"></pre>
<!-- <img src="yeats.jpg" class="one-week"> -->

</body>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" charset="utf-8"></script>
<script src="//cdn.rawgit.com/gka/d3-jetpack/master/d3-jetpack.js" charset="utf-8"></script>
<script src="main.js" charset="utf-8"></script>

</html>

## main.css
html, body {
  width: 100%;
}

pre {
  white-space: pre-wrap;
}

h1 {
  margin: 1em 0 0 0;
}

## main.js
var secondComing = "Turning and turning in the widening gyre\nThe falcon cannot hear the falconer;\nThings fall apart; the centre cannot hold;\nMere anarchy is loosed upon the world,\nThe blood-dimmed tide is loosed, and everywhere\nThe ceremony of innocence is drowned;\nThe best lack all conviction, while the worst\nAre full of passionate intensity.\n\nSurely some revelation is at hand;\nSurely the Second Coming is at hand.\nThe Second Coming! Hardly are those words out\nWhen a vast image out of Spiritus Mundi\nTroubles my sight: somewhere in sands of the desert\nA shape with lion body and the head of a man,\nA gaze blank and pitiless as the sun,\nIs moving its slow thighs, while all about it\nReel shadows of the indignant desert birds.\nThe darkness drops again; but now I know\nThat twenty centuries of stony sleep\nWere vexed to nightmare by a rocking cradle,\nAnd what rough beast, its hour come round at last,\nSlouches towards Bethlehem to be born?";

// decay text

d3.select("pre.thirty-seconds")
  .datum(secondComing)
  .call(decayText().domain([new Date(), new Date(+new Date() + 30*1000)]));

d3.select("pre.ten-minutes")
  .datum(secondComing)
  .call(decayText().domain([new Date(), new Date(+new Date() + 10*60*1000)]));

d3.select("pre.one-week")
  .datum(secondComing)
  .call(decayText().domain([new Date("2015-11-03"), new Date("2015-11-10")]));

// decay images

d3.select("img.thirty-seconds")
  .call(decayImage().domain([new Date(), new Date(+new Date() + 10*1000)]));

// d3.select("img.ten-minutes")
//   .call(decayImage().domain([new Date(), new Date(+new Date() + 10*60*1000)]));

// d3.select("img.one-week")
//   .call(decayImage().domain([new Date("2015-11-03"), new Date("2015-11-10")]));

// functions and stuff yo

function decayText() {
  var domain = [new Date(), new Date(+new Date() + 60*1000)],
      mutations = 0,
      decayScale = d3.time.scale();

  function decayer(selection) {
    selection.each(function(text) {

      var sel = d3.select(this)
        .text(text);

      decayScale = decayScale
        .domain(domain)
        .range([0,text.length/2]);

      d3.timer(function(t) {

        var mutationsToPerform = Math.floor(decayScale(new Date())) - mutations;

        if(mutationsToPerform > 0) {
          for (i = 0; i < mutationsToPerform; i++) {
            text = mutateText(text);
          }
          mutations += mutationsToPerform;
          sel.text(text);
        }

      })

    });
  }

  function mutateText(text) {
    var position = Math.floor(Math.random() * text.length);
    var insertion = Math.random() > .9 ? " " : Math.random().toString(36).substring(2,3);
    return stringSplice(text, position, 1, insertion);
  }

  // http://stackoverflow.com/a/21350614/120290
  function stringSplice(str, index, count, add) {
    return str.slice(0, index) + (add || "") + str.slice(index + count);
  }

  decayer.domain = function(_) {
    if (!arguments.length) return domain;
    domain = _;
    return decayer;
  };

  return decayer;
}

function decayImage() {
  var domain = [new Date(), new Date(+new Date() + 60*1000)],
      decayScale = d3.time.scale();

  function decayer(selection) {
    selection.each(function() {

      var sel = d3.select(this);

      decayScale = decayScale
        .domain(domain)
        .range([0,this.offsetWidth/5]);

      d3.timer(function(t) {
        sel.style("filter", "blur(" + decayScale(new Date()) + "px)");
        sel.style("-webkit-filter", "blur(" + decayScale(new Date()) + "px)");
        return new Date() > decayScale.domain()[1];
      })

    });
  }

  decayer.domain = function(_) {
    if (!arguments.length) return domain;
    domain = _;
    return decayer;
  };

  return decayer;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## yeats.jpg

      
    Raw
  

              yeats.jpg
	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>

	<link rel="stylesheet" type="text/css" href="main.css"/>

	<body>

	<h1>This text will decay in 30 seconds from loading the page.</h1>
	<pre class="thirty-seconds"></pre>
	<img src="yeats.jpg" class="thirty-seconds">

	<h1>This text will decay in 10 minutes from loading the page.</h1>
	<pre class="ten-minutes"></pre>
	<!-- <img src="yeats.jpg" class="ten-minutes"> -->

	<h1>This text will decay from Nov. 3 to Nov. 10; check back later.</h1>
	<pre class="one-week"></pre>
	<!-- <img src="yeats.jpg" class="one-week"> -->

	</body>

	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" charset="utf-8"></script>
	<script src="//cdn.rawgit.com/gka/d3-jetpack/master/d3-jetpack.js" charset="utf-8"></script>
	<script src="main.js" charset="utf-8"></script>

	</html>
	html, body {
	width: 100%;
	}

	pre {
	white-space: pre-wrap;
	}

	h1 {
	margin: 1em 0 0 0;
	}
	var secondComing = "Turning and turning in the widening gyre\nThe falcon cannot hear the falconer;\nThings fall apart; the centre cannot hold;\nMere anarchy is loosed upon the world,\nThe blood-dimmed tide is loosed, and everywhere\nThe ceremony of innocence is drowned;\nThe best lack all conviction, while the worst\nAre full of passionate intensity.\n\nSurely some revelation is at hand;\nSurely the Second Coming is at hand.\nThe Second Coming! Hardly are those words out\nWhen a vast image out of Spiritus Mundi\nTroubles my sight: somewhere in sands of the desert\nA shape with lion body and the head of a man,\nA gaze blank and pitiless as the sun,\nIs moving its slow thighs, while all about it\nReel shadows of the indignant desert birds.\nThe darkness drops again; but now I know\nThat twenty centuries of stony sleep\nWere vexed to nightmare by a rocking cradle,\nAnd what rough beast, its hour come round at last,\nSlouches towards Bethlehem to be born?";

	// decay text

	d3.select("pre.thirty-seconds")
	.datum(secondComing)
	.call(decayText().domain([new Date(), new Date(+new Date() + 30*1000)]));

	d3.select("pre.ten-minutes")
	.datum(secondComing)
	.call(decayText().domain([new Date(), new Date(+new Date() + 10601000)]));

	d3.select("pre.one-week")
	.datum(secondComing)
	.call(decayText().domain([new Date("2015-11-03"), new Date("2015-11-10")]));

	// decay images

	d3.select("img.thirty-seconds")
	.call(decayImage().domain([new Date(), new Date(+new Date() + 10*1000)]));

	// d3.select("img.ten-minutes")
	// .call(decayImage().domain([new Date(), new Date(+new Date() + 10601000)]));

	// d3.select("img.one-week")
	// .call(decayImage().domain([new Date("2015-11-03"), new Date("2015-11-10")]));

	// functions and stuff yo

	function decayText() {
	var domain = [new Date(), new Date(+new Date() + 60*1000)],
	mutations = 0,
	decayScale = d3.time.scale();

	function decayer(selection) {
	selection.each(function(text) {

	var sel = d3.select(this)
	.text(text);

	decayScale = decayScale
	.domain(domain)
	.range([0,text.length/2]);

	d3.timer(function(t) {

	var mutationsToPerform = Math.floor(decayScale(new Date())) - mutations;

	if(mutationsToPerform > 0) {
	for (i = 0; i < mutationsToPerform; i++) {
	text = mutateText(text);
	}
	mutations += mutationsToPerform;
	sel.text(text);
	}

	})

	});
	}

	function mutateText(text) {
	var position = Math.floor(Math.random() * text.length);
	var insertion = Math.random() > .9 ? " " : Math.random().toString(36).substring(2,3);
	return stringSplice(text, position, 1, insertion);
	}

	// http://stackoverflow.com/a/21350614/120290
	function stringSplice(str, index, count, add) {
	return str.slice(0, index) + (add \|\| "") + str.slice(index + count);
	}

	decayer.domain = function(_) {
	if (!arguments.length) return domain;
	domain = _;
	return decayer;
	};

	return decayer;
	}

	function decayImage() {
	var domain = [new Date(), new Date(+new Date() + 60*1000)],
	decayScale = d3.time.scale();

	function decayer(selection) {
	selection.each(function() {

	var sel = d3.select(this);

	decayScale = decayScale
	.domain(domain)
	.range([0,this.offsetWidth/5]);

	d3.timer(function(t) {
	sel.style("filter", "blur(" + decayScale(new Date()) + "px)");
	sel.style("-webkit-filter", "blur(" + decayScale(new Date()) + "px)");
	return new Date() > decayScale.domain()[1];
	})

	});
	}

	decayer.domain = function(_) {
	if (!arguments.length) return domain;
	domain = _;
	return decayer;
	};

	return decayer;
	}