strudel/talk/deck.mdx

import { Slides, Slide } from './Slides.jsx';
import { MaxiRepl } from './MaxiRepl';
import ImgTile from './ImgTile';

<Slides>

  <Slide>

<h1 className="mb-0">Strudel</h1>

<h2 className="mt-0">Algorithmic Patterns for the Web</h2>

<div className="flex space-x-2 items-center">
  <em>
    "The Analytical Engine weaves algebraic patterns, just as the Jacquard loom weaves flowers and leaves."
    <br />
    “Supposing, for instance, that the fundamental relations of pitched sounds in the science of harmony and of musical
    composition were susceptible of such expression and adaptations, the [Analytical] Engine might compose elaborate and
    scientific pieces of music of any degree of complexity or extent." - Ada Lovelace
  </em>
</div>
<img src="./ada.jpg" className="h-[400px] rounded-md" />

</Slide>
<Slide>

## What is Live Coding?

<i className="text-3xl">
  "In live coding performance, performers create time-based works by programming them while these same works are being
  executed." <br />
  Roberts & Wakefield, 2016
</i>
<img src="./hydra-screenshot.png" className="h-[600px] rounded-md" />
<p>Screenshot: "Olivia Jack - Hydra, Live Coding Visuals in the Browser"</p>

</Slide>
<Slide>

## What is Tidal Cycles?

<div className="text-left">

- A very popular software for live coding music
- a powerful pattern language for time-based art
- find out more at <a href="https://tidalcycles.org" target="_blank" className="text-indigo-400">tidalcycles.org</a>

</div>

<img src="./tidal-screenshot2.png" className="h-[500px] rounded-md" />
<p>Screenshot: "Yaxu & hellocatfood - LIVE code for Noise Quest"</p>

</Slide>
<Slide>

## What is Strudel?

<div className="text-left">

- a port of Tidal Cycles to JavaScript
- a browser based editor for zero-install live coding: <a href="https://strudel.tidalcycles.org/" target="_blank" className="text-indigo-400">strudel.tidalcycles.org</a>
- many ways to make sound: Tone.js, Webdirt, OSC, MIDI ...

<div className="hidden">

- "Strudel" = internationally known as delicious pastry, but also "swirl" / "whirlpool" in german
- (a tidal can cause a whirlpool!)

</div>

</div>

<img src="./strudel-screenshot.png" className="h-[500px] rounded-md mb-0" />
<p>Screenshot: "Algorave 10th Birthday March 2022 - froos"</p>

</Slide>
<Slide>

## A Taste of Strudel

<MaxiRepl
  canvasHeight={600}
  code={[
    `"0 4 <5 7> 2"
  .off(1/16,add(5))
  .echo(4,.125,.7)
  .scale(cat(
    'C hirajoshi',
    slowcat('F hirajoshi','E pentatonic')
    ))
  .slow(4)
  .tone((await piano()).toDestination())
  .pianoroll({background:'transparent'})
`,
    `samples({
  clubkick: 'clubkick/2.wav',
  sd: ['808sd/SD0010.WAV','808sd/SD0050.WAV'],
  hh: 'hh/000_hh3closedhh.wav',
  clak: 'clak/000_clak1.wav',
  jvbass: ['jvbass/000_01.wav','jvbass/001_02.wav','jvbass/003_04.wav','jvbass/004_05.wav','jvbass/005_06.wav']
}, 'https://raw.githubusercontent.com/tidalcycles/Dirt-Samples/master/');
stack(
  s("<clubkick*2>,[~ <sd!3 sd(3,4,2)>],hh(3,4,2)").n("<0 1 2>").speed(.8),
  n("<0 1*2 4(3,8) 2>").speed(.6).off(1/8,x=>x.speed(1.2).degradeBy(.5)).s("jvbass")
).reset("<x@7 <x(5,8,3) x(3,8) x(3,4,1)>>").cutoff(perlin.slow(7).range(100,20000)).webdirt().slow(3/2)`,
    `stack(
  "24*2 [~ 25]".chunk(4, x => x.sub("12").fast(2))
    .tone(membrane().toDestination()),
  "~ x ~ x".every(2, x => x.fast(2)).iter(4)
    .tone(noise().toDestination()),
  "c4*8".add(saw.mul(12).slow(1.5)).degrade(0.05)
    .tone(metal().set(adsr(0,.06,0,0)).chain(vol(0.5),out()))
)
// by yaxu`,
  ]}
/>

</Slide>
<Slide>

## About Me

<div className="text-left">

- 💻 Studied Computer Science and Media in Stuttgart, working as a software developer by day
- 🎺 Trumpet Player, studied Jazz and Popular Music in Mannheim
- 🎤 Dilettante Music Producer of all kinds of genres
- 💿 ocassionally publishes music with Lui Mafuta & Puste
- 🔌 Modular Synth & Electronics Lover, Dilettante DJ ..
- 💌 Coding Blog: [Loophole Letters](https://loophole-letters.vercel.app/)
- ✨ Started live coding music not too long ago

<div className="grid grid-cols-5 gap-4 mt-12">
  <ImgTile height={200} src="https://loophole-letters.vercel.app/_next/image?url=%2Fimg%2Flambdoma.png&w=2048&q=75" />
  {/*   <ImgTile
    height={300}
    src="https://loophole-letters.vercel.app/_next/image?url=%2Fimg%2Fharmonic-spiral.png&w=2048&q=75"
  /> */}
  <ImgTile height={200} src="https://loophole-letters.vercel.app/_next/image?url=%2Fimg%2Fpiano-roll.png&w=2048&q=75" />
  <ImgTile height={200} src="https://loophole-letters.vercel.app/_next/image?url=%2Fimg%2Fcof.png&w=2048&q=75" />
  <ImgTile height={200} src="https://loophole-letters.vercel.app/_next/image?url=%2Fimg%2F251graph.png&w=2048&q=75" />
  <ImgTile
    height={200}
    src="https://loophole-letters.vercel.app/_next/image?url=%2Fimg%2Fdiy-modular-synth%2Fmidi2cv-styleshot.png&w=2048&q=75"
  />
  {/*   <ImgTile height={200} src="https://loophole-letters.vercel.app/_next/image?url=%2Fimg%2Fcolorpiano.png&w=2048&q=75" /> */}
  {/* 
  <ImgTile
    height={300}
    src="https://loophole-letters.vercel.app/_next/image?url=%2Fimg%2Fvoicing-permutation.png&w=2048&q=75"
  /> */}
</div>

</div>

</Slide>
<Slide>

## How it started

</Slide>
<Slide>

## Mini Notation

</Slide>
<Slide>

## Continuous Signals

<MaxiRepl
  code={`sine.range(50,62).segment(32).slow(4)
  .pianoroll({minMidi:48,maxMidi:62})`}
/>

<MaxiRepl
  code={`s("hh*8").speed(sine.range(.5,2).slow(4))
  .webdirt()`}
/>

</Slide>
<Slide>

## From Haskell to Python to JavaScript

<div className="text-left">

| Project        | Language   | Description                       |
| -------------- | ---------- | --------------------------------- |
| Tidal Cycles   | Haskell    | original haskell implementation   |
| Remake         | Haskell    | Tidal Cycles rewrite from scratch |
| Tidal Vortex   | Python     | Port of Remake to Python          |
| Strudel Cycles | JavaScript | Port of Vortex to Javascript      |

</div>

</Slide>
</Slides>