svg-path-commanderライブラリ等を使ってネストした多角形ポリゴンをつくってみよう

nap5

2022年6月16日 16:12

こんにちわ。nap5です。

svg-path-commanderライブラリ等を使ってネストした多角形ポリゴンをつくってみたので紹介したいと思います。

今回はsvg-path-commanderライブラリ以外にもライブラリを使用しました。

以下はそのリンクになります。

ラジアンのノーマライズ用途でNormalizeRadiansメソッドを使用しました。

移動後の座標を求める用途でpointFromVectorメソッドを使用しました。

ネスト数を管理するためにsamplesメソッドを使用しました。

生成したパスコマンドをノーマライズするためにnormalizeメソッドを使用しました。

作成したプログラムは以下になります。

実行結果はsvgのpathコマンドを出力します。

以下では引数にエッジカウント6、ネスト数2、回転オフセット0度を指定した場合になります。

import BABYLON from "babylonjs";
import { pointFromVector, degreesToRadians, radiansToDegrees } from "popmotion";
import { samples } from "culori";
import SVGPathCommander from "svg-path-commander";
const { Scalar } = BABYLON;
const move = ({ fromPoint, angle, pathLength, rotationAngleOffset }) => {
  angle = radiansToDegrees(
    Scalar.NormalizeRadians(degreesToRadians(angle + rotationAngleOffset))
  );
  return pointFromVector(fromPoint, angle, pathLength);
};

const createPolygon = ({ edgeCount, pathLength, rotationAngleOffset }) => {
  const fromPoint = { x: 0, y: 0 };
  let path = ``;
  for (let angle = 0; angle <= 360; angle = angle + 360 / edgeCount) {
    const p = move({ fromPoint, angle, pathLength, rotationAngleOffset });
    if (angle === 0) {
      path = path + `M${p.x},${p.y}`;
    } else {
      path = path + `L${p.x},${p.y}`;
    }
  }

  return path;
};

const nestPolygon = ({ edgeCount }) => {
  return ({ nest }) => {
    return ({ rotationAngleOffset = 0 }) => {
      let path = "";
      samples(nest + 1)
        .slice(1)
        .map((n) => {
          path = path + createPolygon({ edgeCount, pathLength: n, rotationAngleOffset });
        });
      return new SVGPathCommander(path).normalize().toString();
    };
  };
};

const result = nestPolygon({
  edgeCount: 6,
})({ nest: 2 })({ rotationAngleOffset: 0 });

console.log(result);

こちらが実行結果です。

$ time node index.js
M0.5 0L0.25 0.433L-0.25 0.433L-0.5 0L-0.25 -0.433L0.25 -0.433L0.5 0M1 0L0.5 0.866L-0.5 0.866L-1 0L-0.5 -0.866L0.5 -0.866L1 0

real    0m0.693s
user    0m0.771s
sys     0m0.094s

このコマンドをsvg-path-editorに貼り付けて、眺めてみました。

ファイルにも保存し、添付しましたので、ダウンロード後、ブラウザにドラッグアンドドロップすると見れると思います。

いくつか引数に与える値を変えて、重ね合わせてみると、新しい発見があるかもしれません。いろいろいじってみると面白いと思います。

重ね合わせた例としてこのようなものを作ってみました。

こちらもファイルにも保存し、添付しましたので、ダウンロード後、ブラウザにドラッグアンドドロップすると見れると思います。

引数にエッジカウント4、ネスト数3、回転オフセット0,30,60度を指定し、重ね合わせた場合

また、BabylonjsのScalerクラスは便利そうなAPIがあるので、ちょっと試してみたかったのもありました。

これをclipPathとかに応用すると、また違った表現のニュアンスが得られるかもなんて思いました。

ネストしている側面で言うと、以下の記事でも似たニュアンスを感じることはできましたが、こちらはスケール処理をしたネストなので、今回とはアプローチが異なります。

補足ではありますが、こういった幾何パターン生成系のライブラリだと、以下のライブラリが重宝すると思います。

最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。

この記事が気に入ったらサポートをしてみませんか？