From 82225f0b81a9d1f55310908923007e8fb4c43b18 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Fri, 26 May 2023 14:12:53 +0200 Subject: [PATCH] started workshop pages --- packages/react/src/components/MiniRepl.jsx | 3 +- website/src/components/Box.astro | 10 + website/src/components/QA.tsx | 18 ++ website/src/config.ts | 9 +- website/src/docs/MiniRepl.jsx | 3 +- website/src/pages/workshop/first-effects.mdx | 62 ++++++ website/src/pages/workshop/first-sounds.mdx | 207 +++++++++++++++++++ website/src/pages/workshop/index.astro | 3 + website/src/pages/workshop/intro.mdx | 6 + website/src/pages/workshop/langebank.mdx | 37 ++++ website/src/pages/workshop/mini-notation.mdx | 69 +++++++ website/src/repl/prebake.mjs | 2 +- website/tsconfig.json | 7 +- 13 files changed, 431 insertions(+), 5 deletions(-) create mode 100644 website/src/components/Box.astro create mode 100644 website/src/components/QA.tsx create mode 100644 website/src/pages/workshop/first-effects.mdx create mode 100644 website/src/pages/workshop/first-sounds.mdx create mode 100644 website/src/pages/workshop/index.astro create mode 100644 website/src/pages/workshop/intro.mdx create mode 100644 website/src/pages/workshop/langebank.mdx create mode 100644 website/src/pages/workshop/mini-notation.mdx diff --git a/packages/react/src/components/MiniRepl.jsx b/packages/react/src/components/MiniRepl.jsx index a8de7978..8c45f1ed 100644 --- a/packages/react/src/components/MiniRepl.jsx +++ b/packages/react/src/components/MiniRepl.jsx @@ -20,10 +20,11 @@ export function MiniRepl({ enableKeyboard, drawTime, punchcard, + span, canvasHeight = 200, theme, }) { - drawTime = drawTime || (punchcard ? [0, 4] : undefined); + drawTime = drawTime || (punchcard ? span || [0, 4] : undefined); const evalOnMount = !!drawTime; const drawContext = useCallback( !!drawTime ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null, diff --git a/website/src/components/Box.astro b/website/src/components/Box.astro new file mode 100644 index 00000000..d27671ea --- /dev/null +++ b/website/src/components/Box.astro @@ -0,0 +1,10 @@ +--- +import LightBulbIcon from '@heroicons/react/20/solid/LightBulbIcon'; +//import MusicalNoteIcon from '@heroicons/react/20/solid/MusicalNoteIcon'; +--- + +
+
+ + +
diff --git a/website/src/components/QA.tsx b/website/src/components/QA.tsx new file mode 100644 index 00000000..ef743bed --- /dev/null +++ b/website/src/components/QA.tsx @@ -0,0 +1,18 @@ +import ChevronDownIcon from '@heroicons/react/20/solid/ChevronDownIcon'; +import ChevronUpIcon from '@heroicons/react/20/solid/ChevronUpIcon'; +import { useState } from 'react'; + +export default function QA({ children, q }) { + const [visible, setVisible] = useState(false); + return ( +
+
setVisible((v) => !v)}> +
{q}
+ + {visible ? : } + +
+ {visible &&
{children}
} +
+ ); +} diff --git a/website/src/config.ts b/website/src/config.ts index bf26fff1..54170378 100644 --- a/website/src/config.ts +++ b/website/src/config.ts @@ -38,9 +38,16 @@ export const ALGOLIA = { apiKey: 'd5044f9d21b80e7721e5b0067a8730b1', }; -export type Sidebar = Record<(typeof KNOWN_LANGUAGE_CODES)[number], Record>; +export type SidebarLang = Record; +export type Sidebar = Record<(typeof KNOWN_LANGUAGE_CODES)[number], SidebarLang>; export const SIDEBAR: Sidebar = { en: { + Workshop: [ + { text: 'Intro', link: 'workshop/intro' }, + { text: 'First Sounds', link: 'workshop/first-sounds' }, + { text: 'First Effects', link: 'workshop/first-effects' }, + { text: 'Mini Notation', link: 'workshop/mini-notation' }, + ], Tutorial: [ { text: 'Getting Started', link: 'learn/getting-started' }, { text: 'Notes', link: 'learn/notes' }, diff --git a/website/src/docs/MiniRepl.jsx b/website/src/docs/MiniRepl.jsx index cce24623..8b93a446 100644 --- a/website/src/docs/MiniRepl.jsx +++ b/website/src/docs/MiniRepl.jsx @@ -27,7 +27,7 @@ if (typeof window !== 'undefined') { prebake(); } -export function MiniRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) { +export function MiniRepl({ tune, drawTime, punchcard, span = [0, 4], canvasHeight = 100 }) { const [Repl, setRepl] = useState(); const { theme } = useSettings(); useEffect(() => { @@ -44,6 +44,7 @@ export function MiniRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) { hideOutsideView={true} drawTime={drawTime} punchcard={punchcard} + span={span} canvasHeight={canvasHeight} theme={themes[theme]} /> diff --git a/website/src/pages/workshop/first-effects.mdx b/website/src/pages/workshop/first-effects.mdx new file mode 100644 index 00000000..56914dbc --- /dev/null +++ b/website/src/pages/workshop/first-effects.mdx @@ -0,0 +1,62 @@ +--- +title: First Effects +layout: ../../layouts/MainLayout.astro +--- + +import { MiniRepl } from '../../docs/MiniRepl'; + +# First Effects + +**vowel** + + + +You can probably think of more vowels :) + +**gain** + + + +**control the gain with a sine wave** + + + +Try also `saw`, `square`, `tri` + +**The 'structure' comes from the left - try swapping:** + + + +**speed of playback, e.g. 2 = double speed (up 1 octave)** + + + + + +**set note** + + + +**pan** + + + + + +**delay** + + + +**room** + + diff --git a/website/src/pages/workshop/first-sounds.mdx b/website/src/pages/workshop/first-sounds.mdx new file mode 100644 index 00000000..1a9df5f6 --- /dev/null +++ b/website/src/pages/workshop/first-sounds.mdx @@ -0,0 +1,207 @@ +--- +title: First Sounds +layout: ../../layouts/MainLayout.astro +--- + +import { MiniRepl } from '@src/docs/MiniRepl'; +import Box from '@components/Box.astro'; +import QA from '@components/QA'; + +# First Sounds + +## Make a Sound + +Let's start by making some noise: + + + + + +1. press play button to start +2. change `house` to `casio` +3. press refresh button to update +4. press stop button to stop + + + +Congratulations, you've played your first pattern! + +Instead of clicking update all the time, you can use keyboard shortcuts: + + + +1. click into the text field +2. press `ctrl`+`enter` to play +3. change `casio` to `crow` +4. press `ctrl`+`enter` to update +5. press `ctrl`+`.` to stop + + + +To play code like an instrument, these shortcuts should become second nature to you. + +**Try more Sounds** + +You can pick a different sample from the same set, with ':' + + + +Try changing `east:1` to `east:2` + +Here are some more sound sets to try + +``` +casio control crow techno house jazz +metal east jvbass juno insect space wind +bd sd rim hh oh +``` + + + +- `bd` = **b**ass **d**rum +- `sd` = **s**nare **d**rum +- `sn` = **sn**are +- `rim` = **rim**shot +- `hh` = **h**i**h**at +- `oh` = **o**pen **h**ihat + + + +## Sequences + +**Make a Sequence** + + + +Notice how the currently playing sound is highlighted in the code and also visualized below. + + + +Try adding more sounds to the sequence! + + + +**The longer the sequence, the faster it runs** + + + +The content of the sequence will be squished into one second, called a cycle. + +**One way to change the tempo is using `cpm`** + + + + + +cpm = cycles per minute + +By default, the tempo is 60 cycles per minute = 1 cycle per second. + + + +We will look at other ways to change the tempo later! + +**Add a rests in a sequence with '~'** + + + +**Sub-Sequences with [brackets]** + + + + + +Try adding more sounds inside a bracket! + + + +Similar to the whole sequence, the content of a sub-sequence will be squished to the its own length. + +**Multiplication: Speed things up** + + + +**Multiplication: Speeeeeeeeed things up** + + + + + +Pitch = Really fast Rhythm + + + +**Sub-Sub-Sequences with [[brackets]]** + + + +**Play Sounds in parallel with comma** + + + + + +**Multiple Lines with backticks** + + + +## Recap + +Now we've learned the basics of the so called Mini-Notation, the rhythm language of Tidal. +This is what we've leared so far: + +| Concept | Syntax | Example | +| ----------------- | ---------- | --------------------------------------------------------------------- | +| Sequence | space | | +| Sample Number | :x | | +| Rests | ~ | | +| Sub-Sequences | \[ \] | | +| Sub-Sub-Sequences | \[ \[ \]\] | | +| Speed up | \* | | +| Parallel | , | | + +## Examples + +Imitation of a step sequencer: + + + +Shorter variant: + + + +Another beat: + + diff --git a/website/src/pages/workshop/index.astro b/website/src/pages/workshop/index.astro new file mode 100644 index 00000000..9f79e4c2 --- /dev/null +++ b/website/src/pages/workshop/index.astro @@ -0,0 +1,3 @@ + diff --git a/website/src/pages/workshop/intro.mdx b/website/src/pages/workshop/intro.mdx new file mode 100644 index 00000000..e7b075b4 --- /dev/null +++ b/website/src/pages/workshop/intro.mdx @@ -0,0 +1,6 @@ +--- +title: Introduction +layout: ../../layouts/MainLayout.astro +--- + +# Introduction diff --git a/website/src/pages/workshop/langebank.mdx b/website/src/pages/workshop/langebank.mdx new file mode 100644 index 00000000..55fbdf4b --- /dev/null +++ b/website/src/pages/workshop/langebank.mdx @@ -0,0 +1,37 @@ +Everythings repeats once per second => 1 **c**ycle **p**er **s**econd (cps) + +**Change tempo** + + + +adding your own samples + + + +").slow(3)`} + punchcard +/> + + +n(run(8)).sound("east") \ No newline at end of file diff --git a/website/src/pages/workshop/mini-notation.mdx b/website/src/pages/workshop/mini-notation.mdx new file mode 100644 index 00000000..df1c8cbe --- /dev/null +++ b/website/src/pages/workshop/mini-notation.mdx @@ -0,0 +1,69 @@ +--- +title: First Sounds +layout: ../../layouts/MainLayout.astro +--- + +import { MiniRepl } from '../../docs/MiniRepl'; + +# Mini Notation + +Mini Notation is everything between the quotes. It the short rhythm language of Tidal. + +## Cycles + +**The longer the sequence, the faster it runs** + + + +**Play less sounds per cycle with \{curly braces\}** + + + +**Use \`backticks\` for multiple lines** + + + +**Play one sounds per cycle with \** + +")`} punchcard /> + +This is the same as `{...}%1` + +## Operators + +**Multiplication: Speed things up** + + + +**Division: Slow things down** + + + +`bd` will play only every second time + +## Combining it all + +**Speed up Sub-Sequences** + + + +**Slow down Sequences** + + + +**Parallel Sub-Sequences** + + + +**Sample Numbers on groups** + + diff --git a/website/src/repl/prebake.mjs b/website/src/repl/prebake.mjs index edf63f54..f8a4e477 100644 --- a/website/src/repl/prebake.mjs +++ b/website/src/repl/prebake.mjs @@ -22,8 +22,8 @@ export async function prebake() { tag: 'drum-machines', }), samples(`./EmuSP12.json`, `./EmuSP12/`, { prebake: true, tag: 'drum-machines' }), - // samples('github:tidalcycles/Dirt-Samples/master'), ]); + await samples('github:tidalcycles/Dirt-Samples/master'); } const maxPan = noteToMidi('C8'); diff --git a/website/tsconfig.json b/website/tsconfig.json index 78017eaf..90aa524f 100644 --- a/website/tsconfig.json +++ b/website/tsconfig.json @@ -7,6 +7,11 @@ "noImplicitAny": false, "types": [ "vite-plugin-pwa/client" - ] + ], + "baseUrl": ".", + "paths": { + "@components/*": ["src/components/*"], + "@src/*": ["src/*"], + } } } \ No newline at end of file