strudel-docker/paper/demo-preprocessed.md

---
date: 2022-04-15
references:
- abstract: In this artist statement, I will discuss the tension between
    source code as an interactive system for performers and source code
    as information and entertainment for audiences in live-coding
    performances. I then describe augmentations I developed for the
    presentation of source code in the live-coding environment Gibber,
    including animations and annotations that visually reveal aspects of
    system state during performances. I briefly describe audience
    responses to these techniques and, more importantly, how they are
    critical to my own artistic practice.
  accessed:
    date-parts:
    - - 2022
      - 3
      - 24
  author:
  - family: Roberts
    given: Charles
  container-title: International Journal of Performance Arts and Digital
    Media
  DOI: 10.1080/14794713.2016.1227602
  id: "https://www.tandfonline.com/doi/abs/10.1080/14794713.2016.1227602?journalCode_x61_rpdm20"
  ISSN: 1479-4713
  issue: 2
  issued:
    date-parts:
    - - 2016
      - 7
  keyword: Live coding, psychology of programming, notation, audiences,
    algorithms
  page: 201-206
  title: Code as information and code as spectacle
  type: article-journal
  URL: "https://doi.org/10.1080/14794713.2016.1227602"
  volume: 12
- abstract: The TidalCycles (or Tidal for short) live coding environment
    has been developed since around 2009, via several rewrites of its
    core representation. Rather than having fixed goals, this
    development has been guided by use, motivated by the open aim to
    make music. This development process can be seen as a long-form
    improvisation, with insights into the nature of Tidal gained through
    the process of writing it, feeding back to guide the next steps of
    development. This brings the worrying thought that key insights will
    have been missed along this development journey, that would
    otherwise have lead to very different software. Indeed participants
    at beginners' workshops that I have lead or co-lead have often asked
    questions without good answers, because they made deficiencies or
    missing features in the software clear. It is well known that a
    beginner's mind is able to see much that an expert has become blind
    to. Running workshops are an excellent way to find new development
    ideas, but the present paper explores a different technique -- the
    rewrite.
  accessed:
    date-parts:
    - - 2022
      - 3
      - 24
  id: "https://zenodo.org/record/5788732"
  issued:
    date-parts:
    - - 2021
      - 12
  keyword: live coding, algorithmic pattern, tidalcycles, haskell,
    python
  publisher-place: Valdivia, Chile
  title: Alternate Timelines for TidalCycles
  URL: "https://zenodo.org/record/5788732"
- abstract: A JavaScript dialect of its mini-notation for pattern is
    created, enabling easy integration with creative coding tools and an
    accompanying technique for visually annotating the playback of
    TidalCycles patterns over time. TidalCycles has rapidly become the
    most popular system for many styles of live coding performance, in
    particular Algoraves. We created a JavaScript dialect of its
    mini-notation for pattern, enabling easy integration with creative
    coding tools. Our research pairs a formalism describing the
    mini-notation with a small JavaScript library for generating events
    over time; this library is suitable for generating events inside of
    an AudioWorkletProcessor thread and for assisting with scheduling in
    JavaScript environments more generally. We describe integrating the
    library into the two live coding systems, Gibber and Hydra, and
    discuss an accompanying technique for visually annotating the
    playback of TidalCycles patterns over time.
  accessed:
    date-parts:
    - - 2022
      - 4
      - 12
  author:
  - family: Roberts
    given: Charles
  container-title: www.semanticscholar.org
  id: "https://www.semanticscholar.org/paper/Bringing-the-TidalCycles-Mini-Notation-to-the-Roberts/74965efadd572ae3f40d14c633a5c8581c1b9f42"
  issued:
    date-parts:
    - - 2019
  title: Bringing the TidalCycles Mini-Notation to the Browser
  URL: "https://www.semanticscholar.org/paper/Bringing-the-TidalCycles-Mini-Notation-to-the-Roberts/74965efadd572ae3f40d14c633a5c8581c1b9f42"
