Strudel for Xcratch

Strudel のパターン音楽を、Scratch のブロックで作れる Xcratch 拡張機能です。 小学生から使えるように、英語・日本語・ひらがなに対応しています。

Make pattern music like Strudel with Scratch blocks on Xcratch. Available in English, Japanese and Japanese (Hiragana).

デモ / Demo

• https://0x48lab.github.io/xcx-strudel/ — ブラウザですぐ遊べます(緑の旗を押してください)
• English: https://0x48lab.github.io/xcx-strudel/en/ (tutorial: https://0x48lab.github.io/xcx-strudel/en/tutorial.html)
• 新規プロジェクト / New project — 拡張機能が入った状態で Xcratch エディターが開きます
• チュートリアル / Tutorial — スクリーンショット付きの 14 ステップ。リストとリズムで曲を書く、自分の声をビートにする、EDM・トランスの音作り、ジャズ・ソウルの和音、4つ打ちをかっこよくするテクニックまで(日本語)
• ブロックじてん / Block dictionary — パレットの順に、ブロック1つずつの使い方(ブロックの絵、何が起きるか、試し方、よく使う場面、Strudel のコード)と名前の由来。例は dictionary.sb3 にまとめてある。ページは npm run dictionary(と、例を変えたら npm run dictionary:shots)で scripts/dictionary-book.mjs から作る
• リズム図鑑 / Rhythm book — ハウス・ディスコ・8ビート・ブーンバップ・トラップ・UKガラージ・ドラムンベース・レゲトンの定番リズムを16マスの図で示し、強弱・裏打ち・ゴーストノート・ユークリッド・フィル・フィルター・ランダム・ブレイクのテクニックを4つ打ちに1つずつ足して聞きくらべる。作品 rhythms.sb3 と techniques.sb3 で鳴らせる。ページは npm run rhythms(と、トラックを変えたらブロックの絵を撮る npm run rhythms:shots)で scripts/rhythm-book.mjs から作る
• サンプル作品(エディタでブロックを見る)
  • ビギナー: ビートと おどる ねこ
  • ノーマル: おんかいで メロディ — スペース・↑・↓・R キーでメロディが変わる
  • ノーマル: ソウルな ピアノ ポップ — ジャズ・ソウル系の和音(セブンス、ナインス、借用和音、経過ディミニッシュ)とシャッフルのリズムで作ったオリジナル曲。和音・ベース・メロディはリストに1小節ずつ、ピアノのリズムは1拍ずつ、ドラムは楽器ごとに1行ずつ入っている。1〜4 キーでパートを止め、スペースで戻す
  • マスター: DJ トランス — 1〜5 キーでパートを重ね、Q〜T で止める
  • マスター: アシッドとトランスゲート — Switch Angel さんの strudel-scripts の音作りを参考にした非公式の作品です(本人とは関係ありません)。コードは使わず、acidenv と trancegate のブロックで再現しています
• サンプル作品は npm run demo で projects/ に作り直せます

できること / Features

• C型の「トラック [ ] で鳴らす」ブロックが Strudel の1行(1トラック)。中に積んだブロックを上から順に読むと、そのまま Strudel のメソッドチェーンになる(s [hh] の下に fast [8] → s("hh").fast(8))
• ブロックの形ごとに役割が1つ: C型 = トラック、中に積む命令ブロック = 音源と変形・効果、丸いブロック = 値(リストの中身、ゆれる値、乱数)
• 英語表示のブロックとメニューは Strudel の関数名(seq stack fast lpf など)。日本語・ひらがな表示は、意味がわかる日本語(「はやくする」「重ねる」「ひくい音だけ通す」)か、音楽で使うカタカナ(「アルペジオ」「ディレイ」)で書く。音の名前(bd sine など)はそのまま。どの関数になるかはブロックじてんと書き出したコードでわかる
• ビギナーでは s [bd ▼] note [c4 ▼] seq stack cat の ▼ で音を選び、fast で速くする。ノーマルからは s [ ] note [ ] にミニ記法を書ける
• エフェクト(lpf, hpf, room, delay, gain, pan, crush, speed, attack, release, distort, fm, vowel など)、変形(rev, ply, every)、音階(n + scale)
• ミニ記法(bd*2 [~ sd] <hh oh>)をそのまま書くこともできる
• Scratch のリストの中身を、1サイクルずつ・順番に・同時に並べてミニ記法にできる(長いコード進行やメロディを1小節ずつ書ける)
• struct ブロックで、和音などを x ~ のリズムで鳴らせる。beat ブロックで、16マスなどの何番目で鳴らすかを番号で書ける(beat [0,7?,10] [16])
• トラックの中の C型「重ねる stack」で、中に積んだブロックを別の鎖として同時に鳴らせる(Strudel の stack(a, b) と同じ形になる)
• スプライトの音(録音した声など)をサンプルとして使う
• オシロスコープとピアノロールをステージに表示する
• 「拍がきたとき」「[bd]が鳴ったとき」でスプライトを音に合わせて動かす
• 全部のトラックを Strudel のコードとして書き出したり、strudel.cc で開いたりできる
• 信号(sine など)、乱数(irand)、degradeBy、euclid、jux、sometimes、off、superimpose、和音と arp(マスター)
• acidenv と trancegate(Switch Angel さんの strudel-scripts の関数が元)、duck / orbit によるポンピング(サイドチェイン)、ノイズ、supersaw の厚み(unison / detune / spread)(マスター)

