<style>\nbody {\n background: white;\n color: black;\n font-family: "Times New Roman", Times, serif;\n}\ndiv {\n font-size:20px;\n line-height: 120%;\n}\na {\n font-weight:bold;\n color:blue;\n}\n</style>
<<include "LinkButtonInclude">>\n<<include "StyleInclude">>\n<span style="position:absolute; top:0px; left:100px; right:0px">\n!About<br/>“I am [not] an<br/> information trap”\n</span>\n<span style="position:absolute; top:500px; left:100px; right:0px">\n<strong>from “<<include "StoryTitle">>”<br/>by <<include "StoryAuthor">></strong>\n</span>\n<div style="display:flex; position:absolute; top:50px; left:100px; right:0px">\n <div style="flex:20%;" class="navMenu">\n\n\n\n\n\n\n\n\n\n\n\n\n<span class="mylinkbutton"><<button [[Return to poem|Start]]>><</button>></span>\n </div>\n <div style="flex:35%;">\nIn this poem I experimented with creating multiple randomly-generated poems that the reader doesn't have time to read in their entirety, and will almost certainly never see again. I wrote a starting poem, then changed 27 words in that poem to produce an ending poem. Every time the poem is “read” those 27 words change in a random order, so there are 27!, or 1.0888869e+28, or 10,888,869,450,418,352,160,768,000,000 possible routes from the start to the end poem.\n\nSo this one poem is in fact nearly eleven thousand million million million million poems! I feel quite good about that.\n\n </div>\n <div style="flex:5%;">\n </div>\n <div style="flex:40%;">\n </div>\n</div>
<<include "LinkButtonInclude">>\n<<include "StyleInclude">>\n<script>\nvar startOpacity = 0.4;\nvar opacityStep = 0.1;\nvar opacityStepTime = 60;\nvar redTimeBefore = 2000;\nvar redTimeAfter = 2000;\nvar baseTime = 0;\nvar buttonTimeDelay = 1000;\nvar changeTimeDelay = 5000;\nvar showTimeDelay = 400;\n\nfunction resetColor(el, color) {\n el.style.color = color;\n}\nfunction show(el) {\n el.style.opacity = parseFloat(el.style.opacity) + opacityStep;\n if (el.style.opacity < 1) {\n setTimeout(show, opacityStepTime, el);\n } else {\n setTimeout(resetColor, redTimeAfter, el, "black");\n }\n}\nfunction fadeIn(el) {\n el.style.opacity = startOpacity;\n el.style.display = "inline";\n el.style.color = "red";\n setTimeout(show, showTimeDelay, el);\n}\nfunction randomSort(coll) {\n var i;\n var j;\n var temp;\n for(i = coll.length - 1; i > 0; i--) {\n j = Math.floor(Math.random() * (i+1));\n temp = coll[i];\n coll[i] = coll[j];\n coll[j] = temp;\n }\n return coll;\n}\nfunction hideEl(el) {\n el.style.display="none";\n}\nfunction showNextEl(el,nextel) {\n resetColor(el, "red");\n setTimeout(hideEl, redTimeBefore, el);\n baseTime += redTimeBefore;\n setTimeout(fadeIn,redTimeBefore,document.getElementById(nextel));\n}\nfunction setButtonVisibility(buttonid,vis) {\n document.getElementById(buttonid).style.visibility = vis;\n}\nfunction startChanges() {\n setButtonVisibility("resetbutton", "hidden");\n setButtonVisibility("showstartbutton", "hidden");\n setButtonVisibility("startbutton", "hidden");\n var elcollidxarray = [];\n elcoll = document.getElementsByClassName("switchable");\n var i;\n for( i = 0; i < elcoll.length ; i++ ) {\n elcollidxarray.push(i);\n }\n elcollidxarray = randomSort(elcollidxarray);\n var num;\n var thiselidx;\n var nextelid;\n for( num = 0 ; num < elcollidxarray.length ; num++ ) {\n thiselidx = elcollidxarray[num];\n nextelid = "span" + thiselidx + "a";\n setTimeout(showNextEl,baseTime,elcoll[thiselidx],nextelid);\n baseTime+= changeTimeDelay;\n }\n baseTime+=buttonTimeDelay;\n setTimeout(setButtonVisibility,baseTime,"resetbutton","visible");\n setTimeout(setButtonVisibility,baseTime,"showstartbutton","visible");\n}\nfunction showStart() {\n document.getElementById("showstartbutton").style.visibility = "hidden";\n document.getElementById("startPoem").style.visibility = "visible";\n}\ndocument.addEventListener("load", setButtonVisibility("startbutton","visible"));\n</script>\n<span style="position:absolute; top:0px; left:100px; right:0px">\n!I <span id="span0" class="switchable">am</span><span id="span0a" style="display:none">am not</span> an information trap\n<span style="position:absolute; top:500px; left:0px; right:0px">\n<strong>from<br/>“<<include "StoryTitle">>”<br/>by <<include "StoryAuthor">></strong>\n</span>\n<div style="display:flex; position:absolute; top:50px; left:0px; right:0px">\n <div style="flex:20%;" class="navMenu">\n\n\n\n\n<span class="mylinkbutton" id="resetbutton" style="visibility:hidden"><<link "Reset">><<script>>Engine.play("Start");<</script>><</link>></span>\n\n<span class="mylinkbutton" id="showstartbutton" style="visibility:hidden"><<link "Show starting poem">><<script>>showStart();<</script>><</link>></span>\n\n<span class="mylinkbutton" id="startbutton"><<link "Start">><<script>>startChanges();<</script>><</link>></span>\n\n\n<span class="mylinkbutton" id="aboutbutton"><<button [[About the poem|AboutInfoTrap]]>><</button>></span>\n </div>\n<div style="flex:40%">\n\n\n\nInformation <span id="span1" class="switchable">flares</span><span id="span1a" style="display:none">trickles</span> out\nthe way the <span id="span2" class="switchable">sun</span><span id="span2a" style="display:none">moon</span> <span id="span3" class="switchable">emits</span><span id="span3a" style="display:none">reflects</span> <span id="span4" class="switchable">plasma</span><span id="span4a" style="display:none">photons</span>,\n\na <span id="span5" class="switchable">blustering</span><span id="span5a" style="display:none">meandering</span> <span id="span6" class="switchable">wind</span><span id="span6a" style="display:none">eddy</span> of <span id="span7" class="switchable">charged</span><span id="span7a" style="display:none">indifferent</span> <span id="span8" class="switchable">particles</span><span id="span8a" style="display:none">sunlight</span>.\nWhen I am <span id="span9" class="switchable">shiny</span><span id="span9a" style="display:none">dull</span>, I <span id="span10" class="switchable">can</span><span id="span10a" style="display:none">can't</span> <span id="span11" class="switchable">soothe</span><span id="span11a" style="display:none">catch</span> it\n\n<span id="span12" class="switchable">in my eyes and ears</span><span id="span12a" style="display:none">with any sense</span>, <span id="span13" class="switchable">funnel</span><span id="span13a" style="display:none">can't funnel</span> it\ninto <span id="span14" class="switchable">my motor cortex</span><span id="span14a" style="display:none">my lunatic wits</span>. My pen\n\n<span id="span15" class="switchable">meets</span><span id="span15a" style="display:none">seeks</span> paper, <span id="span16" class="switchable">closes the circuit</span><span id="span16a" style="display:none">short-circuits</span>,\n<span id="span17" class="switchable">plugs</span><span id="span17a" style="display:none">melts</span> my hippocampus <span id="span18" class="switchable">in to charge with</span><span id="span18a" style="display:none">so it can't charge</span>\n\n<span id="span19" class="switchable">new</span><span id="span19a" style="display:none">any</span> memories. The marks I <span id="span20" class="switchable">lay down</span><span id="span20a" style="display:none">scatter</span>\nare <span id="span21" class="switchable">almost</span><span id="span21a" style="display:none">beyond</span> irrelevant. I doodle—I <span id="span22" class="switchable">remember</span><span id="span22a" style="display:none">disperse</span>.\n\nI set light to my <span id="span23" class="switchable">notes</span><span id="span23a" style="display:none">memories</span>—still I <span id="span24" class="switchable">remember</span><span id="span24a" style="display:none">forget</span>.\nEven <span id="span25" class="switchable">in ash</span><span id="span25a" style="display:none">illuminated</span> the marks are <span id="span26" class="switchable">permanent</span><span id="span26a" style="display:none">invisible</span>.\n</div>\n<div style="flex:40%;visibility:hidden" id="startPoem">\n\n\n\nInformation flares out\nthe way the sun emits plasma,\n\na blustering wind of charged particles.\nWhen I am shiny, I can soothe it\n\nin my eyes and ears, funnel it\ninto my motor cortex. My pen\n\nmeets paper, closes the circuit,\nplugs my hippocampus in to charge with\n\nnew memories. The marks I lay down\nare almost irrelevant. I doodle—I remember.\n\nI set light to my notes—still I remember.\nEven in ash the marks are permanent.\n</div>\n</div>
<style>\n.navMenu a {\n background-color: #3355AA;\n color: white;\n padding: 0px 2px;\n text-align: center;\n text-decoration: none;\n font-weight: bold;\n display: inline-block;\n font-size: 16px;\n margin: 2px 4px;\n border: none;\n}\n.navMenu a:hover {\n background-color: #5276CF;\n color: white !important;\n padding: 0px 2px;\n font-weight: bold;\n display: inline-block;\n font-size: 16px;\n margin: 2px 4px;\n border: none;\n text-decoration: none !important;\n color: white;\n}\n.mylinkbutton {\n background-color: #3355AA;\n color: white;\n padding: 0px 2px;\n text-align: center;\n text-decoration: none;\n font-weight: bold;\n display: inline-block;\n font-size: 16px;\n margin: 2px 4px;\n border: none;\n}\n.mylinkbutton:hover {\n background-color: #5276CF;\n color: white !important;\n padding: 0px 2px;\n font-weight: bold;\n display: inline-block;\n font-size: 16px;\n margin: 2px 4px;\n border: none;\n text-decoration: none !important;\n color: white;\n}\n</style>
// disable the debug view\n(function () {\n\tSetting.addHeader("Debug Settings");\n\n\tfunction initSettingDebug() {\n\t\tConfig.debug = settings.debug;\n\t}\n\tSetting.addToggle("debug", {\n\t\tlabel : "Enable test/debug mode?",\n\t\tdefault : false,\n\t\tonInit : initSettingDebug,\n\t\tonChange : function () {\n\t\t\tinitSettingDebug();\n\t\t\twindow.location.reload();\n\t\t}\n\t});\n})();\n\n// get rid of the UI bar on the LHS\nUIBar.destroy();\n
.mybutton {\n background-color: #3355AA;\n color: white;\n padding: 6px 6px;\n text-align: center;\n text-decoration: none;\n font-weight: normal;\n display: inline-block;\n font-size: 16px;\n margin: 2px 0px;\n border: none;\n}\n.mybutton:hover {\n background-color: #2C488E;\n text-decoration: none;\n color: white;\n}
.flex-container {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-content: space-between;\n}
#passages {\n\tmargin: 100px;\n max-width: 1500px;\n}
everything is pieces of itself
Pippa Hennessy