開発

【Flutter】Flutterでサークルパッキング【円充填】

こんにちは。

スマホアプリをメインに開発している常にハードモードのロッキーです。

今回もかなりニッチな題材となりますが、「Flutterでサークルパッキング」を実装しましたので紹介します。

 

はじめに

そもそもサークルパッキングとは?と思われる方もいると思うのですが平たく言うと、決められたサイズの中に同じ大きさ、または異なる大きさの円を重ならないように敷き詰めるというものになります。

一見簡単そうな感じなのですが、これがかなりの難問で、数学的観点やアルゴリズムにまで話が及びます。

参考サイト

要件

そして今回実装するにあたり、要件としては以下の通りです。

  • 表示するエリアは指定できる。
  • 各円のサイズは異なる。
  • 各円のサイズは割合を指定できる。
  • 各円は重ならない。

 

シンキングタイム

この要件があったとして、どのようにしたら実装できるかさっぱりわかりませんでしたので、色々調査したのですが、可能性として考えられたのが、

1, 図形のbottom-left法

2, ランダムで円を描写し重なったらやりなおし

3, 神降臨

調査した結果、1はまあまあよいとして、2は処理時間の問題でだめという判断です。

今回は冒頭でリンクを貼った「参考サイト」をご覧いただけたらわかるように、やっていることが高度すぎてついていけませんでしたので、3を発動しました。

 

実装で参考にさせていただいたサイト

もっとググった結果、同じ疑問を持つ方がいました。

stack overflow

そして、神回答しているユーザさんを発見。

神回答

JSですがソースコードも公開されていましたので、これをDartに書き直して手を加えました。つまり私はググっただけというのが大体を占めますがそれも技術ということで・・w

 

実装

ただやっても面白くないので前回に引き続きおすすめプレイリストのサムネイル画像を当て込みました。

 

 

_MyAppStateのbuild関数内のpaintsをstackのchildlenに与えるとデバッグドローが表示されます。

 

最後に

今回の内容は、全く必要にならない可能性もありますが、一見単純な内容と思いきや、割と高度ということと、日本語はもとより英語サイトでもあまり記事がなかったので、誰かの役にたつのではと思い記事にしました。

最後におすすめプレイリストはこちらです。

ABOUT ME
ロッキーカナイ
ロッキーカナイ
SwiftやObjective-CでiOS開発や、Flutterを用いたiOS/Androidアプリ開発、PHPでLaravelを使ったWebアプリ開発などをしてます。趣味は猫と戯れる事、キックボクシングにハマってます。ちなみに名前のロッキーカナイは以前よく昼飯を食べてた所。