Shell Games

⊕Girls playing “pairing of painted shells,” c.1800. Wikimedia Commons. URI. Approaching the Middle Shore collection was anxiety-producing for me as a non-medievalist (I was the panel’s “captive technologist,” so to speak). What would I have to offer? How could I possibly perform “expertise” in a field I knew only from a few undergraduate classes and a working knowledge of Game of Thrones? I decided that the answer was to throw out all pretense of expertise, and instead use the opportunity to do something I’d never done before. And so my contribution to this collection is a computer simulation of a card game.

In this essay, I’m going to focus on something I found fascinating while making the game itself: the way in which the choice of random number generators can affect the outcome of the game, just as Lara’s “random” movement through the library determined what was included (and excluded) from the Middle Shore corpus. I’ll show how the interplay of human and computational elements lead to an intriguing contradiction in the Middle Shore as a whole and in my project in particular.

A Brief Description of the Project

Kai-awase came from my efforts to match up the collection items in Omeka with Lara's bibliography. Every collector’s work has to have a starting point and for me it was the item labeled “Cards,” which is a haiku titled “Spring” from Kyoshi Takahama (1874-1959):

⊕ Kyoshi, Takahama. 1993. Spring. In Traditional Japanese Poetry, 443, ed. and trans. Steven Carter. Menlo Park, CA: Stanford University Press. playing poem cards
they’re all so beautiful –
bent on winning.

Poem cards (or karuta) are a variant of mono-awase (what are called “matching games”), popular for centuries in Japan. These games go back as far as the Heian period, 794–1185 AD, when they were played in ferocious competitions at court. Kai-awase (the shell matching game) was played using elaborately painted clam shells. The shells were separated and painted, and the game’s aim was to join them back together. Shell-joining sets, a full set containing 360 pairs of clamshells, were expensive and often included as part of a wealthy woman’s trousseau.

⊕An Awasegai, part of “Makiehachikakukaioke-Karakusagyōyōmon” sets (Decorated shells uses matching game for girls, with octagonal wooden box). Middle to late Edo Period (18–19c). Saga Prefectural Museum. Wikimedia Commons. URI.

“Poem cards,” or uta-karuta, are a descendant of the same game, popularized following the introduction of playing cards (“carta”) to Japan by Portuguese sailors in the mid-1500s. Halves of poems were given out on a card, and had to be matched with their missing brethren.

⊕Box of Iroha Karuta, probably Taisho period (1912-1926). Wikimedia Commons. URI.

This “matching” activity was on my mind because when I looked at Lara’s original collection, there was an accompanying bibliography but the images were uploaded and displayed by Omeka in a different order, so I (as a non-medievalist) had a lot of trouble figuring out what matched with what. Some were pretty easy to figure out (there was only one reference to haiku, for example), and some I was able to match up using Google image search. But not everything is on the Internet, and some of the images were inscrutable to me. Naturally I assumed this was Lara’s diabolical plan all along, and that she’d inserted the poem cards reference as a clue. And from there it just all fell out, until what I was left with was a matching game.

⊕Shell with Kanji for “ship.” In an attempt to synthesize some of these themes (cards, fragments, shells) I made a click-and-drag game in which shells with Kanji on top must be dragged on top of the corresponding image (clicking on the kanji gives the word translation as a clue). When a kanji shell and picture shell are matched, a poem line is generated. The lines are generated as follows:

• randomized intro text
• the kanji word that's just been solved (in red)
• randomized quote from one of the text items in the Low Tide collection
• second randomized quote on a new line
• Clicking on the red word will take you to a Google image search for that word combined with “medieval.”

⊕A completed poem, after all shells have been matched.

When the puzzle is complete, a box pops up with a string of shells displayed in the order they were solved. Clicking on the “throw again” button will reset the puzzle, producing a new shuffled group of Kanji shells and a new poem.

On Randomness

In working with the Middle Shore collection, I was particularly taken with the idea of randomness as an organizing principle: both in the way that Lara collected the materials by walking through the library and collecting items at random, and in the way random number generation is a necessary component in my attempt to shuffle a deck of cards. Many computer-generated sorts and shuffles are not truly random (they’re called “pseudo-random” for a reason) because a computer has to start with a fixed “seed” that determines how randomness is generated, so that ⊕ Goldreich, Oded. 2010. A Primer on Pseudorandom Generators. American Mathematical Society.“pseudorandom generators provide a way to efficiently generate long pseudorandom sequences from short random seeds” that are predetermined by the computer (27). Mads Haar explains it thus:

