A framework for audiovisual storytelling in the Cyma Rubin Visualization Gallery at the D.H. Hill Jr. Library.
A simple demo presentation is included in this repository
- Download or clone this repo.
- Open Google Chrome.*
- Press F11 to enter full screen mode.
- Open the file demo.html.
- Press any key to begin the presentation. The content will scale down to fit your display, so things will look small.
* It should also work in other browsers but is only consistently tested in Chrome
-
A story has 2 primary components:
- An audio recording, typically combing narration, music and/or sound from various sources
- A series of scenes that advance at specified points in time in sync with the audio
-
A scene is a set of elements displayed at the same time in different positions around the room, according to a prescribed layout. Elements can be images, video, or native web content (HTML + Javascript + CSS).
-
Layouts are defined using a grid system that divides the room into zones of equal widths. The default grid for Storyspace divides the room into 8 zones. 10- and 12-zone grids are optionally available. Zones can be combined to create more complex layouts (see Advanced layouts below)
-
The layout and content of each scene is defined via a Javascript configuration file.
Full documentation is currently in progress. See this Google doc for the current version.