diff --git a/src/Documentation.ts b/src/Documentation.ts index b0bfa88..fc08a69 100644 --- a/src/Documentation.ts +++ b/src/Documentation.ts @@ -705,23 +705,31 @@ Music really comes to life when you start playing with algorithmic patterns. The JavaScript is using [Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) as a data structure for lists. Topos is extending them with custom methods that allow you to enter softly into a universe of musical patterns. These methods can often be chained to compose a more complex expression: [1, 2, 3].repeatOdd(5).palindrome().beat(). +- div(division: number): + +${makeExample( + "div is the greatest method ever", + ` +`, + true +)} + + - beat(): returns the index of the list corresponding to current beat (with wrapping). This allows you to return a different value for each beat. - pulse(): returns the index of the list corresponding to the current pulse (with wrapping). This method will return a different value for each pulse. - bar(): returns the index of the list corresponding to the current bar (with wrapping). This method will return a different value for each bar. ${makeExample( - "This is a test example", - ` -mod(1)::sound(['kick', 'hat', 'snare', 'hat'].beat()).out() + "A simple drumbeat in no time!", + `mod(1)::sound(['kick', 'hat', 'snare', 'hat'].beat()).out() mod(1.5)::sound(['jvbass', 'clap'].beat()).out() `, true )} ${makeExample( - "This is another example", - ` -mod(2)::snd('snare').out() + "Using beat, pulse and bar in the same code", + `mod(2)::snd('snare').out() mod([1, 0.5].beat()) :: sound(['bass3'].bar()) .freq(100).n([12, 14].bar()) .speed([1,2,3].pulse()) @@ -730,104 +738,102 @@ mod([1, 0.5].beat()) :: sound(['bass3'].bar()) )} -- palindrome(): +- palindrome(): Concatenates a list with the same list in reverse. -\`\`\`javascript -// Add example -\`\`\` - -- random(index: number): - -\`\`\`javascript -// Add example -\`\`\` - -- rand(index: number): - -\`\`\`javascript -// Add example -\`\`\` - -- degrade(amount: number): - -\`\`\`javascript -// Add example -\`\`\` - -- repeatAll(amount: number): - -\`\`\`javascript -// Add example -\`\`\` +${makeExample( + "Palindrome filter sweep", + `mod([1,.5,.25].beat()) :: snd('sine') + .freq([100,200,300].div(0.25)) + .fmi([1,2,3].palindrome().div(0.5)) + .fmh([4, 8].palindrome().beat()) + .cutoff([500,1000,2000,4000].palindrome().beat()) + .sustain(0.1) + .out() +`, + true +)} -- repeatPair(amount: number): - -\`\`\`javascript -// Add example -\`\`\` +- random(index: number): pick a random element in the given list. +- rand(index: number): shorter alias for the same method. +- pick(): pick a random element in the list. -- repeatOdd(amount: number): +${makeExample( + "Sipping some gasoline at the robot bar", + `mod(1)::snd('kick').shape(0.5).out() +mod([.5, 1].random() / 2) :: snd( + ['amencutup', 'synth2'].random()) + .n(irand(4,10)) + .cutoff(2000) + .resonance(10) + .end(0.2).out() +`, + true +)} -\`\`\`javascript -// Add example -\`\`\` +- degrade(amount: number): 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. -- beat(): +${makeExample( + "Amen break suffering from data loss", + `// Tweak the value to degrade this amen break even more! +mod(.25)::snd('amencutup').n([1,2,3,4,5,6,7,8,9].degrade(20).loop($(1))).out() +`, + true +)} -\`\`\`javascript -// Add example -\`\`\` +- repeatAll(amount: number): repeat every list elements _n_ times. +- repeatPair(amount: number): repeaet every pair element of the list _n_ times. +- repeatOdd(amount: number): repeaet every odd element of the list _n_ times. -- bar(): +${makeExample( + "Repeating samples a given number of times", + `// Please take this repeat number down a bit! +mod(.25)::sound('amencutup').n([1,2,3,4,5,6,7,8].repeatAll(4).beat()).out() +`, + true +)} -\`\`\`javascript -// Add example -\`\`\` +- loop(index: number): 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 .beat() or .bar(). +${makeExample( + "Don't you know how to count up to 5?", + `mod(1) :: sound('numbers').n([1,2,3,4,5].loop($(3, 10, 2))).out()`, + true +)} -- pick(): +- shuffle(): this: shuffles a list! Simple enough! -\`\`\`javascript -// Add example -\`\`\` +${makeExample( + "Shuffling a list for extra randomness", + `mod(1) :: sound('numbers').n([1,2,3,4,5].shuffle().loop($(1)).out() +`, + true +)} -- loop(index: number): +- rotate(steps: number): rotate a list to the right _n_ times. The last value become the first, rinse and repeat. -\`\`\`javascript -// Add example -\`\`\` +${makeExample( + "To make things more complex... here you go", + `mod(.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 +)} -- div(division: number): +- unique(): filter a list to remove repeated values. -\`\`\`javascript -// Add example -\`\`\` - -- shuffle(): this: - -\`\`\`javascript -// Add example -\`\`\` - -- rotate(steps: number): - -\`\`\`javascript -// Add example -\`\`\` - -- unique(): - -\`\`\`javascript -// Add example -\`\`\` - -- in(value: T): - -\`\`\`javascript -// Add example -\`\`\` +${makeExample( + "Demonstrative filtering. Final list is [100, 200]", + `// Remove unique and 100 will repeat four times! +mod(1)::snd('sine').sustain(0.1).freq([100,100,100,100,200].unique().beat()).out() +`, + true +)} ## Simple patterns @@ -851,8 +857,7 @@ The sound function can take the name of a synthesizer as first ar ${makeExample( "Simple synthesizer voice with filter", - ` -mod(.5) && snd('sawtooth') + `mod(.5) && snd('sawtooth') .cutoff([2000,500].pick() + usine(.5) * 4000) .resonance(0.9).freq([100,150].pick()) .out() @@ -870,8 +875,7 @@ The same basic waveforms can take additional methods to switch to a basic two op ${makeExample( "80s nostalgia", - ` -mod(.25) && snd('sine') + `mod(.25) && snd('sine') .fmi([1,2,4,8].pick()) .fmh([1,2,4,8].div(8)) .freq([100,150].pick()) diff --git a/tailwind.config.js b/tailwind.config.js index 249fa3a..80d03f7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,20 +1,16 @@ - - /** @type {import('tailwindcss').Config} */ export default { - content: [ - "./index.html", - "./src/**/*.{js,ts,jsx,tsx}", + content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], + safelist: [ + { + pattern: /hljs+/, + }, ], - safelist: [{ - pattern: /hljs+/, - }], theme: { extend: {}, hljs: { - theme: 'nord', + theme: "rainbow", }, }, - plugins: [require('tailwind-highlightjs')], -} - + plugins: [require("tailwind-highlightjs")], +};