About the Stir Fry Texts

by Jim Andrews
Site: vispo.com (since 1996)
Background: B.A. in English/Math from UVic (1983)
Living in Vancouver, creating JavaScript/HTML apps and also writing non-code
CV

URL of this page

The URL of this page is vispo.com/StirFryTexts/about.html.
Please bookmark it. You will need to refer to it later if you want to make a stir fry.

Overview and History of Stir Fry Texts

I started the Stir Fry Texts project in 1999. It's ongoing and often collaborative.
The homepage of the project is vispo.com/StirFryTexts. This page contains links to the stir fry texts themselves. It also links to three essays I've written about the stir frys. There's a link to a page about the participants in the project. And there's a bunch of links to writing by other people about the stir fry texts.
A stir fry is a literary form I created. Like a sonnet or a madrigal is a literary form.
A stir fry could also be a visual art form, or an audio art form, etc, as we'll see, because the fundamental units of a stir fry are snippets of HTML code; a stir fry is actually a multimedia form.
But almost all of what has been done so far with the form is strictly literary.
There have been 8 stir frys created so far: Log, Spastext, Blue Hyacinth, Kedrick James, Correspondence, Concrete Stir Fry Poems, Does Lara Croft stir fry?, and Divine Mind Fragment Theater.
I designed and wrote the JavaScript code engine that runs in most stir frys. Marko Niemi has done significant work on that code also, and he wrote the entirety of the code in the only stir frys that use graphics, not text: Concrete Stir Fry Poems.
In Log and Blue Hyacinth, the texts are by Brian Lennon and Pauline Masurel, respectively; they wrote the texts and chose how to chop them up.
In some of the other stir frys, I used texts by other people and I chose how to chop the texts up. In others, I wrote the texts myself.
The only multimedia stir fry is by Marko Niemi. His Concrete Stir Fry Poems use graphics (of text) rather than text.
When I created the first stir fry in 1999 (I think it was Divine Mind Fragment Theater) the code only ran on Internet Explorer for the PC. Then in 2004 the poet-programmer Marko Niemi translated Spastext into Finnish and upgraded the JavaScript code so that it ran on most contemporary browsers. I put his JavaScript code into the rest of the stir frys so they also could run on most contemporary browsers.
In 2015 I upgraded the code so that the stir frys work on mobile devices. You can now stir the texts with your finger. Not all of the stir frys have been upgraded, so far. These ones have been: Log, Spastext, Blue Hyacinth, Kedrick James, and Divine Mind Fragment Theater.
Some of the stir fry texts have been published elsewhere than on vispo.com, but the code is probably from a previous version of the stir frys.

Character

If you interact with a stir fry, you see and feel that it has character. The behavior has character.
A Brit friend described the behavior as being like that of a hedge-hog when you pet its tummy. It gets a bit defensive. It doesn't really permit you to be in full control of it. It twitches when you touch it.
It balks at being your tool. It is itself. It has character.
It is a little unpredictable, even to the author, because there are so many possible permutations that you can't read them all, never mind plan for them all.
As author, you can make some of the permutations correct syntactically, but you can't make them all correct. That is part of the interest. Some of the unintended results are very good; some not so good. But there's a kind of unpredictable, volatile energy to the experiment.
It isn't really experimental if you know the outcome before you start.

Form

The diagram below (from the essay Architecture and the Literary) illustrates the architecture of Divine Mind Fragment Theater
Divine Mind Fragment Theatre has three passages (fundamental texts). In the diagram, they are blue, gold, andd green.
The first part of each text is displayed in red. When the reader mouses over (or touches) one of the red texts, it gets replaced with the red text below it. If the lowest red text is displayed, then when it gets touched or moused, it gets replaced with the top red text.
Each stir fry contains some passages (fundamental texts). The fundamental texts (passages) can be texts or HTML snippets. Let us denote the number of passages by gPassages.
Each stir fry provides some sort of clickable control that allows the reader to cycle through the passages.
- In Blue Hyacinth, for instance, when you click a blue square (shown to the right), you view the corresponding passage, or fundamental text, which is the same color as the square you clicked. There are 4 passages in Blue Hyacinth (gPassages=4).
- In Log, clicking the bottom red text (shown to the right) cycles you through the 3 passages (gPassages=3).
The value of gPassages, the number of passages, is coded in a variable named gPassages in the JavaScript code. It is in a file such as vispo.com/StirFryTexts/log/js/log.js. Each stir fry has such a file that codes gPassages and other customizable global variables. Changing a couple of values such as gPassages is most of the programming you need to do when you create a stir fry. You set gPassages to the number of passages in your stir fry.
Each of the passages is cut into the same number of parts. In Log, that number is 30. In Log, that number is coded as gLength in vispo.com/StirFryTexts/log/js/log.js. Deciding how to cut the text up is an important part of how the resulting stir fry reads.
When the reader mouses over (or touches) part k of text t, that part gets replaced with part k of text t+1.

