Paraspace: Interaction on a new Level
Paraspace is an easily deployable, open-source framework that allows highly interactive installations and performances for e.g. artists and companies.
What’s Paraspace?
Paraspace is a framework which, once deployed, can be used as a tool to provide a broad set of interactions between an artist or installation and visitors. Basically, it’s a server that provides an interface to configure various views for providing information without reloading. In addition, interaction modules such as slider or trigger-buttons are possible which can be linked with a specified output source on the performer side (MIDI, OSC or logging). The whole system is very modular and can easily be adjusted and extended according to your needs.
Well, this is still quite abstract, isn’t it? Let’s dive deeper into some examples.
1) Streaming of an event combined with additional information: Paraspace could be used as a wrapper for the streaming video. Therefore, additional information such as texts, descriptions or links can be shown. If the streamer also prefers to include interactions, he or she can update the webpage for the viewers live and without the need to reload the page.Paraspace offers also two visitor roles: attendees right at the location of the performance as well as streamer. UI elements can be configured to only be shown to specific roles. This supports e.g. hybrid events with some people at the location while others only stream the event.
2) Artist performance and audience: The artist can set up a Paraspace instance displaying a slider for the audience on a given web-page. The input of the slider will be sent to the server and the artist can hook up his setup to the send inputs. He or she can then integrate the inputs into the performance, e.g. play sounds or change the lights.
3) Installation and visitors: If setting up an installation, the installation inaction can be exposed by e.g. listening on MIDI or OSC events. Visitors of the installation can e.g. scan a QR code and get to a website where the preconfigured UI elements are shown. With the same workflow as above visitors can then interact with the installation. Of course, all options to change the UI and inputs on the fly are also available here.
How does it work?
Basically, the framework works as a webserver with various view endpoints. We’ll provide you a short overview over the complete system first and then we’ll dive deeper into the dedicated components:
The basics
The first thing you need to do is to set up an instance of paraspace on your server or on your machine in your local network. When the framework is up and running you can start configuring the UI as well as the links and information flow on the controller side. Basically, it all works like this:
Server
The server component is the main logic endpoint. Technically, this is a node.js server based on the soundworks framework (https://github.com/collective-soundworks/soundworks), which is a Full-stack JavaScript framework for distributed WebAudio and multimedia applications. It handles the in- and outputs and also generates the views for the controller and the client. Basically, it handles all the user inputs from controller and client side, processes (aggregates or pipes) them and and sends it to the other controllers and clients.
Controller
The controller is the main “admin” page. It allows you to set up a performance endpoint to your needs. You can create modules that are displayed to the clients. If the modules are interactive, you can also decide what to do with the inputs of them. The browser window can be e.g. binded to various MIDI devices available to the browser. As long as the controller browser window is open, the signals will be sent automatically. If you want to go a step further, you can also use OSC events which will be sent over the specified network address. Those MIDI and OSC signals can then be further processed the way you like them to be integrated into your performance or installation.
Client
The client view is the actual user/visitor view. It shows all the modules that were configured via the controller. Updates from the controller side will be sent to the clients automatically and so the performance can be updated without the need to refresh the browser window on the client/visitor site. It is worth mentioning that there are two types of clients available: attendees and streamers. You can configure your UI modules that way, that they are only shown to one type or both. This makes e.g. specific controls available for people at the venue, while they are not for people only streaming the event or installation. Also you can e.g. show an additional, external stream view for people requesting your site from outside the venue.
Paraspace for artists
Paraspace is a highly customizable framework, that may seem quite abstract on the first look, but show’s its strengths when it comes to customization. You can configure an easily expandable set of UI elements shown to the visitor and on the other hand configure various aggregation methods and output channels on the artist side. With this said, lets dive deeper.
Supported UI elements
Paraspace offers a variety of UI elements (which can be also customized to your needs. They mainly differ in the interaction method (interactive vs. static) and view properties. The currently available elements are listed below. Keep in mind that it’s quite easy with a bit of coding experience to expand and extend these.
Static
These UI elements will only be shown on the client side but don’t provide any way of interaction.
Stream: Shows an external streaming url as an integrated frame on the page itself.
Text: Displays a simple text view. This could e.g. be used for explanation texts, lyrics or notes on the performance.
Link button: Shows a simple button with a link on it. E.g. can be used for a break in the zoom-room.
Interactive
The changed state of these UI elements will be sent to the server.
ToggleSwitch: Toggles its value when clicked.
TriggerButton: Sends an event to the server if the button is clicked.
Slider1D: A simple slider with a start and endpoint.
Slider2D: A plane with x- and y-coordinates, which also sends a coordinate back to the server. The edge labels as well as the background image are customizable.
Supported output channels
For every interactive element you can specify an aggregation method as well as an output channel. All the events coming from this UI element on the client side will then be aggregated and sent the way you configured it. The available methods are:
MIDI: Select a MIDI device available via your browser window.
OSC: Select an address where events should be sent. Note: It is important that you set up the OSC bridge when using this method, since modern browsers restrict the sending of network events. You can read all about this in the readme file.
Logs: All the incoming events will be simply logged.
Paraspace for visitors
Paraspace can create a lot of added value for the visitors of your event or installation. You can easily make static installations interactive, provide additional data and information or simply enrich the user experience on the venue.
Paraspace for event manager and companies
Every argument on the visitor side is also an argument for the event manager side. In addition, you can set up an instance yourself or get in touch with us. Our framework is highly customizable and easy to set up. It can be integrated in any existing event, theater performance or installation. Also you can set up everything around the event you prefer and just hand over the final endpoints of MIDI and OSC output to your artists.
About Das Shining
„das Shining“ collective is a group of interdisciplinary media and computer experts who studied media informatics together in Tübingen before expanding their expertise in other academic fields.
Timo Dufner is a musician and visual artist, part time working at the music academy Trossingen in the field of music design. Mathias Schlenker is a software engineer with broad knowledge and experience for realizing big software projects. Jens Schindel is a self employed software engineer with focus on AI, computer vision and signal analysis.
The group is always looking for new opportunities to let its creativity run free in a challenging way. So far, they have enhanced theater and opera performances with interactive visuals, given lectures on the use of AI in the creative sector, perform and show live audio-reactive visuals weekly in the club “Schlachthaus” in Tübingen, and were responsible for the technical organization of the GENERATE! Festival for Electronic Arts 2019 and present their live performances and installations at meetings, exhibitions and symposia worldwide.
The project was successfully funded by the BWgoesMobile Ideenwettbewerb 2021, read more in this interview.
Also we made the technical docs available here.
More at https://das-shining.com/
