マラソンマッチのビジュアライザいろいろ

ラソンマッチのビジュアライザについて、各者/各社さまざまな作り方をしているので、まとめてみました。

longcontest-visualizer-framework

kimiyukiさんのlongcontest-visualizer-frameworkおよびRCO/リクルート日本橋ハーフマラソンで使われている方法
(お互いに参考にしながら開発している?)

github.com

github.com

  • 時系列ごとに行動を出力する形式の問題では、時系列に沿った状況の推移が見たい。そのため、UIで時系列に沿って再生・巻戻し・早送りする機能がある
  • 入力・出力から毎フレームの情報を計算したのち、各フレームの情報をhtmlのCanvas 2Dに描画する
  • Canvasを画像に変換したり、動画に変換する機能もある(https://github.com/jnordberg/gif.js を使っている)

画像出力からの動画変換

https://github.com/kmyk/atcoder-heuristic-contest-002/blob/master/scripts/visualize.py

以下のようにして、AtCoder Heuristic Contest002の焼きなましの解の改善の様子を動画で出力している

  • ----BEGIN----と----END----と囲まれた範囲はビジュアライザ用出力とする。解法プログラム内で一定間隔ごとにビジュアライザ用出力を行うようにしておく。
  • 各ビジュアライザ用出力ごとに公式ビジュアライザを呼び出して画像を出力する
  • 出力された画像をffmpegで動画に変換する

画像を出すだけなら、いろんなアプローチがある(Pythonのmatplotlib, RustのSVGクレートなど)。とりあえず画像を出力してffmpegで動画変換というのは汎用的なアプローチかもしれない。

gvc/General Visualizer Client

colunさんのマラソンマッチ用ビジュアライザのプロトコル/ライブラリ

https://github.com/colun/gvc

www.youtube.com

解法プログラム内でプロトコルに沿った形式で命令を出力し、それを読み込んでJavaプログラムで表示する

siv3d

「ゲームとメディアアートのための C++ ライブラリ」であるsiv3dを用いて表示する

siv3d.github.io

Unity

天下一 Game Battle Contest 2021 Spring で使われた方法

tenka1.klab.jp

https://github.com/KLab/tenka1-2021-spring

UnityのWebGLビルドを使っている。魅せる目的では有効そう。ビジュアライザで求められる要件とゲームエンジンの相性は良いように思えるが、さすがにヘビーな気はする

React

最近私が研究しているアプローチ

ナーススケジューリング問題を焼きなまし法により解く
https://threecourse.github.io/nurse-scheduling-simulated-annealing/

  • Reactは開発が積極的に進められているGUIであり、情報が手に入りやすい
  • 問題の入力の作成もGUIでやって、それをバックエンドの解法プログラムに投げたり、作り込めばかなり柔軟性が高い
  • 1万個以上の要素を表示しなくてはいけないことがある。このとき、何も考えないとそれらのレンダー処理で表示のパフォーマンスが悲惨なことになる。ReduxやuseSelectorフックを上手く使い変化する要素のみ再レンダーするようにすると、問題なく表示できる。