minimalなPerfect Squared Squareを描くライブラリについて

# サマリ📐
後述する、**最小の『正方形の完全正方形分割』**を`JavaScript`ですぐに描画することができるデータセットクラス`minimalPerfectSquaredSquares`(`mPSS`)を公開しました。
１つも需要がなさそうなリポジトリですが、既存のタイリング手法に飽きた人、完全正方形分割を眺めたいあなたにお勧めです。
![keyvisual.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/383a45a6-e3ba-c454-a887-6b225857a4f7.png)


# 成果物
[minimalPerfectSquaredSquares: a dataset consisting of minimal Perfect Squared Squares.](https://github.com/tetunori/minimalPerfectSquaredSquares)
2021/11/06 現在のversionは`1.0.0`です。

> ⚠️ **iOSでお使う際は**: ぜひ、最新のiOSにUpdateしてください。イキって`JavaScript class`を使ってしまったのが原因と思うのですが、僕のiOS`14.4`デバイスでは動きませんでした。少なくともiOS`14.8`では動作確認できています。  

これを使うと、この様なGenerative Artが高度な数学の知識無くても描けます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">A Perfect Squared Square.<br>特殊な正方形タイリング『完全正方形分割』。ある正方形を全てサイズの異なる整数長の正方形で分割するタイリング手法。添付の分割が最小個数での分割であることが証明されています。<a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> <a href="https://twitter.com/hashtag/generativeart?src=hash&amp;ref_src=twsrc%5Etfw">#generativeart</a> <a href="https://twitter.com/hashtag/Math?src=hash&amp;ref_src=twsrc%5Etfw">#Math</a> <a href="https://twitter.com/hashtag/Mathematics?src=hash&amp;ref_src=twsrc%5Etfw">#Mathematics</a> <a href="https://t.co/rxUOumDtL3">pic.twitter.com/rxUOumDtL3</a></p>&mdash; Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) <a href="https://twitter.com/tetunori_lego/status/1455907609119055876?ref_src=twsrc%5Etfw">November 3, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 完全正方形分割について
完全正方形分割/Perfect Squared Squareについては、[Wikipedia](https://en.wikipedia.org/wiki/Squaring_the_square#Perfect_squared_squares)が詳しいですが、ざっくりいうと「ある正方形・長方形を整数長かつ全て長さが異なる正方形で分割する手法」です。
特に正方形を完全正方形分割するのはかなり難しいらしく、とある分割が最小の分割である！と証明されたのは、割と最近の話だそうです。  

今回はその**最小な『正方形の完全正方形分割』**を眺めるため、`canvas`描画向けの`JavaScript class`を作成しました。ちなみに、ここで言う**最小**は以下の２通りの意味を持ちます。

 - 最小**個数**の正方形での分割　→　本リポジトリでは、こっちをメインとする
 - **出来上がった(大きい)正方形の一辺の長さ**が最小

# 使い方

## データのインポート
```html 
<script src="https://tetunori.github.io/minimalPerfectSquaredSquares/dist/v1.0.0/mpss.js"></script>
```

## 基本的な使い方
まずは、『最小個数の正方形での分割』のデータを取得したいと思います。
その場合は、単純に `mPSS()`を`new` した後、`getSquares()`メソッド経由でデータを取得してください。`mPSS()`の引数には最終的に出来上がる正方形のピクセルサイズを指定することも可能です。

```javascript
// Create mpss instance
const mpss = new mPSS();
// const mpss = new mPSS(720); // can also specify the size of square

// Get Array of the squares 
const squares = mpss.getSquares();
```
この戻り値は、下記のような`Ojbect`の`Array`として得られます。

```javascript
[
  { x: 0, y: 0, size: 50, etc... },
  { x: 50, y: 0, size: 35, etc... },
  { x: 85, y: 0, size: 27, etc... },
  ...
]
```
これを使うと、下記の様な図形を簡単に描画できます！

```javascript
// Draw each squares
squares.forEach((sq) => {
  square(sq.x, sq.y, sq.size);
});
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/57e538da-9acd-388c-7bed-60afd5e72678.png" alt="sample01" width="360px"> 

 - [Sample01 On GitHub](https://tetunori.github.io/minimalPerfectSquaredSquares/sample/01/)
 - [Sample01 On OpenProcessing](https://openprocessing.org/sketch/1338726)

得られた各正方形オブジェクトには、下記のプロパティが含まれています。

|  名前  |  備考  |
| ---- | ---- |
|  x  |  Number: 正方形の左上x座標  |
|  y  |  Number: 正方形の左上y座標  |
|  size  |  Number: 正方形の一辺の長さ  |
|  centerX  |  Number: 正方形の中心x座標  |
|  centerY  |  Number: 正方形の中心y座標  |
|  originalSize  |  Number: 最終的に出来上がる正方形のサイズを指定する前の、この正方形の一辺の長さ。もし、`Constructor`でサイズ指定しなかった場合は、`size`プロパティとまったく同じ値となります。  |

`centerX`、`centerY`そして`originalSize`の使い方については、以下のsample02を見てみてください。 
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/2fc4640d-3c0c-c3ca-b54d-8ad3e1f208bf.png" alt="sample02" width="360px"> 

 - [Sample02 On GitHub](https://tetunori.github.io/minimalPerfectSquaredSquares/sample/02/)
 - [Sample02 On OpenProcessing](https://openprocessing.org/sketch/1338727)


## 高度な使い方
<details><summary>クリックして開く</summary>
<p>

### 回転と左右反転
`getSquares()`の引数に下記のリストから選んだidを入れると、８通りの回転・左右反転した図形を得ることができます。

```javascript
mPSS.tfTypeIdOriginal;
mPSS.tfTypeIdRotate90;
mPSS.tfTypeIdRotate180;
mPSS.tfTypeIdRotate270;
mPSS.tfTypeIdMirror;
mPSS.tfTypeIdMirrorRotate90;
mPSS.tfTypeIdMirrorRotate180;
mPSS.tfTypeIdMirrorRotate270;
```
こんな感じで使います。

```javascript
const squares = mpss.getSquares( mPSS.tfTypeIdMirrorRotate180 );
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/1eaba8bb-9ae8-7ea7-b5a0-946b9ed40fb7.png" alt="sample03" width="720px"> 

 - [Sample03 On GitHub](https://tetunori.github.io/minimalPerfectSquaredSquares/sample/03/)
 - [Sample03 On OpenProcessing](https://openprocessing.org/sketch/1338728)

### 辺の長さ的に最小な、他の3つの正方形について
上記はずっと**正方形の個数が最小**(21個!)という内容でお送りしてきましたが、`mPSS`では辺の長さ的に最小(長さ110)なものについてもデータを提供しております。このような正方形は３つあり`getSmallestSizeSquares()`(使い方はほとんど`getSquares()`と一緒)にインデックス`0`, `1` or `2`を第一引数に入れてあげることで取得することが可能です。

```javascript
// Get 2nd square
const squares = mpss.getSmallestSizeSquares( 1 );

// Get 3rd square
// You can also specify the transform direction
// const squares = mpss.getSmallestSizeSquares( 2, mPSS.tfTypeIdRotate90 );
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/72c2fff2-b71a-d801-bd63-be65b5670291.png" alt="sample04" width="720px"> 

 - [Sample04 On GitHub](https://tetunori.github.io/minimalPerfectSquaredSquares/sample/04/)
 - [Sample04 On OpenProcessing](https://openprocessing.org/sketch/1338729)
</p>
</details>

# API Specification
詳細なAPI仕様は[こちら](https://github.com/tetunori/minimalPerfectSquaredSquares#api-specification)を参照ください。つたない英語ですみません。

# おまけ: ロゴの生成
 - [Sample05 On GitHub](https://tetunori.github.io/minimalPerfectSquaredSquares/sample/05-logo-creation/)
 - [Sample05 On OpenProcessing](https://openprocessing.org/sketch/1338731)

## パターン生成について
毎度おなじみですが、SYM380さんが作られているスーパークールなツール、[p5.pattern](https://github.com/SYM380/p5.pattern)を使っています。下記のサンプルのようにめちゃめちゃ簡単にパターン生成できるので、大変たすかりました！みんな積極的に使おうな。
[How to use p5.pattern](https://openprocessing.org/sketch/1278485) by SYM380