Embedded

Transclusion and the dream of a deep electronic literature

October 2021

BWA Wrocław Główny

 

Philo van Kemenade

@phivk

Slovak National Gallery

Sensorium Festival

Netherlands Institute for Sound and Vision

Storytellers
United

Transclusion & Hybridity

Non-linear storytelling

Chatting with artworks

#DC143C

#D7141A

#EE1C25

#11457E

#0B4EA2

Hallo wereld

Cześć świecie

Ahoj světe

Hello World

Ahoj svet

ハローワールド

🌎

🌍

🌏

Hyper-reality is just a dream away

 Computer Lib/Dream Machines by Ted Nelson

Transclusion graphic by Maggie Appleton

Twine for non-linear storytelling

Free x 2

 

Graphical User Interface


Helpful Community

Link

Passage

Story

Story Format

Static HTML

Export to file

Play in Browser

Story

I.D.K.

Parallel System

Emotion pictograms

Artworks in conversation

Tomasz Mróz

Poland

Marek Kvetan

Slovakia

Martin Zet

Czech Republic

http://tiny.cc/embedded-workshop

0. One link

A.
Open the online Twine editor:
twinery.org/2/
 

B.
→ Click Formats

Add a New Format

paste Story Format URL:

https://phivk.github.io/trialogue/dist/Twine2/Trialogue/format.js

→ click Add


C.
Under Story Formats select Trialogue.

1. Adding Trialogue to Twine

A.
Navigate to the sample story:

https://phivk.com/embedded-workshop/embedded

B.
File

Save Page As... (or equivalent)


C.
In Twine Editor:

Import From File

→ Browse

→ Select Embedded.html

2. Import Sample Story

link in notepad

Make sure every passage has:

 

Title, e.g. "start"

 

one Speaker-tag:

  speaker-idk
  speaker-par
  speaker-emo

 

Passage text, e.g. "Hi 👋"

 

One or more links,

  e.g. [[What's your name?]]

3. Drafting your story

Hit Play to test your story

Play your story

🎉

including emojis

easily search and copy emojis at:

unicode.party

🖼

including images

<img src="https://placekitten.com/408/287">

Trialogue accepts any valid HTML.

Add the following HTML code to add an image...
(replace the src URL for your own)

🖼

styling colours & avatars

:root {
    --bg-color: #C7BDB5;
    --user-color: #00A;
    --speaker-color: #A00;
    --sidebar-bg-color: #FFF;
    --navbar-bg-color: #FFF;
    --passage-bg-color: #FFF;
    --passage-text-color: #000;
}

.chat-passage-wrapper[data-speaker='you']:after {
  background-image: url('https://avatars3.githubusercontent.com/u/902958?s=460&v=4');
}

.chat-passage-wrapper[data-speaker='1']:before {
  background-image: url('https://www.webumenia.sk/dielo/nahlad/SVK:SNG.K_9060/800');
}

add CSS code
Menu ➡ Edit Story Stylesheet

✋ Let’s do this! 💥

 

Working together in break out rooms

Also see

Embedded

By Philo van Kemenade

Embedded

  • 693