PageSourceSearch

https://skmaston.com/worms-eye-view/

html skmaston.com collected 2026-10-10 00:22:51 UTC 44,157 bytes, 869 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Worm's Eye View</title>
7  <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
8  <link rel="stylesheet" href="styles/normalize.css">
9  <link rel="stylesheet" href="styles/style.css">
10</head>
11
12
13<body>
14  <header>
15    <div class="mobile-only ">
16      <div class="mobile-only-inner">
17        <p>To enjoy this experience, please use a computer</p>
18        <img src="./assets/objects/object_c_21.png" alt="">
19      </div>
20    </div>
21
22    <div id="preloader" class="preloader full-screen">
23      <div class="wrapper flex-parent">
24        <h2>Loading...</h2>
25        <img src="./assets/objects/object_b_12.gif" alt="A crawling centipede">
26        <p>(If you are experiencing issues loading, please refresh your browser)</p>
27      </div>
28    </div>
29
30    <div class="loading">
31      <div id="land-ackn" class="land-ackn full-screen current-screen">
32        <div class="wrapper flex-parent">
33          <h2>Land Acknowledgement</h2>
34          <p>
35            I acknowledge the land on which this work was created. This land is the traditional territory of the Huron-Wendat and
36            Petun First Nations, the Seneca, and the Mississaugas of the Credit River. The territory is the subject of the Dish With
37            One Spoon Wampum Belt Covenant, an agreement between the Iroquois Confederacy and Confederacy of the Ojibwe and allied
38            nations to peaceably share and care for the resources around the Great Lakes. The Dish with One Spoon Covenant
39            characterizes our collective responsibility to each other and to the earth - to take only what we need, leave enough for
40            others, and keep the dish clean.
41          </p>
42          <p>
43            Today, the meeting place of Tkaronto/Toronto is still the home to many Indigenous people from across Turtle Island. I am
44            grateful to have the opportunity to work in the community, on this territory.
45          </p>
46          <button class="grass-button loading-button" data-nextScreen="title">Continue</button>
47        </div>
48      </div>
49
50      <div id="title" class="title full-screen">
51        <div class="flex-parent">
52          <h1>Worm's Eye View</h1>
53          <button class="grass-button loading-button back" data-nextScreen="land-ackn">Back</button>
54          <button class="grass-button loading-button continue" data-nextScreen="intro">Continue</button>
55        </div>
56      </div>
57
58      <div id="intro" class="intro full-screen">
59        <div class="wrapper flex-parent">
60          <h2>Introduction</h2>
61          <h3>[player prompt]</h3>
62          <p>A speculative perspective of a worm: It’s the future. The earth has passed around the sun around 88 888 888 times since
63          the year 2020.</p>
64          
65          <p>Imagine yourself a researcher—a Terrestrial Isopod (Pillbug), safe underground, exploring the many systems buried just a
66          few feet under your computer. Instead of favouring familiar anthropocentric classification systems, you process
67          information through scent, vibrations, oscillations, and colour patterns. Sometimes, you identify objects through
68          echolocation.</p>
69          
70          <p>You can switch cursors to navigate other subterranean realms and much can be learned from these alternative
71          perspectives. Perhaps the information of the objects you unearth can be processed and relayed back to other arthropod
72          cousins through dance or multivariate data visualizations.</p>
73          
74          <p>Your cursor becomes a bird’s clawed foot, a hoofed hind leg, the delicate tarsus of a cricket’s arm, an antique
75          gardening glove or an old relic from the early Holocene… use it to dig into the virtual subterrestrial world of fungi,
76          slime, mould, insects, gas lines, plumbing, cables, and discarded objects. </p>
77
78          <p class="note">
79            Note: To fully enjoy this experience, please use the latest version of Firefox, Chrome, Safari or Edge.
80          </p>
81
82          <button class="grass-button loading-button back" data-nextScreen="title">Back</button>
83          <button class="grass-button loading-button continue" data-nextScreen="dig-site">Start</button>
84        </div>
85      </div>
86    </div>
87  </header>
88
89  <main id="inventory" class="container">
90    <!-- DIGSITE -->
91    <div class="dig-site">
92
93      <!-- SCENE A -->
94      <section id="scene_a" class="scene scene_a  current-scene" >
95        <div id="layer_a_01" class="layer">
96          <canvas id="canvas_a_01"  class="canvas canvas_01">Your browser does not support HTML Canvas</canvas>
97          <div class="objects objects_01"></div>
98        </div>
99    
100        <div id="layer_a_02"  class="layer">
101          <canvas id="canvas_a_02" class="canvas canvas_02" >Your browser does not support HTML Canvas</canvas>
102          <div class="objects objects_02"></div>
103        </div>
104        
105        <div id="layer_a_03"  class="layer">
106          <canvas id="canvas_a_03" class="canvas canvas_03">Your browser does not support HTML Canvas</canvas>
107          <div class="objects objects_03"></div>
108        </div>
109
110        <div id="layer_a_04" class="layer">
111          <canvas id="canvas_a_04" class="canvas canvas_04">Your browser does not support HTML Canvas</canvas>
112          <div class="objects objects_04"></div>
113        </div>
114
115        <div id="layer_a_05" class="layer last-layer">
116          <div id="move-on-a" class="move-on">
117            <h3>MYTHOLOGY AROUND PERMANENCE</h3>
118            <p>A grounded understanding of information begins at the physical and biological level (Bates, 2005). While navigating a
119            realm composed of human-made systems, consider the notion that the human microbiome hosts a variable ratio of 1:1
120            between human cells and other microorganisms like bacteria and fungi (Sender et al., 2016).</p>
121            <button class="grass-button move-on-button" aria-label="Go to the Multispecies Relationship Realm" data-scene="scene_b">
122              Continue to another lifeworld?
123            </button>
124          </div>
125          <img class="canvas" src="./assets/overlays/layer_a_05.jpg" alt="">
126        </div>
127      </section>
128      <!-- END OF SCENE A -->
129
130      <!-- SCENE B -->
131      <section id="scene_b" class="scene scene_b">
132        <div id="layer_b_01" class="layer">
133          <canvas id="canvas_b_01" class="canvas canvas_01">Your browser does not support HTML Canvas</canvas>
134          <div class="objects objects_01"></div>
135        </div>
136        
137        <div id="layer_b_02" class="layer">
138          <canvas id="canvas_b_02" class="canvas canvas_02">Your browser does not support HTML Canvas</canvas>
139          <div class="objects objects_02"></div>
140        </div>
141        
142        <div id="layer_b_03" class="layer">
143          <canvas id="canvas_b_03" class="canvas canvas_03">Your browser does not support HTML Canvas</canvas>
144          <div class="objects objects_03"></div>
145        </div>
146
147        <div id="layer_b_04" class="layer">
148          <canvas id="canvas_b_04" class="canvas canvas_04">Your browser does not support HTML Canvas</canvas>
149          <div class="objects objects_04"></div>
150        </div>
151        
152        <div id="layer_b_05" class="layer">
153          <canvas id="canvas_b_05" class="canvas canvas_05">Your browser does not support HTML Canvas</canvas>
154          <div class="objects objects_05"></div>
155        </div>
156        
157        <div id="layer_b_06" class="layer last-layer">
158          <div id="move-on-b" class="move-on">
159            <h3>MULTISPECIES RELATIONSHIPS</h3>
160            <p>The human-environment system is articulated by various interconnected relationships. The notion of autonomy as an
161            essential process in the self-creation of living systems is coupled with an understanding that humans inhabit a
162            symbiotic system looping within other lifeworlds (Haraway, 2008).</p>
163            <button class="grass-button move-on-button" 
164              aria-label="Go to the A MORE-THAN-HUMAN VANTAGE POINT Realm" data-scene="scene_c">
165              Continue to another lifeworld?
166            </button>
167          </div>
168          <img class="canvas" src="./assets/overlays/layer_b_06.jpg" alt="">
169        </div>
170      </section>
171      <!-- END OF SCENE B -->
172
173      <!-- SCENE C -->
174      <section id="scene_c" class="scene scene_c">
175        <div id="layer_c_01" class="layer">
176          <canvas id="canvas_c_01" class="canvas canvas_01">Your browser does not support HTML Canvas</canvas>
177          <div class="objects objects_01"></div>
178        </div>
179        
180        <div id="layer_c_02" class="layer">
181          <canvas id="canvas_c_02" class="canvas canvas_02">Your browser does not support HTML Canvas</canvas>
182          <div class="objects objects_02"></div>
183        </div>
184        
185        <div id="layer_c_03" class="layer">
186          <canvas id="canvas_c_03" class="canvas canvas_03">Your browser does not support HTML Canvas</canvas>
187          <div class="objects objects_03"></div>
188        </div>
189
190        <div id="layer_c_04" class="layer">
191          <canvas id="canvas_c_04" class="canvas canvas_04">Your browser does not support HTML Canvas</canvas>
192          <div class="objects objects_04"></div>
193        </div>
194        
195        <div id="layer_c_05" class="layer">
196          <canvas id="canvas_c_05" class="canvas canvas_05">Your browser does not support HTML Canvas</canvas>
197          <div class="objects objects_05"></div>
198        </div>
199        
200        <div id="layer_c_06" class="layer">
201          <canvas id="canvas_c_06" class="canvas canvas_06">Your browser does not support HTML Canvas</canvas>
202          <div class="objects objects_06"></div>
203        </div>
204
205        <div id="layer_c_07" class="layer">
206          <canvas id="canvas_c_07" class="canvas canvas_07">Your browser does not support HTML Canvas</canvas>
207          <div class="objects objects_07"></div>
208        </div>
209        
210        <div id="layer_c_08" class="layer">
211          <canvas id="canvas_c_08" class="canvas canvas_08">Your browser does not support HTML Canvas</canvas>
212          <div class="objects objects_08"></div>
213        </div>
214        
215        <div id="layer_c_09" class="layer">
216          <canvas id="canvas_c_09" class="canvas canvas_09">Your browser does not support HTML Canvas</canvas>
217          <div class="objects objects_09"></div>
218        </div>
219
220        <div id="layer_c_10" class="layer">
221          <canvas id="canvas_c_10" class="canvas canvas_10">Your browser does not support HTML Canvas</canvas>
222          <div class="objects objects_10"></div>
223        </div>
224        
225        <div id="layer_c_11" class="layer">
226          <canvas id="canvas_c_11" class="canvas canvas_11">Your browser does not support HTML Canvas</canvas>
227          <div class="objects objects_11"></div>
228        </div>
229        
230        <div id="layer_c_12" class="layer">
231          <canvas id="canvas_c_12" class="canvas canvas_12">Your browser does not support HTML Canvas</canvas>
232          <div class="objects objects_12"></div>
233        </div>
234
235        <div id="layer_c_13" class="layer">
236          <canvas id="canvas_c_13" class="canvas canvas_13">Your browser does not support HTML Canvas</canvas>
237          <div class="objects objects_13"></div>
238        </div>
239        
240        <div id="layer_c_14" class="layer">
241          <canvas id="canvas_c_14" class="canvas canvas_14">Your browser does not support HTML Canvas</canvas>
242          <div class="objects objects_14"></div>
243        </div>
244        
245        <div id="layer_c_15" class="layer last-layer">
246          <div id="move-on-c" class="move-on">
247            <h3>A MORE-THAN-HUMAN VANTAGE POINT</h3>
248            <p>An infinite variety of non-communicating and reciprocally exclusive animal worlds jointly compose the earth (Uexküll,
249            2010). The natural systems realm moves beyond an anthropocentric vantage point by focusing on the frequencies of
250            other-than human beings (Little Bear, 2016).</p>
251            <button class="grass-button move-on-button"  
252              aria-label="Go to the MYTHOLOGY AROUND PERMANENCE Realm" 
253              data-scene="scene_a">
254              Continue to another lifeworld?
255            </button>
256          </div>
257          <img class="canvas" src="./assets/overlays/layer_c_15.jpg" alt="">
258        </div>
259      </section>
260      <!-- END OF SCENE C -->
261
262      <!-- You Worm! Show when the player finds all items -->
263      <div id="youWorm" class="you-worm">
264        <img src="./assets/worm.gif" alt="">
265      </div>
266    </div> 
267    <!-- END OF DIGSITE -->
268  
269
270    <!-- INVENTORY OBJECTS -->
271    <!-- A -->
272    <div id="phone" class="artifact" tabindex="0">
273      <img src="./assets/objects/object_a_01.gif" alt="A broken smartphone with a shattered flickering screen">
274      <div class="sr-only">
275        <p>
276        e-waste was a major external consequence of the digital revolution.
277        </p>  
278        <p >
279          In 2019, a record 53.6 million metric tonnes of electronic waste was generated worldwide. 17.4% of this e-waste was
280          collected and recycled. As time passed, higher consumption rates of electric equipment, devices with short life cycles,
281          and designs with few options for repair propelled the electronic waste stream <a href="http://ewastemonitor.info/" class="copy-link">(United Nations Institute for Training and Research, 2020)</a>.
282        </p>
283      </div>
284      <div class="tooltip">
285        <span class="tooltip-text">Broken cell phone</span>
286      </div>
287    </div>
288
289    <div id="mask" class="artifact" tabindex="0">
290      <img src="./assets/objects/object_a_02.png" alt="A blue surgical mask folded as if discarded">
291      <div class="sr-only">
292        <p>
293          In 2020, an abundant new material appeared floating in the water, hanging from bicycles and trees, sitting on car dashboards, and lying at the side of the road.
294        </p>
295      </div>
296      <div class="tooltip">
297        <span class="tooltip-text">Discarded surgical mask</span>
298      </div>
299    </div>
300
301    <div id="cable" class="artifact" tabindex="0">
302      <img src="./assets/objects/object_a_03.gif" alt="A cross section of a blueish grey conductor with an orange center. Copper and aluminum wires form a lattice. Inside, the electric energy is shifting in rainbow streaks that cast violet light.">
303      <div class="sr-only">
304        <p>Cyberspace influenced how humans engaged and interacted with the environment by connecting computers, digital media, animals, and things as a living system <a href="https://quod.lib.umich.edu/o/ohp/12329362.0001.001/1:9/--death-of-the-posthuman-essays-on-extinction-volume-one?rgn=div1;view=toc" class="copy-link">(Colebrook 2014)</a>.</p>
305      </div>
306      <div class="tooltip">
307        <span class="tooltip-text">Cross-section of a conductor</span>
308      </div>
309    </div>
310    
311    <div id="diary" class="artifact" tabindex="0">
312      <img src="./assets/objects/object_a_04.png" alt="A grey book with yellowing pages and green stains on the cover. The title says 'Diary'. The book is upside down.">
313      <div class="sr-only">
314        <p>A physical record containing data about an arboretum.</p>
315        <p>Place-based practices and the documents they produced reflected what was valued about individual organisms and also
316        exposed shifting values over time<a href="https://journals.sagepub.com/doi/10.1177/2053951716661365" class="copy-link">(Loukissas, 2016)</a>.</p>
317      </div>
318      <div class="tooltip">
319        <span class="tooltip-text">Mouldy diary</span>
320      </div>
321    </div>
322    
323    <div id="microchip2" class="artifact" tabindex="0">
324      <img src="./assets/objects/object_a_06.gif" alt="A bright lime green microchip with golden connectors. In the middle there's a black processor unit that's shimmering with silver energy">
325      <div class="sr-only">
326        <p>Decoupling present and future needs:</p>
327        <p>Human choices in the environment were dispersed in space and time.</p>
328        <p>Each action made a small opaque contribution to the future of the planet.</p>
329      </div>
330      <div class="tooltip">
331        <span class="tooltip-text">Micropchip</span>
332      </div>
333    </div>
334
335    <div id="margarine" class="artifact" tabindex="0">
336      <img src="./assets/objects/object_a_07.gif" alt="A pack of margarine in a white wrapper, with yellow dye being dispersed on top">
337      <div class="sr-only">
338        <p>Structures of feeling were rendered and re-organized by the soft and networked architectures of online media
339        <a href="https://www.tandfonline.com/doi/full/10.1080/1369118X.2015.1109697" class="copy-link">(Papacharissi, 2016)</a>.</p>
340      </div>
341      <div class="tooltip">
342        <span class="tooltip-text">Package of margarine</span>
343      </div>
344    </div>
345    
346    <div id="brush" class="artifact" tabindex="0">
347      <img src="./assets/objects/object_a_08.png" alt="A well-worn paint brush with a blue wooden handle and brown bristles">
348      <div class="sr-only">
349        <p>An object used to make slow work. The marks from this tool were dispersed throughout the dig site, a vacuum for new grammars of belonging (Steinhoff, 2017).</p>
350      </div>
351      <div class="tooltip">
352        <span class="tooltip-text">Paintbrush</span>
353      </div>
354    </div>
355
356    <!-- B -->
357    <div id="joss" class="artifact" tabindex="0">
358      <img src="./assets/objects/object_b_02.gif" alt="A burning $1000000 Hell Bank Note (joss paper) with the portrait of the Jade Emperor surrounded by rice plants depicted in the middle">
359      <div class="sr-only">
360        <p>Emerging rituals prompted reciprocity:</p>
361        <p>A selection of mundane and sacred objects whose values were determined by more-than human beings, were burned for
362        ancestors such as fish, rodents, and small birds.
363        These ceremonies were a means of connecting to familiar and distant ancestors as well as to the land.</p>
364      </div>
365      <div class="tooltip">
366        <span class="tooltip-text">Burning $1000000 Hell Bank note</span>
367      </div>
368    </div>
369
370    <div id="apple" class="artifact" tabindex="0">
371      <img src="./assets/objects/object_b_03.png" alt="Three quarters of a green red apple, rotten to the core">
372      <div class="sr-only">
373        <p>Humans were not the only creatures who lived on the edge of the wild. To some extent, every hive-building, nest-making,
374        lodge-building and burrow-digging creature lived a liminal existence. Yet none of them lived their entire life in the
375        burrow, nest, or hive (Bringhurst & Zwicky, 2018).</p>
376      </div>
377      <div class="tooltip">
378        <span class="tooltip-text">Rotten apple</span>
379      </div>
380    </div>
381    
382    <div id="snow-pear" class="artifact" tabindex="0">
383      <img src="./assets/objects/object_b_04.png" alt="A yellow snow apple speckled with brown, wrapped in white styrofoam mesh to prevent bruising">
384      <div class="sr-only">
385        <p>A holistic and multidimensional understanding of the breadth and depth of an animal’s engagement in labour was
386        eventually identified as a type of subsistence work that kept the planet alive (Blattner et al., 2020).</p>
387      </div>
388      <div class="tooltip">
389        <span class="tooltip-text">Snow apple</span>
390      </div>
391    </div>
392
393    <div id="two-bananas" class="artifact" tabindex="0">
394      <img src="./assets/objects/object_b_05.gif" alt="Two bananas are lying next to each other, their color is shifting from green to yellow to red">
395      <div class="sr-only">
396        <p>Consciousness and perception among animal species evolved throughout hundreds of millennia. Human sentience was one of numerous forms of animal awareness (Shepard, 1997).</p>
397      </div>
398      <div class="tooltip">
399        <span class="tooltip-text">Two bananas</span>
400      </div>
401    </div>
402    
403    <div id="painting" class="artifact" tabindex="0">
404      <img src="./assets/objects/object_b_06.png" alt="A square abstract painting rendered in blue, beige and orange watercolor">
405      <div class="sr-only">
406        <p>Representations of the wild continued to proliferate in online networked spaces, even as the buzzing and chattering offline grew conspicuously silent.</p>
407      </div>
408      <div class="tooltip">
409        <span class="tooltip-text">Small watercolor painting</span>
410      </div>
411    </div>
412
413    <div id="glazed-concrete" class="artifact" tabindex="0">
414      <img src="./assets/objects/object_b_07.png" alt="A smooth weathered fragment of concrete with pale blue glaze on one side">
415      <div class="sr-only">
416        <p>A disenchantment of technology and a re-enchantment of non-human nature generated a paradigm shift. Ecocentric ethics
417        counteracted fragmented experiences of the wild often displayed through cell phones and computers (Maxwell & Miller,
418        2012).</p>
419      </div>
420      <div class="tooltip">
421        <span class="tooltip-text">Rough fragment of glazed concrete</span>
422      </div>
423    </div>
424    
425    <div id="glazed-rock" class="artifact" tabindex="0">
426      <img src="./assets/objects/object_b_08.png" alt="A round piece of cream colored concrete speckled with blue and brown. The fragment still retains a bit of teal glaze.">
427      <div class="sr-only">
428        <p>A decolonial shift from viewing the land as private property, towards an understanding of the land as home to nonhuman neighbours, prompted the realization that the land was not a commodity but rather a gift and a library (Kimmerer, 2013).</p>
429      </div>
430      <div class="tooltip">
431        <span class="tooltip-text">Smooth glazed rock</span>
432      </div>
433    </div>
434
435    <div id="concrete-slab" class="artifact" tabindex="0">
436      <img src="./assets/objects/object_b_09.png" alt="A large irregular slab of broken grey concrete">
437      <div class="sr-only">
438        <p>A gift grew inherently as it was shared. This notion was difficult to grasp in societies whose values were derived from
439        the ownership of private property (Kimmerer, 2013).</p>
440      </div>
441      <div class="tooltip">
442        <span class="tooltip-text">Broken piece of concrete</span>
443      </div>
444    </div>
445    
446    <div id="sprout" class="artifact" tabindex="0">
447      <img src="./assets/objects/object_b_10.png" alt="A spinach sprouts with two yellowing leaves and the root system exposed">
448      <div class="sr-only">
449        <p>The earth was situated as a moral reference point. The act of thinking like an ecosystem brought individuals closer to
450        disobedience from both cultural and biological late-capitalist paradigms (Bringhurst & Zwicky, 2018)</p>
451      </div>
452      <div class="tooltip">
453        <span class="tooltip-text">Spinach sprout</span>
454      </div>
455    </div>
456
457    <div id="eggplant" class="artifact" tabindex="0">
458      <img src="./assets/objects/object_b_11.gif" alt="A rotting purple Chinese eggplant">
459      <div class="sr-only">
460        <p>The 2020 document, A People’s Orientation to a Regenerative Economy, characterized feminist reproductive labour as skilled work that sustained both human society and nature itself. This regenerative economy was guided by community governance and ownership of work and resources <a href="https://www.ienearth.org/regenerativeeconomy/" class="copy-link">(United Frontline Table 2020)</a>.</p>
461      </div>
462      <div class="tooltip">
463        <span class="tooltip-text">Eggplant with grey mold</span>
464      </div>
465    </div>
466    
467    <div id="centipede" class="artifact" tabindex="0">
468      <img src="./assets/objects/object_b_12.gif" alt="A long greyish brown centipede, wiggling all of its appendages">
469      <div class="sr-only">
470        <p>A common disregard towards other-than-human species was offset by a relational set of discourses and practices around
471        empathy, sympathy, and fellow feeling between people, environments, and objects <a href="https://read.dukeupress.edu/social-text/article/38/1%20(142)/1/160171/Radical-CareSurvival-Strategies-for-Uncertain" class="copy-link">(Hobart & Kneese, 2020)</a>.</p>
472      </div>
473      <div class="tooltip">
474        <span class="tooltip-text">Centipede</span>
475      </div>
476    </div>
477
478    <div id="leaf" class="artifact" tabindex="0">
479      <img src="./assets/objects/object_b_13.gif" alt="A wilted brown leaf with signs of rotting and being eaten by bugs. The color shifts between from brown to red">
480      <div class="sr-only">
481        <p>The principles of cooperation and responsibility were extended to the animals, earth, forests, and seas. No commons
482        would be possible without the refusal to base life and reproduction on the suffering of others (Federici, 2012).</p>
483      </div>
484      <div class="tooltip">
485        <span class="tooltip-text">Bug-eaten leaf</span>
486      </div>
487    </div>
488    
489    <!-- C -->
490    <div id="blue-rock" class="artifact" tabindex="0">
491      <img src="./assets/objects/object_c_01.png" alt="An elongated blue rock with yellow specks">
492      <div class="sr-only">
493        <p>
494          Although users of the web were less aware of the physical space of the internet (brick, mortar, metal trailers,
495          electronics containing magnetic and optical media, and fiber infrastructure), human conditions were apparent through the
496          mediation of political, social and economic access points (Noble, 2018).
497        </p>
498      </div>
499      <div class="tooltip">
500        <span class="tooltip-text">Blue meteorite</span>
501      </div>
502    </div>
503
504    <div id="eggs" class="artifact" tabindex="0">
505      <img src="./assets/objects/object_c_02.gif" alt="A bunch of white insect eggs on circular yellow background, some dark brown larvae are hatching from these eggs">
506      <div class="sr-only">
507        <p>Wild animal engagement through self-controlled, individual, and collective forms of subsistence and care work eventually
508        constituted a form of social reproductive labour called ‘Ecosocial Reproduction’ (Blattner et al., 2020).</p>
509      </div>
510      <div class="tooltip">
511        <span class="tooltip-text">Hatching insect eggs</span>
512      </div>
513    </div>
514
515    <div id="orange-caterpillar" class="artifact" tabindex="0">
516      <img src="./assets/objects/object_c_03.png" alt="An orange caterpillar">
517      <div class="sr-only">
518        <p>Bringing animals into the political sphere required attentiveness to nonhuman animal languages, translating what had
519        been gleaned to their representative structures. Humans were encouraged to listen and to exercise care (Meijer, 2019).</p>
520      </div>
521      <div class="tooltip">
522        <span class="tooltip-text">Orange caterpillar</span>
523      </div>
524    </div>
525    
526    <div id="white-caterpillar" class="artifact" tabindex="0">
527      <img src="./assets/objects/object_c_04.png" alt="A white silkworm">
528      <div class="sr-only">
529        <p>Each year, 70 billion animals contributed to a worldwide economy through actions such as producing sustenance and
530        biodegrading waste. These were critical tasks for healthy functioning ecosystems. A posthuman framework demanded social
531        recognition of historically unpaid or underpaid reproductive labour. This included the work of animals such as worms,
532        fish, insect pollinators, vultures and parasites.</p>
533      </div>
534      <div class="tooltip">
535        <span class="tooltip-text">White silkworm</span>
536      </div>
537    </div>
538
539    <div id="cat-nest2" class="artifact" tabindex="0">
540      <img src="./assets/objects/object_c_08.gif" alt="An inside view of a white silk moth's coccoon suspended by branches">
541      <div class="sr-only">
542        <p>Care as an affective and connective tissue between an inner self and an outer world offered the visceral, material, and
543        emotional heft toward the preservation of localities such as: selves, communities, and more-than-human social worlds
544        (Hobart & Kneese, 2020).</p>
545      </div>
546      <div class="tooltip">
547        <span class="tooltip-text">Silk moth cocoon</span>
548      </div>
549    </div>
550
551    <div id="bug-eggs" class="artifact" tabindex="0">
552      <img src="./assets/objects/object_c_10.gif" alt="A set of four green insect eggs. The two on the left are elongated, and the other two are round">
553      <div class="sr-only">
554        <p>Forest trees were interconnected through subterranean fungal networks, a web of survival and reciprocity that benefited
555        the trees, fungus, soil and extended to other earthly beings (Kimmerer, 2013).</p>
556      </div>
557      <div class="tooltip">
558        <span class="tooltip-text">Cluster of beetle eggs</span>
559      </div>
560    </div>
561
562    <div id="green-rock" class="artifact" tabindex="0">
563      <img src="./assets/objects/object_c_12.png" alt="A rounded blue-grey rock">
564      <div class="sr-only">
565        <p>Influenced by technical advancements, a human’s temporal sense overlooked the intrinsic deep-timescales of the earth. As
566        conceptions of time sped up, so too did the decomposition of earth’s capital such as the layers of gasses in the
567        atmosphere (Bjornerud, 2020).</p>
568      </div>
569      <div class="tooltip">
570        <span class="tooltip-text">Blue-grey rock</span>
571      </div>
572    </div>
573    
574    <div id="beetle" class="artifact" tabindex="0">
575      <img src="./assets/objects/object_c_13.gif" alt="A black beetle with long antennae">
576      <div class="sr-only">
577        <p>Nationalism was obscured by winds and waters that knew no boundaries. Gratitude was relocated when speaking to the
578        natural world as a member of the democracy of species. (Kimmerer, 2013).</p>
579      </div>
580      <div class="tooltip">
581        <span class="tooltip-text">Matte black beetle</span>
582      </div>
583    </div>
584
585    <div id="larva" class="artifact" tabindex="0"> 
586      <img src="./assets/objects/object_c_14.png" alt="A close-up of a white larva">
587      <div class="sr-only">
588        <p>Although they were often close by, earthworms lived independently, and did not cohabit with humans. As human activity
589        influenced the habitat and lives of worms, new multispecies policies reinforced a respect for the interests of worms on
590        how the earth was used.</p>
591      </div>
592      <div class="tooltip">
593        <span class="tooltip-text">White larva</span>
594      </div>
595    </div>
596    
597    <div id="three-larvae" class="artifact" tabindex="0">
598      <img src="./assets/objects/object_c_15.gif" alt="Three white pulsing larvae in a cluster, two of the overlapping each other">
599      <div class="sr-only">
600        <p>Multispecies neighbourhoods generated intimacy but also sanctioned respectful distances between animal communities. For
601        instance, earthworms were understood as both neighbours and sovereign communities (Meijer, 2019).</p>
602      </div>
603      <div class="tooltip">
604        <span class="tooltip-text">Cluster of larva</span>
605      </div>
606    </div>
607
608    <div id="meteorite" class="artifact" tabindex="0">
609      <img src="./assets/objects/object_c_16.gif" alt="An irregularly shaped meteorite streaked with black, brown, orange and red. At the core there is a flickering flame that can be peeked through holes.">
610      <div class="sr-only">
611        <p>Using the grammar of the earth rocks evolved from nouns to verbs, an evidence of processes. The growth of a mountain
612        belt, a volcanic eruption--rocks were witnesses to events that unfolded over long stretches of time (Bjornerud, 2020).</p>
613      </div>
614      <div class="tooltip">
615        <span class="tooltip-text">Red meteorite</span>
616      </div>
617    </div>
618    
619    <div id="brown-moth" class="artifact" tabindex="0">
620      <img src="./assets/objects/object_c_17.png" alt="A brown moth with a striped thorax. It's left wing is partially ripped off">
621      <div class="sr-only">
622        <p>Animals were often so obscured under the verbiage of power and capital that they briefly disappeared from view (Blattner
623        et al., 2020).</p>
624      </div>
625      <div class="tooltip">
626        <span class="tooltip-text">Brown moth</span>
627      </div>
628    </div>
629
630    <div id="beige-moth1" class="artifact" tabindex="0">
631      <img src="./assets/objects/object_c_18.png" alt="A beige moth with elongated thorax and dark dots on its wings">
632      <div class="sr-only">
633        <p>The grammar of animacy:</p>
634        <p>In the wild, humans became audience to conversations in languages of other frequencies (Little Bear, 2016).</p>
635      </div>
636      <div class="tooltip">
637        <span class="tooltip-text">Beige moth</span>
638      </div>
639    </div>
640
641    <div id="green-moth" class="artifact" tabindex="0">
642      <img src="./assets/objects/object_c_20.gif" alt="A grey moth with eye markings, dark outlines on its wings and a flared tail. The top wings' tips are shimmering with green.">
643      <div class="sr-only">
644        <p>The world was structured as a neighbourhood of nonhuman residents, a communion of subjects. Métis anthropologist Zoe
645        Todd affirmed that the places humans inhabited and the experience of moving through time were perpetually shaped by more
646        than human beings <a href="https://jps.library.utoronto.ca/index.php/des/article/view/30393" class="copy-link">(Todd, 2018)</a>.</p>
647      </div>
648      <div class="tooltip">
649        <span class="tooltip-text">Grey moth</span>
650      </div>
651    </div>
652    
653    <div id="white-moth1" class="artifact" tabindex="0">
654      <img src="./assets/objects/object_c_21.png" alt="A furry light-yellow moth">
655      <div class="sr-only">
656        <p>An Indigenous framework positioned habitats and ecosystems as societies with inter-species treaties and agreements
657        through ethical structures of ecosystems. Mohawk and Anishnaabe researcher Vanessa Watts described a practice of
658        reciprocity by identifying non-human beings as active members of society <a href="https://jps.library.utoronto.ca/index.php/des/article/view/19145" class="copy-link">(Watts, 2013)</a>.</p>
659      </div>
660      <div class="tooltip">
661        <span class="tooltip-text">Furry white moth</span>
662      </div>
663    </div>
664
665    <div id="white-moth2" class="artifact" tabindex="0">
666      <img src="./assets/objects/object_c_22.png" alt="A fat white moth">
667      <div class="sr-only">
668        <p>The Animal Computer Interaction (ACI) manifesto displayed a confidence in techno-utopianism. The manifesto defined ACI’s
669        benefit to both animals and humans as the use of technology that enabled animals to work and communicate with humans <a href="https://dl.acm.org/doi/10.1145/1978822.1978836" class="copy-link">(Mancini, 2011)</a>.</p>
670      </div>
671      <div class="tooltip">
672        <span class="tooltip-text">Furry white moth</span>
673      </div>
674    </div>
675    
676    <div id="shells" class="artifact" tabindex="0">
677      <img src="./assets/objects/object_c_23.gif" alt="Two oval blue-green mussel shells moving towards each other, then separating. The inside of the shells is opalescent pink">
678      <div class="sr-only">
679        <p>The notion of becoming an integral part of nature rather than merely an observer of nature was cited from various forms
680        of Indigenous traditions and pedagogy. Nonhuman animals and human-environmental relations were embedded in every aspect
681        of life. Practicing reciprocity, care, and tenderness towards more-than-human beings was a method of centering these
682        nonhuman relations <a href="https://jps.library.utoronto.ca/index.php/des/article/view/30393" class="copy-link">(Todd, 2018)</a>.</p>
683      </div>
684      <div class="tooltip">
685        <span class="tooltip-text">Mussel shells</span>
686      </div>
687    </div>
688    
689    <div id="slug" class="artifact" tabindex="0">
690      <img src="./assets/objects/object_c_24.gif" alt="A crawling white aquatic  slug with black horns, grey spots and black tail.">
691      <div class="sr-only">
692        <p>Animals of all kinds engaged in media technologies through multifaceted structures of animal-networks. The ecological
693        effects associated with online infrastructures ultimately resulted in a digital embodiment of animals that obscured
694        alternative modes of relationality towards the physical wild (Berland, 2019).</p>
695      </div>
696      <div class="tooltip">
697        <span class="tooltip-text">Aquatic slug</span>
698      </div>
699    </div>
700    
701    <div id="yellow-rock" class="artifact" tabindex="0">
702      <img src="./assets/objects/object_c_25.png" alt="A light yellow rock with specks of blue and brown">
703      <div class="sr-only">
704        <p>Human-environmental relations were embedded in every aspect of life.
705        The wisdom of other animals was apparent in the way that they lived. Animals taught by example.
706        “They’ve been on the earth far longer than we have been, and have had time to figure things out. They live both above
707        and below ground, joining Skyworld to the earth” (Kimmerer, 2013).</p>
708      </div>
709      <div class="tooltip">
710        <span class="tooltip-text">Yellow rock</span>
711      </div>
712    </div>
713    
714    <div id="white-butterfly1" class="artifact" tabindex="0">
715      <img src="./assets/objects/object_c_26.png" alt="A white butterfly with black wingtips">
716      <div class="sr-only">
717        <p>Learning the pronouns of the living world:</p>
718        <p>Adopting a grammar of animacy led to new methods of survival in the world (Kimmerer, 2013).</p>
719      </div>
720      <div class="tooltip">
721        <span class="tooltip-text">White butterfly</span>
722      </div>
723    </div>
724    
725    <div id="white-butterfly2" class="artifact" tabindex="0">
726      <img src="./assets/objects/object_c_27.png" alt="A white butterfly with dark tips and black dots on its upper wings">
727      <div class="sr-only">
728        <p>In Native ways of knowing, humans were often referred to as ‘the younger brothers of Creation’ as they had the least
729        experience with how to live and thus the most to learn. Teachers among the other species offered guidance (Kimmerer,
730        2013).</p>
731      </div>
732      <div class="tooltip">
733        <span class="tooltip-text">White buttefly with dark spots</span>
734      </div>
735    </div>
736
737    <div id="green-larva" class="artifact" tabindex="0">
738      <img src="./assets/objects/object_c_28.gif" alt="A light green leaf with a pulsing green caterpillar eating the centre">
739      <div class="sr-only">
740        <p>No species of placental mammal lived more than a few million years. Coming to the realization that the planet too was
741        mortal, humans planned to maximize their future. Taking a broader vernacular view that included the nieces and nephews
742        of their descendants, they began thinking not just as individuals--or even as a species (Bringhurst & Zwicky, 2018).
743        </p>
744      </div>
745      <div class="tooltip">
746        <span class="tooltip-text">Caterpillar eating a leaf</span>
747      </div>
748    </div>
749    <!-- END OF INVENTORY OBJECTS -->
750    
751
752    <!-- REALM SWITCHING BUTTONS -->
753    <form class="realm-buttons-outer">
754      <h2>Choose your realm: </h2>
755      <fieldset >
756        <ul class="realm-buttons-inner">
757          <li>
758            <label for="human-environment" title="MYTHOLOGY AROUND PERMANENCE">
759              <input type="radio" id="human-environment"
760              class="realm-button" 
761              name="realm" 
762              value="scene_a" 
763              checked>
764              <img src="./assets/cursors/cursor_a.png" alt="" aria-hidden>
765              <span class="sr-only">MYTHOLOGY AROUND PERMANENCE</span>
766            </label>
767          </li>
768          <li>
769            <label for="human-made" title="MULTISPECIES RELATIONSHIPS ">
770              <input type="radio" 
771                id="human-made" 
772                class="realm-button" 
773                name="realm" 
774                value="scene_b">
775              <img src="./assets/cursors/cursor_b.png" alt="" aria-hidden>
776              <span class="sr-only">MULTISPECIES RELATIONSHIPS</span>
777            </label>
778          </li>
779          <li>
780            <label for="wild" title="A MORE-THAN-HUMAN VANTAGE POINT">
781              <input type="radio" 
782              id="wild" 
783              class="realm-button" 
784              name="realm" 
785              value="scene_c">
786              <img src="./assets/cursors/cursor_c.png" alt="" aria-hidden>
787              <span class="sr-only">A MORE-THAN-HUMAN VANTAGE POINT</span>
788            </label>
789          </li>
790        </ul>
791      </fieldset>
792    </form>
793    <!-- END OF REALM SWITCHING BUTTONS -->
794
795
796    <!-- MISC BUTTONS -->
797    <div class="misc-buttons">
798      <button class="grass-button misc-button" data-screen="guide">
799        User Guide
800      </button>
801      <button class="grass-button misc-button" data-screen="credits">
802        Credits
803      </button>
804    </div>
805
806
807
808    <!-- OBJECTS MODAL -->
809    <div id="modal" class="modal">
810      <div class="modal-content wrapper">
811        <img id="modalImg"  class="modal-img " src="" alt="">
812        <div id="modalText" class="modal-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, neque!</div>
813      </div>
814      <button id="modalClose" class="close modal-close" aria-label="Close">
815        <img aria-hidden src="./assets/close.svg" />
816      </button>
817    </div>
818    <!-- END OF OBJECTS MODAL -->
819
820
821    <!-- CREDITS AND INSTRUCTIONS -->
822    <div id="guide" class="guide full-screen misc-screen">
823      <div class="wrapper ">
824        <h2>User Guide</h2>
825        <ol class="scroll">
826          <li><p>Scratch the surface of the dig site with your cursor to begin digging a hole. As you dig, you will encounter natural, immaterial, and human-made phenomena.</p></li>
827          <li><p>**Tip while digging**. In some instances, you may find it helpful to move the cursor more, clockwise and counterclockwise over an entity to remove their surface layer.</p></li>
828          <li><p>A yellow halo will appear to indicate that an entity is fully uncovered. Click on the entity to unearth it, it will be transported to the edge of the dig site.</p></li>
829          <li><p>Excavate all embedded entities from the current layer to move on to the new layer underneath.</p></li>
830          <li><p>All entities within the hole contain additional embedded text that can be accessed once they are unearthed.</p></li>
831          <li><p>Switch between the three alternative realms by clicking on elements from the “choose your realm” section at the bottom left corner. Your progress on the current realm will be saved.</p></li>
832          <li><p> Proceed to the next realm once  all entities in the current one are unearthed.Continue the process as long as you like.</p></li>
833          <li><p>Refreshing the browser will reset the process.</p></li>
834        </ol>
835        <button class=" close close-misc" data-screen="guide" aria-label="close">
836          <img aria-hidden src="./assets/close.svg"/>
837        </button>
838      </div>
839    </div>
840
841    <div id="credits" class="credits full-screen misc-screen">
842      <div class="wrapper flex-parent">
843        <h2>Credits</h2>
844        <div class="credits-section">
845          <h3>Concept, writing and images:</h3>
846          <a href="https://saramaston.com/" target="_blank">Sara Maston</a>
847        </div>
848        <div class="credits-section">
849          <h3>UX and development:</h3>
850          <a href="https://olgafil.com/" target="_blank">Olga Filiushkina</a>
851        </div>
852        <div class="credits-section">
853          <h3>This project was funded by an Ontario Arts Council grant</h3>
854          <p>Thank you to the Digital Justice Lab and Trinity Square Video for supporting this project.</p>
855          <p>Thank you to my human and other-than-human mentors, peers, and collaborators.</p>
856          <a href="./worms-eye-view-refs.pdf" target="_blank">References</a>
857        </div>
858        <button class="close close-misc" data-screen="credits" aria-label="close">
859          <img aria-hidden src="./assets/close.svg" />
860        </button>
861      </div>
862    </div>
863  </main>
864
865
866
867  
867<script type="module" src="./js/script.js"></script>
867
868</body>
869</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.