1---
2title: Getting Started
3layout: ../../layouts/MainLayout.astro
4---
5
6import { MiniRepl } from '../../docs/MiniRepl';
7import { JsDoc } from '../../docs/JsDoc';
8
9# Welcome
10
11Welcome to the Strudel documentation pages!
12
13These pages will introduce you to [Strudel](https://strudel.cc/), a web-based [live coding](https://github.com/toplap/awesome-livecoding/) environment that implements the [Tidal Cycles](https://tidalcycles.org) algorithmic pattern language.
14
15# What is Strudel?
16
17[Strudel](https://strudel.cc/) is a version of [Tidal Cycles](https://tidalcycles.org) written in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript), initiated by [Alex McLean](https://slab.org) and [Felix Roos](https://froos.cc/) in 2022.
18Tidal Cycles, also known as Tidal, is a language for [algorithmic pattern](https://algorithmicpattern.org), and though it is most commonly used for [making music](https://tidalcycles.org/docs/showcase), it can be used for any kind of pattern making activity, including [weaving](https://www.youtube.com/watch?v=TfEmEsusXjU).
19
20Tidal was first implemented as a library written in the [Haskell](https://www.haskell.org/) functional programming language, and by itself it does not make any sound.
21To make sound, it has to be connected to a sound engine, and by default this is a [SuperCollider](https://supercollider.github.io/) plugin called [SuperDirt](https://github.com/musikinformatik/SuperDirt/).
22As such, it can be difficult for first-time users to install both Tidal Cycles and SuperDirt, as there are many small details to get right.
23Strudel however runs directly in your web browser, does not require any custom software installation, and can make sound all by itself.
24
25# Strudel REPL and MiniREPL
26
27The main place to actually make music with Strudel is the [Strudel REPL](https://strudel.cc/) ([what is a REPL?](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop)), but in these pages you will also encounter interactive "MiniREPLs" where you can listen to and edit Strudel patterns.
28Try clicking the play icon below:
29
30<MiniRepl client:idle tune={`s("bd sd")`} punchcard />
31
32Then edit the text so it reads `s("bd sd cp hh")` and click the refresh icon.
33Congratulations, you have now live coded your first Strudel pattern!
34
35With Strudel, you can expressively write dynamic music pieces.
36You don't need to know JavaScript or Tidal Cycles to make music with Strudel.
37This interactive tutorial will guide you through the basics of Strudel.
38
39# Show me some demos!
40
41To see and hear what Strudel can do, visit the [Strudel REPL](https://strudel.cc/) and click the Shuffle icon in the top menu bar.
42You can get a feel for Strudel by browsing and editing these examples and clicking the Refresh icon to update.
43
44You can also browse through the examples [here](/examples).
45
46Alternatively, you can get a taste of what Strudel can do by clicking play on this track:
47
48<MiniRepl
49  client:idle
50  tune={`samples({
51  bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav','bd/BT0A0DA.wav','bd/BT0A0D3.wav','bd/BT0A0D0.wav','bd/BT0A0A7.wav'],
52  sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'],
53  hh: ['hh27/000_hh27closedhh.wav','hh/000_hh3closedhh.wav'],
54}, 'github:tidalcycles/dirt-samples');
55stack(
56s("bd,[~ <sd!3 sd(3,4,2)>],hh*8") // drums
57.speed(perlin.range(.7,.9)) // random sample speed variation
58,"<a1 b1\*2 a1(3,8) e2>" // bassline
59.off(1/8,x=>x.add(12).degradeBy(.5)) // random octave jumps
60.add(perlin.range(0,.5)) // random pitch variation
61.superimpose(add(.05)) // add second, slightly detuned voice
62.note() // wrap in "note"
63.decay(.15).sustain(0) // make each note of equal length
64.s('sawtooth') // waveform
65.gain(.4) // turn down
66.cutoff(sine.slow(7).range(300,5000)) // automate cutoff
67,"<Am7!3 <Em7 E7b13 Em7 Ebm7b5>>".voicings('lefthand') // chords
68.superimpose(x=>x.add(.04)) // add second, slightly detuned voice
69.add(perlin.range(0,.5)) // random pitch variation
70.note() // wrap in "note"
71.s('sawtooth') // waveform
72.gain(.16) // turn down
73.cutoff(500) // fixed cutoff
74.attack(1) // slowly fade in
75)
76.slow(3/2)`}
77/>
78
79# Strudel is a work in progress 🚧
80
81Please note that this project is still in its experimental state.
82In the future, parts of it might change significantly.
83This tutorial is also far from complete.
84You can contribute to it clicking 'Edit this page' in the top right, or by visiting the [Strudel GitHub page](https://codeberg.org/uzu/strudel/).
85
86# What's next?
87
88Head on over to the [Notes](/learn/notes) page.
89
90<br />