Combinatorial Oomph

How many permutations does a stir fry have? In other words, how many different texts can a stir fry display? Suppose the stir fry has n passages, and each passage is cut into v pieces. Suppose also that all the permutations differ from one another. Then the total number of texts is n^v.
Blue Hyacinth has 4 passages and each passage is cut into 30 parts. So Blue Hyacinth has 4³⁰ texts. This is a very large number. It is about 1,152,921,500,000,000,000. The number is so large my computer can't accurately display a number with that many digits.
The number of atoms in the universe is estimated to be about 10⁸⁰. So were we to make a stir fry with 10 passages, and each passage was cut into 80 pieces, that stir fry would have as many readings as the number of atoms in the universe.
10⁸⁰=(10²)⁴⁰, so we could as well make a stir fry with 100 passages, where each passage was cut into 40 pieces. That too would have as many readings as the number of atoms in the universe.
10⁸⁰ = (10^80/30)³⁰ < (10^2.67)³⁰ < 468³⁰, so we could as well make a stir fry with 468 passages, where each passage was cut into 30 pieces. That too would have as many readings as the number of atoms in the universe.
The funny thing is, though, that although stir frys hav lots of permutations, you don't have to read them all to get a sense that you have indeed read the piece. You read the passages. That gives you a good sense of the fundamental material. Then you imagine how those 'ideas' go together with 'ideas' from the other texts, and you see how they do in practice go together. Then you have a sense that you have read the piece.

Compare and Contrast with Twine

Twine could just include images, video, or sound. So can a stir fry. They are both multimedia forms, not necessarily strictly textual forms.
Digital literature is rarely solely textual these days. New digital literary forms are almost always multimedia forms. All media is coded in zeroes and ones. The borders between media are semantic.
But if we think of stir frys and Twine as textual forms, we can say that the fundamental unit of text in a stir fry is usually phrase-length, whereas it's usually paragraph-length or sentence-length in Twine.
Stir Frys are normally associated with poetry and Twine is normally associated with prose stories.
But a stir fry could be narrative. The passages could form a story if read sequentially. Similarly, Twine could be used for the creation of a poem.
Although there is no use in the stir fry programming of Math.random() to generate any random numbers, the reader's stirring of the text acts as a 'randomizer' of the text, a generator of new text to read. At least by default, there is no random dimension to Twine, although that may be tweakable (?) via the JavaScript code.
In Twine, you chase down threads of related texts, relations between successive linked texts. In the stir frys, you do that also, but you see more of the parts of the whole at once.
A stir fry has n passages, and each of those passages is chopped into pieces. The 'passages' in Twine there's no chopping. It isn't so disjunctive. The relations between the texts are more crafted; there is normally many fewer permutations in Twine works.
Linkedness is important to both Twine and stir frys. The links in stir frys are mainly conceptual links between passages. Also, links between adjacent stirred parts of passages are important.

How to Create a Stir Fry Text

If you can unzip a zip file, download and unzip vispo.com/StirFryTexts/stirfry.zip.

Otherwise, create a folder named stirfry and save these files to the stirfry folder:

colophon.gif
This is the graphic below the text you see in index.html. This graphic is clickable; it lets the reader cycle through the passages.
index.html
This is the file you open in the browser to view the stir fry. This is an HTML file. The first passage is coded in here. The first and all the rest of the passages are coded in stirfry.js.
jaUtils.js
This is a bunch of JavaScript utility functions I (mostly) wrote to do things like determine how wide the browser is.
stirfry.css
This is the 'cascading style sheet' (CSS) file; the style sheet. This is where you change things like the colour of the passages.
stirfry.js
This is the main JavaScript file. The passages are coded here. This file also contains some variables you can edit.