⊕ Haar, Mads (n.d.). “Introduction to Randomness and Random Numbers.” random.org. Web. Accessed 2 Mar 2016. URIAs the word ‘pseudo’ suggests, pseudo-random numbers are not random in the way you might expect, at least not if you're used to dice rolls or lottery tickets. Essentially, PRNGs are algorithms that use mathematical formulae or simply precalculated tables to produce sequences of numbers that appear random. […] Because PRNGs generate random numbers by using mathematical formulae or pre-calculated lists, using one corresponds to someone rolling a die many times and writing down the results. Whenever you ask for a die roll, you get the next on the list. Effectively, the numbers appear random, but they are really predetermined.

This points to an intriguing conclusion: that the physical world, ultimately, has a core place in computing.

And yet …

⊕In an earlier editorial iteration of this work, Lara and Katherine chose the “plan” image as the visual to denote this essay. This seems a perfect choice to me, signaling as it does a plan with no directions - a secret organizing principle we don’t have access to.Lara’s movement through the stacks might seem to be the introduction of a “truly random” physical process into the building of the Middle Shore corpus. But, as we know, any time we walk in a space, we are subject to the constrained movements generated by the designed environment of that space. Libraries, in particular, are constrained spaces, both physically and as archives (determining what is “worthy” of keeping, what’s thrown out or relegated to the basement).

Similarly, Lara’s movement through the library is constrained by the ordering of the texts on the shelves. What is “random” is constrained by what’s in the collection, how it’s organized, what floor of the library it’s on, and how Lara was physically able moved her body through that space given the placement of shelves (in rows? blocks?) and the bounds of the building. The library becomes another kind of “seed” that constrains the true randomness of items placed in the corpus. And, faced with the mixed up corpus, I responded with anxiety, trying to see the pattern, seizing on a single item that structured the rest of the response/game. David Levy characterizes this as “the anxiety of order.” In his discussion of John Dewey, he notes the following:

⊕ Levy, David M. 2001. Scrolling Forward: Making Sense of Documents in the Digital Age. 2nd ed. New York: Arcade, 2016. On the one hand, I see him as a product and symbol of his age. He lived through a period that worshiped the god of efficiency and created bureaucratic systems of control on a scale and to a degree that we previously unimaginable. With his exaggerated fears and anxieties, and his enormous energy and intelligence, he represents that spirit as well. But at the same time that he speaks from and for this particular era, he also embodies a response to life that is found in all of us to varying degrees. For there is, it seems to me, a degree of anxiety embedded in all our attempts to order and organize, to control the world around us. (128)

My anxious response, therefore, was to try to create order out of the madness, even as I tried to also honor the seed of randomness that was the guiding ideology of the corpus.

Making the Game

The “first pass” (which you can see here) at the game was a more or less straight-up implementation of a JQuery matching game by Matt Doyle, which you can find here. I worked through the tutorial, adapting where needed. It consists of two piles of cards. The first one is shuffled (more on that later), and the task is match up each card with its corresponding item. I added in an extra layer: a “poem” consisting of short phrases that would be generated from a list of words, randomly selected. The “selection” code looks like this:

var tag = ['ship', 'head', 'blue', 'leech', 'plan', 'ring', 'dress', 'corner', 'uphill', 'cliff'];
var line = tag[cardNumber-1];
var connect = ['my', 'your', 'our', 'his', 'her', 'thy', 'this', 'that', 'another'];
randno = connect[Math.floor(Math.random() * connect.length)];
var delin = ['weeps', 'ycleped', 'cries', 'desolate', 'taken', 'standing', 'watching', 'laughs', 'still'];
second = delin[Math.floor(Math.random() * delin.length)];

The trigger code that stitches together the phrases looks like this:

