Release of GlitchSprinkler Plugin / GlitchSprinkler のプラグイン版を公開

GlitchSprinkler Manual (github.io)

GlitchSprinkler plugin version is ready. Download link is available on the manual page linked above.

GlitchSprinkler is a synthesizer specialized to play fast arpeggio. It is mostly the same as the web synth version, but a resonant low-pass filter is added. It has some character that comes from integer sample period and a bit unusual note stealing.

By making the period an integer sample, it is possible to make it appear as though aliasing is not present to the human ear. This method is faster to calculate than proper anti-aliasing, but has a side effect that makes higher notes to be out of tune. It also can't work well with pitch bend.

The note stealing affects rhythm. A note changes or stops only when the oscillator completes the current cycle. This jitters the rhythm especially when the tempo is fast, or the note is low.

---

GlitchSprinker のマニュアル (github.io)

GlitchSprinkler のプラグイン版を公開しました。ダウンロードは上にリンクしたマニュアルページからできます。

GlitchSprinkler は速いアルペジオに特化したシンセサイザです。 Web シンセ版とほとんど同じですが、ローパスフィルタが追加されています。音については、周期が必ず整数サンプルになることと、変なノートスティーリングによる独特の癖があります。

周期を整数サンプルにすることにより、人間の耳にはエイリアシングが聞き取れないようにごまかすことができます。この方法はまともなアンチエイリアシングに比べると計算が速いのですが、高い音程ほどピッチがずれるという副作用があります。また、ピッチベンドとの相性も悪いです。

ノートスティーリングはリズムに影響を与えています。ノートの変更や停止は、オシレーターが現在のサイクルを完了したときにのみ行われます。これにより、テンポが速い場合やノートが低い場合に特にリズムが揺れます。

Dark Color Scheme for Uhhyou Web Synthesizers / Uhhyou Web Synthesizers のダークモード

Dark color scheme is added for Uhhyou Web Synthesizers.

This dark color scheme is just an invert of light color scheme. It's not 100% invert, but 87.4% (≈ 1 - (0x20 / 0xff)) to make background color to be #202020.

Currently, the color scheme only respects the setting provided by operating system. The pages are using `prefers-color-scheme`, however there's no easy way to change it within web pages. I was hoping that calling something like `window.setColorScheme("dark")` to change the color scheme, but it seems like there's no way to toggle `prefers-color-scheme` from JavaScript.

---

ダークモードを Uhhyou Web Synthesizers に追加しました。

このダークモードの配色はライトモードの単なる反転です。ただし、背景色を #202020 にするために 100% ではなく 87.4% (≈ 1 - (0x20 / 0xff)) の反転になっています。

配色は OS の設定によってのみ変更できます。 `prefers-color-scheme` を使っているのですが、このメディア特性 (media feature) をページ内から変更する方法が無いようです。今後、 `window.setColorScheme("dark")` のような形で簡単に変更できるようになって欲しいところです。

sin, cos を反復的に計算するアルゴリズムのレシピ

 「sin, cos を反復的に計算するアルゴリズムのレシピ」 を読む (github.io)

Martin Vicanek による “A New Recursive Quadrature Oscillator” をもとにして sin, cos を反復的に計算するアルゴリズムの実装についてまとめました。ほとんどの用途では標準ライブラリの sin, cos で十分ですが、加算合成シンセサイザでは計算量を節約するために反復的に計算するアルゴリズムを使いたいときがあります。

画像は各アルゴリズムの周波数を変えたときの振幅の変化を示した図です。

「n dB/oct のスロープを持つフィルタ」の改訂

「 n dB/octのスロープを持つフィルタ」の内容が怪しかった、というよりも物足りなかったので改訂しました。主な追加点は「IIR のハイシェルフフィルタを使う方法」の節で、この方法が最もまともに任意の傾きを設定できます。 以前に実装した Slope Filter では 1 次の整合ハイシェルフフィルタを使っていたのですが、バイリニア変換した 1 次ローパスにバイパスを足し合わせたハイシェルフフィルタのほうが適していたことが分かりました。 