- abstract: In this paper we introduce "version zero" of TidalVortex, an
    alternative implementation of the TidalCycles live coding system,
    using the Python programming language.  This is open-ended work,
    exploring what happens when we try to extract the 'essence' of a
    system like TidalCycles and translate it into another programming
    language, while taking advantage of the affordance of its new host.
    First, we review the substantial prior art in porting TidalCycles,
    and in representing musical patterns in Python. We then compare
    equivalent patterns written in Haskell (TidalCycles) and Python
    (TidalVortex), and relate implementation details of how functional
    reactive paradigms have translated from the pure functional,
    strongly typed Haskell to the more multi-paradigm, dynamically typed
    Python. Finally, we conclude with reflections and generalisable
    outcomes.
  accessed:
    date-parts:
    - - 2022
      - 4
      - 14
  id: "https://zenodo.org/record/6456380"
  issued:
    date-parts:
    - - 2022
      - 4
  publisher-place: Limerick, Ireland
  title: TidalVortex Zero
  URL: "https://zenodo.org/record/6456380"
- abstract: This paper brings together two main perspectives on
    algorithmic pattern. First, the writing of musical patterns in live
    coding performance, and second, the weaving of patterns in textiles.
    In both cases, algorithmic pattern is an interface between the human
    and the outcome, where small changes have far-reaching impact on the
    results. By bringing contemporary live coding and ancient textile
    approaches together, we reach a common view of pattern as
    algorithmic movement (e.g. looping, shifting, reflecting,
    interfering) in the making of things. This works beyond the usual
    definition of pattern used in musical interfaces, of mere repeating
    sequences. We conclude by considering the place of algorithmic
    pattern in a wider activity of making.
  accessed:
    date-parts:
    - - 2022
      - 4
      - 15
  id: "https://zenodo.org/record/4299661"
  issued:
    date-parts:
    - - 2020
      - 7
  keyword: pattern, tidalcycles, algorithmic music, textiles, live
    coding, algorave
  publisher-place: Birmingham UK
  title: Algorithmic Pattern
  URL: "https://zenodo.org/record/4299661"
- accessed:
    date-parts:
    - - 2022
      - 4
      - 15
  author:
  - family: Charlie
    given: Roberts
  - family: Joann
    given: Kuchera-Morin
  container-title: International Computer Music Conference Proceedings
  id: "https://quod.lib.umich.edu/i/icmc/bbp2372.2012.011/2/--gibber-live-coding-audio-in-the-browser?page_x61_root;size_x61_150;view_x61_text"
  ISSN: 2223-3881
  issued:
    date-parts:
    - - 2012
  title: "GIBBER: LIVE CODING AUDIO IN THE BROWSER"
  title-short: GIBBER
  type: article-journal
  URL: "https://quod.lib.umich.edu/i/icmc/bbp2372.2012.011/2/%E2%80%93gibber-live-coding-audio-in-the-browser?page=root;size=150;view=text"
  volume: 2012
- abstract: Estuary is a browser-based collaborative projectional
    editing environment built on top of the popular TidalCycles language
    for the live coding of musical pattern that includes a strict form
    of structure editing, a click-only border-free approach to interface
    design, and explicit notations to modulate the liveness of different
    parts of the code. This paper describes the initial design and
    development of Estuary, a browser-based collaborative projectional
    editing environment built on top of the popular TidalCycles language
    for the live coding of musical pattern. Key features of Estuary
    include a strict form of structure editing (making syntactical
    errors impossible), a click-only border-free approach to interface
    design, explicit notations to modulate the liveness of different
    parts of the code, and a server-based network collaboration system
    that can be used for many simultaneous collaborative live coding
    performances, as well as to present different views of the same live
    coding activity. Estuary has been developed using Reflex-DOM, a
    Haskell-based framework for web development whose strictness
    promises robustness and security advantages.
  accessed:
    date-parts:
    - - 2022
      - 4
      - 15
  author:
  - family: Ogborn
    given: David
  - family: Beverley
    given: J.
  container-title: www.semanticscholar.org
  id: "https://www.semanticscholar.org/paper/Estuary_x37_3A-Browser-based-Collaborative-Projectional-Ogborn-Beverley/c6b5d34575d6230dfd8751ca4af8e5f6e44d916b"
  issued:
    date-parts:
    - - 2017
  title: "Estuary: Browser-based Collaborative Projectional Live Coding
    of Musical Patterns"
  title-short: Estuary
  URL: "https://www.semanticscholar.org/paper/Estuary%3A-Browser-based-Collaborative-Projectional-Ogborn-Beverley/c6b5d34575d6230dfd8751ca4af8e5f6e44d916b"
