ステイホームでもくす玉を割りたいということでインターネットくす玉を作った．
→ https://www.3qe.us/kusudama/index.html
オフィスにあつまってくす玉を割ることがなくなってしまったのでインターネットくす玉を作ったhttps://t.co/V4HkBC1LWX https://t.co/RrjWLuhfpR pic.twitter.com/YgQhWSugsY
— 茶色ぼさねこ (@windymelt) 2021年1月22日
くす玉
我が社には慶事があったときにくす玉が用意されてそれを割ってめでたさを表現する文化があるのだけれど，COVID-19が流行したことによって大半の社員は自宅からリモート勤務になってしまったので，みんなで集まってくす玉を割ることができなくなってしまった．
仕方ないので，会社にいる社員が寂しく一人でくす玉を割る様子をGoogle Hangoutで眺める，という光景が，社のいたる所で(要出典)行われている．
インターネットくす玉
でもくす玉は割りたいし，めでたさを共有したいので，ブラウザ上で動くくす玉はないのかということになり，ブラウザ くす玉 令和最新版とかで検索するも，くす玉のカタログなどが表示されるばかりで，おそらく存在していない．あったとしても旧世紀のJAVASCRIPTで書かれているかもしれないし，Flashが絶滅した今となっては，令和のくす玉を作らなければならないのではないか，そう考えるようになった．
そこで，HTML5 CanvasとTypeScriptとWebpackというまあ今風な感じの構成でくす玉を作った．
https://www.3qe.us/kusudama/index.html
3時間ちょっとで作ったのでog:imageみたいな高尚なものは存在していなくて，突然くす玉が眼前に飛び出し，クリック一つで弾けていく．お得なことに（お得ですよ！）何度連打しても紙吹雪を出すことができる．紙吹雪はKamiParticle.tsというクラスで動いている．
風呂に入るまでの時間ではここまでしか作れなかったが，いずれチームで同じくす玉を見たり，一斉にくす玉を引いたりしたいという需要が出そうなので，WebRTCみたいな新技術が導入されるかもしれない．
実装みどころ
タスクシステム
シューティングゲーでは一般的だと思うけれどタスクシステムというのを実装していて，画面に表示するオブジェクト1つ1つがTaskというクラスを継承している．タスクはタスクシステムに登録されると一定間隔ごとに順に呼び出されてCanvasになにかを塗っていくし，画面からはみ出したらタスクは終了して消えていくのでメモリが爆発することはないはず．いちおうフレームレート落ちないような仕組みを作っていて，一定期間内にタスクリストが掃けていないときは強制的に中断させるはずなのだけれど，あまりうまく動いていなくて，マルチスレッドじゃないのがいけないのかよくわかっていない．
紙吹雪
紙吹雪の実装は，まずブラウン運動をやっていて，直接座標をいじると不自然なので加速度を正規分布で揺らしつつ，縦方向に弱い重力を与えることでゆらゆら落ちていくようにしている．
さらに画面に垂直な軸で回転する．ここまではまあ普通．今回はさらにそれに加えて螺旋回転しているように見える効果をつけていて，四角形の幅を周期的に動かすことで回転しているように見せている．
紙吹雪の色は最初は赤だけだったが，地味だったので数色からランダムに出るようにした．
紙吹雪の量は調整可能で，くす玉パワーというスライドでいじることができる．
終わり
3時間ちょいにしては良いものが作れたとおもう．CI/CDがまったくできていなくて，手元でビルドしたのを手でS3にアップしていて，そこだけ旧世紀の古代兵器の趣を呈している．
今はクリックしたら普通に開くだけだけど，紐を引っぱらないといけないようにしたり，紐を強く引きすぎると紐だけ抜ける，といったリアリスティックハードコア要素を追加すると面白いかもしれない．
