備忘録:よく知りもしないJavaScriptでライブラリとか作る男の記録
ハッ。と、気づくと去年からブログを更新してない。でもなにもやってなかったわけじゃないので、 Twitterからいくつか拾って備忘録にします。
その2はJavaScript編。
Webでビジュアルプログラミング体験。まほうのハコ
ビジュアルプログラミングとテキストを使った通常のプログラミングの橋渡し的なものがあればと思って、手を出してみました。
試しに作ってみてます。
— n_ryota (@n_ryota) 2016年2月5日
プログラミングをたいけんする「まほうのハコ - P5 Visual Editor - (alpha)」https://t.co/9vBA6GgkEU#p5js #processing #プログラミング
ひらがなだけじゃなくて、わざとコードも載せて、コードを覚えるきっかけ、橋渡しになればいいなと思ったり。https://t.co/9vBA6GgkEU #p5js pic.twitter.com/jZ37Fukj0P
— n_ryota (@n_ryota) 2016年2月5日
mameblock.jsとp5.jsを使って作っています。
まだα版です。
Processing.jsを高速化
最近WebでProcessingといえばp5.jsなことも多いですが、ProcessingのJava的なコードをクラスなどもそのまま動かすならProcessing.jsの方がかなり楽です。ただtint()を使うとかなり遅いです。どのくらい遅いかというとこのくらいです。
それを高速化したのがprocessing.fast.jsです。どのくらい高速化したかというとこのくらいです。
processing.jsのtint()を一定条件のとき高速化したり、blendMode()足したりしたprocessing.fast.jsをGitHubに。https://t.co/37qNUAww1l pic.twitter.com/jeKNDbWSgE
— n_ryota (@n_ryota) 2016年3月4日
fastといっても他のグラフィックス系のJavaScriptライブラリと比べて速いわけじゃないですが、透明度だけ変えるtint()とか、ある画像の色を変えて次回も同じ色を使うときなどは速くなってます。
もともとは以前、パフォーマンス計測でProcessing.jsが異常なレベルで不憫な成績だったのを見かねて高速化したのですが、
それをベースに、色替えしたときもキャッシュしたり、ついでにblendMode()を足したり、スマホ向けにorientation()を足したりもしました。
ベースにしたProcessing.jsは1.4.1です。1.4.3あたりからスマホでのマウス(タッチ)の動作がうまくとれない感じがするので、仕方なく。
WebAudioでMinimっぽく音を再生
Processing 3は公式っぽいSoundのライブラリがあるのですが、使おうとしたらエラーになる時期が続いていた(最新版では治ってるかも?)ので、いまのところMinimを使っています。
で、Minimでplay()とかtrigger()とか使って再生するようなシンプルなプログラムをWebで動かすとき用にp.minim.jsというライブラリを作りました。いまのところ基本的な再生とか位置取得ぐらいの単純機能のみです。
ブラウザでminimのplay()やtrigger()的に音を再生できるp.minim.jsを作ってみた。
— n_ryota (@n_ryota) 2016年3月7日
GitHub https://t.co/X2r9JyjyHJ
サンプル https://t.co/Ryf3zIteQp
WebAudioを使ってます。 #HTML5
p.minim.jsサンプルを修正。iOS / Androidでも動くはず。https://t.co/Ryf3zIteQp
— n_ryota (@n_ryota) 2016年3月8日
(タッチの反応が変なので、一緒に使っていたprocessing.jsを1.4.1にダウングレード) pic.twitter.com/DhYMnpv5UE
WebAudioがiOSで音が歪む(リロードすると正しくなる)現象があったので、こちら(https://t.co/5wSBxiMVSc)を参考に対処してみました。 p.minim.js サンプル→ https://t.co/Ryf3zIteQp
— n_ryota (@n_ryota) 2016年3月13日
iOSではブラウザ側の制限により、タッチするまでは音が鳴らない仕様です。さらに上記のように謎の音ゆがみ現象があったので、なぜこんなことを…というダーティな対応をしています。