- abstract: This is an improvised, from-scratch live coding performance.
    The NIME interface which this performance showcases is the new
    Feedfoward editor for the TidalCycles live coding environment.
    Feedforward is written in Haskell using the ncurses library for
    terminal-based user interfaces. It runs on low-powered hardware
    including the Raspberry Pi Zero, with formative testing of
    prototypes conducted with several groups of children between the
    ages of 8 and 14. Feedforward has a number of features designed to
    support improvised, multi-pattern live coding. Individual Tidal
    patterns are addressable with hotkeys for fast mute and unmuting.
    Each pattern has a stereo VU meter, to aid the quick matching of
    sound to pattern within a mix. In addition, TidalCycles has been
    extended to store context with each event, so that source code
    positions in its polyrhythmic sequence mini-notation are tracked.
    This allows steps to be highlighted in the source code when- ever
    they are active. This works even when Tidal combinators have been
    applied to manipulate the timeline. Formal evaluation has yet to
    take place, but this feature appears to support learning of how
    pattern manipulations work in Tidal. Feedforward and TidalCycles is
    free/open source software under a GPL licence version 3.0.
  accessed:
    date-parts:
    - - 2022
      - 4
      - 15
  id: "https://zenodo.org/record/6353969"
  issued:
    date-parts:
    - - 2020
      - 7
  publisher-place: Birmingham
  title: Feedforward
  URL: "https://zenodo.org/record/6353969"
