javascript - 一連の点に閉曲線を描くにはどうすればよいですか?

Question

基本的には多角形を描きたいのですが、エッジを硬くするのではなく柔らかく見せたいです。ポリゴンの形状は重要なので、エッジはポイントを越えなければなりません。

単調な 3 次スプラインが開いた曲線 (つまり、それ自体でラップしない曲線) に対して正確であることがわかりましたが、私が見つけたアルゴリズムはポイント 0 と N を事前に計算します。曲線？

私はこれを JavaScript で実装していますが、疑似コードでも同様です。

Answer 1

一連の点に設定された見栄えの良い閉じたベジエ曲線を (通常は) 構築するための簡単な方法(Maxim Shemanarev によって開発された) があります。例：

アルゴリズムの重要な瞬間:

サンプルコード:

  // Assume we need to calculate the control
    // points between (x1,y1) and (x2,y2).
    // Then x0,y0 - the previous vertex,
    //      x3,y3 - the next one.

    double xc1 = (x0 + x1) / 2.0;
    double yc1 = (y0 + y1) / 2.0;
    double xc2 = (x1 + x2) / 2.0;
    double yc2 = (y1 + y2) / 2.0;
    double xc3 = (x2 + x3) / 2.0;
    double yc3 = (y2 + y3) / 2.0;

    double len1 = sqrt((x1-x0) * (x1-x0) + (y1-y0) * (y1-y0));
    double len2 = sqrt((x2-x1) * (x2-x1) + (y2-y1) * (y2-y1));
    double len3 = sqrt((x3-x2) * (x3-x2) + (y3-y2) * (y3-y2));

    double k1 = len1 / (len1 + len2);
    double k2 = len2 / (len2 + len3);

    double xm1 = xc1 + (xc2 - xc1) * k1;
    double ym1 = yc1 + (yc2 - yc1) * k1;

    double xm2 = xc2 + (xc3 - xc2) * k2;
    double ym2 = yc2 + (yc3 - yc2) * k2;

    // Resulting control points. Here smooth_value is mentioned
    // above coefficient K whose value should be in range [0...1].
    ctrl1_x = xm1 + (xc2 - xm1) * smooth_value + x1 - xm1;
    ctrl1_y = ym1 + (yc2 - ym1) * smooth_value + y1 - ym1;

    ctrl2_x = xm2 + (xc2 - xm2) * smooth_value + x2 - xm2;
    ctrl2_y = ym2 + (yc2 - ym2) * smooth_value + y2 - ym2;