Canvas
画像ファイルの一部をモザイクするのを作ってみた。 自作の音楽作品のジャケットのタイトル部分をモザイクさせたく、しかも二桁枚数の同じ場所を。地味に面倒なので、Webアプリ作りの練習ネタに。 mozSiz : モザイクのサイズ, mozPos : モザイクの四角の左上…
VRM - VR向け3Dアバターフォーマット - を読み込みます。今回は、zangyou以外もチョップできるようにしてみました。といっても英文字だけです。フォントの都合です。こまった。 直接関係ないやつ(site表示,PNG書出,zangyou,チョップ,腕あたりの関節の角度を…
VRM - VR向け3Dアバターフォーマット - を読み込みます。今回は、ギターを弾いた振りします、右手だけ、がしょがしょと。 上の方の [Select or Drop files here] にVRMを入れると、ギターを構えてる風の両腕になるはずです。pixivのGitHubに three-vrm-girl.…
VRM - VR向け3Dアバターフォーマット - を読み込みます。今回は、ギターをぐるぐるします。下の方の [Select or Drop files here] に画像を入れると、ギターっぽく斜めに出します。これを [ぐるぐる] のスライダーでぐるぐるできます。 直接関係ないやつ(sit…
VRM - VR向け3Dアバターフォーマット - を読み込みます。今回は、さまざまなアイコンがくるくるするサンプルコンテンツに放り込んでみた ... やつを改造して、 がくるくるするように改造してみました。Happy Halloween VRMを [Drop VRM files here] すると…
VRM - VR向け3Dアバターフォーマット - を読み込みます。今回は、Glitchしてみました。といってもオリジナルでなく、3Dやる Three.js さんのサンプルにあったやつを載せただけですが。 直接関係ないやつ(site表示,PNG書出,zangyou,チョップ)は過去の残しっぱ…
VRM - VR向け3Dアバターフォーマット - を読み込みます。今回は、ギターをチョップします。下の方の [Select or Drop files here] に画像を入れると、ギターっぽく斜めに出します。これを [チョップ] のスライダーでチョップしましょう。 直接関係ないやつ(s…
VRM - VR向け3Dアバターフォーマット - を読み込みます。今回は、腕あたりの関節の角度を数値指定してみます。 直接関係ないやつ(site表示,PNG書出,zangyou,チョップ)は過去の残しっぱなし。 VRMを [Select or Drop files here] すると、zangyou をチョップ…
VRM - VR向け3Dアバターフォーマット - を読み込みます。今回は、動画で書き出してみました。Googleさんが流行らそうとしているらしいWebMへは簡単に出せました。しかし、WebMは不便です。YouTubeには上げられてもTwitterには上げられず、QuickTimeだと再生/…
VRM - VR向け3Dアバターフォーマット - を読み込みます。今回は、さまざまなアイコンがくるくるするサンプルコンテンツに放り込んでみました。これまでは zangyou だけだった訳ですが、それは絵文字は愚かひらがなすら出せなかったんです、フォントの都合で…
VRM - VR向け3Dアバターフォーマット - を読み込みます。今回は、背景にどこぞのsiteを表示させてみました。とりあえず、CC(クリエイティブ・コモンズ)らしいNASAの地球を持ってきてみました。Space Cats ならぬ Space zangyou です。 VRMを [Drop VRM files…
VRM - VR向け3Dアバターフォーマット - を読み込みます。今回は、背景透過PNGで書き出してみました。ライブラリは『pixiv three-vrm』です。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいます。なので [testModel] ボタンで…
エフェクターの改造とかやってみています。つまみグリグリしながらオリジナルと比較動画とかやりたいんですけど、一枚撮った画像でグリグリ回せれば?と思ってしまったので作ってみました。これ自体はソフトでやればってものですが、この先にもっとやりたい…
VRM - VR向け3Dアバターフォーマット - を読み込んでみます。VRMのページ : https://vrm.dev/今回は zangyou をチョップ の、Leap Motion 版です!VTuber界隈ではLuppet さんで有名な、ハンドトラッキングできるデバイスです。 チョップの仕方です。Leap Mot…
2本の直線セグメントを2次Bezierで繋いでみます。制御点は2つの直線セグメントがそれぞれのる2つの直線の交点としています。2本の直線セグメントを1セット(セグメント対)として、任意個数のセグメント対を配列として、JSONで手書きできます。とりあえず J…
音をアップロードしようとすると、画像ファイルが必要になることがあります。とりあえず作品名の文字が入っただけのものだけでも、手軽に欲しいものです。地味に面倒です。ということで、作りました。 text font // psd で使っていた Century っていうフォン…
音をアップロードしようとすると、画像ファイルが必要になることがあります。しかもサイズ規定があったりします。複数のサイトにアップロードしようとすると、サイト間の仕様差があったりします。地味に面倒です。↓ ドロップ ↓ したら、ありがちなサイズで表…
VRM - VR向け3Dアバターフォーマット - を読み込んでみます。VRMのページ : https://vrm.dev/今回は zangyou をチョップです。フォントは helvetiker 。Helvetica じゃないの?と思いつつ、threejs搭載のTextGeometryを使ってみました。 音量部分はいつぞや…
VRM - VR向け3Dアバターフォーマット - を読み込んでみます。VRMのページ : https://vrm.dev/今回は 音量に合わせてチョップです。 音量部分はいつぞやのWebAudioAPIのサンプルからコピペ、無駄にミキシング & 1 kHz に反応です。もっとミニマムなサンプルも…
VRM - VR向け3Dアバターフォーマット - を読み込んでみます。VRMのページ : https://vrm.dev/今回は Three.js で表示するところまで。 Drop files here // ' + strVRMmeta + ''; var strConfirm = 'モデルの利用規約をご確認の上でのご活用をお願いいたしま…
VRM - VR向け3Dアバターフォーマット - を読み込んでみます。VRMのページ : https://vrm.dev/ざっくり、glTF2.0ベースで人体モデル + ライセンスデータ (meta情報?) らしい。とりあえず。今回は meta 情報が取得できました。Three.js で表示するところまでい…
"簡単なThree.jsのサンプルを試そう" してみました。 そのままなのもなんなので、回転をちょっとランダムにしてみました。楽しい。 // はてなブログだと意味がなさそうなので、コメントアウト //window.addEventListener('resize', onResize); function onRe…
xRしたい! VTuberしたい! ということで、A-Frame。 VTuberするのにアバターの必要性を感じなくなってきたので、A-Frame であれこれやってみています。今回はとりあえず Web_Audio_API と繋いでみました。File0とFile1に音楽データがセットできて、両方にセ…
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 を使用した 音声を埋もれさせない音信号混合法の簡易実装 です。 WAV+WAV or WAV+マイク を、WAVに書き出します。マイクはFirefoxのみ。 前回からの進展として、"音声を埋もれさせない音信号混…
Web Audio API をはてなブログに埋め込むテスト WAV+WAV or WAV+マイク を、WAVに書き出します。マイクはFirefoxのみ。 前回からの進展として、スペクトログラムを加工しました。 スペクトルは ↓こちら↓ を元に作理ました。 Web Audio API 解説 - 12.アナラ…
Web Audio API をはてなブログに埋め込むテスト WAV+WAV or WAV+マイク を、WAVに書き出します。マイクはFirefoxのみ。 前回からの進展として、スペクトログラムを追加しました。 ↓こちら↓ を元に、1 kHz と 4 kHz ? あたりに線を入れてみたりしました。 Web…
<概要> Canvasの練習です.前回、"Canvasで、任意長の配列で折れ線を描いてみる"してみました.次は、軸を描いてみて、グラフにしたいと思ったわけです.そういえば、ライブラリが無いわけがないと思いまして、探して使ってみました. 今回使ってみたのは、次の2…
<概要>Canvasの練習です.任意長の配列で折れ線を描く.これを関数したら楽にならないかな、と思っている次第であるためです. やってみた事は単純です. 1.座標点の配列を定義 2.配列の各点を、canvasの折れ線の終点として次々に設定 : context.lineTo 3.ついで…
はてなブログにできるだけ写真を投稿したくない!容量が気になるから. でも、図やグラフを貼り付けたい!わかりやすいし、格好いいから. この相反する気持ちの矛先として、Canvasに目をつけたわけです. とりあえず最近のマイブーム、Diode clipperを描いてみ…