pstuffa/index.html

## index.html
<!DOCTYPE html>
<!-- Paul Buffa 2015
  -->
<meta charset="utf-8">
<style>

  .waves {
    font: 14px sans-serif;
    font-weight: bolder;
  }

  .hiddenMessage {
    font: 14px sans-serif;
    font-weight: bolder;
  }

</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<body>

<script>

  var width = 960,
      height = 500,
      rows = 70,
      robotRows = rows / 3,
      columns = 9,
      robotSays = "Through throats where many rivers meet, the curlews cry Under the conceiving moon, on the high chalk hill, And there this night I walk in the white giants thigh Where barren as boulders women lie longing still To labour and love though they lay down long ago. Through throats where many rivers meet, the women pray, Pleading in the waded bay for the seed to flow Though the names on their weed grown stones are rained away And alone in the nights eternal, curving act They yearn with tongues of curlews for the unconceived And immemorial sons of the cudgelling, hacked Hill. Who once in gooseskin winter loved all ice leaved In the courters lanes, or twined in the ox roasting sun In the wains tonned so high that the wisps of the hay Clung to the pitching clouds, or gay with any one Young as they in the after milking moonlight lay Under the lighted shapes of faith and their moonshade Petticoats galed high, or shy with the rough riding boys,Now clasp me to their grains in the gigantic glade, Who once, green countries since, were a hedgerow of joys. Time by, their dust was flesh the swineherd rooted sly, Flared in the reek of the wiving sty with the rush Light of his thighs, spreadeagle to the dunghill sky, Or with their orchard man in the core of the sun's bush Rough as cows' tongues and trashed with brambles their buttermilk Manes, under his quenchless summer barbed gold to the bone, Or rippling soft in the spinney moon as the silk And ducked and draked white lake that harps to a hail stone. Who once were a bloom of wayside brides in the hawed house And heard the lewd, wooed field flow to the coming frost, The scurrying, furred small friars squeal, in the dowse Of day, in the thistle aisles, till the white owl crossed Their breast, the vaulting does roister, the horned bucks climb Quick in the wood at love, where a torch of foxes foams, All birds and beasts of the linked night uproar and chime And the mole snout blunt under his pilgrimage of domes, Or, butter fat goosegirls, bounced in a gambo bed, Their breasts full of honey, under their gander king Trounced by his wings in the hissing shippen, long dead And gone that barley dark where their clogs danced in the spring, And their firefly hairpins flew, and the ricks ran round — (But nothing bore, no mouthing babe to the veined hives Hugged, and barren and bare on Mother Goose's ground They with the simple Jacks were a boulder of wives) — Now curlew cry me down to kiss the mouths "

  var svg = d3.select("body")
              .append("svg")
              .attr("height", height)
              .attr("width", width);

  var colorScale = d3.scale.category20();

  function translateToRobot(robotWords) {
    var robotWordSplit = [],
        groupings = Math.round(robotWords.length / robotRows,0);

      for(var i = 0; i < groupings; i++) {

        var line = robotWords.substring(groupings*i,groupings*(i+1));
        robotWordSplit.push(line);
      }
    return robotWordSplit;
  }

  function makeWaves(someList) {
    for (var i = 0; i < rows; i++) {
      if(i % 2 == 0) {  wave = '/' }
      else { wave = '|' }
        for (var j = 0; j < columns; j++) {
          wave += wave
        }
        someList.push(wave)
      }
    }

  function makeOppWaves(someList) {
    for (var i = 0; i < rows; i++) {
      if(i % 2 == 0) {  wave = '(' }
      else { wave = ')' }
        for (var j = 0; j < columns; j++) {
          wave += wave
        }
        someList.push(wave)
      }
    }

  var waveSet = [];
  makeWaves(waveSet)

  var waveOppSet = [];
  makeOppWaves(waveOppSet)

  svg.append("rect")
    .attr("height", height)
    .attr("width", width)
    .style("fill", "blue")
    .style("fill-opacity", .2);

  var robotWordSplit = translateToRobot(robotSays);

  svg.selectAll(".hiddenMessage")
    .data(robotWordSplit)
    .enter().append("text")
    .attr("class","hiddenMessage")
    .style("fill-opacity",0)
    .attr("y", function(d,i) { return (i * 15) + 100; })
    .attr("x", 100)
    .text(function(d,i) { return d; });

  svg.selectAll(".waves")
    .data(waveSet)
    .enter().append("text")
    .attr("class","waves")
    .style("fill","brown")
    .attr("y", function(d,i) { return i * 10; })
    .attr("x", 10)
    .text(function(d,i) { return d;  })
    .call(looper);

  svg.selectAll(".waves")
    .data(waveOppSet)
    .transition()
    .duration(10000)
    .attr("class","waves")
    .style("fill","black")
    .delay(function(d,i) { return i * 10; })
    .ease("linear")
    .text(function(d,i) { return d;  })
    .call(looper);

  var i = 0;
  function looper() {

    i++
      if(i % 2 == 0) { var data = waveOppSet; }
                else { var data = waveSet; }

      svg.selectAll(".waves")
        .data(data)
        .transition()
        .duration(6000)
        .delay(function(d,i) { return i * 30; })
        .ease("linear")
        .attr("class","waves")
        .text(function(d,i) { return d;  })
        .style("fill",colorScale(i))
        .each("end", function() { d3.select(this).call(looper); });
  }

