-
Notifications
You must be signed in to change notification settings - Fork 0
/
sunday8.html
28 lines (28 loc) · 3.59 KB
/
sunday8.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- still too big; made functions for drawing a, rectangles, changed T to path vs polygon points, repeatcount indefinite->99, removed check for f() at the end we'll assume we always have an function in each line
-->
</head>
<body><style>#d{stroke:#000}#d.p{fill:url(#g)}div{width:50vh}</style><div><svg viewbox="0 0 100 100"><defs><linearGradient id="R"x1="0"y1="0"x2="0"y2="100%"><stop offset="0%"stop-color="hsl(15,100%,50%)"/><stop offset="33%"stop-color="hsl(90,100%,50%)"/><stop offset="66%"stop-color="hsl(240,1,50%)"/><stop offset="100%" stop-color="hsl(360,100%,50%)"/></linearGradient></defs><pattern id="g"x="0"y="0"width="100%"height="300%"><rect x="0"y="0"width="100%"height="150%"fill="url(#R)"><animate attributeName="y"from="0"to="149%"dur="5s"repeatCount="99"/></rect><rect x="0"y="150%"width="100%"height="150%"fill="url(#R)"><animate attributeName="y" from="-150%"to="0"dur="5s"repeatCount="99"/></rect></pattern><g id="d" class="p"></g></svg></div><p id="I"></p><script>s=t=>document.getElementById(t),
t=(e,s)=>e.textContent+=" "+s,
h=(e,h)=>e.innerHTML=e.innerHTML+h,
c=(x,y,w,h)=>`<rect x="${x}"y="${y}"width="${w}"height="${h}"/>`,j=(x,y)=>`<path d="m${x},${y}-1.6,-7.6,-1.7,7.6h3.3zm5.9 6.6h-3.9l-1-3.4h-5.2l-1 3.4h-3.9l4.9-15.6c.2-.6.5-1.1.9-1.5.5-.5 1-.7 1.7-.7.7 0 1.3.2 1.9.7.5.4.8 1 1 1.7l4.6 15.4z"/>`,I=s('I'),d=s('d'),D=d.classList,w=1000,N=i=>i+1,
L=[{l:.1,f(){D.remove('p')},a:""},
{f(){h(d,c(28.2,6,5.5,47))},a:"It’s 1981 or so. Probably a Sunday afternoon. Mom takes me to the mall. The good one with a Radio Shack and an arcade, not the boring one with jewelry, fashion."},
{f(){h(d,`<path d="M3 53C16 53 26 41 26 26V6h-4V19C22 33 14 45 3 46v7Z"/>`)},a:"The big department store at the far end. I beeline to the electronics department. The sound of televisions gives it away. Rows of RCAs and Magnavoxes, resplendent in woodgrain cabinets, a buzz that kid hearing can't miss."},
{f(){h(d,`<path d="M58,53C46,53,36,41,36,26V6h4V20c0,13,8,25,18,26v7Z"/>`)}, a:"It’s not TVs I’m there to see, it’s the TV games, it’s the computers. An Atari 400. The cute lid pops open to reveal the cartridge slot. Sleek, flat keyboard, all browns and oranges. What I want to see and touch."},
{f(){h(d,j(11.7,66.6))},a:"My internal timer counts down to the moment when I’m told to come on, Kay, we have to go. I try not to let nagging inevitability ruin it."},
{f(){h(d,`<path d="m26.6 59-3.4 0 0 14.2-3.8 0 0-14.2-3.4 0 0-3.4 10.6 0z"/>`)},a:"Maybe the Atari is running MEMO PAD. A blank electronic slate, a blue canvas. My words appear but don’t do anything. I draw a simple picture. As I type, the speaker makes a succinct tick, tick, tick."},
{f(){h(d,j(34.12,66.5))},a:"Or there might be a BASIC cartridge under that lid. A one-person speed programming challenge now. What little program can I create in the few minutes I have? Tick, tick, tick."},
{f(){h(d,`<path d="m49 73-4.2-8.4c0-1 .5-1.5 1.8-2 3.6-1.5 2.2-3.4.2-3.9h-2.2V73h-4v-15c.3-1.6.7-2.1 2.3-2.5h3.7c2.2.3 4.5.5 5.3 4.7-.2 2.3-.2 2.9-3.4 4.9L53 73z"/>`)},a:"Or, if I hit the jackpot, there might be a BASIC programming cartridge under that pop-open lid. It's a one-person speed programming challenge. What little program can I create in the few minutes that I have? Tick, tick, tick, tick, tick."},
{f(){h(d,c(54.25,55.75,3.8,17.5))},a:"Mom’s calling. "},{f(){D.add('p')},a:"Bye, friend."},
{f(){w=150},a:""}],G=i=>{n=L[i];n.f();t(I,n.a);
i>9?N=i=>10:10;
setTimeout(G,(n.l?n.l:6)*w,N(i))};
G(0)</script>
</body>
</html>