8
ボロノイマップとして画像を描く
私のチャレンジのアイデアを正しい方向に向けてくれたCalvin's Hobbiesに感謝します。 プレーン内のポイントのセットを考えてみましょう。これをsitesと呼び、各サイトに色を関連付けます。これで、各ポイントを最も近いサイトの色で着色することで、平面全体をペイントできます。これは、ボロノイマップ（またはボロノイ図）と呼ばれます。原則として、ボロノイマップは任意の距離メトリックに対して定義できますが、通常のユークリッド距離を使用しますr = √(x² + y²)。（注：これらのいずれかを計算してレンダリングする方法を知っていなくても、このチャレンジに参加できます。） 100サイトの例を次に示します。 セルを見ると、そのセル内のすべてのポイントは、他のサイトよりも対応するサイトに近くなっています。 あなたの仕事は、与えられた画像をそのようなボロノイマップで近似することです。便利なラスターグラフィックス形式の画像と整数Nが与えられます。次に、最大N個のサイトと各サイトの色を作成し、これらのサイトに基づいたボロノイマップができるだけ入力画像に似るようにします。 このチャレンジの下部にあるStack Snippetを使用して、出力からボロノイマップをレンダリングするか、必要に応じて自分でレンダリングすることができます。 あなたは可能（必要であれば）サイトの集合からボロノイマップを計算するために、内蔵またはサードパーティの機能を使用しています。 これは人気のあるコンテストなので、正味の投票数が最も多い回答が勝ちます。投票者は次の方法で回答を判断することが推奨されます 元の画像とその色がどの程度近似されているか。 アルゴリズムがさまざまな種類の画像でどれだけうまく機能するか。 アルゴリズムが小さいNに対してどれだけうまく機能するか。 アルゴリズムが、より詳細を必要とする画像の領域内のポイントを適応的にクラスタリングするかどうか。 テスト画像 アルゴリズムをテストするためのいくつかの画像を次に示します（通常の容疑者の一部、新しいもの）。大きなバージョンの画像をクリックします。 最初の列のビーチはオリビア・ベルによって描かれ、彼女の許可を得て含まれています。 さらにチャレンジしたい場合は、白い背景でヨッシーを試し、腹のラインを正しくします。 これらのテスト画像はすべて、このimgurギャラリーで見つけることができます。すべてのzipファイルとしてダウンロードできます。アルバムには、別のテストとしてランダムなボロノイ図も含まれています。参考までに、生成したデータを以下に示します。 さまざまな異なる画像とNの例図（100、300、1000、3000など）を含めてください（同様に、対応するセル仕様の一部へのペーストビン）。セル間の黒いエッジを適切に使用または省略できます（これは、他の画像よりも一部の画像の方が見やすい場合があります）。ただし、サイトを含めないでください（もちろん、サイトの配置がどのように機能するかを説明したい場合は別の例を除きます）。 多数の結果を表示する場合は、imgur.comでギャラリーを作成して、回答のサイズを適切に保つことができます。別の方法として、投稿にサムネイルを配置し、参照回答で行ったように、より大きな画像へのリンクを作成します。simgur.comリンクのファイル名に追加することにより、小さなサムネイルを取得できます（例I3XrT.png-> I3XrTs.png）。また、何か良いものが見つかった場合は、他のテストイメージを自由に使用してください。 レンダラー 出力を次のスタックスニペットに貼り付けて、結果をレンダリングします。正確なリスト形式は、各セルが順番x y r g bに5つの浮動小数点数で指定されている限り無関係です。ここでxおよびyはセルのサイトの座標でありr g b、範囲内の赤、緑、青の色チャンネルです0 ≤ r, g, b ≤ 1。 このスニペットには、セルの端の線幅、およびセルサイトを表示するかどうかを指定するオプションがあります（後者は主にデバッグ目的で使用されます）。ただし、セルの仕様が変更された場合にのみ出力が再レンダリングされることに注意してください。他のオプションを変更する場合は、セルまたは何かにスペースを追加してください。 コードスニペットを表示 function draw() { document.getElementById("output").innerHTML = svg } function …