if ( slotNumber == cardNumber ) {
$('<span class=\"spacer\">' + '</span>').text( randno ).appendTo( '#poem' );
$('<span class=\"spacer\">' + line + '</span>').appendTo( '#poem' );
$('<pan class=\"spacer\">' + '</span>').text( second ).appendTo( '#poem' );

Looking at the first section, you’ll see that there are three arrays (these are sets of data in square brackets, marked “tag,” “connect,” and “delin”), each with a list of possible words. The second part of the script checks to see if the two shell cards match, and if they do, picks out at random one word from the “tag” array, one from the “connect” array, and one from the “delin” array. A sample line from running this code might be my + ship + weeps = “my ship weeps.” Later iterations of Kai-awase expanded this basic method, creating longer lines that consisted of mixed-up phrases from ten of the “text” items in the Middle Shore corpus. The version I presented at Babel was this, and the final version for this exhibit is here.

Sorting and Shuffling

One of the problems I’d noted all along was the weird tendency of the shuffled deck to not really shuffle in a way I considered truly “random.” The first four items and last four items tended to shuffle among themselves but remain at their “end” of the rearranged pile: so I often would get piles 2, 3, 1 and 4 at the top (for example) and 10, 8, 9, 7 at the bottom. I didn’t really know what to do about it, so I sat on it until it came time to rework the game for publication.

And here’s where I fell down the rabbit hole. It turns out that the problem was with these lines, which shuffle the first pile:

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.sort(function() { return Math.random() - .5 });

One might ask why the word “sort” is in there, when what we’re trying to do is shuffle. The surprising answer is that in this method, one must sort in order to shuffle. Order, in other words, is the necessary precondition for disorder.

Math.random() returns a pseudo-random number between 0 and 1 but not including 1. Adding in the -.5 introduces the possibility of the resulting number being positive or negative. Once you have a list of positive/negative numbers, you can use them to do what’s called a “comparator sort” or “bubble sort” algorithm. Here’s a visualization of various sorting algorithms, including sounds:

Jason Anello explains comparator sort in a forum tutorial:

⊕ Anello, Jason (n.d.). Answer to question by user orange sky, “sorting numbers Ascending, Descending, and equal????.” Team Treehouse Community. Web forum. Accessed 2 Mar 2016. URI.The sort method will pass in two elements from the array into the compare function and the compare function will return a value letting the sort method know where it should place those two elements. If the compare function returns a negative value then a should come before b in the final sorted array. If a positive value is returned then b should come before a.

In a straight sort, we’d be comparing two elements directly and returning a “greater than” or “less than” number, to sort which element should be listed first. But in comparator shuffle, we use a random number generator instead and then use that number to determine the ordering of the array. The process works thus, in our example (see Burgess, Shuffle All the Things for a live demonstration:

1. ⊕ Burgess, Helen J. 2016. Shuffle All the Things with Array.sort. Web. Accessed 1 June 2016. URI. start with the first two elements in the original array
2. now, get a Math.random number between 0 and 1, and subtract 0.5
3. if the resulting number is positive, switch the elements in the array
4. if it’s negative, keep them where they are
5. ⊕ Burgess, Helen J. 2016. Array.sort(): Sort All the Things. Web. Accessed 1 June 2016. URI.move on to the next pair of numbers in the array (which two will depend on what sorting algorithm your particular browser uses: see Burgess, Array.sort for more on this) until you’ve completed all comparisons
6. Shuffled!

⊕ Atwood, Jeff. 2007a. “Shuffling.” Coding Horror: programming and other human factors. Blog post. Accessed 2 Mar 2016. URI.This simple sort/shuffle method works for a range of arrays, including numbers and word strings (and shells!). But here’s the thing, which explains why I was getting not-very-shuffled results: not all sorting/shuffling is created equal. ⊕ Atwood, Jeff. 2007b. “The Danger of Naiveté.” Coding Horror: programming and other human factors. Blog post. Accessed 2 Mar 2016. URI.Jeff Atwood notes that “Computers are lousy random number generators. Any shuffling you do, whatever the algorithm, will only be as good as your random number generator” (2007a). Atwood goes on to discuss problems with different methods of generating random numbers, using language such as “biased,” and “fundamentally broken” (2007b).

⊕ Saarso, Rene. 2009. “Is it correct to use JavaScript Array.sort() method for shuffling?” StackOverflow. Web. Accessed 2 Mar 2016. URI.In particular, a long-running Stackoverflow discussion suggests that the method I’m using in Kai-awase, array.sort, is the least “random” of all the options out there, with a strong bias shown toward leaving items where they are as the edges of the list are reached. ⊕ Bostock, Mike. 2012. “Will It Shuffle? Or, why random comparators are bad (in addition to being slow).” bost.ocks.org. Web. Accessed 2 Mar 2016. URI.Mike Bostock does a nice custom visualization of this problem in a post titled “Will It Shuffle? Or, why random comparators are bad (in addition to being slow).” He explains that “A good shuffling algorithm is unbiased; you should see a uniform grey matrix with only a bit of white noise. A bad algorithm will show streaks in the matrix, indicating an uneven distribution”:

⊕Matrix diagram showing bias in shuffling when using a sort (random comparator) algorithm. Visualization from Bostock, “Will It Shuffle?” URI.

⊕ Bostock, “Will It Shuffle?” URI.Bostock explains, “A good shuffling algorithm is unbiased; you should see a uniform grey matrix with only a bit of white noise. A bad algorithm will show streaks in the matrix, indicating an un¬even distribution.”

⊕ “Calculating the distributions of 100000 shuffles; please be patient.” phrogz.net. Web. Accessed 2 Mar 2016. URI.In another twist, tests by phrogz.net show that even using exactly the same script will give different probability distributions according to the browser you’re using. Sample tables on the site show that Safari and IE will produce much more “shuffled” outcomes than Google Chrome and Firefox. Note the language used in the headlines for these polemics against the javascript array sort method: “coding horror,” “the danger of naiveté,” “why random comparators are bad.” Some randomness, it seems, is more acceptable than others, since “bad” random algorithms create “bad” (relatively less random) distributions.

Randomness and Order

⊕Pointing the way. What is direction, and what is random wandering? “Manicula with the body of a dragon.” Marginal Sketches, in A Volume Of Treatises On Natural Science, Philosophy, And Mathematics, c. 1300. Royal MS 12 E.xxv, fol. 23r. URI. So, what constitutes “good” randomness and what constitutes “bad”? In the case of Kai-awase, the issue is minor: it’s not a mission-critical function that’s going to blow something up, or crack a code. At the same time, I want to shuffle the cards as best I can. But the very fact of this “bad” algorithm being integral to the poorly shuffled shell cards is a serendipitous moment. After all, what may seem random in the collection contains structure, just as we may use a sorting method to shuffle numbers. In the Middle Shore collections, we see this constant shifting between order and disorder, as we read the ways in which each participant has chosen his or her exhibit and contextualized it—given it order. Given this productive tension, let me propose a structure in the way Kai-awase is “played out” as part of The Middle Shore. It looks something like this:

• randomness in the library (Lara’s random walk),
• selectiveness in the choice of images and words (as I looked for items that seemed like a good fit for the game),
• randomness in the mathematics, as I reshuffle the cards (but not so random, as we’ve seen),
• selectiveness in the game play (as visitors to the game choose items and match them), and finally
• randomness in the poem generation.

The Middle Shore, thus, although predicated on the metaphor of walking on the beach and picking up random shells, placed there by “nature,” in fact shows how we shuffle as we walk: between randomness and deterministic movements and algorithms.

Sample Poem

When my fair ship might be thought to be the act of the sailor
Apply the tongs and cut off the aberrations of evil deeds.
When their blue globe of balsam and also spiced wine [Kyrieleyson.]
Then your ecclesiastic plan bent on winning.
these be farre matters, and thinges very olde.
Hear me, whose jealous eye smelleth sweet that is done for the love of God.
Apply the tongs and cut off the aberrations of evil deeds.
For his golden ring now wonder nyce and straunge
they’re all so beautiful—
When my leech craft of balsam and also spiced wine
they’re all so beautiful—
Hear me, whose noble head bent on winning.
Apply the tongs and cut off the aberrations of evil deeds.
When my modest dress bent on winning.
the sight of them makes no one holy.
Until her uphill trial groweth upon a mountain brim:
they’re all so beautiful—
For thy holy hand smelleth sweet that is done for the love of God.
[Christe eleison.]
Benedicamus Domino.

Helen J. Burgess
Department of English
North Carolina State University