Twine Resources

So you want to port with Twine. There are a ton of resources and tutorials out there. Here are just a few:

  • Ana Anthropy helped to popularize Twine a few years ago. Her tutorial was written with the original version of Twine in mind, but the principles are the same for the newest version of Twine.
  • Adam Hammond has a thorough tutorial for the latest version of Twine.
  • Allison Parrish (who wrote the great Tracery tutorial we used earlier in the semester) has an introduction to Twine too.
  • And finally, here is the guide (by Jon Saklofske) that I demonstrated in class, showing various macros at work.

Black Lives Matter, Artist Statement

Through the use of tracery, I created a social commentary based on the Black Lives Matter movement. I did this by researching a substantial number of police shootings and putting the data-which includes date, state, area, mode of brutality- into tracery in order to show the feasibility in which these shootings can happen any black man according to date, location, and activity.  The number of shootings and possibilities when generated randomly through tracery demonstrate that these shootings are likely occur to any black man based on the data.  Christopher Funkhouser’s ideas about computer generated poems can be applied to this project in the way that the “choices in input texts were not accidental” (Funkhouser 249) because my project, like “Balestrini’s avant-garde” computer generated poetry, were made for a purpose, not randomly-generated inconsequentially. Funkhouser explores the history of computer-generated works of poetry in “First-Generation Poetry Generators” by exposing earlier methods as well as ways in which various authors have made generated poetry. He explores the repetition and how technology has its limitations. Although it does have limitations, I think Funkhouser can go further in exploring the way that electronic poetry and overall electronic literature can be used to send a message just like conventional works can.

In general, the art of these tracery projects are simply remarkable because of the capacity in which an input can generate a combination of outcomes. The variety of outputs, and combination of outputs is amazing. According to Noah Wardrip-Fruin, the “combinatory techniques allow a relatively small number of initial materials to be arranged, following certain rules, into a vast number of possible configurations” (Wardrip-Fruin 33). This idea applies to my tracery project because tracery uses the combinatory technique of using a small number of inputs to output large configurations of text. In Wardrip-Fruin’s “Five Elements of Digital Literature”, the author highlights famous works of electronic literature in history, and also describes his five elements of digital literature, which includes data, processes, interaction, surface, and context. Each of these plays a key role in making the program work (data and processes), the output (surface), and the relationship to the technology (the context). When comparing this work to Hamlet of the Holodeck, I can see that Wardrip-Fruin can add more about how the digital environment is encyclopedic because of the amount of information we can store in little bits of data.

Similar to the Wardrip-Fruin’s “Five Elements of Digital Literature”, Hamlet on the Holodeck explores five properties of digital environments.  According to Janet Murray, digital environments are procedural, participatory, spatial, and encyclopedic. She cites various works of digital environments that support her properties. As this was only written in 1997, this article could be applied to several digital environments today using the same outlines, critiquing them using these knew digital environments. For example, one might point too the tracery projects to evaluate them on their digital environments. One, it is definitely procedural as the program goes from rule to rule. Two, you can sort of participate by generating new pieces based on the code. Three, any digital environment is spatial, and the degree to which you change the view of the project changes the visual space of the digital environment.   The tracery project also meets the fourth requirement because of the fact that information can be stored in little bits of data in the tracery project. This piece of work applies to my own project for the reasons listed above. Also, according to Janet Murray, “compiling your code before running it is like writing a book and then hiring someone to translate it for your readers” (Murray 76). This statement relates to my project because in my tracery project, I compiled my code and then used tracery to translate it.


Works Cited:

Funkhouser, Christopher. “First-Generation Poetry Generators: Establishing Foundations in Form.” Mainframe Experimentalism: Early Computing and the Foundations of the Digital Arts. Berkeley: University of California Press. 243–263. Print.

Murray, Janer. “Beyond Multimedia.” Hamlet on the Holodeck. Cambridge, Massachusetts: The MIT Press, 1997. 65–94. Print.

Wardrip-Fruin, Noah. “Five Elements of Digital Literature.” Reading Moving Letters: Digital Literature in Research and Teaching. Media Upheavals 40, 2010. 29–57. Print.

Death of Eric Garner.” Wikipedia. Wikimedia Foundation, 11 Sept. 2017. Web. 17 Sept. 2017 <>.

“Death of Freddie Gray.” Wikipedia. Wikimedia Foundation, 12 Sept. 2017. Web. 17 Sept. 2017. <>.

“Shooting of Alton Sterling.” Wikipedia. Wikimedia Foundation, 11 Sept. 2017. Web. 17 Sept. 2017. <>.

