2020-02-16

canvas で画像の円形な一部分を回してみた

Canvas HTML5 JavaScript

エフェクターの改造とかやってみています。
つまみグリグリしながらオリジナルと比較動画とかやりたいんですけど、
一枚撮った画像でグリグリ回せれば？と思ってしまったので作ってみました。
これ自体はソフトでやればってものですが、この先にもっとやりたいことがある！！
↓ Drop files here に画像ファイルを Drag and Drop してみてください ↓
↓ 画像の下にずれていった窓たちで操作できます説明は下にて ↓

Drop files here

水平垂直 (画像上でクリックすると値が入ります)
半径 (回す)角度を入れて [処理] ボタン押すと回るはずです
複数回せるので、回すやつを選ぶのが "対象" です回すやつは"clip"と呼びます
別の "対象" にかつて設定した値 = [現状] を [現状] ボタンで復帰できます
その回すやつ "clip" を [clip追加] で追加できます
そして [exportPNG] で PNG がダウンロードできるはずです

[参考文献]

Javascriptでcanvas画像を回転させる

HTML5のCanvasで画像をパス（丸）でマスクする

canvasでクリックされた位置の座標を取得・表示する

JavaScriptでselect要素にoptionを追加する方法を現役エンジニアが解説【初心者向け】

Canvas.toDataURL() - キャンパスをデータURIに変換する

Exporting to image #989

html5において、複数のcanvasでレイヤーを作っていて、一枚の画像に書き出したいの...

2020-01-19

VRM を読み込んで ~ zangyouをチョップさせてみた ~ Leap Motion ~ pixiv three-vrm で作り直し編

HTML5 JavaScript Leap Motion Three.js VRM

VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、「VRM を読み込んで ~ zangyouをチョップさせてみた ~ Leap Motion編」を、『pixiv three-vrm』で作り直しましたです。VRMは、VRoid StudioやUnityのバージョンとかで、読めたり読めなかったりが結構激しい悪寒。

Drop files here

チョップ

LeapMotion

手の真ん中の座標 :

動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 と 0.7.5 で自作したモデル。Mac の Chrome でだけ。
『pixiv three-vrm』だと読めるモデルが多かったりするんでしょうか？多いといいなぁ...。
あ、こっちだと袖が揺れますね！素敵！

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

[参考文献]

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

[追記 2020/03/21]

pixivのGitHubにいらっしゃる three-vrm-girl.vrmっていうデモな3Dモデルさんを、 [testModel] ボタンでご召喚できるようにしました。

2020-01-15

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

Canvas VRM Three.js JavaScript 信号処理 / Signal Processing Leap Motion

VRM - VR向け3Dアバターフォーマット - を読み込んでみます。
VRMのページ : https://vrm.dev/
今回は zangyou をチョップの、Leap Motion 版です！
VTuber界隈ではLuppet さんで有名な、ハンドトラッキングできるデバイスです。

チョップの仕方です。
Leap Motion 正面からの距離でチョップです。私が今、Leap Motion 正面を上むきにしているからですね。
Leap Motion に近いほど、アバターさんの右手が下がります。

Drop files here

LeapMotion

手の真ん中の座標 :

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

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

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

Leap Motion部分は、公式サンプルからほとんどそのまま持ってきただけです。
ジェスチャーとかやれるんで、使っていきたいです。
ちょっと気になるのが、ライブラリが公式からだと安定して取得できなかったこと。更新作業中だったりしたのでしょうか？
しょうがないので、別のところから取得しています。

[参考文献]

https://developer-archive.leapmotion.com/documentation/javascript/devguide/Sample_Tutorial.html

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

2019-12-23

Simutrans 2019年の取り組み

Simutrans Advent Calendar Simutrans

本記事は、Simutrans Advent Calendar 2019 〜 12/23 本家フォーラムに投げてみてです

Simutrans っていう、最高なフリーでオープンソースな交通シミュレーション
それについての、2019年の私のたぶん独自な取り組みについて書きます
今年は1イシュー、本家フォーラムに投げてみての雑感です

[統合された本体改造]
・MUSIC LOADING FROM THE PAK DIRECTORY
・Auto UnderGround Mode follow convoi
・REFACTORING OF DISPLAY SETTINGS DIALOG CLASS
・Extend "Waiting For Clearance" Tooltip
・Extend TOOL_CHANGE_GAME_SPEED, logarithmic control mode
・他不具合修正数件
意外と採用してもらえました。

