jevstrudel.git / website / src / pages / learn / code.mdx
code.mdx100 lines · 4.0 KB · raw
1---
2title: Coding syntax
3layout: ../../layouts/MainLayout.astro
4---
5
6import { MiniRepl } from '../../docs/MiniRepl';
7import { JsDoc } from '../../docs/JsDoc';
8
9# Coding Syntax
10
11Let's take a step back and understand how the syntax in Strudel works.
12
13Take a look at this simple example:
14
15<MiniRepl client:idle tune={`note("c a f e").s("piano")`} />
16
17- We have a word `note` which is followed by some brackets `()` with some words/letters/numbers inside, surrounded by quotes `"c a f e"`
18- Then we have a dot `.` followed by another similar piece of code `s("piano")`.
19- We can also see these texts are _highlighted_ using colours: word `note` is purple, the brackets `()` are grey, and the content inside the `""` are green. (The colors could be different if you've changed the default theme)
20
21What happens if we try to 'break' this pattern in different ways?
22
23<MiniRepl client:idle tune={`note(c a f e).s(piano)`} />
24
25<MiniRepl client:idle tune={`note("c a f e")s("piano")`} />
26
27<MiniRepl client:idle tune={`note["c a f e"].s{"piano"}`} />
28
29Ok, none of these seem to work...
30
31<MiniRepl client:idle tune={`s("piano").note("c a f e")`} />
32
33This one does work, but now we only hear the first note...
34
35So what is going on here?
36
37# Functions, arguments and chaining
38
39So far, we've seen the following syntax:
40
41```
42xxx("foo").yyy("bar")
43```
44
45Generally, `xxx` and `yyy` are called [_functions_](<https://en.wikipedia.org/wiki/Function_(computer_programming)>), while `foo` and `bar` are called function [_arguments_ or _parameters_](<https://en.wikipedia.org/wiki/Parameter_(computer_programming)>).
46So far, we've used the functions to declare which aspect of the sound we want to control, and their arguments for the actual data.
47The `yyy` function is called a [_chained_ function](https://en.wikipedia.org/wiki/Method_chaining), because it is preceded with a dot (`.`).
48
49Generally, the idea with chaining is that code such as `a("this").b("that").c("other")` allows `a`, `b` and `c` functions to happen in a specified order, without needing to write them as three separate lines of code.
50You can think of this as being similar to chaining audio effects together using guitar pedals or digital audio effects.
51
52Strudel makes heavy use of chained functions. Here is a more sophisticated example:
53
54<MiniRepl
55  client:idle
56  tune={`note("a3 c#4 e4 a4")
57.s("sawtooth")
58.cutoff(500)
59//.delay(0.5)
60.room(0.5)`}
61/>
62
63## Write your own chained function
64
65You can write your own chained function using `register`. Here's the above chain but registered as a reusable, chained function.
66
67<MiniRepl
68  client:idle
69  tune={`const effectChain = register('effectChain', (pat) => pat
70    .s("sawtooth")
71    .cutoff(500)
72    //.delay(0.5)
73    .room(0.5)
74  )
75note("a3 c#4 e4 a4").effectChain()`}
76/>
77
78Try adding `.rev()` after `effectChain()` to hear further effects added.
79
80# Comments
81
82The `//` in the example above is a line comment, resulting in the `delay` function being ignored.
83It is a handy way to quickly turn code on and off.
84Try uncommenting this line by deleting `//` and refreshing the pattern.
85You can also use the keyboard shortcut `cmd-/` to toggle comments on and off.
86
87You might noticed that some comments in the REPL samples include some words starting with a "@", like `@by` or `@license`.
88Those are just a convention to define some information about the music. We will talk about it in the [Music metadata](/learn/metadata) section.
89
90# Strings
91
92Ok, so what about the content inside the quotes (e.g. `"c a f e"`)?
93In JavaScript, as in most programming languages, this content is referred to as being a [_string_](<https://en.wikipedia.org/wiki/String_(computer_science)>).
94A string is simply a sequence of individual characters.
95In TidalCycles, double quoted strings are used to write _patterns_ using the mini-notation, and you may hear the phrase _pattern string_ from time to time.
96If you want to create a regular string and not a pattern, you can use single quotes, e.g. `'C minor'` will not be parsed as Mini Notation.
97
98The good news is, that this covers most of the JavaScript syntax needed for Strudel!
99
100<br />