“Shooting of Jordan Edwards.” Wikipedia. Wikimedia Foundation, 02 Sept. 2017. Web. 17 Sept. 2017.

“Shooting of Michael Brown.” Wikipedia. Wikimedia Foundation, 15 Sept. 2017. Web. 17 Sept. 2017. <;.

“Shooting of Tamir Rice.” Wikipedia. Wikimedia Foundation, 17 Sept. 2017. Web. 17 Sept. 2017. <>.

“Shooting of Walter Scott.” Wikipedia. Wikimedia Foundation, 11 Sept. 2017. Web. 17 Sept. 2017. <>.

“Trayvon Martin.” Wikipedia. Wikimedia Foundation, 17 Sept. 2017. Web. 17 Sept. 2017. <>.

Yan, Holly. “‘Black Lives Matter’ Cases: When Controversial Killings Lead to Change.” CNN. Cable News Network, 04 May 2017. Web. 17 Sept. 2017. <>.

Customizing Tracery Projects

Changing Fonts

To change the font of your project, you have to edit the style.css file.

1. First, pick your font. The easiest thing to do is to pick a Google Web Font—these are fonts Google makes available for embedding on web pages. Here’s the complete list:

2. Next, open up the style.css file in Brackets or your preferred text editor. Make the following line the first line of style.css:

@import url('');

Replace Open+Sans with the name of the font you want to use. Be sure to replace any spaces in the font name (if it’s more than one word) with plus signs. Like:

@import url(';

3. Finally, you have to add another line to style.css. In the body section of the file, add this line:

font-family: Gloria Hallelujah;

Replace “Gloria Hallelujah” with the name of the font (here you need to use spaces if the font name is more than one word).

Save and reload the project in your browser, and you should see the new font take effect. If you have trouble, Google “Google Web Font CSS” and you should find some good tips.

Adding Images

In order to add images, you have to use the <img> HTML tag in your index.html file. See here:

It’s hard to be more specific than this, because it depends on where you want your image to show up. If you want your image at the top of your page, you can add an image right below the <H1>Title</H1> tag.

Another way to include images is to use the <img> tag directly in the Origin rule in grammar.js. In fact, you can use Tracery to randomize which images show up in your project.

Whatever image(s) you want to embed should also be placed in the same folder as your index.html file.

Other Formatting

You can use bold, italics, and even paragraph breaks in your project by using the appropriate HTML tag in the Origin rule. For example, if your project takes the form of a multi-paragraph announcement, you could do something like this in grammar.js:


The <p> tag forces a paragraph break between the #firstParagraph# and #secondParagraph# rules. The <em> tag turns on italics for the #sincerely# rule, and the </em> turns the italics off.

Tracery Tips

This posts echoes what I sent out in email this morning:

  • I’ll be in the library from 4-5:30 on Saturday 9/9 to answer Tracery questions, brainstorm ideas, or troubleshoot problems. Drop by if you want help! Look for me on the main floor, somewhere near the circulation desk.
  • I created another set of template files for you to work with. The original set available for download from the assignment page was the giant Tracery grammar for Don’t Drink the Water. It can be overwhelming to sort through what’s going on there. So I created a simpler grammar. Links to both sets of templates are on the assignment page now.
  • While we played with editing Tracery grammars in the online Visual Editor in class on Wednesday, I didn’t explain how to edit files in the downloadable template set. So, here’s what you do:
  1. Download either set of template files (probably start with the simple grammar).
  2. Unzip the download file onto your desktop or some other folder on your computer.
  3. Test the downloaded Tracery project by opening up the index.html template file in a web browser like Chrome. In Windows, use Control-O to open a file from Chrome. In Mac, use Command-O while in Chrome.
  4. The project should open up and generate text. Press the link to regenerate new text.
  5. To actually edit the underlying Tracery grammar, open up grammar.js in a text editor like Brackets or Atom.
  6. Make a few changes in the grammar and save the file. (Be sure to keep your commas, brackets, and quotation marks in the right places!)
  7. Switch back to Chrome and reload the index.html with Control-R (Windows) or Command-R (Chrome). You should see your changes take effect.
  8. If your changes don’t show up after a couple rolls, make sure you actually saved the edited grammar.js file and truly reloaded it in the browser.
  9. If the page is entirely blank in your browser, then there’s an error in your grammar.json file! Go back and make sure all your commas and so on are in place.
  10. In addition to editing the grammar.js file, you should edit the index.html file (using the same text editor) and update it to reflect your own project’s needs. You can also edit the style.css file (in the same text editor) in order to change fonts, font sizes, colors, and other visual elements of the page.