1---
2title: JavaScript API
3layout: ../../layouts/MainLayout.astro
4---
5
6import { MiniRepl } from '../../docs/MiniRepl';
7import { JsDoc } from '../../docs/JsDoc';
8
9# Pattern Functions
10
11Let's learn all about functions to create and modify patterns.
12At the core of Strudel, everything is made of functions.
13
14For example, everything you can do with the Mini-Notation can also be done with a function.
15This Pattern in Mini Notation:
16
17<MiniRepl client:only="react" tune={`note("c3 eb3 g3")`} />
18
19is equivalent to this Pattern without Mini Notation:
20
21<MiniRepl client:only="react" tune={`note(seq("c3", "eb3", "g3"))`} />
22
23Similarly, there is an equivalent function for every aspect of the mini notation.
24
25Which representation to use is a matter of context. As a rule of thumb, functions
26are better suited in a larger context, while mini notation is more practical for individual rhythms.
27
28## Limits of Mini Notation
29
30While the Mini Notation is a powerful way to write rhythms concisely, it also has its limits. Take this example:
31
32<MiniRepl
33  client:idle
34  tune={`stack(
35  note("c2 eb2(3,8)").s('sawtooth').cutoff(800),
36  s("bd(5,8), hh*8")
37)`}
38/>
39
40Here, we are using mini notation for the individual rhythms, while using the function `stack` to mix them.
41While stack is also available as `,` in mini notation, we cannot use it here, because we have different types of sounds.
42
43## Combining Patterns
44
45You can freely mix JS patterns, mini patterns and values! For example, this pattern:
46
47<MiniRepl
48  client:idle
49  tune={`cat(
50  stack("g3","b3","e4"),
51  stack("a3","c3","e4"),
52  stack("b3","d3","fs4"),
53  stack("b3","e4","g4")
54).note()`}
55/>
56
57...is equivalent to:
58
59<MiniRepl
60  client:idle
61  tune={`cat(
62  "g3,b3,e4",
63  "a3,c3,e4",
64  "b3,d3,f#4",
65  "b3,e4,g4"
66).note()`}
67/>
68
69... as well as:
70
71<MiniRepl client:only="react" tune={`note("<[g3,b3,e4] [a3,c3,e4] [b3,d3,f#4] [b3,e4,g4]>")`} />
72
73While mini notation is almost always shorter, it only has a handful of modifiers: \* / ! @.
74When using JS patterns, there is a lot more you can do.
75
76Next, let's look at how you can [create patterns](/learn/factories)