The example has 3 passages. You can see that in a number of ways:

index.html displays 3 texts when you click the colophon repeatedly.
In stirfry.js, we see
```
var gPassages=3;
```
The value of this variable must be set to the number of passages.
In stirfry.js we see this:
```
var gLength=25;
```
gLength is the number of pieces into which each passage is chopped. Set this to what you want.

We see the following texts in stirfry.js. These code the passages into arrays. Passages are coded in stirfry.js. There are 3 passages coded below.

gTextArray[0][0] = "A second crucial feature "
gTextArray[0][1] = "of the L=A=N=G=U=A=G=E approach "
gTextArray[0][2] = "to poetry and writing "
gTextArray[0][3] = "centers in its preoccupation "
gTextArray[0][4] = "with nonsense, "
gTextArray[0][5] = "unmeaning, "
gTextArray[0][6] = "and fragmentation. "
gTextArray[0][7] = "These writers practice "
gTextArray[0][8] = "language experiments "
gTextArray[0][9] = "which generate "
gTextArray[0][10] = "and promote such conditions. "
gTextArray[0][11] = "As readers, "
gTextArray[0][12] = "their approach is archaeological. "
gTextArray[0][13] = "Their reviews "
gTextArray[0][14] = "and critical comments "
gTextArray[0][15] = "on poetry "
gTextArray[0][16] = "display little concern "
gTextArray[0][17] = "with \"Interpretation\"; "
gTextArray[0][18] = "rather, they elucidate "
gTextArray[0][19] = "as it were the behavior, "
gTextArray[0][20] = "the manners, "
gTextArray[0][21] = "the way of life "
gTextArray[0][22] = "that various kinds of writings "
gTextArray[0][23] = "perform and live."
gTextArray[0][24] = "Jerome J. McGann <br><i data-type=\"c\">Social 
Values and Poetic Acts</i><br>Harvard University Press, 1988."

// Above is the first passage. 

gTextArray[1][0] = "The passion for certainty is, "
gTextArray[1][1] = "of course, "
gTextArray[1][2] = "also one of the great cornerstones "
gTextArray[1][3] = "of science, "
gTextArray[1][4] = "philosophy, "
gTextArray[1][5] = "and religion. "
gTextArray[1][6] = "And the quest for control "
gTextArray[1][7] = "is inherent in all technology. "
gTextArray[1][8] = "Indeed, the reason "
gTextArray[1][9] = "we are so interested "
gTextArray[1][10] = "in the compulsive programmer "
gTextArray[1][11] = "is that we see no discontinuity "
gTextArray[1][12] = "between his pathological "
gTextArray[1][13] = "motives "
gTextArray[1][14] = "and behavior "
gTextArray[1][15] = "and those of the modern scientist "
gTextArray[1][16] = "and technologist generally. "
gTextArray[1][17] = "The compulsive programmer "
gTextArray[1][18] = "is merely the proverbial mad scientist "
gTextArray[1][19] = "who has been given a theater, "
gTextArray[1][20] = "the computer, "
gTextArray[1][21] = "in which he can, "
gTextArray[1][22] = "and does, "
gTextArray[1][23] = "play out his fantasies. <p>"
gTextArray[1][24] = "Joseph Weizenbaum<br><i data-type=\"c\">Computer 
Power and Human Reason</i><br>W.H. Freeman and Company, 1976"

// Above is the second passage.

gTextArray[2][0] = "Emerson\'s aim "
gTextArray[2][1] = "was to recover "
gTextArray[2][2] = "that \"original relation "
gTextArray[2][3] = "to the universe\" "
gTextArray[2][4] = "enjoyed by "
gTextArray[2][5] = "earlier generations, "
gTextArray[2][6] = "who \"beheld God "
gTextArray[2][7] = "and nature face to face,\" "
gTextArray[2][8] = " while \"we do so through their eyes.\" "
gTextArray[2][9] = "Why, he asks, "
gTextArray[2][10] = "\"should not we also enjoy "
gTextArray[2][11] = "an original relation "
gTextArray[2][12] = "to the universe?\" "
gTextArray[2][13] = "But since direct encounters "
gTextArray[2][14] = "with the divine "
gTextArray[2][15] = "probably have been foreclosed "
gTextArray[2][16] = "by humanity's fall "
gTextArray[2][17] = "into self-consciousness, "
gTextArray[2][18] = "Nature, "
gTextArray[2][19] = "\"a remoter and inferior incarnation "
gTextArray[2][20] = " of God\", "
gTextArray[2][21] = "has become "
gTextArray[2][22] = "\"the present expositor "
gTextArray[2][23] = "of the divine mind.\" <p>"
gTextArray[2][24] = "Leo Marx<br>\"The Struggle Over Thoreau\"<br>The 
New York Review of Books, June 24, 1999 "

