diff --git a/iclc2023/slides/index.html b/iclc2023/slides/index.html index 7fe7c4886..03ef8a0b5 100644 --- a/iclc2023/slides/index.html +++ b/iclc2023/slides/index.html @@ -6,8 +6,10 @@ Slides - -
+ +
+ loading... +
diff --git a/iclc2023/slides/public/img/tidalcycles.svg b/iclc2023/slides/public/img/tidalcycles.svg new file mode 100644 index 000000000..209658c64 --- /dev/null +++ b/iclc2023/slides/public/img/tidalcycles.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + Layer 1 + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/iclc2023/slides/src/MiniComparison.jsx b/iclc2023/slides/src/MiniComparison.jsx new file mode 100644 index 000000000..7cfaee79e --- /dev/null +++ b/iclc2023/slides/src/MiniComparison.jsx @@ -0,0 +1,41 @@ +import { useState } from 'react'; +import { SlideRepl } from './SlideRepl.jsx'; + +const snippets = [ + [`sound("bd [hh sd]")`, `sound(seq("bd", ["hh", "sd"]))`, 'Nested Sequences'], // + [`sound("")`, `sound(cat("bd", "sd"))`, 'Cyclewise Sequences'], // + [`sound("bd,hh")`, `sound(stack("bd", "hh"))`, 'Stack'], // + [`sound("bd@3 sd@1")`, `sound(timeCat([3, "bd"], [1, "sd"]))`, 'Weighted Sequence'], // + [`sound("{lt ht mt, bd sd}")`, `sound(polymeter(["lt","ht","mt"], ["bd", "sd"]))`, 'Polymeter'], // + [`sound("{bd hh sd ht}%2")`, `sound(polymeterSteps(2, ["bd", "hh", "sd", "ht"]))`, 'Steps per Cycle'], +]; + +function MiniComparison() { + const [step, setStep] = useState(1); + return ( + <> +

Mini Notation vs Regular JS

+
+ {snippets.slice(0, step).map(([a, b, label], i) => { + const isActive = i === step - 1; + return ( +
+

{label}

+
+ + +
+
+ + +
+
+ ); + })} +
+ {step < snippets.length && } + + ); +} + +export default MiniComparison; diff --git a/iclc2023/slides/src/SlideRepl.jsx b/iclc2023/slides/src/SlideRepl.jsx index 4e025b2ba..246e96221 100644 --- a/iclc2023/slides/src/SlideRepl.jsx +++ b/iclc2023/slides/src/SlideRepl.jsx @@ -3,6 +3,7 @@ import { initAudioOnFirstClick } from '@strudel.cycles/webaudio'; import { MiniRepl as _MiniRepl } from '@strudel.cycles/react'; import { prebake } from './prebake'; import { atomone } from '@uiw/codemirror-themes-all'; +import blackscreen from '@strudel.cycles/react/src/themes/blackscreen'; if (typeof window !== 'undefined') { await evalScope( @@ -20,7 +21,15 @@ if (typeof window !== 'undefined') { prebake(); } -export function SlideRepl({ tune, drawTime, punchcard, canvasHeight = 100, hideHeader = false, fontSize = 32 }) { +export function SlideRepl({ + tune, + drawTime, + punchcard, + canvasHeight = 100, + hideHeader = false, + fontSize = 32, + disabled = false, +}) { // const { theme } = useSettings(); return (
@@ -32,7 +41,7 @@ export function SlideRepl({ tune, drawTime, punchcard, canvasHeight = 100, hideH punchcard={punchcard} canvasHeight={canvasHeight} fontSize={fontSize} - theme={atomone} + theme={disabled ? blackscreen : atomone} // theme={themes[theme]} />
diff --git a/iclc2023/slides/src/Slides.jsx b/iclc2023/slides/src/Slides.jsx index 8e3254587..4ecd9de08 100644 --- a/iclc2023/slides/src/Slides.jsx +++ b/iclc2023/slides/src/Slides.jsx @@ -16,17 +16,18 @@ const loadedMDXFiles = await Promise.all( }), ); -const order = ['01', '02-0', '02-1', '02-2', '03']; +const order = ['01', '02-0', '02-1', '02-2', '03-0', '03-1', '04']; const slideEntries = order.map((name) => loadedMDXFiles.find(([file]) => file === name)); // current slide index is persisted, so it's safe to refresh the browser export const slideIndex = persistentAtom('slideIndex', '0'); +export const prev = () => slideIndex.set((parseInt(slideIndex.get()) - 1 + slideEntries.length) % slideEntries.length); +export const next = () => slideIndex.set((parseInt(slideIndex.get()) + 1) % slideEntries.length); + function Slides() { const activeIndex = parseInt(useStore(slideIndex)); - const prev = () => slideIndex.set((activeIndex - 1 + slideEntries.length) % slideEntries.length); - const next = () => slideIndex.set((activeIndex + 1) % slideEntries.length); useEvent('click', (e) => { if (!e.ctrlKey) { diff --git a/iclc2023/slides/src/SyntaxComparison.jsx b/iclc2023/slides/src/SyntaxComparison.jsx index e963f9b79..d884ae4ee 100644 --- a/iclc2023/slides/src/SyntaxComparison.jsx +++ b/iclc2023/slides/src/SyntaxComparison.jsx @@ -48,25 +48,31 @@ function SyntaxComparison() {
Tidal
Strudel
*/} - {snippets.slice(0, step).map(([hs, js, label], i) => ( -
-

{label}

-
-
- - -
+ {snippets.slice(0, step).map(([hs, js, label], i) => { + const isActive = i === step - 1; + return ( +
+

{label}

- {js.map((c, j) => ( -
- - -
- ))} +
+ + +
+
+ {js.map((c, j) => ( +
+ + +
+ ))} +
-
- ))} + ); + })}
{step < snippets.length && } diff --git a/iclc2023/slides/src/slides/02-0.mdx b/iclc2023/slides/src/slides/02-0.mdx index 2ab06bd42..dbd1fba6e 100644 --- a/iclc2023/slides/src/slides/02-0.mdx +++ b/iclc2023/slides/src/slides/02-0.mdx @@ -12,8 +12,6 @@ import { SlideRepl } from '../SlideRepl.jsx'; hideHeader fontSize={24} tune={`// froos - freakuency - 2023/03/29 -setcps(.5) -// await samples('https://shabda.ndre.gr/speech/frequency,freaky.json?strudel=1') // stack( @@ -31,5 +29,5 @@ stack( .mask("<0 1>") ).restart("<1@3 1*[4 [8 16]]>") .stack(s("<~ [[~@2.4 freaky] frequency]>/2").delay(.8) - .echoWith(4,-.0125,(p,n)=>p.speed(1-n*.1).gain(n*.2)))`} + .echoWith(4,-.0125,(p,n)=>p.speed(1-n*.1).gain(n*.2))).slow(2)`} /> diff --git a/iclc2023/slides/src/slides/02-2.mdx b/iclc2023/slides/src/slides/02-2.mdx index 3e644abbd..5a43bd8fd 100644 --- a/iclc2023/slides/src/slides/02-2.mdx +++ b/iclc2023/slides/src/slides/02-2.mdx @@ -1,5 +1,5 @@ import SyntaxComparison from '../SyntaxComparison.jsx'; -# Syntax Comparison +# Syntax Comparison: Haskell / JavaScript diff --git a/iclc2023/slides/src/slides/02-3.mdx b/iclc2023/slides/src/slides/02-3.mdx new file mode 100644 index 000000000..8e924e502 --- /dev/null +++ b/iclc2023/slides/src/slides/02-3.mdx @@ -0,0 +1,6 @@ +# Systems Comparison + + +tidal: keyboard -> editor -> tidal plugin -> superdirt -> supercollider -> speakers + +strudel: keyboard -> repl -> speakers diff --git a/iclc2023/slides/src/slides/03-0.mdx b/iclc2023/slides/src/slides/03-0.mdx new file mode 100644 index 000000000..fc8b33b86 --- /dev/null +++ b/iclc2023/slides/src/slides/03-0.mdx @@ -0,0 +1,18 @@ +import { SlideRepl } from '../SlideRepl.jsx'; +import Highlight from '../Highlight.jsx'; + +# Patterns + + + +query = get events within time arc: + + + +```plaintext +[ + "0/1 -> 1/2 | sound:bd", + "1/2 -> 3/4 | sound:hh", + "3/4 -> 1/1 | sound:sd", +] +``` diff --git a/iclc2023/slides/src/slides/03-1.mdx b/iclc2023/slides/src/slides/03-1.mdx new file mode 100644 index 000000000..251d1a30c --- /dev/null +++ b/iclc2023/slides/src/slides/03-1.mdx @@ -0,0 +1,5 @@ +import { SlideRepl } from '../SlideRepl.jsx'; +import Highlight from '../Highlight.jsx'; +import MiniComparison from '../MiniComparison.jsx'; + + diff --git a/iclc2023/slides/src/slides/03.mdx b/iclc2023/slides/src/slides/04.mdx similarity index 100% rename from iclc2023/slides/src/slides/03.mdx rename to iclc2023/slides/src/slides/04.mdx diff --git a/iclc2023/slides/src/slides/example.mdx b/iclc2023/slides/src/slides/example.mdx new file mode 100644 index 000000000..6a8323245 --- /dev/null +++ b/iclc2023/slides/src/slides/example.mdx @@ -0,0 +1,15 @@ +import { SlideRepl } from '../SlideRepl.jsx'; + +# Pattern Example + +" +.off(1/4, add(2)) +.off(1/2, add(6)) +.scale('D minor') +.legato(.25) +.note().s("sawtooth square") +.delay(.8).delaytime(.125)`} + hideHeader + punchcard +/>