tech_note

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

commit 7dc793baa29f4708d7ecd657149be9f340ecdc98
parent 196d4123245789dc52347faaba8ac5ba3bedd1dd
Author: minerva-jupiter <ryouturn@gmail.com>
Date:   Wed, 17 Jun 2026 22:34:14 +0900

feat: add blog posts and update technical article text

- Add new blog posts: "Inkscapeの背景透過出力でハマった話" and "Next(TypeScript) + WASM(Rust) + Vite をお試し".
- Polish tone and refine phrasing in "creating_a_clap_plugin_through_simulation.md" for better readability.

Diffstat:
Apublic/21e86880d99d77a00dfb.md | 26++++++++++++++++++++++++++
Apublic/71c15a4c9b97dd413d9d.md | 35+++++++++++++++++++++++++++++++++++
Mpublic/creating_a_clap_plugin_through_simulation.md | 28++++++++++++++--------------
3 files changed, 75 insertions(+), 14 deletions(-)

diff --git a/public/21e86880d99d77a00dfb.md b/public/21e86880d99d77a00dfb.md @@ -0,0 +1,26 @@ +--- +title: Inkscapeの背景透過出力でハマった話 +tags: + - Inkscape + - 背景透過 +private: false +updated_at: '2026-06-17T07:15:20+09:00' +id: 21e86880d99d77a00dfb +organization_url_name: null +slide: false +ignorePublish: false +--- +Inkscapeで背景透過pngを出力しようとした時にはまった話です. +# 想定読者 +- Inkscapeで適当に画像を作ったり切り抜いたりして,使いこなし始めたひと +# 状況 +アイコン(512x510px)のプロパティで取得しようとしてドキュメントを生成しました. +画像ができたと思って出力しようと思ったんですね.透過画像に対応しているからpngでいいかな?と思って,ファイルに書き出したんですけど,どうにも背景に真っ白が入ってて,困惑致しました. +# 原因 +- 出力のビット深度の設定がRGB16になっていたから +## 原因の判明の経緯 +最初、pngがだめなのかな?と思ってsvgにしたりしたんですけどsvgだと納品先がダメだったので,pngと格闘してました.いろいろネット調べてみると,背景色が未指定の場合にドキュメントの背景色になってしまうらしく,ドキュメントの背景色という設定を探したのですけど,ドキュメントのプロパティのウィンドウにそれらしき設定項目がなくて,情報が古かったんですね. +ということで、いろいろ右往左往して,また、エクスポートタブの中の背景色設定をいろいろいじってたりしても改善せず,悩んでおりました. +そしたら,エクスポートボタンの近くにギアみたいな設定ボタンがあることに気が付きまして,それを押してみたらビンゴ. +出力する際のビット深度がRGB16になっていたので,RGB"A"16になおして出力したら,無事に背景が透過された画像が出力されました. +古い情報に踊らされて,そんな設定ないけどなぁとか右往左往してたので,これ以上,古い情報にあたまごっちゃになる人が発生しないように書き留めときます. diff --git a/public/71c15a4c9b97dd413d9d.md b/public/71c15a4c9b97dd413d9d.md @@ -0,0 +1,35 @@ +--- +title: Next(TypeScript) + WASM(Rust) + Vite をお試し +tags: + - Rust + - Next.js + - wasm +private: false +updated_at: '2026-06-17T07:15:19+09:00' +id: 71c15a4c9b97dd413d9d +organization_url_name: null +slide: false +ignorePublish: false +--- +# はじめに +最近何かと話題のRustをWebで使う手法として、WASMというものを知りました。 +正確にはWASMはブラウザで実行されるバイナリファイルであり、その規格でありますが、RustをそちらにコンパイルしてWeb側(Next.js)から呼び出せるようにしてみたいと思います。 +Rustでフロントをいじるactix-webのようなものとは違うという趣旨だけ、ご了承ください。 + +# 下準備 +PCを初期化したばかりだったので、いくつか入っていないツールがありました。入れときます。 +`winget install Oven-sh.bun` +またnode.jsを入れておきましょう(わたしはこれは入ってた) +WASMをRustで書くためにはRustのパッケージマネージャーとしてcargoやその他ツールチェーンを入れます。 +公式ページからインストールスクリプトを取ってきます。 +クイックインストール(Visual Studio経由)でやろうとするとWindows11 SDKを入れられそうだったので、マニュアルインストールにしました。Ubuntuに入れたときみたいな入り方で安心しました。 +ですが、次の手順にてエラーが出たので追加のダウンロードをしました。Visual Studio Build Toolsです。`C++デスクトップ開発`にチェックを入れて入れます。 +あとは`cargo install wasm-pack`もしてWASMに関係するツールも入れておきます。 +# init +## リポジトリ作成 +`npx create-next-app@latest` +を実行します。私はTypeScriptが好きなのでTypeScriptを選択します。 +また、見た目を工夫するような余力はないので余裕があればBootStrapでも導入しようかなと思っています。 +## Rust系のインストール +WASM系のものを作るコマンド`cargo new --lib wasm` +ビルドは`wasm-pack build --target web` diff --git a/public/creating_a_clap_plugin_through_simulation.md b/public/creating_a_clap_plugin_through_simulation.md @@ -72,14 +72,14 @@ where, $$A = \left( \frac{2\rho L}{T} \right)$$ $$C[n-1] = \left[ P[n] + P[n-1] + \frac{2\rho L}{T} v_f[n-1] - B[n-1] v_f[n-1]^2 \right]$$ -となる。 +となります。 ところでリードに空気からかかる力を $$f[n] = \pm \frac{1}{2} \rho v_f[n]^2 g[n]$$ ($\pm$が正のときリード(サクソフォン等)のモデル、負のときリップリード(トランペット等)) -と考える。 +と考えます。 最初に示した @@ -92,16 +92,16 @@ $$x[n] = \frac{b_0 f[n] + b_1 f[n-1] + b_2 f[n-2] - a_1 x[n-1] - a_2 x[n-2]}{a_0 where, $b_0 = T^2, \quad b_1 = 2T^2, \quad b_2 = T^2$$a_0 = 4m + 2rT + kT^2$$a_1 = -8m + 2kT^2$$a_2 = 4m - 2rT + kT^2$ -となる(一次双変換の過程はリポジトリのReadmeのTL;DR Derivation of the simulation formulaセクションに掲載)。 +となります(一次双変換の過程はリポジトリのReadmeのTL;DR Derivation of the simulation formulaセクションに掲載)。 -これで、$x[n]$がnステップ目の位置を表す関数として記述することができた。 +これで、$x[n]$がnステップ目の位置を表す関数として記述することができました。 ## 共鳴部の実装 -筒の剛性や、空気の密度関数から気柱による音波の反射をシミュレートすることも考えたが発振よりも膨大になってしまうため、断念した。 -音波の距離によって遅れる反射は認めるものとして、反射によるエネルギー減衰のモデルを考えることで倍音の高音成分がなくなるシミュレートを実装した。 +筒の剛性や、空気の密度関数から気柱による音波の反射をシミュレートすることも考えたが発振よりも膨大になってしまうため、断念しました。 +音波の距離によって遅れる反射は認めるものとして、反射によるエネルギー減衰のモデルを考えることで倍音の高音成分がなくなるシミュレートを実装します。 -管に与えられる圧力を$p_total$、管の断面積をS、空気の粒子速度を$v$として、これをv|v|に比例する抵抗を受ける有効音響質量M_eとすると、$r_{loss}$を用いて +管に与えられる圧力を$p_{total}$、管の断面積をS、空気の粒子速度を$v$として、これをv|v|に比例する抵抗を受ける有効音響質量M_eとすると、$r_{loss}$を用いて $$S \cdot p_{total}(t) = M_e \frac{dv(t)}{dt} + r_{loss} v(t) |v(t)|$$ @@ -109,7 +109,7 @@ $$S \cdot p_{total}(t) = M_e \frac{dv(t)}{dt} + r_{loss} v(t) |v(t)|$$ - $r_{loss} = \frac{1}{2} \rho_0 S$ - $\rho_0$ -のように書ける。 +のように書けます。 また、$p_{total}(t)$は、入射波を$p^+(t)$、反射波を$p^-(t)$とすると @@ -119,7 +119,7 @@ $$p_{total}(t) = p^+(t) + p^-(t)$$ $$v(t) = \frac{1}{Z_0} \left( p^+(t) - p^-(t) \right)$$ -と書くことができる。これを用いて$p^-(t)$は +と書くことができます。これを用いて$p^-(t)$は $$p^-(t) = p_{total}(t) - p^+(t)$$ @@ -127,7 +127,7 @@ $$p^-(t) = p_{total}(t) - p^+(t)$$ $$p_{total}(t) = 2p^+(t) - Z_0 v(t)$$ -が得られる。これを$T$をサンプリング周期として双一次変換する。 +が得られます。これを$T$をサンプリング周期として双一次変換します。 $$S \left( 2p^+[n] - Z_0 v[n] \right) = M_e \left( \frac{v[n] - v[n-1]}{T} \right) + r_{loss} v[n] |v[n]|$$ @@ -146,7 +146,7 @@ C_{bc}[n] &= 2S p^+[n] + \frac{M_e}{T} v[n-1] $$p^-[n] = p^+[n] - Z_0 v[n]$$ -に代入することで、波の反射を書くことができる。 -v[n]=0として反射波の位相を逆位相から同位相に切り替えると固定端反射を実現できそうなものだが、よく考えればv[n]=0なら減衰が起こらないので、このモデルを考えること自体が無意味になる。 -ここらへんの代わりの実装が私には思いつかなかった(元の発想はエネルギーを0より大きく1より小さい定数をかけて減衰させるようなモデルを考えれば高周波の音からの減衰を再現できるのではないかというもの)ので、実装は開口端についてのみになっている。 -元も子もない話をしてしまうと、ローパスフィルターを書けてしまえばそれで終わりなのだけど、それだとあまりにも面白くない。 +に代入することで、波の反射を書くことができます。 +v[n]=0として反射波の位相を逆位相から同位相に切り替えると固定端反射を実現できそうなものだが、よく考えればv[n]=0なら減衰が起こらないので、このモデルを考えること自体が無意味になことはすぐにわかります。 +ここらへんの代わりの実装が私には思いつかなかった(元の発想はエネルギーを0より大きく1より小さい定数をかけて減衰させるようなモデルを考えれば高周波の音からの減衰を再現できるのではないかというもの)ので、実装は開口端についてのみを行っています。 +元も子もない話をしてしまうと、ローパスフィルターを書けてしまえばそれで終わりなのだけど、それだとあまりにも面白くないと思っています。