Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
224 lines (214 loc) · 22.5 KB
/
Copy pathindex.html
File metadata and controls
224 lines (214 loc) · 22.5 KB
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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">
<title>Taroko Gorge Explained</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<section>
<h1><a href="tarokogorge.html">Taroko Gorge</a> Explained</h1>
<a href="#copyright">next --></a>
</section>
<section>
<h2 id="copyright">The copyright</h2>
<code class="highlight copyright"><pre>
<div class="c1">
<!--
Nick Montfort<br />
Original Python program:<br />
8 January 2009, Taroko Gorge National Park, Taiwan and Eva Air Flight 28<br />
This JavaScript version, with links:<br />
22 November 2017<br />
<br />
Copyright (c) 2009-2017 Nick Montfort <nickm@nickm.com><br />
<br />
Permission to use, copy, modify, and/or distribute this software for any<br />
purpose with or without fee is hereby granted, provided that the above<br />
copyright notice and this permission notice appear in all copies.<br />
<br />
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES<br />
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF<br />
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY<br />
SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES<br />
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN<br />
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR<br />
IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.<br />
<br />
--><br />
</div>
</pre>
</code>
<a href="#stylesheet">next --></a>
</section>
<section>
<h2 id="stylesheet">The stylesheet</h2>
<code class="highlight">
<pre><span></span><span class="nt">body</span> <span class="p">{</span>
<span class="k">background</span><span class="p">:</span> <span class="mh"
style="background-color: #062; color: white">#062</span><span class="p">;</span>
<span class="k">color</span><span class="p">:</span> <span class="mh"
style="background-color: #dad; color: black">#dad</span><span class="p">;</span>
<span class="k">margin</span><span class="p">:</span> <span class="mi">0</span> <span class="mi">24</span><span class="kt">pt</span> <span class="mi">0</span> <span class="mi">24</span><span class="kt">pt</span><span class="p">;</span>
<span class="k">font-family</span><span class="p">:</span> <span class="n">Optima</span><span class="p">,</span> <span class="kc">sans-serif</span><span class="p">;</span>
<span class="k">font-size</span><span class="p">:</span> <span class="mi">13</span><span class="kt">pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">div</span> <span class="p">{</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">16</span><span class="kt">pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">a</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh"
style="background-color: #117; color: white">#117</span><span class="p">;</span>
<span class="k">text-decoration</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
<span class="p">}</span>
</pre></code>
<a href="#poemcode">next --></a>
</section>
<section>
<h2 id="poemcode">The code</h2>
<code class="highlight">
<pre><span></span><span class="c1">// t tracks how many lines have been generated.</span>
<span class="kd">var</span> <span class="nx">t</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="c1">// The interaction between 'n' and 'paths' determines how the next line of the poem is</span>
<span class="c1">// generated. Both start at zero.</span>
<span class="kd">var</span> <span class="nx">n</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">paths</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="c1">// Nouns, I guess?</span>
<span class="kd">var</span> <span class="nx">above</span> <span class="o">=</span> <span class="s1">'brow,mist,shape,layer,the crag,stone,forest,height'</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">','</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">below</span> <span class="o">=</span> <span class="s1">'flow,basin,shape,vein,rippling,stone,cove,rock'</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">','</span><span class="p">);</span>
<span class="c1">// Verbs</span>
<span class="kd">var</span> <span class="nx">trans</span> <span class="o">=</span> <span class="s1">'command,pace,roam,trail,frame,sweep,exercise,range'</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">','</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">imper</span> <span class="o">=</span> <span class="s1">'track,shade,translate,stamp,progress through,direct,run,enter'</span><span class="p">;</span>
<span class="nx">imper</span> <span class="o">=</span> <span class="nx">imper</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">','</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">intrans</span> <span class="o">=</span> <span class="s1">'linger,dwell,rest,relax,hold,dream,hum'</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">','</span><span class="p">);</span>
<span class="c1">// uhhhhh, this is ['s', ''] (so either s or a lack of s)</span>
<span class="kd">var</span> <span class="nx">s</span> <span class="o">=</span> <span class="s1">'s,'</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">','</span><span class="p">);</span>
<span class="c1">// Textures</span>
<span class="kd">var</span> <span class="nx">texture</span> <span class="o">=</span> <span class="s1">'rough,fine'</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">','</span><span class="p">);</span>
<span class="c1">//Gives you a random whole number less than whatever 'max' you give it.</span>
<span class="kd">function</span> <span class="nx">rand_range</span><span class="p">(</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="p">(</span><span class="nx">max</span> <span class="o">+</span> <span class="mi">1</span><span class="p">));</span>
<span class="p">}</span>
<span class="c1">// Chooses a random member of a list.</span>
<span class="kd">function</span> <span class="nx">choose</span><span class="p">(</span><span class="nx">array</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">array</span><span class="p">[</span><span class="nx">rand_range</span><span class="p">(</span><span class="nx">array</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)];</span>
<span class="p">}</span>
<span class="c1">// uh ok now we get into the weird shit</span>
<span class="kd">function</span> <span class="nx">path</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// This picks a random number that is either zero or one.</span>
<span class="c1">// Basically, flip a coin.</span>
<span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="nx">rand_range</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="c1">// Start building our line by picking a random word from the above list</span>
<span class="kd">var</span> <span class="nx">words</span> <span class="o">=</span> <span class="nx">choose</span><span class="p">(</span><span class="nx">above</span><span class="p">);</span>
<span class="c1">// If that word is "forest", one out of 4 times, replace the word with monkeys and</span>
<span class="c1">// a verb</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">words</span> <span class="o">==</span> <span class="s1">'forest'</span><span class="p">)</span> <span class="o">&&</span> <span class="p">(</span><span class="nx">rand_range</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span> <span class="o">==</span> <span class="mi">1</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">words</span> <span class="o">=</span> <span class="s1">'monkeys '</span> <span class="o">+</span> <span class="nx">choose</span><span class="p">(</span><span class="nx">trans</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="c1">// In JS, the % operator means 'remainder after division'.</span>
<span class="c1">// So for any number n, n % 2...</span>
<span class="c1">// * is zero if n is even</span>
<span class="c1">// * is one if n is odd.</span>
<span class="c1">// Since p is either zero or one, (p + 1) is 1 or 2...</span>
<span class="c1">// so if p is 0, (p+1)%2 = 1 % 2 = 1</span>
<span class="c1">// and if p is 1, 2 % 2 = 0.</span>
<span class="c1">// SO! if p is 0, the below line puts an 's' after the first word</span>
<span class="c1">// And if p is 1, this puts an 's' after the second.</span>
<span class="nx">words</span> <span class="o">+=</span> <span class="nx">s</span><span class="p">[</span><span class="nx">p</span><span class="p">]</span> <span class="o">+</span> <span class="s1">' '</span> <span class="o">+</span> <span class="nx">choose</span><span class="p">(</span><span class="nx">trans</span><span class="p">)</span> <span class="o">+</span> <span class="nx">s</span><span class="p">[(</span><span class="nx">p</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">%</span> <span class="mi">2</span><span class="p">];</span>
<span class="p">}</span>
<span class="c1">// Also add a potentially essed below word.</span>
<span class="nx">words</span> <span class="o">+=</span> <span class="s1">' the '</span> <span class="o">+</span> <span class="nx">choose</span><span class="p">(</span><span class="nx">below</span><span class="p">)</span> <span class="o">+</span> <span class="nx">choose</span><span class="p">(</span><span class="nx">s</span><span class="p">)</span> <span class="o">+</span> <span class="s1">'.'</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">words</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">site</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Start this line blank.</span>
<span class="kd">var</span> <span class="nx">words</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
<span class="c1">// One out of three times, add a word from above</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">rand_range</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">words</span> <span class="o">+=</span> <span class="nx">choose</span><span class="p">(</span><span class="nx">above</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="c1">//Every other times, add a word from below</span>
<span class="nx">words</span> <span class="o">+=</span> <span class="nx">choose</span><span class="p">(</span><span class="nx">below</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">words</span> <span class="o">+=</span> <span class="s1">'s '</span> <span class="o">+</span> <span class="nx">choose</span><span class="p">(</span><span class="nx">intrans</span><span class="p">)</span> <span class="o">+</span> <span class="s1">'.'</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">words</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">cave</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Adds some adjectives</span>
<span class="kd">var</span> <span class="nx">adjs</span> <span class="o">=</span> <span class="p">(</span><span class="s1">'encompassing,'</span> <span class="o">+</span> <span class="nx">choose</span><span class="p">(</span><span class="nx">texture</span><span class="p">)</span> <span class="o">+</span> <span class="s1">',sinuous,straight,objective,arched,cool,clear,dim,driven'</span><span class="p">).</span><span class="nx">split</span><span class="p">(</span><span class="s1">','</span><span class="p">);</span>
<span class="c1">// Generate a random number between 1 and 4 to be a target</span>
<span class="kd">var</span> <span class="nx">target</span> <span class="o">=</span> <span class="mi">1</span> <span class="o">+</span> <span class="nx">rand_range</span><span class="p">(</span><span class="mi">3</span><span class="p">);</span>
<span class="c1">// As long as adjs.length is greater than that target...</span>
<span class="k">while</span> <span class="p">(</span><span class="nx">adjs</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="nx">target</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// pick a random adjective to delete.</span>
<span class="nx">adjs</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">rand_range</span><span class="p">(</span><span class="nx">adjs</span><span class="p">.</span><span class="nx">length</span><span class="p">),</span> <span class="mi">1</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// By this point, our list of adjectives has been pared down to have 'target' number</span>
<span class="c1">// of adjectives.</span>
<span class="c1">// The \u00a0 and \u2014 are Majic JavaScrippte Incantations for a space and an</span>
<span class="c1">// em-dash, respectively.</span>
<span class="c1">// So this is two spaces, a random imperative, and all the adjectives, connected</span>
<span class="c1">// together with spaces.</span>
<span class="kd">var</span> <span class="nx">words</span> <span class="o">=</span> <span class="s1">'\u00a0\u00a0'</span> <span class="o">+</span> <span class="nx">choose</span><span class="p">(</span><span class="nx">imper</span><span class="p">)</span> <span class="o">+</span> <span class="s1">' the '</span> <span class="o">+</span> <span class="nx">adjs</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">' '</span><span class="p">)</span> <span class="o">+</span> <span class="s1">' \u2014'</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">words</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">do_line</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// This gets the part of the HTML document with the ID 'main'</span>
<span class="kd">var</span> <span class="nx">main</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'main'</span><span class="p">);</span>
<span class="c1">// If we've got 25 or fewer lines, just go ahead and add them</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">t</span> <span class="o"><=</span> <span class="mi">25</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">t</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="c1">// If we've got more than 25 lines, remove the topmost line before we add one to the</span>
<span class="c1">// bottom</span>
<span class="nx">main</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'main'</span><span class="p">).</span><span class="nx">firstChild</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// If n is zero, we insert a blank line.</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">text</span> <span class="o">=</span> <span class="s1">' '</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// Else, if n == 1, set paths to a value between 2 and 4, and use </span>
<span class="c1">// path() to generate a line of text.</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">paths</span> <span class="o">=</span> <span class="mi">2</span> <span class="o">+</span> <span class="nx">rand_range</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
<span class="nx">text</span> <span class="o">=</span> <span class="nx">path</span><span class="p">();</span>
<span class="p">}</span>
<span class="c1">// Else, if n is less than paths, use site()</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o"><</span> <span class="nx">paths</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">text</span> <span class="o">=</span> <span class="nx">site</span><span class="p">();</span>
<span class="p">}</span>
<span class="c1">// If n is the same as paths, use path()</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o">==</span> <span class="nx">paths</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">text</span> <span class="o">=</span> <span class="nx">path</span><span class="p">();</span>
<span class="p">}</span>
<span class="c1">// If n is one greater than paths, use a blank line</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o">==</span> <span class="nx">paths</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">text</span> <span class="o">=</span> <span class="s1">' '</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// If n is two greater than paths, go into the cave.</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o">==</span> <span class="nx">paths</span> <span class="o">+</span> <span class="mi">2</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">text</span> <span class="o">=</span> <span class="nx">cave</span><span class="p">();</span>
<span class="p">}</span>
<span class="c1">// If n is more than two greater than paths, reset n to zero and use a blank line</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">text</span> <span class="o">=</span> <span class="s1">' '</span><span class="p">;</span>
<span class="nx">n</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// Increment n by one</span>
<span class="nx">n</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">;</span>
<span class="c1">// Capitalise the first letter</span>
<span class="nx">text</span> <span class="o">=</span> <span class="nx">text</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">).</span><span class="nx">toUpperCase</span><span class="p">()</span> <span class="o">+</span> <span class="nx">text</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="nx">text</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>
<span class="c1">// Add it to the bottom of main.</span>
<span class="nx">last</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'div'</span><span class="p">);</span>
<span class="nx">last</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="nx">text</span><span class="p">));</span>
<span class="nx">main</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">last</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// This is the main function. It sets a timer that runs the above</span>
<span class="c1">// do_line function every 1.2 seconds</span>
<span class="kd">function</span> <span class="nx">poem</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">setInterval</span><span class="p">(</span><span class="nx">do_line</span><span class="p">,</span> <span class="mi">1200</span><span class="p">);</span>
<span class="p">}</span>
</pre></code>
</section>
</body>
</html>