ブロックは「ビギナー」「ノーマル」「マスター」のレベルで表示を切り替えられます。

v0.4.0 の非互換 / Breaking change in v0.4.0

v0.4.0 でブロックを作り直しました。丸いブロックを入れ子にする形(「〜をトラック〜で鳴らす」、fast [ ] [音] など)をやめて、C型の「トラック [ ] で鳴らす」の中にブロックを積む形にしました。古いブロックは削除したため、v0.3.0 までに保存した作品は、開いてもスクリプトが表示されず、音も鳴りません。新しいブロックで組み直してください。

「Strudelの音を読み込む」ブロックも削除しました。使われている音は鳴らす前に自動で読み込まれます。

v0.4.0 replaces the nested round blocks ("play [ ] on track [ ]", fast [ ] [pattern] and others) with the C block "play on track [ ]" and blocks stacked in it. The old blocks are removed, so projects saved with v0.3.0 or earlier open without their scripts and play nothing. Build them again with the new blocks.

The block "load Strudel sounds" is removed too. Sounds which a pattern uses are loaded before it plays.

How to Use in Xcratch

1. Open Xcratch Editor
2. Click 'Add Extension' button
3. Select 'Extension Loader' extension
4. Type the module URL in the input field

https://0x48lab.github.io/xcx-strudel/dist/strudel.mjs

音源について / Sounds

• ドラム(bd sd hh oh cp rim lt mt ht cr)は、ネットワークなしで鳴る合成ドラムです。
• パレットの一番下にある「(実験的) ドラムの音を [uzu-drumkit (録音)] にする」ブロック(ノーマル以上)を置くと、strudel.cc と同じ tidalcycles/uzu-drumkit(Unlicense)の録音を GitHub から読み込んで鳴らします。bd:1 のような番号で録音を選べ、rd cb sh tb brk misc も鳴ります。読み込めないときは合成ドラムが鳴ります。
• 内蔵シンセ(sine, square, sawtooth, triangle など)は、ネットワークなしで鳴ります。
• ピアノやドラムマシンなどは、使われている音に合わせて次のサンプルを GitHub から読み込みます。読み込み先はここに挙げたものに限られています。
  • felixroos/dough-samples のサンプルマップ
  • ピアノ: Salamander Grand Piano V3 — Alexander Holm, CC BY 3.0
  • VCSL: sgossner/VCSL, CC0
  • ドラムマシン: ritchse/tidal-drum-machines
  • Dirt-Samples: tidalcycles/Dirt-Samples

安全のために / Safety

共有された作品を開いても任意のコードが実行されないよう、次のようにしています。

• Strudel のコードを実行する(eval する)ブロックはありません。ブロックが作るパターンは、許可した関数だけを呼び出します。
• ミニ記法の掛ける数(*, !, /, ユークリッドリズム)は64まで、テンポは10〜400 BPM に制限しています。
• 外部から読み込めるのは、上の4つのサンプルマップだけです。
• 「strudel.cc で開く」で書き出すコードには、許可した関数名と、エスケープした文字列しか入りません。トラック名はコメントに入れる前に、文字・数字・空白・_・- 以外を _ に置き換えます(U+2028 などの改行文字でコメントを抜け出せないように)。

Development

npm install
npm run setup-dev   # links scratch-vm sources from ../scratch-editor
npm run build       # dist/strudel.mjs
npm run watch
npm test            # vitest
npm run demo        # projects/*.sb3 and projects/en/*.sb3 (English)
npm run tutorial    # projects/tutorial/*.sb3 and projects/tutorial/en/*.sb3
npm run tutorial:shots  # tutorial/*.png by the Xcratch editor in headless Chromium (npx playwright-core install chromium)

The local editor is used for debugging, because a page on xcratch.github.io needs the Chrome permission for local network access to load an extension from localhost.

# in ../scratch-editor (certificates in .vscode/ by mkcert)
cd packages/scratch-gui && npm run start   # https://localhost:8601
# in this repository
npx http-server . -p 5500 -S -C <cert.pem> -K <key.pem> --cors

License

AGPL-3.0, because this extension bundles Strudel (@strudel/core, @strudel/mini, @strudel/tonal, superdough), which is licensed under AGPL-3.0.

注意 / Notes

• 音の絵(オシロスコープ、ピアノロール)を表示しているあいだは、「色に触れた」の判定に絵の色も含まれます。