// Above is the third passage.

gTextArrary is an array. An array is a list of things such as [1,2,3]. An array can contain numbers or strings (texts) or objects or basically 'whatever' in JavaScript. It can contain numbers and strings and objects, also. The elements of an array do not all have to be the same type. But our gTextArray contains only strings (texts). More specifically, it solely contains our stir fry texts.
```
gTextArray[i][j]="blah blah "
```
```
i
```
tells us which passage the snippet belongs to. i ranges from 0 to one less than the number of passages.
```
j
```
tells us which snippet we are dealing with. Recall that each passage is chopped into the same number of pieces. In our example, the number of snippets is 25, since j ranges from 0 to 24 in each of the passages.
In stirfry.js we see this:
```
var gPassageStyles=["passage0","passage1","passage2"];
```
Each passage has its own CSS style. So there needs to be an entry in gPassageStyles for each passage. Since there are 3 passages in our example, there are three entries in gPassageStyles. If there were 4 passages, gPassageStyles would be ["passage0","passage1","passage2","passage3"]
In stirfry.css we see this:
```
.passage0 {
	color:#ffffff;
}
.passage1 {
	color:#bbbbbb;
}
.passage2 {
	color:#888888;
}
											
```
This is where you set the color for the text of each passage. The above colors are coded in hexadecimal, but some (not all) words for colors work as well to set colors. For instance, the below would also work:
```
.passage0 {
	color:White;
}
.passage1 {
	color:Silver;
}
.passage2 {
	color:LightGray;
}
											
```
#ffffff is actually (exactly) white. But #bbbbbb is not exactly Silver, and #888888 is not exactly LightGray. Here is an online colorpicker you can use to pick colors and generate the hexadecimal code. Note that in the above CSS the hex code must be prefaced by the # symbol.

Quotations:
In JavaScript, strings (texts) can be coded between double quotation marks as in "or so he said" or between single quotation marks as in 'this works too'. If you want a string that includes a quotation, you can do it like this "If the 'outer quotation marks' are double, make the inner ones single" or like this 'If the outer "quotation marks" are single, make the inner ones double'. But you create errors that the JavaScript compiler does not understand if you structure a string like this:
"He said "Ouch" when he blinked."
Because the JavaScript compiler says to itself 'The string must be "He said "'.
Special Characters:
You can also code quotation marks and other special characters listed here using an 'escape sequence'. For instance, if you want a double quotation mark inside a string delimited by double quotation marks, you code it like so:
"She said \"Book him Danno\" to Donna."
By placing the forward-slash character \ before a special character in a JavaScript string, the JavaScript compiler knows to allow the special character to escape its usual meaning, in this instance, and revert to simply being a normal character in a normal string rather than a special character in a more complex drama. It's like giving the character a special dispensation to not be a special character this time.
HTML in gTextArray
Most of the strings in gTextArray are simply textual, ie, they do not code HTML. However, it is possible to code HTML in gTextArray. An example (from above) is shown below:
```
gTextArray[1][24] = "Joseph Weizenbaum Computer 
Power and Human Reason W.H. Freeman and Company, 1976"
							
```
The computer renders it like this:

Joseph Weizenbaum
Computer Power and Human Reason
W.H. Freeman and Company, 1976

In HTML, creates a line-break.
In HTML, What is bracketed this way is in italic
In HTML, What is bracketed this way is in bold

In any HTML tags you code in gTextArray (except ), you must include data-type='c' so the stir fry JavaScript code does not get confused. Like so:

gTextArray[1][24] = "Joseph Weizenbaum<br><i data-type=\"c\">Computer 
Power and Human Reason</i><br>W.H. Freeman and Company, 1976"

or, equivalently, like this:

gTextArray[1][24] = "Joseph Weizenbaum<br><i data-type='c'>Computer 
Power and Human Reason</i><br>W.H. Freeman and Company, 1976"