overhaul: pattern page
This commit is contained in:
@ -156,6 +156,7 @@
|
||||
|
||||
</div>
|
||||
</details>
|
||||
<p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Patterns</p>
|
||||
<p rel="noopener noreferrer" id="docs_sound" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Audio Engine</p>
|
||||
<p rel="noopener noreferrer" id="docs_samples" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Samples</p>
|
||||
<p rel="noopener noreferrer" id="docs_synths" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Synths</p>
|
||||
@ -165,7 +166,7 @@
|
||||
<details class="space-y-2" open=true>
|
||||
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Patterns</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Patterns</p>
|
||||
|
||||
<p rel="noopener noreferrer" id="docs_variables" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Variables</p>
|
||||
<p rel="noopener noreferrer" id="docs_lfos" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">LFOs</p>
|
||||
<p rel="noopener noreferrer" id="docs_probabilities" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Probabilities</p>
|
||||
|
||||
@ -6,11 +6,33 @@ export const patterns = (application: Editor): string => {
|
||||
return `
|
||||
# Patterns
|
||||
|
||||
Playing with fixed values is fine but what if you could give more life to your parameters? Having parameters that can vary over time is important to describe melodies, rhythms, complex textures, etc. Topos comes with a lot of different abstractions to deal with musical patterns of increasing complexity. Some knowledge of patterns and how to use them will help you to break out of simple loops and repeating structures.
|
||||
**Topos** is using arrays as a way to make dynamic patterns of data (rhythms, melodies, etc).
|
||||
It means that the following:
|
||||
|
||||
## Arrays
|
||||
${makeExample(
|
||||
"Boring kick",
|
||||
`
|
||||
beat(1)::sound('kick').out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
One of the most basic JavaScript data structures is [Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). Topos is extending this data structure with custom methods that makes it usable for describing patterns that evolve over time. These methods can often be chained to compose more complex expressions: <ic>[1, 2, 3].repeatOdd(5).palindrome().beat()</ic>.
|
||||
can be turned into something more interesting like this easily:
|
||||
|
||||
${makeExample(
|
||||
"Less boring kick",
|
||||
`
|
||||
let c = [1,2].dur(3, 1)
|
||||
beat([1, 0.5, 0.25].dur(0.75, 0.25, 1) / c)::sound(['kick', 'fsoftsnare'].beat(0.75))
|
||||
.ad(0, .25).shape(usine(1/2)*0.5).speed([1, 2, 4].beat(0.5)).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
|
||||
**Topos** comes with a lot of array methods to deal with musical patterns of increasing complexity. Some knowledge of patterns and how to use them will help you to break out of simple loops and repeating structures. The most basic JavaScript data structure is the [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). Topos is extending it with custom methods to describe patterns that evolve over time. These methods can often be chained to compose more complex expressions: <ic>[1, 2, 3].repeatOdd(5).palindrome().beat()</ic>.
|
||||
|
||||
## Temporal iteration
|
||||
|
||||
- <ic>beat(division: number)</ic>: this method will return the next value in the list every _n_ pulses. By default, <ic>1</ic> equals to one beat but integer and floating point number values are supported as well. This method is extremely powerful and can be used for many different purposes. Check out the examples.
|
||||
|
||||
@ -28,14 +50,15 @@ ${makeExample(
|
||||
"Using beat to create arpeggios",
|
||||
`
|
||||
// Arpeggio using pulse divisions
|
||||
beat([.5, .25].beat(2)) :: sound('sine')
|
||||
.hcutoff(400)
|
||||
.fmi([1,2].beat(8))
|
||||
.fmh([0.5,0.25,1].beat(2))
|
||||
.note([50,53,57].beat(.25) + [12,24].beat(2))
|
||||
beat([.5, .25].beat(0.5)) :: sound('sine')
|
||||
.lpf(100+usine(1/4)*400).lpad(2, 0, .25)
|
||||
.fmi([1,2].beat(8)).fmh([1, 2].beat(0.5))
|
||||
.note([0,2,4,5].scale('minor', 40).beat(0.25)
|
||||
+ [0, 7].bar()
|
||||
+ [12,24].beat(0.5))
|
||||
.sustain([0.25, 0.5].beat(8))
|
||||
.room(0.9).size(0.5)
|
||||
.delay(0.25).delayt([0.5,0.25].beat(16))
|
||||
.delay(0.5).delayt([0.5,0.25].beat(16))
|
||||
.delayfb(0.5)
|
||||
.out()
|
||||
`,
|
||||
@ -44,10 +67,11 @@ beat([.5, .25].beat(2)) :: sound('sine')
|
||||
${makeExample(
|
||||
"Cool ambiance",
|
||||
`
|
||||
beat(.5) :: snd(['kick', 'hat'].beat(4)).out()
|
||||
beat(.5) :: snd(['kick', 'hat'].beat(0.5)).out()
|
||||
beat([2,4].beat(2)) :: snd('shaker').delay(.5).delayfb(.75).delayt(0.125).out()
|
||||
flip(2)::beat(1)::snd('clap').out()
|
||||
flip(4)::beat(2)::snd('pad').n(2).shape(.5).orbit(2).room(0.9).size(0.9).release(0.5).out()
|
||||
flip(2)::beat(1)::snd('froomy').out()
|
||||
flip(4)::beat(2)::snd('pad').n(2).shape(.5)
|
||||
.orbit(2).room(0.9).size(0.9).release(0.5).out()
|
||||
`,
|
||||
false
|
||||
)}
|
||||
@ -58,143 +82,46 @@ ${makeExample(
|
||||
"A simple drumbeat in no time!",
|
||||
`
|
||||
beat(1)::sound(['kick', 'hat', 'snare', 'hat'].beat()).out()
|
||||
beat(1.5)::sound(['jvbass', 'clap'].beat()).out()
|
||||
beat([1/4, 1/2].dur(1.5, 0.5))::sound(['jvbass', 'fikea'].bar())
|
||||
.ad(0, .25).room(0.5).size(2).resonance(0.15).lpf(
|
||||
[200,400,800,1200,2000].beat(2)
|
||||
* [1, 2].bar())
|
||||
.out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Using beat, pulse and bar in the same code",
|
||||
`beat(2)::snd('snare').out()
|
||||
"Using beat and bar in the same example",
|
||||
`
|
||||
beat(2)::snd('snare').out()
|
||||
beat([1, 0.5].beat()) :: sound(['bass3'].bar())
|
||||
.freq(100).n([12, 14].bar())
|
||||
.speed([1,2,3].pulse())
|
||||
.room(0.5).size(4).orbit(2)
|
||||
.pan(r(0, 1))
|
||||
.speed([1,2,3].beat())
|
||||
.out()
|
||||
`
|
||||
)}
|
||||
|
||||
- <ic>mouseX()</ic> / <ic>mouseY()</ic>: divides the screen in <ic>n</ic> zones and returns the value corresponding to the mouse position on screen.</ic>
|
||||
- <ic>dur(...list: numbers[])</ic> : keeps the same value for a duration of <ic>n</ic> beats corresponding to the <ic>nth</ic> number of the list you provide.
|
||||
|
||||
${makeExample(
|
||||
"Controlling an arpeggio (octave and note) with mouse", `
|
||||
beat(0.25)::sound('wt_piano')
|
||||
.note([0,2,3,4,5,7,8,9,11,12].scale(
|
||||
'minor', 30 + [0,12,24].mouseY()).mouseX())
|
||||
.room(0.5).size(4).lpad(-2, .2).lpf(500, 0.3)
|
||||
.ad(0, .2).out()
|
||||
`, true
|
||||
)}
|
||||
|
||||
- <ic>palindrome()</ic>: Concatenates a list with the same list in reverse.
|
||||
|
||||
${makeExample(
|
||||
"Palindrome filter sweep",
|
||||
"Holding a value for n beats",
|
||||
`
|
||||
beat([1,.5,.25].beat()) :: snd('sine')
|
||||
.freq([100,200,300].beat(0.25))
|
||||
.fmi([1,2,3].palindrome().beat(0.5))
|
||||
.fmh([4, 8].palindrome().beat())
|
||||
.cutoff([500,1000,2000,4000].palindrome().beat())
|
||||
.sustain(0.1)
|
||||
.out()
|
||||
// The second note is kept for twice as long
|
||||
beat(0.5)::sound('notes').n([1,2].dur(1, 2))
|
||||
.room(0.5).size(8).delay(0.125).delayt(1/8)
|
||||
.speed(0.5).ad(0, .125).out()
|
||||
// Kick (3 beats), Snare (1 beat)
|
||||
beat(1)::sound(['kick', 'fsnare'].dur(3, 1))
|
||||
.n([0,3].dur(3, 1)).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>random(index: number)</ic>: pick a random element in the given list.
|
||||
- <ic>rand(index: number)</ic>: shorter alias for the same method.
|
||||
- <ic>pick()</ic>: pick a random element in the list.
|
||||
- <ic>gen(min,max,length)</ic>: generate a list of random numbers between _min_ and _max_ with a given _length_.
|
||||
## Manipulating notes and scales
|
||||
|
||||
${makeExample(
|
||||
"Sipping some gasoline at the robot bar",
|
||||
`
|
||||
beat(1)::snd('kick').shape(0.5).out()
|
||||
beat([.5, 1].random() / 2) :: snd(
|
||||
['amencutup', 'synth2'].random())
|
||||
.n(irand(4,10))
|
||||
.cutoff(2000)
|
||||
.resonance(10)
|
||||
.end(0.2).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Generate a list of random numbers",
|
||||
`beat(0.5) && sound('arp').freq([].gen(300,600,10).beat(3)).out()`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>degrade(amount: number)</ic>: removes _n_% of the list elements. Lists can be degraded as long as one element remains. The amount of degradation is given as a percentage.
|
||||
|
||||
${makeExample(
|
||||
"Amen break suffering from data loss",
|
||||
`
|
||||
// Tweak the value to degrade this amen break even more!
|
||||
beat(.25)::snd('amencutup').n([1,2,3,4,5,6,7,8,9].degrade(20).loop($(1))).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>repeat(amount: number)</ic>: repeat every list elements _n_ times.
|
||||
- <ic>repeatEven(amount: number)</ic>: repeaet every pair element of the list _n_ times.
|
||||
- <ic>repeatOdd(amount: number)</ic>: repeaet every odd element of the list _n_ times.
|
||||
|
||||
${makeExample(
|
||||
"Repeating samples a given number of times",
|
||||
`
|
||||
// Please take this repeat number down a bit!
|
||||
beat(.25)::sound('amencutup').n([1,2,3,4,5,6,7,8].repeatAll(4).beat()).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>loop(index: number)</ic>: loop takes one argument, the _index_. It allows you to iterate over a list using an iterator such as a counter. This is super useful to control how you are accessing values in a list without relying on a temporal method such as <ic>.beat()</ic> or </ic>.bar()</ic>.
|
||||
|
||||
${makeExample(
|
||||
"Don't you know how to count up to 5?",
|
||||
`
|
||||
beat(1) :: sound('numbers').n([1,2,3,4,5].loop($(3, 10, 2))).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>shuffle(): this</ic>: shuffles a list! Simple enough!
|
||||
|
||||
${makeExample(
|
||||
"Shuffling a list for extra randomness",
|
||||
`
|
||||
beat(1) :: sound('numbers').n([1,2,3,4,5].shuffle().loop($(1)).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>rotate(steps: number)</ic>: rotate a list to the right _n_ times. The last value become the first, rinse and repeat.
|
||||
|
||||
${makeExample(
|
||||
"To make things more complex... here you go",
|
||||
`
|
||||
beat(.5) :: snd('sine')
|
||||
.freq([100, 150, 200, 250, ,300, 400]
|
||||
.rotate([1,2,3].bar()) // The list of frequencies is rotating
|
||||
.beat()) // while being indexed over!
|
||||
.sustain(0.1)
|
||||
.out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>unique()</ic>: filter a list to remove repeated values.
|
||||
|
||||
${makeExample(
|
||||
"Demonstrative filtering. Final list is [100, 200]",
|
||||
`
|
||||
// Remove unique and 100 will repeat four times!
|
||||
beat(1)::snd('sine').sustain(0.1).freq([100,100,100,100,200].unique().beat()).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>pitch()</ic>: convert a list of integers to pitch classes
|
||||
|
||||
@ -233,6 +160,146 @@ beat(1) :: snd('gtr')
|
||||
true
|
||||
)}
|
||||
|
||||
## Iteration using the mouse
|
||||
|
||||
- <ic>mouseX()</ic> / <ic>mouseY()</ic>: divides the screen in <ic>n</ic> zones and returns the value corresponding to the mouse position on screen.</ic>
|
||||
|
||||
${makeExample(
|
||||
"Controlling an arpeggio (octave and note) with mouse",
|
||||
`
|
||||
beat(0.25)::sound('wt_piano')
|
||||
.note([0,2,3,4,5,7,8,9,11,12].scale(
|
||||
'minor', 30 + [0,12,24].mouseY()).mouseX())
|
||||
.room(0.5).size(4).lpad(-2, .2).lpf(500, 0.3)
|
||||
.ad(0, .2).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
## Simple data operations
|
||||
|
||||
- <ic>palindrome()</ic>: Concatenates a list with the same list in reverse.
|
||||
|
||||
${makeExample(
|
||||
"Palindrome filter sweep",
|
||||
`
|
||||
beat([1,.5,.25].beat()) :: snd('wt_stereo')
|
||||
.speed([1, 0.5, 0.25])
|
||||
.pan(r(0, 1)).freq([100,200,300].beat(0.25))
|
||||
.fmi([1,2,3].palindrome().beat(0.5))
|
||||
.fmh([0.5, 1].palindrome().beat())
|
||||
.lpf([500,1000,2000,4000].palindrome().beat())
|
||||
.lpad(4, 0, .25).sustain(0.125).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>random(index: number)</ic>: pick a random element in the given list.
|
||||
- <ic>rand(index: number)</ic>: shorter alias for the same method.
|
||||
|
||||
${makeExample(
|
||||
"Sipping some gasoline at the robot bar",
|
||||
`
|
||||
// rand, random and pick are doing the same thing!
|
||||
beat(1)::snd('fhardkick').shape(0.5)
|
||||
.ad(0, .1).lpf(500).db(-12).out()
|
||||
beat([.5, 1].rand() / 2) :: snd(
|
||||
['amencutup', 'synth'].random())
|
||||
.clip(1).n(irand(4,10)).room(0.5)
|
||||
.size(3).freq(200)
|
||||
.lpf([5000,3000,2000].pick())
|
||||
.end(0.5).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>pick()</ic>: pick a random element in the list.
|
||||
|
||||
${makeExample(
|
||||
"Picking values in lists",
|
||||
`
|
||||
beat(0.25)::sound(['ftabla', 'fwood'].pick())
|
||||
.speed([1,2,3,4].pick()).ad(0, .125).n(ir(1,10))
|
||||
.room(0.5).size(1).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>degrade(amount: number)</ic>: removes _n_% of the list elements. Lists can be degraded as long as one element remains. The amount of degradation is given as a percentage.
|
||||
|
||||
${makeExample(
|
||||
"Amen break suffering from data loss",
|
||||
`
|
||||
// Tweak the value to degrade this amen break even more!
|
||||
beat(.25)::snd('amencutup').n([1,2,3,4,5,6,7,8,9].degrade(20).loop($(1))).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>repeat(amount: number)</ic>: repeat every list elements _n_ times.
|
||||
- <ic>repeatEven(amount: number)</ic>: repeat every pair element of the list _n_ times.
|
||||
- <ic>repeatOdd(amount: number)</ic>: repeat every odd element of the list _n_ times.
|
||||
|
||||
${makeExample(
|
||||
"Repeating samples a given number of times",
|
||||
`
|
||||
beat(.25)::sound('amencutup').n([1,2,3,4,5,6,7,8].repeat(4).beat(.25)).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>loop(index: number)</ic>: loop takes one argument, the _index_. It allows you to iterate over a list using an iterator such as a counter. This is super useful to control how you are accessing values in a list without relying on a temporal method such as <ic>.beat()</ic> or </ic>.bar()</ic>.
|
||||
|
||||
${makeExample(
|
||||
"Don't you know how to count up to 5?",
|
||||
`
|
||||
beat(1) :: sound('numbers').n([1,2,3,4,5].loop($(3, 10, 2))).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>shuffle(): this</ic>: shuffles a list! Simple enough!
|
||||
|
||||
${makeExample(
|
||||
"Shuffling a list for extra randomness",
|
||||
`
|
||||
beat(1) :: sound('numbers').n([1,2,3,4,5].shuffle().loop($(1)).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
- <ic>rotate(steps: number)</ic>: rotate a list to the right _n_ times. The last value become the first, rinse and repeat.
|
||||
|
||||
${makeExample(
|
||||
"To make things more complex... here you go",
|
||||
`
|
||||
beat(.25) :: snd('sine').fmi([1.99, 2])
|
||||
.ad(0, .125).lpf(500+r(1,400))
|
||||
.lpad(usine()*8, 0, .125)
|
||||
.fmenv(2).fmdecay(0.125).fmsustain(0)
|
||||
.delay(0.5).fmh(parseInt(usine(1/12)*3))
|
||||
.note(["C3", "E3", "G3", "Bb3", "D4"]
|
||||
.rotate([0, 1, 3, 5].beat(4)) // Rotation over notes
|
||||
.beat(.25)) // while the index changes
|
||||
.out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
## Filtering
|
||||
|
||||
- <ic>unique()</ic>: filter a list to remove repeated values.
|
||||
|
||||
${makeExample(
|
||||
"Demonstrative filtering. Final list is [100, 200]",
|
||||
`
|
||||
// Remove unique and 100 will repeat four times!
|
||||
beat(1)::snd('sine').sustain(0.1).freq([100,100,100,100,200].unique().beat()).out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
## Simple math operations
|
||||
|
||||
- <ic>add()</ic>: add a given amount to every list element.
|
||||
- <ic>sub()</ic>: add a given amount to every list element.
|
||||
|
||||
Reference in New Issue
Block a user