/
layerpp.html
executable file
·172 lines (149 loc) · 8.98 KB
/
layerpp.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<title>Layer Ping Pong</title>
<script>
var minidx = 1, maxidx = 10;
var idx = 1;
var storytext = [];
function loadShip(direction) {
idx = Math.max(minidx, Math.min(maxidx, idx + direction));
$("#ship").attr("src", "./files/images/layerpp/volley" + idx + ".png");
$("#ship").attr("height", "300");
$("#prev").css("color", (idx == minidx)? "#999" : "black");
$("#next").css("color", (idx == maxidx)? "#999" : "black");
$("#allstories").append($("#story").children().hide());
$("#story").empty();
$("#story").append($("#story"+idx).show());
}
$(document).ready(function(){
$(document).keydown(function(e) {
switch (e.which) {
case 39:
loadShip(1); break;
case 37:
loadShip(-1); break;
}});
for (var i = minidx; i <= maxidx; i++)
$("#story"+i).hide();
loadShip(0);
$("#next").click(function(x){loadShip(1);});
$("#prev").click(function(x){loadShip(-1);});
});
</script>
</head>
<body>
<div id="content">
<div class="textcontainer">
<div class="subtitle">
<a href="http://www.kalecrusaders.com">Mere</a><a href="http://www.marcua.net">cua</a>, <a href="http://caretdashcaret.wordpress.com">CaretDashCaret</a> and <a href="http://www.pantsornopants.com">Pornp</a> present
</div>
<div class="name"><span style="font-size: 32pt">Layer Ping Pong</span><br/>Throwdown in November</div>
<div class="buttons"><a id="prev" href="#">prev</a><a id="next" href="#">next</a></div>
</div>
<div id="frame"><img id="ship" src="./files/images/layerpp/volley1.png"></img></div>
<div class="textcontainer" id="allstories">
<div id="story">
<div id="story1">
<p>To: CaretDashCaret
<p>From: Pornp
<p>When: Nov. 22, 2014, 11:30 AM EST
<p>Subject: A friendly gathering
<p>Dear CaretDashCaret,
<p>You are cordially invited for an evening of laughter, celebration, and sliced turkey. A friend thanksgiving, if you will, since we're friends after all. I will take care of some appetizers, the main course, a dessert, and...the potables. Let's just say this is an evening that some of us won't forget.
The ball is in your court RSVP soon, or else.
<p>Sincerely,
<p>Pornp
</div>
<div id="story2">
<p>Attn: Pornp
<p>Subject: RSVP, WITH FORCE
<p>Delivery method: Inter-office mailing envelope
<p>Pornp,
<p>Thank you for your kind invitation. I am unfortunately unable to attend due to the short notice. I assure you that it's nothing personal, and as a sign of our continuing friendship, I've sent you a delightful surprise. At around 11:45 AM EST, please open your door to see what awaits you. I promise this will be a spectacle to remember.
<p>Cordially yours,
<p>CaretDashCaret
</div>
<div id="story3">
<p>Let's just say Pornp was surprised, but not disarmed. All of those packets of jelly he had collected at rest stops over the years finally came in handy, especially in combination with his correspondence course in necromancy.
<p>A casual observer might think that CaretDashCaret would be completely stunned. And she was, but by the skyline: on a clear day like today, Lower Manhattan can't get more amazing than this.
<p>Will this be CaretDashCaret's last stand, or does she have a few tricks up her sleeve? Given the amazing punch she packed in the last volley, we here in the audience think we might see a few more to come.
</div>
<div id="story4">
<p>Pornp did invite CaretDashCaret for a snack after all, didn't he? CaretDashCaret, not wanting to be rude, accepted the invite on her own terms.
<p>Luckily, she had also been to a rest stop recently, and, unsheathing her plastic spoon, took the blood-sugar challenge. Egging Pornp along, she asked “Y u jelly, Pornp?”
<p>Pornp seems like he's in a sticky bind, and CaretDashCaret is feasting on his recent turn. Will he recover from the latest volley? Only 15 minutes will tell...
</div>
<div id="story5">
<p>CaretDashCaret is stuck in a fractal nightmare. Those seemingly innocuous ping pong balls in the turkey dinner Pornp whipped up? Apparently, they weren't innocuous. And they were human.
<p>Luckily, CaretDashCaret's original onesie conveniently converted into a top and bottom without too much modification <i>[-1 POINT FOR CONSISTENCY, MR. PORNP!]</i>. Things are looking mighty unfortunate for our hungry adventurer, but at least we won't be having any wardrobe malfunctions today!
<p>For those of you in the audience that aren't already getting heart palpitations from this riveting storyline, here's a bit of armchair design observation. Note that Pornp, presumably feeling the heat from CaretDashCaret's voracious appetite, has switched to a flat design for his Jelly monster. Texture be damned, this is a war!
</div>
<div id="story6">
<p>If we had at all paid attention in english class, we'd know whether we've hit the climax of this story, or the <i>denouement</i>. Since we don't speak French well enough, we'll just be as surprised as CaretDashCaret looks. Those eyes!
<p>You have to be wondering how folks feel right now. Does CaretDashCaret feel laden with despair, or is she getting drunk off of the power that's enveloping her? Did Pornp design this, or has he created a monster with agency that even he can't control?
<p>We don't know, but someone better get a tube of triple antibiotic. That arm doesn't look good.
<p>Stay tuned folks: we have two volleys left, and they decide THE FUTURE.
</div>
<div id="story7">
<p>If you crack open your copy of <i>Gray's Anatomy</i> to basically any page, you're certain not to see Ouroboros-eyes. Pornp has set CaretDashCaret up for quite the surprise, and has sent over a belated reply: “who jelly now!??!?!”
<p>This is a truly troubling example of exactly why you should reduce your refined sugar intake while also being sure to balance any intake with a reasonable amount of fiber. We're not endocrinologists, but we're pretty sure CaretDashCaret is going through some unexpected changes right now.
<p>Design note: you can tell Pornp is feeling pretty good—-he's added texture back into his arsenal, and it's disturbing to say the least.
<p>Process note: both artists have decided to extend their volleys. We'll be seeing an extra round from each of them!
</div>
<div id="story8">
<p>Yup. We've officially crossed the line into the stuff that PG-13-rated movies are made of.
<p>Pornp could not have predicted this. CaretDashCaret, not wanting to continue the madness, used Pornp's own implements to poison this plot. But in death there is rebirth, and it apparently has a blue hue to it.
<p>Consistency note: CaretDashCaret is definitely keeping up her end of the bargain as far as visual elements are concerned. Note that the broken turkey leg is maintained across volleys. She also maintains Pornp's aesthetic as well as she's keeping her composure.
</div>
<div id="story9">
<p>Next on Masterpiece Theatre...THERE'S BLOOD ON THE RUG!
<p>Et tu, Brutoid!?!? How did things get this far? Why are the chandelier and the beautiful memorial painting not centered with the dinner scene? Is the painting of the ghost of CaretDashCaret a painting, or a ghost? How does one get a sweet monocle like that? How did Pornp refill the bottle of poison on such short notice? Is that rug allergen-free? Does that table feel objectified?
<p>We don't even.
</div>
<div id="story10">
<p>To: Pornp
<p>From: CaretDashCaret
<p>When: Nov. 22, 2014, 1:45 PM EST
<p>Subject: So I says to him, I says...
<p>Delivery method: llama
<p>That's a great idea, Pornp! Let's get lunch or whatever.
<p>You won't believe the dream I had the other night, but I'll tell you when we hang out later today!
</div>
</div>
</div>
</div>
</body>
<div class=footer>
<!--© 2010 <a id="mylink" href="http://www.sirrice.com">Eugene Wu</a>. -->
</div>
</html>
<style type="text/css">
body {margin: 0px; padding-top: 3%; background-color: #f7f7f7; position:relative;}
#content {width:100%; text-align: center;}
.name {font-family: garamond, arial, helvetica; font-size: 20pt; }
.subtitle {font-size:10pt; color: #962527; position: relative; left:0ex;margin-bottom: 12pt;}
.subtitle a, .subtitle a:visited { text-decoration: none; font-weight: bold;color: #860507;}
#frame {height:300px; margin: 0em; margin-top: 2em; margin-bottom: 2em; text-align:center; padding: 3em; background: white; border: 1px solid #eee;}
.textcontainer{position: relative;}
.textcontainer p { text-align: left;}
.buttons {font-size: 15pt;font-family: 'OFL Sorts Mill Goudy TT', book antiqua, helvetica; }
.buttons a { text-decoration: none; position: relative;}
#prev {left: -6.5ex;}
#next {right: -6.5ex;}
#story {color: #444; font-size: 14pt; width: 70ex; margin-left: auto; margin-right: auto;}
#story quote {font-size: 14pt; color: #778acf;}
.footer {
position: absolute;
bottom: 0px;
text-align: center;
padding: 0px;
padding-bottom: 10px;
width: 100%;
font-size: 10pt;
height: 10pt;
color: #999;
font-family: georgia
}
.footer a { color: #999;}
</style>