画像ファイルの一部をモザイクするのを作ってみた
画像ファイルの一部をモザイクするのを作ってみた。
自作の音楽作品のジャケットのタイトル部分をモザイクさせたく、
しかも二桁枚数の同じ場所を。
地味に面倒なので、Webアプリ作りの練習ネタに。
mozSiz : モザイクのサイズ, mozPos : モザイクの四角の左上のピクセルを json 形式で指定。ただし、やりたいことの都合、横方向 dx はセンターラインからの差分で指定。
画像ファイルを ↓ ドロップ ↓ したら、下に出てくるはず。
or Drop files here
モザイクは対象領域の画素値の平均値をとるのが普通そうな気がしましたが、演算が面倒なので、下記参考文献と同じく左上の画素値を採用しちゃいました。この辺、凝ろうとすればいくらでも沼れます。隣接が別の色になるように、とか。
<参考文献>
HTML Canvasを利用して 画像のモザイク処理をする (JavaScript プログラミング)
JavaScriptで画像をリサイズする方法（canvas）
JSON.parse()
VRM を読み込んで ~ 英文をチョップできるようにしてみた
VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、zangyou以外もチョップできるようにしてみました。
といっても英文字だけです。フォントの都合です。こまった。
直接関係ないやつ(site表示,PNG書出,zangyou,チョップ,腕あたりの関節の角度を数値指定,Glitch)は過去の残しっぱなし。
VRMを [Select or Drop files here] すると、zangyou をチョップする感じで読み込まれるはずです。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。
後ろのsiteがどんなurlにまで対応しているかは謎です。そのsiteを用いる上での権利やセキュリティについては、このコンテンツでは全く処理していません。このコンテンツを利用したことによるいかなる責任も負いません。自己責任でお願いします。
zangyouのテキストボックスの英文を変えて、changeZangyouボタンを押してみてください。zangyouがchangeするはずです。
or Drop files here
RightShoulder
RightUpperArm
RightLowerArm
RightHand
LeftShoulder
LeftUpperArm
LeftLowerArm
LeftHand
さて日本語文字列、Unicodeもチョップしたいですね。フォントがあればいいのだけれども。
それより、背景をサイトじゃなくて画像・動画にしたいところです。
[参考文献]
@pixiv/three-vrm three-vrm-girl.vrm
examples of @pixiv/three-vrm blendshapes.html Control facial expression using blend shapes
https://github.com/pixiv/three-vrm
VRM を読み込んで ~ ギターの画像入れて弾いてる振り右手だけ
VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、ギターを弾いた振りします、右手だけ、がしょがしょと。
上の方の [Select or Drop files here] にVRMを入れると、ギターを構えてる風の両腕になるはずです。
pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。
[チョップ] のスライダーで右手でがしょがしょできます。
下の方の [Select or Drop files here] に画像を入れると、ギターっぽく斜めに出します。
これを [ぐるぐる] のスライダーでぐるぐるできます。
たくさん並んでるテキストボックスで、両腕の関節の角度を調整できます。
いい数値が見つかったら教えてください。
[Select or Drop files here] しても動作しない場合は、ページを再読み込みすると次は動作するかもしれません。
直接関係ないやつ(site表示,PNG書出,zangyou,チョップ)は過去の残しっぱなし。
後ろのsiteがどんなurlにまで対応しているかは謎です。そのsiteを用いる上での権利やセキュリティについては、このコンテンツでは全く処理していません。このコンテンツを利用したことによるいかなる責任も負いません。自己責任でお願いします。
or Drop files here
RightShoulder
RightUpperArm
RightLowerArm
RightHand
LeftShoulder
LeftUpperArm
LeftLowerArm
LeftHand
ぐるぐる
or Drop files here
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 / 0.7.5 / 0.8.0 で自作したモデル。Mac の Chrome でだけ。
ギターを弾くようなモーションを作ろうとしてます。
それっぽい動きを作り込むのは大変なので、右手だけ。2020年8月にできていたやつを、やっととりあえず出します。
音から自動で動かそうとも考えていて、先は長い。
ライブラリは『pixiv three-vrm』です。
バージョン 0.6.3 の cdn : @pixiv/three-vrm CDN by jsDelivr - A CDN for npm and GitHub を使っています。
モデル使用に関する免責事項のお手本は、 https://facevtuber.com/ さん。
[参考文献]
@pixiv/three-vrm three-vrm-girl.vrm
examples of @pixiv/three-vrm blendshapes.html Control facial expression using blend shapes
https://github.com/pixiv/three-vrm
Three JS:Geometryでオリジナルの形状を作ってみる
立方体の各面にテクスチャを貼る - three.js アプリ
デザイナーでもできる。three.jsでwebGL 第2回「テクスチャー」
Three.js の球体のテクスチャに透過部分のある画像を使って表示
VRM を読み込んで ~ ギターの画像入れてぐるぐるしよう
VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、ギターをぐるぐるします。
下の方の [Select or Drop files here] に画像を入れると、ギターっぽく斜めに出します。
これを [ぐるぐる] のスライダーでぐるぐるできます。
直接関係ないやつ(site表示,PNG書出,zangyou,チョップ)は過去の残しっぱなし。
Glitchは, むしろやりたかったこと。画像にglitchかけたかったのが本当のところ。
VRMを [Select or Drop files here] すると、zangyou をチョップする感じで読み込まれるはずです。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。
後ろのsiteがどんなurlにまで対応しているかは謎です。そのsiteを用いる上での権利やセキュリティについては、このコンテンツでは全く処理していません。このコンテンツを利用したことによるいかなる責任も負いません。自己責任でお願いします。
or Drop files here
チョップ
ぐるぐる
or Drop files here
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 / 0.7.5 / 0.8.0 で自作したモデル。Mac の Chrome でだけ。
ギターを弾くようなモーションを作ろうとしてます。
それっぽくするのにすぐできなさそうだったので、とりあえずチョップです。
座標系や回転軸を見えるようにしないときついです。
ますます既存ツールで良いような。
ライブラリは『pixiv three-vrm』です。
モデル使用に関する免責事項のお手本は、 https://facevtuber.com/ さん。
[参考文献]
@pixiv/three-vrm three-vrm-girl.vrm
examples of @pixiv/three-vrm blendshapes.html Control facial expression using blend shapes
https://github.com/pixiv/three-vrm
Three JS:Geometryでオリジナルの形状を作ってみる
立方体の各面にテクスチャを貼る - three.js アプリ
デザイナーでもできる。three.jsでwebGL 第2回「テクスチャー」
Three.js の球体のテクスチャに透過部分のある画像を使って表示
three.js examples - postprocessing / glitch
Web Speech API の Speech synthesis を試してみた
試してみたの内容が消えてるので、試して見直し。
Web Speech API の Speech synthesis を試してみた - shingoushori's dialy
せっかくなので、繰り返し再生できるようにしてみました。
[loop]ボタンがonだとループ。
間隔は、スライダーの数値でbmp指定。
ただし、[loop]onの最中には変更が効かないです。
60
<参考文献>
VRM を読み込んで ~ 🎃 がくるくるするようにサンプルコードを改造してみた
VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、さまざまなアイコンがくるくるするサンプルコンテンツに放り込んでみた ...
やつを改造して、🎃 がくるくるするように改造してみました。Happy Halloween 🎃
VRMを [Drop VRM files here] すると、真ん中に放り込めるはずです。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。
Drop files here
チョップ
改造するだけのはずが肝心のvrm読み込みでエラー。pixiv/three-vrmさんの更新で適合するthree.jsのバージョンが上がった事によるものでした。
危ない危ない。
three.jsを 0.106.2 -> 0.120.1 にあげただけで、たぶん問題なし。
他の記事のも更新しないといけない。この辺りのメンテナンス性は改善したいところ。
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 と 0.7.5 で自作したモデル。Mac の Chrome でだけ。
ライブラリは『pixiv three-vrm』です。
モデル使用に関する免責事項のお手本は、 https://facevtuber.com/ さん。
[参考文献]
HTML5 CanvasとWebGLでウェブフォントを扱う方法
@pixiv/three-vrm three-vrm-girl.vrm
examples of @pixiv/three-vrm blendshapes.html Control facial expression using blend shapes
【Nuxt.js】canvasを画像化する際にバックグランドカラーが表示されない【Javascript】
Canvas.toDataURL() - キャンパスをデータURIに変換する
https://github.com/pixiv/three-vrm
VRM を読み込んで ~ Glitch してみた
VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、Glitchしてみました。
といってもオリジナルでなく、3Dやる Three.js さんのサンプルにあったやつを載せただけですが。
直接関係ないやつ(site表示,PNG書出,zangyou,チョップ)は過去の残しっぱなし。
VRMを [Select or Drop files here] すると、zangyou をチョップする感じで読み込まれるはずです。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。
後ろのsiteがどんなurlにまで対応しているかは謎です。そのsiteを用いる上での権利やセキュリティについては、このコンテンツでは全く処理していません。このコンテンツを利用したことによるいかなる責任も負いません。自己責任でお願いします。
or Drop files here
チョップ
Three.js でも canvas に書き出しているので、canvasでglitchする楽しそうな記事を試そうとしました。
しかし、canvasの画素値が取得できず断念。
Three.js だからなような？できそうでできないのが悲しい。
[参考文献]
@pixiv/three-vrm three-vrm-girl.vrm
examples of @pixiv/three-vrm blendshapes.html Control facial expression using blend shapes
https://github.com/pixiv/three-vrm
