hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into astro-3

Browse source
This commit is contained in:
Felix Roos 2023-11-02 09:00:42 +01:00
commit c25c2693f5
70 changed files with 1865 additions and 851 deletions
Download patch file Download diff file Expand all files Collapse all files

2
website/README.md
View file

@ -1,6 +1,6 @@
# Strudel Website
This is the website for Strudel, deployed at [strudel.tidalcycles.org](https://strudel.tidalcycles.org/).
This is the website for Strudel, deployed at [strudel.cc](https://strudel.cc).
It includes the REPL live coding editor and the documentation site.
## Run locally

2
website/agpl-header.txt
View file

@ -1,7 +1,7 @@
/*
Strudel - javascript-based environment for live coding algorithmic (musical) patterns
https://strudel.tidalcycles.org / https://github.com/tidalcycles/strudel/
https://strudel.cc / https://github.com/tidalcycles/strudel/
Copyright (C) Strudel contributors
https://github.com/tidalcycles/strudel/graphs/contributors

3
website/astro.config.mjs
View file

@ -11,7 +11,7 @@ import tailwind from '@astrojs/tailwind';
import AstroPWA from '@vite-pwa/astro';
// import { visualizer } from 'rollup-plugin-visualizer';
const site = `https://strudel.tidalcycles.org/`; // root url without a path
const site = `https://strudel.cc/`; // root url without a path
const base = '/'; // base path of the strudel site
// this rehype plugin converts relative anchor links to absolute ones
@ -54,6 +54,7 @@ export default defineConfig({
mdx(options),
tailwind(),
AstroPWA({
experimental: { directoryAndTrailingSlashHandler: true },
registerType: 'autoUpdate',
injectRegister: 'auto',
workbox: {

9
website/package.json
View file

@ -28,13 +28,14 @@
"@strudel.cycles/mini": "workspace:*",
"@strudel.cycles/osc": "workspace:*",
"@strudel.cycles/react": "workspace:*",
"@strudel/codemirror": "workspace:*",
"@strudel.cycles/serial": "workspace:*",
"@strudel.cycles/soundfonts": "workspace:*",
"@strudel.cycles/tonal": "workspace:*",
"@strudel.cycles/transpiler": "workspace:*",
"@strudel.cycles/webaudio": "workspace:*",
"@strudel.cycles/xen": "workspace:*",
"@strudel/hydra": "workspace:*",
"@strudel/codemirror": "workspace:*",
"@strudel/desktopbridge": "workspace:*",
"@supabase/supabase-js": "^2.21.0",
"@tailwindcss/forms": "^0.5.3",
@ -59,9 +60,9 @@
"tailwindcss": "^3.3.2"
},
"devDependencies": {
"@vite-pwa/astro": "^0.0.5",
"@vite-pwa/astro": "^0.1.4",
"html-escaper": "^3.0.3",
"vite-plugin-pwa": "^0.14.7",
"workbox-window": "^6.5.4"
"vite-plugin-pwa": "^0.16.5",
"workbox-window": "^7.0.0"
}
}

2
website/public/CNAME
View file

@ -1 +1 @@
strudel.tidalcycles.org
strudel.cc

3
website/src/config.ts
View file

@ -6,7 +6,7 @@ export const SITE = {
export const OPEN_GRAPH = {
image: {
src: 'https://strudel.tidalcycles.org/icon.png',
src: 'https://strudel.cc/icon.png',
alt: 'Strudel Logo',
},
};
@ -76,6 +76,7 @@ export const SIDEBAR: Sidebar = {
{ text: 'Patterns', link: 'technical-manual/patterns' },
{ text: 'Music metadata', link: 'learn/metadata' },
{ text: 'CSound', link: 'learn/csound' },
{ text: 'Hydra', link: 'learn/hydra' },
],
'Pattern Functions': [
{ text: 'Introduction', link: 'functions/intro' },

1
website/src/docs/MiniRepl.jsx
View file

@ -20,6 +20,7 @@ if (typeof window !== 'undefined') {
import('@strudel.cycles/osc'),
import('@strudel.cycles/csound'),
import('@strudel.cycles/soundfonts'),
import('@strudel/hydra'),
);
}

4
website/src/pages/de/workshop/getting-started.mdx
View file

@ -22,7 +22,7 @@ in der Muster eine Rolle spielen.
Du brauchst keine Erfahrung in JavaScript oder Tidal Cycles um mit Strudel Musik zu machen.
Dieser interaktive Workshop leitet dich spielerisch durch die Grundlagen von Strudel.
Der beste Ort um mit Strudel Musik zu machen ist das [Strudel REPL](https://strudel.tidalcycles.org/).
Der beste Ort um mit Strudel Musik zu machen ist das [Strudel REPL](https://strudel.cc/).
## Was kann man mit Strudel machen?
@ -66,7 +66,7 @@ Hier ist ein Beispiel wie Strudel klingen kann:
Mehr Beispiele gibt es [hier](/examples).
Du kannst auch im [Strudel REPL](https://strudel.tidalcycles.org/) auf `shuffle` klicken um ein zufälliges Beispiel zu hören.
Du kannst auch im [Strudel REPL](https://strudel.cc/) auf `shuffle` klicken um ein zufälliges Beispiel zu hören.
## Workshop

8
website/src/pages/learn/conditional-modifiers.mdx
View file

@ -60,4 +60,12 @@ import { JsDoc } from '../../docs/JsDoc';
<JsDoc client:idle name="invert" h={0} />
## pick
<JsDoc client:idle name="pick" h={0} />
## squeeze
<JsDoc client:idle name="squeeze" h={0} />
After Conditional Modifiers, let's see what [Accumulation Modifiers](/learn/accumulation) have to offer.

4
website/src/pages/learn/effects.mdx
View file

@ -82,6 +82,10 @@ Strudel uses ADSR envelopes, which are probably the most common way to describe
<JsDoc client:idle name="release" h={0} />
## adsr
<JsDoc client:idle name="adsr" h={0} />
# Filter Envelope
Each filter can receive an additional filter envelope controlling the cutoff value dynamically. It uses an ADSR envelope similar to the one used for amplitude. There is an additional parameter to control the depth of the filter modulation: `lpenv`|`hpenv`|`bpenv`. This allows you to play subtle or huge filter modulations just the same by only increasing or decreasing the depth.

8
website/src/pages/learn/getting-started.mdx
View file

@ -10,11 +10,11 @@ import { JsDoc } from '../../docs/JsDoc';
Welcome to the Strudel documentation pages!
These pages will introduce you to [Strudel](https://strudel.tidalcycles.org/), a web-based [live coding](https://github.com/toplap/awesome-livecoding/) environment that implements the [Tidal Cycles](https://tidalcycles.org) algorithmic pattern language.
These pages will introduce you to [Strudel](https://strudel.cc/), a web-based [live coding](https://github.com/toplap/awesome-livecoding/) environment that implements the [Tidal Cycles](https://tidalcycles.org) algorithmic pattern language.
# What is Strudel?
[Strudel](https://strudel.tidalcycles.org/) is a version of [Tidal Cycles](https://tidalcycles.org) written in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript), initiated by [Alex McLean](https://slab.org) and [Felix Roos](https://github.com/felixroos) in 2022.
[Strudel](https://strudel.cc/) is a version of [Tidal Cycles](https://tidalcycles.org) written in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript), initiated by [Alex McLean](https://slab.org) and [Felix Roos](https://github.com/felixroos) in 2022.
Tidal Cycles, also known as Tidal, is a language for [algorithmic pattern](https://algorithmicpattern.org), and though it is most commonly used for [making music](https://tidalcycles.org/docs/showcase), it can be used for any kind of pattern making activity, including [weaving](https://www.youtube.com/watch?v=TfEmEsusXjU).
Tidal was first implemented as a library written in the [Haskell](https://www.haskell.org/) functional programming language, and by itself it does not make any sound.
@ -24,7 +24,7 @@ Strudel however runs directly in your web browser, does not require any custom s
# Strudel REPL and MiniREPL
The main place to actually make music with Strudel is the [Strudel REPL](https://strudel.tidalcycles.org/) ([what is a REPL?](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop)), but in these pages you will also encounter interactive "MiniREPLs" where you can listen to and edit Strudel patterns.
The main place to actually make music with Strudel is the [Strudel REPL](https://strudel.cc/) ([what is a REPL?](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop)), but in these pages you will also encounter interactive "MiniREPLs" where you can listen to and edit Strudel patterns.
Try clicking the play icon below:
<MiniRepl client:idle tune={`s("bd sd")`} punchcard />
@ -38,7 +38,7 @@ This interactive tutorial will guide you through the basics of Strudel.
# Show me some demos!
To see and hear what Strudel can do, visit the [Strudel REPL](https://strudel.tidalcycles.org/) and click the Shuffle icon in the top menu bar.
To see and hear what Strudel can do, visit the [Strudel REPL](https://strudel.cc/) and click the Shuffle icon in the top menu bar.
You can get a feel for Strudel by browsing and editing these examples and clicking the Refresh icon to update.
You can also browse through the examples [here](./examples).

55
website/src/pages/learn/hydra.mdx Normal file
View file

@ -0,0 +1,55 @@
---
title: Hydra
layout: ../../layouts/MainLayout.astro
---
import { MiniRepl } from '../../docs/MiniRepl';
# Using Hydra inside Strudel
You can write [hydra](https://hydra.ojack.xyz/) code in strudel! All you have to do is to call `await initHydra()` at the top:
<MiniRepl
client:only="react"
tune={`await initHydra()
// licensed with CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
// by Zach Krall
// http://zachkrall.online/
osc(10, 0.9, 300)
.color(0.9, 0.7, 0.8)
.diff(
osc(45, 0.3, 100)
.color(0.9, 0.9, 0.9)
.rotate(0.18)
.pixelate(12)
.kaleid()
)
.scrollX(10)
.colorama()
.luma()
.repeatX(4)
.repeatY(4)
.modulate(
osc(1, -0.9, 300)
)
.scale(2)
.out()
note("[a,c,e,<a4 ab4 g4 gb4>,b4]/4").s("sawtooth").vib(2)
.lpf(600).lpa(2).lpenv(6)
`}
/>
There is a special function `H` that allows you to use a pattern as an input to hydra:
<MiniRepl
client:only="react"
tune={`await initHydra()
let pattern = "3 4 5 [6 7]*2"
shape(H(pattern)).out(o0)
n(pattern).scale("A:minor").piano().room(1)
`}
/>
You might now be able to see this properly here: [open in REPL](/#YXdhaXQgaW5pdEh5ZHJhKCkKbGV0IHBhdHRlcm4gPSAiMyA0IDUgWzYgN10qMiIKc2hhcGUoSChwYXR0ZXJuKSkub3V0KG8wKQpuKHBhdHRlcm4pLnNjYWxlKCJBOm1pbm9yIikucGlhbm8oKS5yb29tKDEpIA%3D%3D)

2
website/src/pages/learn/input-output.mdx
View file

@ -71,7 +71,7 @@ Now you're all set!
## Usage
1. Start SuperCollider, either using SuperCollider IDE or by running `sclang` in a terminal
2. Open the [Strudel REPL](https://strudel.tidalcycles.org/#cygiYmQgc2QiKS5vc2MoKQ%3D%3D)
2. Open the [Strudel REPL](https://strudel.cc/#cygiYmQgc2QiKS5vc2MoKQ%3D%3D)
...or test it here:

2
website/src/pages/learn/metadata.mdx
View file

@ -18,7 +18,7 @@ You can optionally add some music metadata in your Strudel code, by using tags i
Like other comments, those are ignored by Strudel, but it can be used by other tools to retrieve some information about the music.
It is for instance used by the [swatch tool](https://github.com/tidalcycles/strudel/tree/main/my-patterns) to display pattern titles in the [examples page](https://strudel.tidalcycles.org/examples/).
It is for instance used by the [swatch tool](https://github.com/tidalcycles/strudel/tree/main/my-patterns) to display pattern titles in the [examples page](https://strudel.cc/examples/).
## Alternative syntax

12
website/src/pages/learn/pwa.mdx
View file

@ -5,7 +5,7 @@ layout: ../../layouts/MainLayout.astro
# Using Strudel Offline
You can use Strudel even without a network! When you first visit the [Strudel REPL](strudel.tidalcycles.org/),
You can use Strudel even without a network! When you first visit the [Strudel REPL](https://strudel.cc/),
your browser will download the whole web app including documentation.
When the download is finished (&lt;1MB), you can visit the website even when offline,
getting the downloaded website instead of the online one.
@ -32,7 +32,7 @@ You can view all cached files in your browser.
### Firefox
- Open the Developer Tools (`Tools > Web Developer > Web Developer Tools`)
- go to `Storage` tab and expand `Cache Storage > https://strudel.tidalcycles.org`.
- go to `Storage` tab and expand `Cache Storage > https://strudel.cc`.
- or go to the `Application` tab and view the latest updates in `Service Workers`
### Chromium based Browsers
@ -57,14 +57,14 @@ without the browser ui.
With a chromium based browser:
1. go to the [Strudel REPL](strudel.tidalcycles.org/).
1. go to the [Strudel REPL](https://strudel.cc).
2. on the right of the adress bar, click `install Strudel REPL`
3. the REPL should now run as a standalone chromium app
Without a chromium based browser, you can use [nativefier](https://github.com/nativefier/nativefier) to generate a desktop app:
1. make sure you have NodeJS installed
2. run `npx nativefier strudel.tidalcycles.org`
2. run `npx nativefier strudel.cc`
<figure>
<img src="./pwa/strudel-linux.png" alt="Strudel on Linux" />
@ -73,13 +73,13 @@ Without a chromium based browser, you can use [nativefier](https://github.com/na
### iOS
1. open to the [Strudel REPL](strudel.tidalcycles.org/) in safari
1. open to the [Strudel REPL](https://strudel.cc/) in safari
2. press the share icon and tab `Add to homescreen`
3. You should now have a strudel app icon that opens the repl in full screen
### Android
1. open to the [Strudel REPL](strudel.tidalcycles.org/)
1. open to the [Strudel REPL](https://strudel.cc/)
2. Tab the install button at the bottom
Ok, what are [Patterns](/technical-manual/patterns) all about?

21
website/src/pages/learn/samples.mdx
View file

@ -46,7 +46,7 @@ For drum sounds, strudel uses the comprehensive [tidal-drum-machines](https://gi
Furthermore, strudel also loads instrument samples from [VCSL](https://github.com/sgossner/VCSL) by default.
To see which sample names are available, open the `sounds` tab in the [REPL](https://strudel.tidalcycles.org/).
To see which sample names are available, open the `sounds` tab in the [REPL](https://strudel.cc/).
Note that only the sample maps (mapping names to URLs) are loaded initially, while the audio samples themselves are not loaded until they are actually played.
This behaviour of loading things only when they are needed is also called `lazy loading`.
@ -283,7 +283,7 @@ With it, you can enter any sample name(s) to query from [freesound.org](https://
<MiniRepl
client:idle
tune={`await samples('https://shabda.ndre.gr/bass:4,hihat:4,rimshot:2.json?strudel=1')
tune={`await samples('shabda:bass:4,hihat:4,rimshot:2')
stack(
n("0 1 2 3").s('bass').slow(2),
n("0 1*2 2 3*2").s('hihat'),
@ -291,6 +291,19 @@ stack(
).clip(1)`}
/>
You can also generate artificial voice samples with any text, in multiple languages.
Note that the language code and the gender parameters are optional and default to `en-GB` and `f`
<MiniRepl
client:idle
tune={`await samples('shabda/speech:the_drum,forever')
await samples('shabda/speech/fr-FR/m:magnifique')
stack(
s("the_drum").chop(16).speed(rand.range(0.85,1.1)),
s("forever magnifique").slow(8).late(0.25)
)`}
/>
# Sampler Effects
Sampler effects are functions that can be used to change the behaviour of sample playback.
@ -335,6 +348,10 @@ Sampler effects are functions that can be used to change the behaviour of sample
<JsDoc client:idle name="Pattern.chop" h={0} />
### striate
<JsDoc client:idle name="Pattern.striate" h={0} />
### slice
<JsDoc client:idle name="Pattern.slice" h={0} />

4
website/src/pages/recipes/microrhythms.mdx
View file

@ -7,7 +7,7 @@ import { MiniRepl } from '../../docs/MiniRepl';
import { JsDoc } from '../../docs/JsDoc';
import { samples } from '@strudel.cycles/webaudio';
see https://strudel.tidalcycles.org?zMEo5kowGrFc
see https://strudel.cc/?zMEo5kowGrFc
# Microrhythms
@ -73,4 +73,4 @@ This is the second example of the video:
s('hh').micro(0, 1/6, 2/5, 2/3, 3/4)`}
/>
with bass: https://strudel.tidalcycles.org?sTglgJJCPIeY
with bass: https://strudel.cc/?sTglgJJCPIeY

2
website/src/pages/technical-manual/docs.mdx
View file

@ -9,7 +9,7 @@ The docs page is built ontop of astro's [docs site](https://github.com/withastro
## Adding a new Docs Page
1. add a `.mdx` file in a path under `website/src/pages/`, e.g. [website/src/pages/learn/code.mdx](https://raw.githubusercontent.com/tidalcycles/strudel/main/website/src/pages/learn/code.mdx) will be available under https://strudel.tidalcycles.org/learn/code (or locally under `http://localhost:3000/learn/code`)
1. add a `.mdx` file in a path under `website/src/pages/`, e.g. [website/src/pages/learn/code.mdx](https://raw.githubusercontent.com/tidalcycles/strudel/main/website/src/pages/learn/code.mdx) will be available under https://strudel.cc/learn/code (or locally under `http://localhost:3000/learn/code`)
2. make sure to copy the top part of another existing docs page. Adjust the title accordingly
3. To add a link to the sidebar, add a new entry to `SIDEBAR` to [`config.ts`](https://github.com/tidalcycles/strudel/blob/main/website/src/config.ts)

2
website/src/pages/technical-manual/repl.mdx
View file

@ -7,7 +7,7 @@ import { MiniRepl } from '../../docs/MiniRepl';
# REPL
{/* The [REPL](https://strudel.tidalcycles.org/) is the place where all packages come together to form a live coding system. It can also be seen as a reference implementation for users of the library. */}
{/* The [REPL](https://strudel.cc/) is the place where all packages come together to form a live coding system. It can also be seen as a reference implementation for users of the library. */}
While Strudel can be used as a library in any JavaScript codebase, its main, reference user interface is the Strudel REPL^[REPL stands for read, evaluate, print/play, loop. It is friendly jargon for an interactive programming interface from computing heritage, usually for a commandline interface but also applied to live coding editors.], which is a browser-based live coding environment. This live code editor is dedicated to manipulating Strudel patterns while they play. The REPL features built-in visual feedback, highlighting which elements in the patterned (mini-notation) sequences are influencing the event that is currently being played. This feedback is designed to support both learning and live use of Strudel.

2
website/src/pages/technical-manual/sounds.mdx
View file

@ -64,7 +64,7 @@ registerSound(
freq(220, 440, 330).s('mysaw');
```
You can actually use this code in the [REPL](https://strudel.tidalcycles.org/) and it'll work.
You can actually use this code in the [REPL](https://strudel.cc/) and it'll work.
After evaluating the code, you should see `mysaw` in listed in the sounds tab.
## Playing sounds

4
website/src/pages/workshop/getting-started.mdx
View file

@ -18,7 +18,7 @@ With Strudel, you can expressively write dynamic music pieces.<br/>
It is an official port of the [Tidal Cycles](https://tidalcycles.org/) pattern language to JavaScript.<br/>
You don't need to know JavaScript or Tidal Cycles to make music with Strudel.
This interactive tutorial will guide you through the basics of Strudel.<br/>
The best place to actually make music with Strudel is the [Strudel REPL](https://strudel.tidalcycles.org/)
The best place to actually make music with Strudel is the [Strudel REPL](https://strudel.cc/)
<div className="clear-both" />
@ -62,7 +62,7 @@ Here is an example of how strudel can sound:
.slow(3/2)`}
/>
To hear more, go to the [Strudel REPL](https://strudel.tidalcycles.org/) and press shuffle to hear a random example pattern.
To hear more, go to the [Strudel REPL](https://strudel.cc/) and press shuffle to hear a random example pattern.
## Getting Started

2
website/src/repl/Footer.jsx
View file

@ -436,7 +436,7 @@ function SettingsTab({ scheduler }) {
<ButtonGroup
value={keybindings}
onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs', vscode: 'VSCode' }}
></ButtonGroup>
</FormItem>
<FormItem label="Panel Position">

16
website/src/repl/Repl.jsx
View file

@ -23,6 +23,7 @@ import { settingPatterns } from '../settings.mjs';
import { code2hash, hash2code } from './helpers.mjs';
import { isTauri } from '../tauri.mjs';
import { useWidgets } from '@strudel.cycles/react/src/hooks/useWidgets.mjs';
import { writeText } from '@tauri-apps/api/clipboard';
const { latestCode } = settingsMap.get();
@ -41,7 +42,7 @@ let modules = [
import('@strudel.cycles/xen'),
import('@strudel.cycles/webaudio'),
import('@strudel/codemirror'),
import('@strudel/hydra'),
import('@strudel.cycles/serial'),
import('@strudel.cycles/soundfonts'),
import('@strudel.cycles/csound'),
@ -78,9 +79,9 @@ async function initCode() {
const initialUrl = window.location.href;
const hash = initialUrl.split('?')[1]?.split('#')?.[0];
const codeParam = window.location.href.split('#')[1] || '';
// looking like https://strudel.tidalcycles.org/?J01s5i1J0200 (fixed hash length)
// looking like https://strudel.cc/?J01s5i1J0200 (fixed hash length)
if (codeParam) {
// looking like https://strudel.tidalcycles.org/#ImMzIGUzIg%3D%3D (hash length depends on code length)
// looking like https://strudel.cc/#ImMzIGUzIg%3D%3D (hash length depends on code length)
return hash2code(codeParam);
} else if (hash) {
return supabase
@ -127,6 +128,7 @@ export function Repl({ embedded = false }) {
isAutoCompletionEnabled,
isLineWrappingEnabled,
panelPosition,
isZen,
} = useSettings();
const paintOptions = useMemo(() => ({ fontFamily }), [fontFamily]);
@ -269,7 +271,11 @@ export function Repl({ embedded = false }) {
if (!error) {
setLastShared(activeCode || code);
// copy shareUrl to clipboard
await navigator.clipboard.writeText(shareUrl);
if (isTauri()) {
await writeText(shareUrl);
} else {
await navigator.clipboard.writeText(shareUrl);
}
const message = `Link copied to clipboard: ${shareUrl}`;
alert(message);
// alert(message);
@ -322,7 +328,7 @@ export function Repl({ embedded = false }) {
</button>
)}
<div className="grow flex relative overflow-hidden">
<section className="text-gray-100 cursor-text pb-0 overflow-auto grow" id="code">
<section className={'text-gray-100 cursor-text pb-0 overflow-auto grow' + (isZen ? ' px-10' : '')} id="code">
<CodeMirror
theme={currentTheme}
value={code}

2
website/src/repl/drawings.mjs
View file

@ -23,7 +23,7 @@ angle(saw)
.animate({smear:0})
`;
// https://strudel.tidalcycles.org/?C31_NrcMfZEO
// https://strudel.cc/?C31_NrcMfZEO
export const spiralflower = `const {innerWidth:ww,innerHeight:wh} = window;
const ctx = getDrawContext()
const piDiv180 = Math.PI / 180;