新しい試みともっと望むこと

かつて、バラ曲線やトロコイド曲線をHtml5のCanvasを用いて描画しました。これをブログに公開すべく、ローカル環境で正しく動作したのに、サーバーにアップロードすると思ったように動作しませんでした。加えてソースコードが丸見えになることも問題でした。

これらを一挙に解決するために、スクリーンキャプチャーのBandicamやScreenCastifyを使ってWebM動画を作成しました。これらは《様々な動的コンテンツ》に発表しました。

無料版は動画に広告が入ったり、録画時間が10分以内などの制限があります。無料では多くを望むことは許されません。

そこで、Canvasに描画した内容をそのまま、WebM動画に出力する《Canvasに描画するとWebM動画を作ってくれる「Whammy」を使ってみた》に出会い、現在、模索中ですが、明らかになった部分を記録にとどめます。

参照した記事とWhammyについて

導入編に参照した記事は《リアルタイムでレイトレして、WebMに記録するヤツ》です。公開ソースコードをローカル環境にダウンロードして実行にこぎつけるまでは、大きな苦労はありませんでした。

上記記事はGithubが運営するWhammy JavaScriptライブラリーを使用しています。Whammyには、魔力、不運、まじないなどのほか、驚くべき事、凄い事、強力な一撃の意味があり、驚異的な意味合いでライブラリー名が付けられたようです。

WhammyライブラリーはJavaScriptでクライアント上でCanvasタグに描いた内容をWebMフォーマットに変換しWebM動画を生成します。

Whammyの主たる機能はCanvasタグやdataURIを引数として受け取り、コンパイルメソッドでWebM形式の動画に変換します。生成された動画はダウンロードすることも可能です。

解析途上でつまづいたこと

Canvasタグを使って描いたトロコイド曲線などをWebMの動画に保存したいと考えWhammyを解析し始めました。《Whammyクロック,clock》 などのソースコードを参照して、現在時刻をアナログ表示からデジタル表示に変更したところ、videoタグによる表示が動作しなくなりました。

少しずつ機能を削っていき、動作不良を見つけました。前表示をクリアするclearRectメソッドを呼ぶとなぜか誤動作することがわかりました。

また、期待したように動作したブラウザはChromeだけでした。

新しいことを進めるには多くの壁が立ちはだかるのはやむを得ないでしょう。めげずに前進あるのみです。

Whammyの紹介記事や試用記事が出始めて3～4年経過したのに、これに続く記事が少ないのは、サポートブラウザがChromeだけというのが理由でしょうか。

出力例と今後の発展