FIR では -6 dB/oct より緩やかなスロープであればピンクノイズフィルタが使えます。 Exponential 窓による FIR フィルタは -12 dB/oct のスロープだけであれば近似できるようです。

GlitchSprinkler Plugin is under Development

Plugin version of GlitchSprinkler is in progress. It will take more time for testing, making presets, and writing manual. Source code is already available on `develop` branch on the git repository. For now, It's better not to use for productions.

Original Web Synth: https://ryukau.github.io/UhhyouWebSynthesizers/GlitchSprinkler/synth.html

---

プラグイン版の GlitchSprinkler を制作中です。テスト、プリセットの作成、マニュアルの作成にまだ時間がかかります。ソースコードは GitHub リポジトリの `develop` ブランチから入手できます。互換性のない変更を加えるかもしれないので、まだ本番には使わないことをお勧めします。

元になった Web シンセ: https://ryukau.github.io/UhhyouWebSynthesizers/GlitchSprinkler/synth.html

「お手軽なFIRフィルタのレシピ」の改訂

「お手軽なFIRフィルタのレシピ」の記事の内容がかなり怪しかったので改訂しました。「n dB/octのスロープを持つフィルタ」も近々改訂します。

FL Studio 2024 の Spreader

I got curious about the new Spreader plugin added into FL Studio 2024, so I attempted to recreate it in Patcher. It went surprisingly well. The resulting flp was posted on Image-Line forum with a title of "Spreader recreated in Patcher" (the link requires Image-Line account).

The image is a block diagram of recreated patch that resembles Spreader.

Edit on 2024/10/03: Fixed the image to correct one. Previous image was wrong.

---

FL Studio 2024 で増えた Spreader の仕組みが気になったので Patcher で再現を試みたところ、うまくいきました。 Image-Line フォーラム (要アカウント) に "Spreader recreated in Patcher" というトピックで結果の flp を投稿しています。

画像は再現したパッチをブロック線図にしたものです。

2024/10/03 の変更: 画像を正しいブロック線図のものに修正。

CollidingComb

Try CollidingComb (github.io)
Read source code (github.com)

CollidingComb is another drum synthesizer based on delays. This one is basically a lightweight version of GenericDrum.

The sound is okay even when the number of comb filters are reduced to 2. The number of comb filters can be changed with `nComb` parameter. It also kind of resembles the texture of WireWireCollision.

It is using feedback comb filters connected in parallel, instead of a feedback delay network. The internal connection is similar to KSCymbal and CollidingCombSynth. Oscillator is a mixture of white noise (uniform distribution) and multiple sines. The multiple sine part is similar to EnvelopedSine.

---

CollidingComb を試す (github.io)
ソースコードを読む (github.com)

CollidingComb はディレイを使ったドラムシンセサイザです。 GenericDrum の軽量版です。

内部のコムフィルタの数を 2 まで減らしても、それほど悪くない音が出ます。コムフィルタの数は `nComb` パラメータで変更できます。音の質感は WireWireCollision とやや似ています。

GenericDrum との違いは FDN のかわりに、並列につないだコムフィルタを使っていることです。内部の接続は KSCymbal や CollidingCombSynth と似ています。オシレータはホワイトノイズと複数のサイン波の組み合わせです。サイン波の部分のオシレータは EnvelopedSine と似たような形を使っています。

SquareMorph

Try SquareMorph (github.io)
Read source code (github.com)

SquareMorph is a synthesizer that morphs 2 waveform using Walsh-Hadamard, or Haar transform. Some of the waveform are based on CZ oscillators.

It's possible to use arbitrary orthogonal matrix to perform similar morphing. However, it's not implemented because the computation time was too long.

---

SquareMorph を試す (github.io)
ソースコードを読む (github.com)

SquareMorph は CZ オシレータで生成した 2 つの波形を Walsh-Hadamard あるいは Haar 変換を使ってモーフィングするシンセサイザです。

