読者です 読者をやめる 読者になる 読者になる

遊んで航海記

思いつきで遊んだり、ゲームを作ったり、寝たり

備忘録:よく知りもしないJavaScriptでライブラリとか作る男の記録

HTML5 JavaScript プログラミング

ハッ。と、気づくと去年からブログを更新してない。でもなにもやってなかったわけじゃないので、 Twitterからいくつか拾って備忘録にします。

その2はJavaScript編。

Webでビジュアルプログラミング体験。まほうのハコ

ビジュアルプログラミングとテキストを使った通常のプログラミングの橋渡し的なものがあればと思って、手を出してみました。

mameblock.jsp5.jsを使って作っています。

まだα版です。

Processing.jsを高速化

最近WebでProcessingといえばp5.jsなことも多いですが、ProcessingのJava的なコードをクラスなどもそのまま動かすならProcessing.jsの方がかなり楽です。ただtint()を使うとかなり遅いです。どのくらい遅いかというとこのくらいです。

それを高速化したのがprocessing.fast.jsです。どのくらい高速化したかというとこのくらいです。

fastといっても他のグラフィックス系のJavaScriptライブラリと比べて速いわけじゃないですが、透明度だけ変えるtint()とか、ある画像の色を変えて次回も同じ色を使うときなどは速くなってます。

もともとは以前、パフォーマンス計測でProcessing.jsが異常なレベルで不憫な成績だったのを見かねて高速化したのですが、

ics.media

それをベースに、色替えしたときもキャッシュしたり、ついでにblendMode()を足したり、スマホ向けにorientation()を足したりもしました。

ベースにしたProcessing.jsは1.4.1です。1.4.3あたりからスマホでのマウス(タッチ)の動作がうまくとれない感じがするので、仕方なく。

WebAudioでMinimっぽく音を再生

Processing 3は公式っぽいSoundのライブラリがあるのですが、使おうとしたらエラーになる時期が続いていた(最新版では治ってるかも?)ので、いまのところMinimを使っています。

で、Minimでplay()とかtrigger()とか使って再生するようなシンプルなプログラムをWebで動かすとき用にp.minim.jsというライブラリを作りました。いまのところ基本的な再生とか位置取得ぐらいの単純機能のみです。

iOSではブラウザ側の制限により、タッチするまでは音が鳴らない仕様です。さらに上記のように謎の音ゆがみ現象があったので、なぜこんなことを…というダーティな対応をしています。