Giter VIP home page Giter VIP logo

stepwise's Introduction

Stepwise

NOTE: This repo supports the initial, Google Sheets-powered version of Stepworks (aka "Stepworks Classic"), which is no longer being developed. The current version is called Stepworks Studio, and these days, I am in development on a third version of Stepworks, which will focus on interactive comics.

"Press SPACE BAR to continue."

"Click to continue."

"Tap to continue."

These actions are like turning pages in a book. They're digital ways of saying "next, please." They carry an element of suspense, because we don't know exactly what we're going to get next, but also an element of performance, because while the author controls the "what," we control the "when."

Stepwise is about building artful experiences around this simple mechanic of suspense and performance.

How many digital reading experiences do we have each day that boil down to single repeated actions that deliver new content each time? Social media feeds, e-books, digital comics, one-button games...

...and what would happen if that mechanic was abstracted from all of those particular forms, and put to work explicitly for storytelling purposes? If discrete steps could represent characters and their acts of speech, thought, or song. Narration. Date and time. Geolocation. Weather. Rhythm. Melody. Repetition. Randomness.

This is what Stepwise does. Because it's simple, it can easily be used to power a wide range of experiences. Because it's standardized, content from one experience can easily be reused in another.

Most interactive stories operate at the scale of plot mechanics: "Should this character do X or Y?" with the results apparent over the course of minutes or hours. Stepwise operates at the scale of musical performance: "When does it feel right to move ahead?" with the results apparent in seconds.

Stepwise is a multimodal content sequencer—a library for one-button storytelling.

Powered by Stepwise

  • Stepworks, a collection of experiments in one-button storytelling
  • Strange Rain 2.0 for Apple TV, which uses the Unity version of the library

How does it work?

Simple. Call the plugin with the content you want to display in steps, and the DOM element where you want it to be displayed:

$("div#output").stepwise("1 2 3 4");

Now, whenever a key is pressed or <div id="output"> is clicked, <div id="output"> will be successively updated with 1, 2, 3, and 4.

View demo on CodePen

Stepwise XML

Stepwise content is delivered in Stepwise XML format (though the library will also various other input formats that it parses into Stepwise XML, as in the string example above). Here's a "hello world" example:

<?xml version="1.0" encoding="utf-8"?>
<stepwise>
	<title>Hello world</title>
    <sequence repeat="+">
      <narrate>Hello,</narrate>
      <narrate>world.</narrate>
    </sequence>
</stepwise>

View demo on CodePen

Where can I use Stepwise?

Currently the library includes both a jQuery plugin and a Unity client. The development of additional clients is welcomed and encouraged.

How can I learn more?

Explore these links from the wiki:

License

Stepwise is released under an MIT License.

stepwise's People

Contributors

eloyer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

yychen

stepwise's Issues

Non JQuery dependant version?

Hi! You made a cool thing. Of course I'm here to ask for more stuff in an entitled way because...the internet. Is it possible to carve loose your code from JQuery so it can be used in other frameworks? Pointers to where the cuts would need to be made would help. I have my own set of saws but I don't know where stepwise ends and JQuery begins or what features would need to be copied to make it work (apparently the Google sheets thing is in JQuery which is a cool feature I'd miss). Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.