Symbol, Icon & Index

To Do This Week

Explore these works:

• My Boyfriend Came Back from the War, by Olia Lialina (1996)
• CityFish, by J.R. Carpenter
• Forever, by Alan Bigelow

Class

Twine

• Twine — download is better than using Twine online!
• Twine template (ZIP) — this is a zip containing both the simple and advanced templates discussed in the video. Just import the two HTML files into Twine and play around. Also, you can click the HTML files in this folder to test them in a browser and see the image.
• Twine template with media and (ZIP) — this template includes more advanced techniques for adding background images, sounds, music, etc.
• Example Twine: The Tiniest Room
• Harlow 3.33 — programming examples
• A Good Guide for more advanced stuff

Twine Stories for Inspiration

• With Those We Love Alive, by Porpentine
• “Even Cowgirls Bleed” by Anna Anthropy
• “Magical Maiden Madison” by Christine Love
• “Arcadia” by Jonas Kyratzes
• “Conversations with My Mother” by Merritt Kopas
• Howling Dogs

Twine Harlowe Cheat Sheet: Algorithmic Changes + Media

This cheat sheet is for downloaded Twine using the Harlowe story format. It covers basic algorithmic techniques, variables, random selections, counters, conditional logic, media insertion, and using JavaScript inside Twine passages.

1. Basic Variable Setup

Story variable
Persists across passages.

(set: $count to 0)
(set: $name to "Will")
(set: $hasKey to false)

Temporary variable
Only exists in the current passage or hook.

(set: _choice to "left")

In Harlowe, $ variables persist across passages, while _ variables are local to the current passage or hook.

2. Print / Show a Variable

$count
$name

Or:

(print: $count)

3. Incrementing and Decrementing

Add 1

(set: $count to it + 1)

Add more

(set: $count to it + 5)

Subtract

(set: $count to it - 1)

Harlowe supports it as shorthand for the variable on the left side of to.

4. Conditional Logic

If

(if: $count >= 5)[You have enough points.]

If / else-if / else

(if: $count >= 10)[Excellent.]
(else-if: $count >= 5)[Good.]
(else:)[Keep going.]

5. Random Selections

Random number

(set: $roll to (random: 1, 6))

Random item from options

(set: $mood to (either: "happy", "sad", "strange"))

Random item from an array

(set: $lines to (a: "red", "blue", "green", "gold"))
(set: $line to $lines's random)

6. Arrays

Make an array

(set: $items to (a: "apple", "book", "coin"))

Get one item

$items's 1st
$items's last

Length

$items's length

Random item

$items's random

7. Boolean Flags

(set: $doorOpen to true)
(set: $metGuide to false)

(if: $doorOpen)[The door is open.]
(if: not $metGuide)[You have not met the guide yet.]

8. Useful Patterns

Count visits to a passage

(set: $forestVisits to it + 1)

(if: $forestVisits is 1)[First time in the forest.]
(else:)[You return to the forest.]

Random line each time

(set: $lines to (a:
"Something moved in the dark.",
"The room seemed warmer now.",
"You heard breathing behind you."
))
(set: $line to $lines's random)

$line

Only unlock after enough actions

(if: $count >= 5)[[[Open the hidden room]]]
(else:)[The hidden room stays shut.]

9. Insert an Image

Simple image

<img src="images/forest.jpg" alt="Forest" width="800">

Clickable image

<a href="nextpassage.html">
  <img src="images/door.jpg" alt="Door">
</a>

Better Twine workflow for images

Twine can import image assets into the story file. Another option is to use a relative path like images/pic.jpg and keep that folder next to the published HTML file.

10. Insert Video

Basic video

<video controls width="800">
  <source src="media/movie.mp4" type="video/mp4">
</video>

Autoplay muted looping video

<video autoplay muted loop playsinline width="800">
  <source src="media/bg.mp4" type="video/mp4">
</video>

11. Insert Audio

Audio player

<audio controls>
  <source src="media/music.mp3" type="audio/mpeg">
</audio>

Auto-play audio

<audio autoplay loop>
  <source src="media/music.mp3" type="audio/mpeg">
</audio>

Note that browsers often block autoplay for audible audio until the user interacts with the page.

12. Audio Only Inside One Passage

Put the audio element directly in that passage.

<audio controls autoplay>
  <source src="media/roomtone.mp3" type="audio/mpeg">
</audio>

When the reader leaves the passage, that audio element usually disappears with the passage.

13. Audio Across the Whole Work

For background music across multiple passages, use one persistent audio element and control it with JavaScript.

Example:

<audio id="bgm" loop>
  <source src="media/background.mp3" type="audio/mpeg">
</audio>

Then create controls:

<button onclick="document.getElementById('bgm').play()">Play music</button>
<button onclick="document.getElementById('bgm').pause()">Pause music</button>

14. Can JavaScript Interact with Twine Variables?

Yes. In current Harlowe, inline <script> code can read and write Harlowe variables directly by name, such as $count or _tempVar.

Example

(set: $count to 4)

<script>
$count += 1;
</script>

$count

That will display 5.

15. Example: If count >= 5 then play audio

Yes, this is possible.

(set: $count to 5)

<audio id="specialSound">
  <source src="media/chime.mp3" type="audio/mpeg">
</audio>

<script>
if ($count >= 5) {
  document.getElementById('specialSound').play();
}
</script>

Playback may still be blocked unless the reader has already interacted with the page.

16. Better Version: Trigger After a Click

(set: $count to 5)

<audio id="specialSound">
  <source src="media/chime.mp3" type="audio/mpeg">
</audio>

(link: "Check status")[
  <script>
  if ($count >= 5) {
    document.getElementById('specialSound').play();
  }
  </script>
]

17. Change a Twine Variable from JavaScript

(set: $count to 0)

<script>
$count = 7;
</script>

$count

18. Recommended Beginner Pattern

Use Harlowe for:

• setting variables
• counting actions
• random choices
• branching logic
• showing and hiding text

Use JavaScript for:

• audio and video control
• timers
• DOM control
• custom effects

19. Mini Starter Example

(set: $count to 0)
(set: $lines to (a:
"You hear a distant bell.",
"The hallway breathes softly.",
"A memory flickers in the wallpaper."
))

(click: ?choice)[
  (set: $count to it + 1)
  (set: $line to $lines's random)
]

|choice>[Click here to explore.]

$line

(if: $count >= 3)[
  <audio id="mystery" controls>
    <source src="media/mystery.mp3" type="audio/mpeg">
  </audio>

  <script>
  document.getElementById('mystery').play();
  </script>
]

Note

Current Harlowe allows inline <script> tags to read and write them.