任意の直行行列でも似たようなモーフィングができるはずですが、行列の大きさが 2048 になるあたりで計算時間が実用的でない長さになったので諦めました。

IntegerChord

Try IntegerChord (github.io)
Read source code (github.com)

IntegerChord is a subtractive synthesizer which plays random chord. As same as IntegerArpeggio, the period of a waveform is set to an integer samples which makes aliasing less perceivable to human ears.

Half of the reason this synth was made is to test resonant filters. It's not obvious due to amplitude normalization, but output gain of the resonant filters aren't well tuned. Below are links related to the resonant filters used in this time.

• Resonant filter source code (github.com)
• A note on design of resonant filters (github.com)

Resonant filters are also added to IntegerArpeggio. However, slicer might not work well when the filters are applied.

On a different topic, there's a proposal to add masonry layout to CSS (MDN, WebKit). On UhhyouWebSynthesizers, the layout is trying to fix the width of a column, while also trying to make the number of columns variable. Current implementation is displaying `inline-block` sections into a text that is oriented from top-to-bottom, then left-to-right. Probably because of this strange layout, the layout slightly differs on different browsers. I tried column layout, but it changed the width of a column when the width of browser is changed. It might take more time, but I'd like to try masonry layout when it's implemented in Firefox, Safari, and Chrome.

---

IntegerChord を試す (github.io)
ソースコードを読む (github.com)

IntegerChord はランダムにコードを生成する減算式シンセサイザです。 IntegerArpeggio と同様に、波形の周期を整数サンプルとすることで、エイリアシングが聞き取りにくくなっていることが特徴です。

このシンセの半分くらいはレゾナンスをつけられるフィルタ (レゾナントフィルタ) をテストする目的で作られました。 IntegerChord ではレンダリング後に振幅を正規化しているのでわかりづらいですが、どのフィルタも出力ゲインの調整が適当です。以下は今回使ったフィルタに関連するリンクです。

• フィルタのコード (github.com)
• フィルタの設計に関するメモ (github.com)
  

ついでに IntegerArpeggio にもレゾナントフィルタを追加しています。ただしフィルタをかけるとスライサでうまく切れなくなるときがあります。

話は変わりますが、 masonry layout という CSS の新機能が提案されているそうです (MDN, WebKit) 。 UhhyouWebSynthesizers では列の幅を固定、列の数を可変とするようにトップレベルのレイアウトを行っています。今の実装では、縦書きの左から右に向かうテキストの中に、各セクションが inline-block として表示されるようになっています。この変なレイアウトのせいなのか、現状ではブラウザによってレイアウトが微妙に異なってしまっています。 Column layout も試してみたのですが、列の幅を固定できなかったので使っていません。まだ時間がかかるかもしれませんが、 masonry layout が Firefox, Safari, Chrome に実装されたら試してみたいところです。

多項式オシレータ

Read 多項式オシレータ (Polynomial Oscillator) at github.io

An article was written to document the polynomial oscillator used in GlitchSprinkler and IntegerArpeggio. It's written in Japanese, so I'd recommend to use machine translation if you are interested in. The content is an application of matrix calculation. There's also a section about various method to compute oscillator phase.

The sound is not so good because it tends to lack higher overtones. It's usually better with FM or some other ways to add higher overtones, then pass the output to a low-pass filter.

The image is the interface of polynomial oscillator used in web synthesizers.

---

多項式オシレータを読む (github.io)

Web シンセの GlitchSprinkler と IntegerArpeggio で使った多項式オシレータについてまとめました。内容はごく基礎的な行列計算の応用です。ついでに位相の計算についても様々なパターンを紹介しています。

音の傾向としては高い倍音が出ないので、そのままでは物足りないです。 FM などで高い倍音を加えた上でローパスフィルタを使うなどの工夫が必要です。

画像は web シンセに組み込んだ多項式オシレータのインターフェイスです。