2024/04/26

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 になるあたりで計算時間が実用的でない長さになったので諦めました。

2024/04/24

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 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 ではレンダリング後に振幅を正規化しているのでわかりづらいですが、どのフィルタも出力ゲインの調整が適当です。以下は今回使ったフィルタに関連するリンクです。

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

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

2024/04/08

多項式オシレータ

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

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

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