shingoushori's dialy

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

Canvas

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

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

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

VRM - VR向け3Dアバターフォーマット - を読み込んでみます。VRMのページ : https://vrm.dev/今回は 音量に合わせてチョップです。 音量部分はいつぞやのWebAudioAPIのサンプルからコピペ、無駄にミキシング & 1 kHz に反応です。もっとミニマムなサンプルも…

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

VRM - VR向け3Dアバターフォーマット - を読み込んでみます。VRMのページ : https://vrm.dev/今回は Three.js で表示するところまで。 Drop files here // ' + strVRMmeta + ''; var strConfirm = 'モデルの利用規約をご確認の上でのご活用をお願いいたしま…

VRM を読み込んでみた ~ meta 情報の取得

VRM - VR向け3Dアバターフォーマット - を読み込んでみます。VRMのページ : https://vrm.dev/ざっくり、glTF2.0ベースで人体モデル + ライセンスデータ (meta情報?) らしい。とりあえず。今回は meta 情報が取得できました。Three.js で表示するところまでい…

"簡単なThree.jsのサンプルを試そう" してみた

"簡単なThree.jsのサンプルを試そう" してみました。 そのままなのもなんなので、回転をちょっとランダムにしてみました。楽しい。 // はてなブログだと意味がなさそうなので、コメントアウト //window.addEventListener('resize', onResize); function onRe…

A-Frame + Web Audio API で ランダムに箱がでるプレイヤー/ミキサーのテスト

xRしたい! VTuberしたい! ということで、A-Frame。 VTuberするのにアバターの必要性を感じなくなってきたので、A-Frame であれこれやってみています。今回はとりあえず Web_Audio_API と繋いでみました。File0とFile1に音楽データがセットできて、両方にセ…

A-Frame を埋め込んでみるテスト

xRしたい! VTuberしたい! ということで、A-Frame 。 まず、A-Frame を埋め込んでみるテスト。A-Frame も今 (2019/05) や0.9.0。ほう? div a-frame A-Frameのページにあるイントロダクションのサンプルを埋め込んでみた。簡単。 いいえ、A-Frameのサンプル…

Web Audio API を使用した音声を埋もれさせない音信号混合法の簡易実装

Web Audio API をはてなブログに埋め込むテスト Web Audio API を使用した 音声を埋もれさせない音信号混合法の簡易実装 です。 WAV+WAV or WAV+マイク を、WAVに書き出します。マイクはFirefoxのみ。 前回からの進展として、"音声を埋もれさせない音信号混…

Web Audio API で内蔵マイクで録音+ミキシングに、大事そうな周波数帯域推定を追加

Web Audio API をはてなブログに埋め込むテスト WAV+WAV or WAV+マイク を、WAVに書き出します。マイクはFirefoxのみ。 前回からの進展として、スペクトログラムを加工しました。 スペクトルは ↓こちら↓ を元に作理ました。 Web Audio API 解説 - 12.アナラ…

Web Audio API で内蔵マイクで録音+ミキシングに、スペクトログラムを追加

Web Audio API をはてなブログに埋め込むテスト WAV+WAV or WAV+マイク を、WAVに書き出します。マイクはFirefoxのみ。 前回からの進展として、スペクトログラムを追加しました。 ↓こちら↓ を元に、1 kHz と 4 kHz ? あたりに線を入れてみたりしました。 Web…

Canvas関係のグラフを描くライブラリを使ってみた

<概要> Canvasの練習です.前回、"Canvasで、任意長の配列で折れ線を描いてみる"してみました.次は、軸を描いてみて、グラフにしたいと思ったわけです.そういえば、ライブラリが無いわけがないと思いまして、探して使ってみました. 今回使ってみたのは、次の2…

Canvasで、任意長の配列で折れ線を描いてみるテスト

<概要>Canvasの練習です.任意長の配列で折れ線を描く.これを関数したら楽にならないかな、と思っている次第であるためです. やってみた事は単純です. 1.座標点の配列を定義 2.配列の各点を、canvasの折れ線の終点として次々に設定 : context.lineTo 3.ついで…

Canvasで、はてなブログに回路図を直接描いてみるテスト(Diode Clipping)

はてなブログにできるだけ写真を投稿したくない!容量が気になるから. でも、図やグラフを貼り付けたい!わかりやすいし、格好いいから. この相反する気持ちの矛先として、Canvasに目をつけたわけです. とりあえず最近のマイブーム、Diode clipperを描いてみ…