d3.selectAll(".waves").on("mousemove", function() {
      d3.select(this).text("|||||||||||||||||||||||")
    });

d3.selectAll(".hiddenMessage")
.on("mousemove", function() {
  d3.select(this)
  .transition()
  .duration(500)
  .style("fill-opacity",1)
  .transition()
  .duration(3000)
  .style("fill-opacity",0)
})


</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<!-- Paul Buffa 2015
	-->
	<meta charset="utf-8">
	<style>

	.waves {
	font: 14px sans-serif;
	font-weight: bolder;
	}

	.hiddenMessage {
	font: 14px sans-serif;
	font-weight: bolder;
	}

	</style>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

	<body>

	<script>

	var width = 960,
	height = 500,
	rows = 70,
	robotRows = rows / 3,
	columns = 9,
	robotSays = "Through throats where many rivers meet, the curlews cry Under the conceiving moon, on the high chalk hill, And there this night I walk in the white giants thigh Where barren as boulders women lie longing still To labour and love though they lay down long ago. Through throats where many rivers meet, the women pray, Pleading in the waded bay for the seed to flow Though the names on their weed grown stones are rained away And alone in the nights eternal, curving act They yearn with tongues of curlews for the unconceived And immemorial sons of the cudgelling, hacked Hill. Who once in gooseskin winter loved all ice leaved In the courters lanes, or twined in the ox roasting sun In the wains tonned so high that the wisps of the hay Clung to the pitching clouds, or gay with any one Young as they in the after milking moonlight lay Under the lighted shapes of faith and their moonshade Petticoats galed high, or shy with the rough riding boys,Now clasp me to their grains in the gigantic glade, Who once, green countries since, were a hedgerow of joys. Time by, their dust was flesh the swineherd rooted sly, Flared in the reek of the wiving sty with the rush Light of his thighs, spreadeagle to the dunghill sky, Or with their orchard man in the core of the sun's bush Rough as cows' tongues and trashed with brambles their buttermilk Manes, under his quenchless summer barbed gold to the bone, Or rippling soft in the spinney moon as the silk And ducked and draked white lake that harps to a hail stone. Who once were a bloom of wayside brides in the hawed house And heard the lewd, wooed field flow to the coming frost, The scurrying, furred small friars squeal, in the dowse Of day, in the thistle aisles, till the white owl crossed Their breast, the vaulting does roister, the horned bucks climb Quick in the wood at love, where a torch of foxes foams, All birds and beasts of the linked night uproar and chime And the mole snout blunt under his pilgrimage of domes, Or, butter fat goosegirls, bounced in a gambo bed, Their breasts full of honey, under their gander king Trounced by his wings in the hissing shippen, long dead And gone that barley dark where their clogs danced in the spring, And their firefly hairpins flew, and the ricks ran round — (But nothing bore, no mouthing babe to the veined hives Hugged, and barren and bare on Mother Goose's ground They with the simple Jacks were a boulder of wives) — Now curlew cry me down to kiss the mouths "

	var svg = d3.select("body")
	.append("svg")
	.attr("height", height)
	.attr("width", width);

	var colorScale = d3.scale.category20();

	function translateToRobot(robotWords) {
	var robotWordSplit = [],
	groupings = Math.round(robotWords.length / robotRows,0);

	for(var i = 0; i < groupings; i++) {

	var line = robotWords.substring(groupingsi,groupings(i+1));
	robotWordSplit.push(line);
	}
	return robotWordSplit;
	}

	function makeWaves(someList) {
	for (var i = 0; i < rows; i++) {
	if(i % 2 == 0) { wave = '/' }
	else { wave = '\|' }
	for (var j = 0; j < columns; j++) {
	wave += wave
	}
	someList.push(wave)
	}
	}

	function makeOppWaves(someList) {
	for (var i = 0; i < rows; i++) {
	if(i % 2 == 0) { wave = '(' }
	else { wave = ')' }
	for (var j = 0; j < columns; j++) {
	wave += wave
	}
	someList.push(wave)
	}
	}

	var waveSet = [];
	makeWaves(waveSet)

	var waveOppSet = [];
	makeOppWaves(waveOppSet)

	svg.append("rect")
	.attr("height", height)
	.attr("width", width)
	.style("fill", "blue")
	.style("fill-opacity", .2);

	var robotWordSplit = translateToRobot(robotSays);

	svg.selectAll(".hiddenMessage")
	.data(robotWordSplit)
	.enter().append("text")
	.attr("class","hiddenMessage")
	.style("fill-opacity",0)
	.attr("y", function(d,i) { return (i * 15) + 100; })
	.attr("x", 100)
	.text(function(d,i) { return d; });

	svg.selectAll(".waves")
	.data(waveSet)
	.enter().append("text")
	.attr("class","waves")
	.style("fill","brown")
	.attr("y", function(d,i) { return i * 10; })
	.attr("x", 10)
	.text(function(d,i) { return d; })
	.call(looper);

	svg.selectAll(".waves")
	.data(waveOppSet)
	.transition()
	.duration(10000)
	.attr("class","waves")
	.style("fill","black")
	.delay(function(d,i) { return i * 10; })
	.ease("linear")
	.text(function(d,i) { return d; })
	.call(looper);

	var i = 0;
	function looper() {

	i++
	if(i % 2 == 0) { var data = waveOppSet; }
	else { var data = waveSet; }

	svg.selectAll(".waves")
	.data(data)
	.transition()
	.duration(6000)
	.delay(function(d,i) { return i * 30; })
	.ease("linear")
	.attr("class","waves")
	.text(function(d,i) { return d; })
	.style("fill",colorScale(i))
	.each("end", function() { d3.select(this).call(looper); });
	}

	d3.selectAll(".waves").on("mousemove", function() {
	d3.select(this).text("\|\|\|\|\|\|\|\|\|\|\|\|\|\|\|\|\|\|\|\|\|\|\|")
	});

	d3.selectAll(".hiddenMessage")
	.on("mousemove", function() {
	d3.select(this)
	.transition()
	.duration(500)
	.style("fill-opacity",1)
	.transition()
	.duration(3000)
	.style("fill-opacity",0)
	})



	</script>