shingoushori's dialy

音信号処理を専ら研究していた元博士後期課程の学生によるメモ

真ん中に文字入れただけの画像を作ってみた

音をアップロードしようとすると、画像ファイルが必要になることがあります。
とりあえず作品名の文字が入っただけのものだけでも、手軽に欲しいものです。
地味に面倒です。ということで、作りました。

 

psd で使っていた Century っていうフォントにしようと思ったのですが、
canvas だと 何故か Gothic になってしまったので、serif にしてます。
よくわかりません。

<参考文献>
[69-8] Canvasでテキストを描画しよう
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_font

画像ファイルをありがちなサイズで表示させるのを作ってみた

音をアップロードしようとすると、画像ファイルが必要になることがあります。
しかもサイズ規定があったりします。
複数のサイトにアップロードしようとすると、サイト間の仕様差があったりします。
地味に面倒です。
↓ ドロップ ↓ したら、ありがちなサイズで表示しちゃうのを作りました。

Drop files here

 

1ピクセルごとに画像処理すれば良いのでしょうが、まずはcanvasに任せてみました。
width と height に指定するだけなので、すごい簡単。

<参考文献>
https://teratail.com/questions/102102

ギターで押さえているフレットのMIDIファイルを出力

MIDIファイルをいじるWebコンテンツ on はてなブログ 〜 の検討
今回は、ギターで押さえているフレットのMIDIファイルを出力します。
MIDIファイル生成は、 jazz-softさん作の JZZ.js を使っています。

左側の音名がそのチューニング。右側の数字がフレット番号。[Pick]がOff(白背景)の時は弾かないものとし、MIDIに出力しません。

 

1st
2nd
3rd
4th
5th
6th
 

                                          

 

チューニングに"半音下げ"と"ドロップD+半音下げ"なるものがあるのは、私のギターがそれだからです。楽です、半音下げとドロップD。

入力しやすさを考えるに、ダイアグラムで入力したいところ。今回は、主たるMIDIファイルの出力をまず作りました。cssでこだわる部分は後回し。ここまで作ってみると、やっぱりダイアグラムが欲しい。
試しで音を鳴らしたいところ。

 

<参考文献>

labelにforを使わずに、cssだけでトグルボタンを作る

【HTML】出来るだけ押しやすいチェックボックスを作る|リスティング広告の運用代行ならカルテットコミュニケーションズ

JZZ.js

 

VRM を読み込んで ~ zangyouをチョップさせてみた

VRM - VR向け3Dアバターフォーマット - を読み込んでみます。
VRMのページ : https://vrm.dev/
今回は zangyou をチョップです。
フォントは helvetiker 。Helvetica じゃないの?と思いつつ、threejs搭載のTextGeometryを使ってみました。

音量部分はいつぞやのWebAudioAPIのサンプルからコピペ、無駄にミキシング & 1 ~ 4 kHz に反応です。反応するのはFile0の方だけ。File1は伴奏用ということで。しかし、今回については反応するFile0の方にドラムを入れたほうが楽しそう。

 

 
Drop files here

                                                                                              

File0
File1

 mixing result :                                                                                         

 mixing source0 :                                                                                         
 mixing source1 :                                                                                         

 

Analyser

SmoothingTimeConstant :
MinDecibels :
MaxDecibels :

 

mixed
audio0
audio1

 

動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 で自作したモデル。MacChrome でだけ。
"Three.js での回転" かつ "VRM での関節の回転"はそれぞれ手探り。
相変わらず肘が痛そうな方向に曲がっていそうです。
今回は、zangyouをチョップすべく、腰 ("J_Bip_C_Spine") を軽く曲げさせています。
漢字とか変形とかやってみたい。やれるのかな?

VRM読み込みあたりは、kiruroboさん のサンプルを参考にしています。

モデル使用に関する免責事項のお手本は、https://facevtuber.com/ さん。

 

[参考文献]

https://threejs.org/docs/#api/en/geometries/TextGeometry

 

pixiv three-vrm のサンプルをコピペしてみた

VRM - VR向け3Dアバターフォーマット - を読み込みます。
VRMのページ : https://vrm.dev/
今回は『pixiv three-vrm』です。blendshapesのサンプルをコピペしてみました。

 

 

 
Drop files here

                                                                                    

 

動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 で自作したモデル。MacChrome でだけ。
表情が変わって、スカートが揺れてます。簡単!

これまでやってきたVRMはthree.js自体に組み込まれているらしいものでした。参考のしてきたのはkiruroboさん のサンプル。
blendshapesをいじるのに挑戦していましたが、全然動かせられていませんでした。
pixiv three-vrmはその辺りが揃っていた、サンプルも色々あって、実にありがたいです。

モデル使用に関する免責事項のお手本は、 https://facevtuber.com/ さん。

 

[参考文献]

https://github.com/pixiv/three-vrm

 

VRM を読み込んで ~ 音量に合わせてチョップさせてみた

VRM - VR向け3Dアバターフォーマット - を読み込んでみます。
VRMのページ : https://vrm.dev/
今回は 音量に合わせてチョップです。

音量部分はいつぞやのWebAudioAPIのサンプルからコピペ、無駄にミキシング & 1 kHz に反応です。もっとミニマムなサンプルも用意すべきでした、とても無駄に大きい。反応するのはFile0の方だけ。File1は伴奏用ということで。

 

 
Drop files here

                                                                          

 

File0
File1

 mixing result :                                                                     

 mixing source0 :                                                                     
 mixing source1 :                                                                     

 

Analyser

SmoothingTimeConstant :
MinDecibels :
MaxDecibels :

 

mixed
audio0
audio1

 

動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 で自作したモデル。MacChrome でだけ。
"Three.js での回転" かつ "VRM での関節の回転"がそれぞれ手探り。
肘が痛そうな方向に曲がっていそうです。その辺のコツを早く掴みたいなぁ...。 

動きにアサインする音量に関しても、周波数帯の絞り方、レンジとか、やはり深掘りするべきだなと。音量じゃなくアタック検出にするべきとか、いろいろ。

VRM読み込みあたりは、kiruroboさん のサンプルを参考にしています。

モデル使用に関する免責事項のお手本は、
 https://facevtuber.com/ さん。

 

[参考文献]

 

VRM を読み込んでみた ~ Three.js で表示

VRM - VR向け3Dアバターフォーマット - を読み込んでみます。
VRMのページ : https://vrm.dev/
今回は Three.js で表示するところまで。

 

 
Drop files here

                                                                                                                                                                                                                                                                                                                              

https://vroid.com/ (Mac版) 0.7.2 で自作したモデルでは読めました。
この次は表情...。VRoidでいろいろ表情を作れるのがなかなか楽しいです。
果たして、簡単に自前で動かせるものなのでしょうか、不安です。 

VRM読み込みあたりは、kiruroboさん のサンプルを参考にしています。
canvas上でのマウス操作の回転は、だいぶ自分で書きました。
3Dの回転のUIは、どうも決定打に欠ける感じがします。
2Dのマウスだけでやるのは、そもそも足りなくて当たり前かもしれませんが。

モデル使用に関する免責事項のお手本は、
 https://facevtuber.com/ さん。偉大なる先人、先人は偉大。
( YouTube に動画をあげるときにお世話になっています。ありがたい!)

 

[参考文献]