multiverse.js

The multiverse is the idea that the universe we live in is just one of an infinite number of possible universes. One way of thinking about this is to consider how every decision you make entails a series of other possibilities, or roads not taken, which fork off from our current universe.

The multiverse has a literary equivalent in hypertext fiction, which allows a linear narrative to fork in different directions using hyperlinks and the reader's ability to choose which ones to follow.

J.R. Carpenter's Ocean of Static builds on this idea of a generative text by using a particular notation that presents the various possibilities for a reading. If you are familiar with the idea of an array or a list in a programming language you will immediately recognize this syntax.

You can hear Carpenter reading this section in which she selects from the various possibilities. The online version itself will automatically select from the various possibilities, which collapse into one reading of the text.

multiverse.js is a small JavaScript library that lets you write generative text using HTML lists. Normally an unordered list <ul> will display each list element as part of a bulleted list. But when you use multiverse.js the list will randomly collapse into one possibility. For example, try reloading this page and see how the following text changes.

Read on below for the details of how to do this, and for enabling things like timers, images, etc.

Basic Usage

<script src="https://edsu.github.io/multiverse/multiverse.js"></script>

<div>

An owl and a girl most

<ul class="multiverse">
  <li>adventurous</li>
  <li>curious</li>
  <li>studious</li>
</ul>

<ul class="multiverse">
  <li>set out</li>
  <li>set sail</li>
  <li>sailed away</li>
</ul>

in a

<ul class="multiverse">
  <li>bottle-green</li>
  <li>beetle-green</li>
  <li>pea-green</li>
</ul>

<ul class="multiverse">
  <li>boat;</li>
  <li>sieve;</li>
  <li>skiff;</li>
  <li>vessel;</li>
</ul>

a

<ul class="multiverse">
  <li>beautiful</li>
  <li>shipshape</li>
  <li>sea worthy</li>
</ul>

<ul class="multiverse">
  <li>craft,</li>
  <li>raft,</li>
  <li>wooden shoe,</li>
</ul>

certainly, though a

<ul class="multiverse">
  <li>good deal</li>
  <li>wee bit</li>
  <li>tad</li>
</ul>

too

<ul class="multiverse">
  <li>small</li>
  <li>high in the stern</li>
</ul>

to suit the two of them.

</div>

Which will result in this text (among others) being displayed:

A Timer

If you would like one of your multiverses to automatically change on a timer use the data-multiverse-timer attribute to set number of milliseconds for the interval.

<ul class="multiverse" data-multiverse-timer="3000">
  <li>adventurous</li>
  <li>curious</li>
  <li>studious</li>
</ul>

Adding Some Style

You can override the appearance of your multiversed text by simply providing your own CSS style. For example if you wanted all your multiverses to be blue and not underlined:

<style>
  ul.multiverse li {
    text-decoration: none;
    color: blue;
  }
</style>

...

<ul class="multiverse">
  <li>adventurous</li>
  <li>curious</li>
  <li>studious</li>
</ul>

Interaction

If you want to provide a control to set all the multiverses use Multiverse.init function that gets imported into your page when you load the multiverse.js.

<button onclick="Multiverse.init()">New</button>

Images

Since multiverse just uses HTML you can put more than just text in your list. For examples links, or images:

<ul class="multiverse">
  <li><img src="images/craft.png"></li>
  <li><img src="images/raft.png"></li>
  <li><img src="images/shoe.png"></li>
</ul>>