2018年3月3日にHack To The Future (#HTTF)というマラソン形式の競技プログラミングコンテストの本選が開かれました。
参加していただいた皆さんありがとうございます。

今回、この#HTTF向けにビジュアライザーをつくりました。

あれ、なんか既視感あるぞ、と思った方はおそらく予選のビジュアライザー記事を見ていただいた方。ありがとうございます。

問題文

今回の問題は、マップ上に育つ植物ツカモの栽培・採集をいかに効率よくできるか。
ツカモを植えたり、道路つくったり、障害物の岩を壊したり、アルバイトをしたり。
より詳しくは本選ページ (https://future-contest-2018-final.contest.atcoder.jp/tasks/future_contest_2018_final_a) を確認いただくとして、このお題を貰ったときに牧場物語というゲームを連想しました。

せっかくだし、ゲーム画面っぽいビジュアライザー作りましょうか。

ビジュアライザー

できました。

Twitterに動作している様子を動画で上げてくださってる方がいるので、そちらのツイートでご覧ください。

#HTTF の本戦中の最終コードのexample_03のビジュアライザー（example_01は見られたので03にしてみた） pic.twitter.com/2oYCkjSnHt
— laycrs (@laycrs) 2018年3月4日

#HTTF おつかれさまでした。31,781,228点で、オープン3位。出力はこんな感じでした(example_03.txt) pic.twitter.com/SkL3YBDRjK
— yowa (@yowa) 2018年3月3日

#HTTF の回答です。てきとーに道を引いたり草を刈ったり岩を破壊したりする。 pic.twitter.com/IXM3I1yPG0
— 2018年こそ夏バテにならない (@tomerun) 2018年3月3日

植物ツカもが広がっていく様子、ツカもが育ちすぎて岩になる様子、そして参加者の方々が生育領域を制御しながら植物ツカモ効率的に収穫していく様子がわかります。

本選の順位発表時には、上位者の出力を上映するという演出があったのですが、ツカモをどう栽培・収穫していったかが、1000ターンのアニメーションで時間経過ともに流しまして、会場の雰囲気も上々。

ビジュアライザどよめきが起きてる #HTTF
— phyllo (@phyllo) 2018年3月3日

製作中に使ってたダミーデータとは違う効率的な収穫方法に、ビジュアライザーを作った私自身も楽しませていただきました。

アニメーションの再生ボタン、実装終盤くらいにくっつけたのですが付けて良かったです。（もともと数字の入力でターンを切り替えるUIだった）

本選のページとビジュアライザーは3/8現在まだ動いてますので、実際に触ってみたいという方がいらっしゃったらどうぞ。本選終了後に出場者上位5名の出力ファイルをアップロードしましたので、そちらでもビジュアライザーを動かせます。

#HTTF
本選出場者上位5名の出力ファイルをアップロードしました！
会場がどよめいた1位の@_tanzaku_ さんの結果を筆頭に、各自の戦略はvisualizerにて一見の価値あり！https://t.co/QpT8QZdSI2
— ツカモ (@tsukammo) 2018年3月3日

開発小話

で、このお題でビジュアライザーを作ってと言われたのが予選開催しているまさにその日でして、本選は予選の２週間後。
というわけで、実装自体はかなり省エネ。1マスを 1 divタグとして、50×50 つまり 2500個の div を敷き詰め、backgroundにマップチップの画像を設定したclassをつけたり外したりしています。

アニメーションはrequestAnimationFrame。前回3Dシミュレーターを作った知見が生きています。
あとワープホールだけ目立つようにGIFアニメにしています。当初GIFではなくCSSアニメーションでワープホール作ったんですが、CSSでグラデーション＋アニメーションをするとCPU食ってしまったので軽量化のためにGIFアニメに。
ツカモが風でなびくアニメーションもCSSでくっつけてたのですが、処理が重いというのと、あんまり目立たないなっていうので省いています。

ターン行動とマップの連携は @tsukammo さんにおまかせしました。餅は餅屋。

今回ゲームっぽい画面を演出するために、モンスター集会所！さんの「ぴぽや改変マップチップ」を利用させていただきました。
マップチップのおかげでかなりゲームっぽい雰囲気が出ました。ありがとうございます。

当日

懇親会に参加させてもらいまして、いろいろとフィードバックやビジュアライザーのかっこいい競プロサイト等教えていただきました。
今回みたいなビジュアライザーなら、出力データの入ったURL出力とか、アニメーションの動画出力とかあるとTwitterで共有しやすい。という意見を頂いて、ちょっと今度やってみたい。

あと上位者は真っ先に自分でシミュレータを作って点数の計算をさせるという話を聞いて、シミュレーターを補完するような途中経過がみれたり、全体を見渡したりを支援するビジュアライザーにするべきなんだろうなと思ったりしました。

普段は画面の見た目部分ばかり書いてる人なので、競プロガチ勢の方々の話はかなり新鮮で刺激になりました。

改めまして、参加者・関係者の皆さん。ありがとうございました。

おまけ

#HTTF
本選・オープンコンテストにご参加頂いた皆様、大変ありがとうございました。至らぬ点も多くありましたが、私が思い描く最高のコンテストを出来る限り体現出来たと自負しております。
弊社CTOの感触も良く「次もやろう！1年に1度と言わずもっとやろう！」とのことですので今後もご期待下さい。
— ツカモ (@tsukammo) 2018年3月3日

お？次回もありそう・・・？