minimalPerfectSquaredSquares(mPSS) is a dataset class consisting of some minimal Perfect Squared Squares.
You can draw mPSS without difficulty!
Now, the latest version is 1.0.0.
⚠️ If you are using iOS: Please update iOS to the latest version! This tool uses JavaScriptclassbut my iOS 14.4 device does not work with it. I confirmed iOS 14.8 works well.
<script src="https://tetunori.github.io/minimalPerfectSquaredSquares/dist/v1.0.0/mpss.js"></script>Just new mPSS() and you can get data via getSquares() method.
// 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();Received array consists of objects as below.
[
{ x: 0, y: 0, size: 50, etc... },
{ x: 50, y: 0, size: 35, etc... },
{ x: 85, y: 0, size: 27, etc... },
...
]So we can draw like below.
// Draw each squares
squares.forEach((sq) => {
square(sq.x, sq.y, sq.size);
});
Each square has the following properties.
| name | note |
|---|---|
| x | Number: x-coordinate of the square. |
| y | Number: y-coordinate of the square. |
| size | Number: side size of the square. |
| centerX | Number: x-coordinate of the center of the square. |
| centerY | Number: y-coordinate of the center of the square. |
| originalSize | Number: side size of the square before transformed. If you do not specify the size in the Constructor, this is the same as size property. |
For using centerX, centerY and originalSize, See the sample 02 below.
CLICK ME
We can specify rotation and mirror reflection to getSquares().
Simply, set the argument from the list below into the function.
mPSS.tfTypeIdOriginal;
mPSS.tfTypeIdRotate90;
mPSS.tfTypeIdRotate180;
mPSS.tfTypeIdRotate270;
mPSS.tfTypeIdMirror;
mPSS.tfTypeIdMirrorRotate90;
mPSS.tfTypeIdMirrorRotate180;
mPSS.tfTypeIdMirrorRotate270;Use like
const squares = mpss.getSquares( mPSS.tfTypeIdMirrorRotate180 );
Although we have seen the minimal(in the number of the squares) PSS, mPSS supplies another 3 minimal(in the length of the squares) PSSs.
We can get the data via getSmallestSizeSquares() that has a similar usage to getSquares().
Please specify the square index 0, 1 or 2 in the 1st argument.
const squares = mpss.getSmallestSizeSquares( 1 );
// You can also specify the transform direction
// const squares = mpss.getSmallestSizeSquares( 2, mPSS.tfTypeIdRotate90 );
CLICK ME
new mPSS([sideLength: Number])Parameters:
| name | note |
|---|---|
[sideLength] |
Number: Size of the outline (biggest)square. Optional. |
Returns: mPSS instance.
// Number
mPSS.tfTypeIdOriginal;
mPSS.tfTypeIdRotate90;
mPSS.tfTypeIdRotate180;
mPSS.tfTypeIdRotate270;
mPSS.tfTypeIdMirror;
mPSS.tfTypeIdMirrorRotate90;
mPSS.tfTypeIdMirrorRotate180;
mPSS.tfTypeIdMirrorRotate270;getSquares([transformTypeIndex: Number])Parameters:
| name | note |
|---|---|
[transformTypeIndex] |
Number: Specify mPSS.tfTypeId*. Default value is mPSS.tfTypeIdOriginal Optional. |
Returns: Array of the square data. Each data has properties below.
| name | note |
|---|---|
x |
Number: x-coordinate of the square. |
y |
Number: y-coordinate of the square. |
size |
Number: side size of the square. |
centerX |
Number: x-coordinate of the center of the square. |
centerY |
Number: y-coordinate of the center of the square. |
originalSize |
Number: side size of the square before transformed. If you do not specify the size in the Constructor, this is the same as size property. |
getSmallestSizeSquares([squareTypeIndex: Number], [transformTypeIndex: Number]) {Parameters:
| name | note |
|---|---|
[squareTypeIndex] |
Number: Specify square type index 0, 1 or 2. Default value is 0. Optional. |
[transformTypeIndex] |
Number: Specify mPSS.tfTypeId*. Default value is mPSS.tfTypeIdOriginal Optional. |
Returns:
Array of the square data. See getSquares() section.
MIT License.
Tetsunori NAKAYAMA.