- abstract: The Euclidean algorithm (which comes down to us from
    Euclid's Elements) computes the greatest common divisor of two given
    integers. It is shown here that the structure of the Euclidean
    algorithm may be used to automatically generate, very efficiently, a
    large family of rhythms used as timelines (rhythmic ostinatos), in
    traditional world music. These rhythms, here dubbed Euclidean
    rhythms, have the property that their onset patterns are distributed
    as evenly as possible in a mathematically precise sense, and optimal
    manner. Euclidean rhythms are closely related to the family of Aksak
    rhythms studied by ethnomusicologists, and occur in a wide variety
    of other disciplines as well. For example they characterize
    algorithms for drawing digital straight lines in computer graphics,
    as well as algorithms for calculating leap years in calendar design.
    Euclidean rhythms also find application in nuclear physics
    accelerators and in computer science, and are closely related to
    several families of words and sequences of interest in the study of
    the combinatorics of words, such as mechanical words, Sturmian
    words, two-distance sequences, and Euclidean strings, to which the
    Euclidean rhythms are compared. 1.
  accessed:
    date-parts:
    - - 2022
      - 4
      - 24
  author:
  - family: Toussaint
    given: Godfried
  container-title: "In Proceedings of BRIDGES: Mathematical Connections
    in Art, Music and Science"
  id: "https://citeseerx.ist.psu.edu/viewdoc/summary?doi_x61_10.1.1.72.1340"
  issued:
    date-parts:
    - - 2005
  page: 47-56
  title: The Euclidean algorithm generates traditional musical rhythms
  type: paper-conference
  URL: "https://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.72.1340"
- accessed:
    date-parts:
    - - 2022
      - 4
      - 24
  container-title: webaudioconf.com
  id: "https://webaudioconf.com/posts/2021_8/"
  title: "WAC Glicol: A Graph-oriented Live Coding Language Developed
    with Rust, WebAssembly and AudioWorklet"
  title-short: WAC Glicol
  URL: "https://webaudioconf.com/posts/2021_8/"
- accessed:
    date-parts:
    - - 2022
      - 4
      - 24
  container-title: webaudioconf.com
  id: "https://webaudioconf.com/posts/2019_38/"
  title: "WAC FAUST online IDE: Dynamically compile and publish FAUST
    code as WebAudio Plugins"
  title-short: WAC FAUST online IDE
  URL: "https://webaudioconf.com/posts/2019_38/"
- abstract: Strudel REPL
  accessed:
    date-parts:
    - - 2022
      - 4
      - 24
  container-title: strudel.tidalcycles.org
  id: "https://strudel.tidalcycles.org"
  title: Strudel REPL
  URL: "https://strudel.tidalcycles.org/"
- abstract: Description
  accessed:
    date-parts:
    - - 2022
      - 4
      - 25
  container-title: hydra.ojack.xyz
  id: "https://hydra.ojack.xyz/docs/\\_x35\\_/"
  title: Hydra
  URL: "https://hydra.ojack.xyz/docs/#/"
- accessed:
    date-parts:
    - - 2022
      - 4
      - 25
  container-title: mikesol.github.io
  id: "https://mikesol.github.io/purescript-wags/"
  title: Wags documentation
  URL: "https://mikesol.github.io/purescript-wags/"
- abstract: Experimental port of tidalcycles to Javascript
  accessed:
    date-parts:
    - - 2022
      - 4
      - 25
  id: "https://github.com/tidalcycles/strudel"
  issued:
    date-parts:
    - - 2022
      - 4
  keyword: javascript, livecoding, tidal, tidalcycles, algorave,
    algorithmic-patterns
  note: "original-date: 2022-01-22T20:24:35Z"
  publisher: TidalCycles
  title: Strudel
  URL: "https://github.com/tidalcycles/strudel"
title: "Strudel: Algorithmic Patterns for the Web"
url2cite: all-links
---

# Introduction

This paper introduces Strudel (or sometimes 'StrudelCycles'), an
alternative implementation of the Tidal (or 'TidalCycles') live coding
system, using the JavaScript programming language. Strudel is an attempt
to make live coding more accessible, by creating a system that runs
entirely in the browser, while opening Tidal's approach to algorithmic
patterns [@https://zenodo.org/record/4299661] up to modern audio/visual
web technologies. The Strudel REPL is a live code editor dedicated to
manipulating strudel patterns while they play, with builtin visual
feedback. While Strudel is written in JavaScript, the API is optimized
for simplicity and readability by applying code transformations on the
syntax tree level, allowing language operations that would otherwise be
impossible. The application supports multiple ways to output sound,
including Tone.js, Web Audio nodes, OSC (Open Sound Control) messages,
Web Serial and Web MIDI. The project is split into multiple packages,
allowing granular reuse in other applications. Apart from TidalCycles,
Strudel draws inspiration from many prior existing projects like
TidalVortex [@https://zenodo.org/record/6456380], Gibber
[@{https://quod.lib.umich.edu/i/icmc/bbp2372.2012.011/2/–gibber-live-coding-audio-in-the-browser?page_x61_root;size_x61_150;view_x61_text}],
Estuary
[@https://www.semanticscholar.org/paper/Estuary_x37_3A-Browser-based-Collaborative-Projectional-Ogborn-Beverley/c6b5d34575d6230dfd8751ca4af8e5f6e44d916b],
Hydra [@{https://hydra.ojack.xyz/docs/_x35_/}], Wags
[@{https://mikesol.github.io/purescript-wags/}] and Feedforward
[@https://zenodo.org/record/6353969].

# Porting from Haskell

The original Tidal is implemented as a domain specific language (DSL),
embedded in the Haskell pure functional programming language, taking
advantage of Haskell's terse syntax and advanced, 'strong' type system.
Javascript on the other hand, is a multi-paradigm programming language,
with a dynamic type system. Because Tidal leans heavily on many of
Haskell's more unique features, it was not always clear that it could
meaningfully be ported to a multi-paradigm scripting language. However,
this already proved to be the case with an earlier port to Python
\[TidalVortex; @https://zenodo.org/record/6456380\], and we have now
successfully implemented Tidal's pure functional representation of
patterns in Strudel, including partial application, and functor,
applicative and monad structures. Over the past few months since the
project started in January 2022, a large part of Tidal's functionality
has already been ported, including it's mini-notation for polymetric
sequences, and a large part of its library of pattern manipulations. The
result is a terse and highly composable system, where just about
everything is a pattern, that may be transformed and combined with other
patterns in a myriad of ways.

# Representing Patterns

Patterns are the essence of Tidal. Its patterns are abstract entities
that represent flows of time as functions, adapting a technique called
pure functional reactive programming. Taking a time span as its input, a
Pattern can output a set of events that happen within that time span. It
depends on the structure of the Pattern how the events are located in
time. From now on, this process of generating events from a time span
will be called **querying**. Example:

<MiniRepl tune={`const pattern = sequence(c3, [e3, g3]);
const events = pattern.query(0, 1);
console.log(events.map(e => e.show()))`} />

In this example, we create a pattern using the `sequence` function and
**query** it for the time span from `0` to `1`. Those numbers represent
units of time called **cycles**. The length of one cycle depends on the
tempo, which defaults to one cycle per second. The resulting events are:

<MiniRepl tune={`[{ value: 'c3', begin: 0, end: 1/2 },
{ value: 'e3', begin: 1/2, end: 3/4 },
{ value: 'g3', begin: 3/4, end: 1 }]`} />

Each event has a value, a begin time and an end time, where time is
represented as a fraction. In the above case, the events are placed in
sequential order, where c3 takes the first half, and e3 and g3 together
take the second half. This temporal placement is the result of the
`sequence` function, which divides its arguments equally over one cycle.
If an argument is an array, the same rule applies to that part of the
cycle. In the example, e3 and g3 are divided equally over the second
half of the whole cycle.

In the REPL, the user only has to type in the pattern itself, the
querying will be handled by the scheduler. The scheduler will repeatedly
query the pattern for events, which then will be used for playback.

![Screenshot of the Strudel editor, including piano-roll
visualisation.](images/strudel-screenshot.png){width="43%"}

# Making Patterns

In practice, the end-user live coder will not deal with constructing
patterns directly, but will rather build patterns using Strudel's
extensive combinator library to create, combine and transform patterns.

The live coder may use the `sequence` function as already seen above, or
more often the mini-notation for even terser notation of rhythmic
sequences. Such sequences are often treated only a starting point for
manipulation, where they then are undergo pattern transformations such
as repetition, symmetry, interference/combination or randomisation,
potentially at multiple timescales. Because Strudel patterns are
represented as pure functions of time rather than as data structures,
very long and complex generative results can be represented and
manipulated without having to store the resulting sequences in memory.

# Pattern Example

The following example showcases how patterns can be utilized to create
musical complexity from simple parts, using repetition and interference:

<MiniRepl tune={`"<0 2 [4 6](3,4,1) 3*2>".scale('D minor')
.off(1/4, scaleTranspose(2))
.off(1/2, scaleTranspose(6))
.legato(.5)
.echo(4, 1/8, .5)
.tone((await piano()).chain(out()))
.pianoroll()`} />

The pattern starts with a rhythm of numbers in mini notation, which are
interpreted inside the scale of D minor. Without the scale function, the
first line can be expressed as:

<MiniRepl tune={`"<d3 f3 [a3 c3](3, 4, 1) g3*2>"`} />

This line could also be expressed without mini notation:

<MiniRepl tune={`slowcat(d3, f3, [a3, c3].euclid(3, 4, 1), g3.fast(2))`} />

Here is a short description of all the functions used:

-   slowcat: play elements sequentially, where each lasts one cycle
-   brackets: elements inside brackets are divided equally over the time
    of their parent
-   euclid(p, s, o): place p pulses evenly over s steps, with offset o
    [@https://citeseerx.ist.psu.edu/viewdoc/summary?doi_x61_10.1.1.72.1340]
-   fast(n): speed up by n. `g3.fast(2)` will play g3 two times.
-   off(n, f): copy each event, offset it by n cycles and apply function
    f
-   legato(n): multiply duration of event with n
-   echo(t, n, v): copy each event t times, with n cycles in between
    each copy, decreasing velocity by v
-   tone(instrument): play back each event with the given Tone.js
    instrument
-   pianoroll(): visualize events as midi notes in a pianoroll

# Future Outlook

The project is still young, with many features on the horizon. As
general guiding principles, Strudel aims to be

1.  accessible
2.  consistent with Tidal's approach to pattern
3.  modular and extensible

The main accessibility advantage over Tidal is the zero install browser
environment. It is not yet accessible to screen reader users, but will
be soon with the integration of the CodeMirror 6 editor. While Strudel
can control Tidal's SuperDirt audio system via OSC, it requires the user
to install SuperCollider and its sc3plugins library, which can be
difficult. Without SuperDirt, Strudel is able to output sound itself via
Tone.js, however this is limited both in terms of available features and
runtime performance. For the future, it is planned to integrate
alternative sound engines such as glicol
[@{https://webaudioconf.com/posts/2021_8/}] and faust
[@{https://webaudioconf.com/posts/2019_38/}]. To improve compatibility
with Tidal, more Tidal functions are planned to be ported, as well as
full compatibility with SuperDirt. Besides sound, other ways to render
events are being explored, such as graphical, and choreographic output.
We are also looking into alternative ways of editing patterns, including
multi-user editing for network music, parsing a novel syntax to escape
the constraints of javascript, and developing hardware/e-textile
interfaces.

# Links

The Strudel REPL is available at [https://strudel.tidalcycles.org
[@https://strudel.tidalcycles.org]](https://strudel.tidalcycles.org){.uri
cite-meta="{\"URL\":\"https://strudel.tidalcycles.org/\",\"abstract\":\"Strudel REPL\",\"accessed\":{\"date-parts\":[[2022,4,24]]},\"container-title\":\"strudel.tidalcycles.org\",\"id\":\"https://strudel.tidalcycles.org\",\"title\":\"Strudel REPL\",\"type\":\"\"}"},
including an interactive tutorial. The repository is at
[https://github.com/tidalcycles/strudel
[@https://github.com/tidalcycles/strudel]](https://github.com/tidalcycles/strudel){.uri
cite-meta="{\"URL\":\"https://github.com/tidalcycles/strudel\",\"abstract\":\"Experimental port of tidalcycles to Javascript\",\"accessed\":{\"date-parts\":[[2022,4,25]]},\"id\":\"https://github.com/tidalcycles/strudel\",\"issued\":{\"date-parts\":[[2022,4]]},\"keyword\":\"javascript, livecoding, tidal, tidalcycles, algorave, algorithmic-patterns\",\"note\":\"original-date: 2022-01-22T20:24:35Z\",\"publisher\":\"TidalCycles\",\"title\":\"Strudel\",\"type\":\"\"}"},
all the code is open source under the GPL-3.0 License.

# Technical requirements

-   Space for one laptop + small audio interface (20 cm x 20cm), with
    mains power.
-   Stereo sound system, either placed behind presenter (for direct
    monitoring) or with additional stereo monitors.
-   Audio from audio interface: stereo pair 6,3mm jack outputs
    (balanced)
-   Projector / screen (HDMI.)

# Acknowledgments

Thanks to the Strudel and wider Tidal, live coding, webaudio and
free/open source software communities for inspiration and support. Alex
McLean's work on this project is supported by a UKRI Future Leaders
Fellowship \[grant number MR/V025260/1\].

# References