[本体統合されてみてわかったこと]
・どうでもいいちょい足しは、価値を理解してもらえなくても入れてくれる
・反応が全くなくても、気がついたら入れてくれてる
・指摘された仕様変更やコーディングの修正は提案した人がやろう
・大きい独自機能 ... を入れやすくする準備のコーディング改善策は入れてくれる
・Google 翻訳でもなんとかなる
・本家フォーラムを勝手に想像していたよりも、ずっと親切でチャーミングだった

[宣伝 ~ MUSIC LOADING FROM THE PAK DIRECTORY]
pak専用 musicフォルダ拡張です。
pakフォルダに musicフォルダがあると、そのpakのマップではその music を読み込みます。

アドイン職人と楽曲製作者とが組んで、もっと独自の世界観を一緒に作り上げて楽しんで貰えたら嬉しいです。

これはやはり、ﾄﾏｿﾝがきっかけです。

思ったより面白がってもらえなかったんですね。アレはアレで、simutransのプレイの難しいところも愛そうじゃないか！っていう、大真面目なところもあったんですけれども。
その後、何曲か作ったんのですが、日本フォーラムでのウケも悪いので、もう出すのはやめたい。でも、曲はできる。できたら出したい。で、こんな改造を思いついたわけです。

[本家統合を目指す本体改造者へのエール]
これはどうしても私の性格に寄るところです。
思うに、相手のプレイスタイルを変えない程度の小さい機能に小分けして、徐々に提案していくのがいいと思います。加えて、如何にその変更の利益が皆にあるか、恒久的に本家そしてsimutransを高めるかを、誇張してでもでっち上げて訴えかけてみてください。

1つ例にとります。
・REFACTORING OF DISPLAY SETTINGS DIALOG CLASS
この本体改造は、UI上やプレイ上の変更は一切ありません。いいえ、メモリ使用量がちょっと減ります。これが本体への恒久的な貢献。それ以上の本音は、本家統合を諦めた独自UIのメンテナンス性の改善です。こういう手もあるわけです。

[さいごに]
Simutrans に限らず趣味、もしかしたら仕事や生活ですら、自由を脅かすのは家族・親族です。そして、なによりも自分の健康・意欲です。さあ、乱開発しましょう！

2019-12-17

2本の直線セグメントを2次Bezierで繋いでみる ~ ただしJSON手書き

JavaScript HTML5 Canvas

2本の直線セグメントを2次Bezierで繋いでみます。
制御点は2つの直線セグメントがそれぞれのる2つの直線の交点としています。
2本の直線セグメントを１セット（セグメント対）として、任意個数のセグメント対を配列として、JSONで手書きできます。
とりあえず JSON - 例 [1], [2] あたりを [描画] していただいて、数値を変えてみてください。
(元気なら、もっと直感的に操作できるものを canvas の練習で作りたいので、これについての説明はエコで。ごめんなさい。)

JSON - 例

<経緯>

↓ 路線図メーカーっていうのがあります。
↓ (便利そうかもと思いつつ、私はまだ使ったことがないのですが。ごめんなさい。)

これの開発関連で、
・2本の直線セグメント (離れた位置で直角) を滑らかに繋ぐ
・平行して複数本あっても繋いでいる間もぶつからない、変に間が開かない
・直線セグメントと曲線は滑らかに行き来
... みたいなお題が出てて、楕円弧で繋ぐんだそうだ。
なんとなく、狭い私だと、Bezierで良いんじゃないかと思えた。
やってみないことにはイメージもつかなかったので、やってみた。
... というわけです。
少なくとも JavaScript の canvas は任意次数のBezier を各関数が用意されてるっぽいので、このサンプルでは簡単でした。
他の言語でも Bezier はあるんじゃないかなぁ。
そもそもどうなんでしょうね、Bezier じゃまずいケースがあるんでしょうか？

[参考文献]

【JavaScript】canvas にベジェ曲線を描画する

JavaScript テキストエリアの値を取得/設定するサンプル | ITSakura

【JavaScript】配列←→JSON文字列に変換する方法 – 株式会社シーポイントラボ｜浜松のシステム開発会社

HTML5 Canvas の描画領域全体をクリアする | まくまくJavaScriptノート

ウィンドウサイズに応じて HTML5 Canvas のサイズを変更する | まくまくJavaScriptノート

空白文字列を削除する方法