Skip to content

Instantly share code, notes, and snippets.

@tophtucker
Last active September 13, 2019 10:11
Show Gist options
  • Save tophtucker/5c9cfce5711f8a136a8b to your computer and use it in GitHub Desktop.
Save tophtucker/5c9cfce5711f8a136a8b to your computer and use it in GitHub Desktop.
Decay
<!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() + 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment