5 <meta name=viewport
content=
"width=device-width, initial-scale=1">
6 <meta name=
"apple-mobile-web-app-capable" content=
"yes">
7 <link rel=
"shortcut icon" href=
"icon_128x128.png">
8 <link rel=
"apple-touch-icon" href=
"icon_128x128.png">
9 <meta name=
"apple-mobile-web-app-capable" content=
"yes">
10 <meta name=
"mobile-web-app-capable" content=
"yes">
11 <meta name=
"apple-mobile-web-app-status-bar-style" content=
"black-translucent">
12 <meta name=
"apple-mobile-web-app-title" content=
"Labelle Litanizer">
15 - Outfit-Oriented Ontology from Animal Crossing: New Leaf
17 <script type=
"text/javascript" src=
"acnl-wearables-list.js"></script>
18 <script type=
"text/javascript" src=
"acnl-outfit.js"></script>
20 window.addEventListener(
"load", function () {
21 if (window.navigator.standalone) {
22 var header = document.getElementsByTagName(
"header")[
0];
23 header.className +=
" statusbar";
24 var statusbar = document.getElementById(
"statusbar");
25 statusbar.style.display =
"block";
34 src: url('VarelaRound-Regular.woff') format('woff');
40 text-decoration: none;
45 -moz-user-select: none;
46 -webkit-user-select: none;
53 background: url(bg.png);
61 background-color: rgba(
239,
243,
216,
0.9);
62 border:
0.3333em solid #f0f3dc;
101 text-decoration: underline;
109 border:
0.2em solid #
4cc2d2;
112 background-color: #fff6c1;
113 box-shadow:
0 0 0 0.1em #fff6c1;
114 transition: transform
0.1s;
116 -webkit-transition: -webkit-transform
0.1s;
117 -webkit-transform: scale(
0);
121 transition: transform
0.3s;
123 -webkit-transition: -webkit-transform
0.3s;
124 -webkit-transform: scale(
1);
128 display: inline-block;
131 margin:
0.25em
0.5em;
133 border-bottom:
0.075em solid #f45c0a;
141 #buttons a:hover:before {
144 display: inline-block;
146 margin-left:
0.6667em;
152 vertical-align: middle;
158 background-image: linear-gradient(#
1e03e9, #
185cfa
70%, transparent
71%);
162 background-image: linear-gradient(#
070b5c, #
002675 70%, rgba(
0,
38,
117,
0.4)
71%);
165 @media (max-width:
799px) {
166 html { font-size:
14px; }
169 @media (max-width:
639px) {
170 html { font-size:
12px; }
171 main { height:
12em; }
174 @media (max-width:
479px) {
175 main { height:
15em; }
179 border: #fafbe5 solid
0.1em;
182 background-color: #
4ada48;
186 display: inline-block;
190 border:
0.2em solid #ebd684;
191 background-color: rgba(
0,
0,
0,
0.7);
192 border-radius:
1em
3em
2em
2em;
194 text-shadow:
1px
1px black;
217 <body onload='update();' class=day
>
219 <img src=
"labelle-2.png" id=labelle
>
221 <div id=
"haveyou">Have you considered...
</div>
222 <div id=
"wearing">...
</div>
224 <a onclick='update();'
>How gauche.
</a>
225 <a id=twitter target=_blank
226 href=
"https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">
227 <img src='twitter.png'
>
233 <dt>What is this?
</dt>
235 The Labelle Litanizer generates random
<em>Animal Crossing:
236 New Leaf
</em> outfits. Ignoring the realities of the period
237 and distribution of your random number generator, all
238 possible outfits should have some chance of appearing.
240 <dt>What's with the name?
</dt>
243 <a target=_blank
href=
"http://www.bogost.com/blog/latour_litanizer.shtml"><span class=person
>Ian's
</span> <span class=nonperson
>
244 Latour Litanizer
</span></a>, and his writings about objects and carpentry
249 Latour litanies confront us with objects in a way that defies
250 our usual methods of grouping or reduction. In a similar way
251 the Labelle Litanizer asks us to consider the possible rather
252 than merely the desirable or expected.
<em>New Leaf
</em>
253 contains a huge number of objects you can wear (or otherwise
254 visibly present with, if you are uncomfortable saying you
255 are
"wearing" an ice cream cone). But that scale and
256 diversity is obscured due to its grouping algorithms, the
257 small number presented at any one time, and our cultural
261 Can I restrict it to my items?
264 No. Instead, consider how the true
<em>Daseine
</em> of the
265 objects you think you have are also inaccessible to you.