We have explored different ways of defining and drawing curves, but we haven't discussed the quality of curves much. Curves can have various visual characteristics. For example, some curves might look more organic and natural, while others might appear more geometric and mechanical. How can we create these different looks of curves?

ここまで曲線を定義し描画する様々な方法を見てきましたが、曲線の質についてはあまり議論してきませんでした。曲線には多様な見た目の特徴があります。例えば曲線には有機的で自然に見えるものも、より幾何学的で機械的に見えるものもあります。これらの異なる曲線の見た目はどうしたら作れるのでしょうか。

Cubic class

Cubic クラス

For most of the examples on this page, we will use the same Cubic class that represents a Cubic Bézier curve we discussed previously as a way to define curves as a baseline. For sketching purposes, where precision is not too important, you can combine multiple cubic Bézier curves to approximate any curve.

このページのほとんどの例では、すでに触れた、3次ベジェ曲線を表す Cubic クラスを曲線を定義する方法の基礎として使います。スケッチ目的で精度がそれほど重要でない場面では、複数の3次ベジェ曲線を組み合わせれば任意の曲線を近似できます。

class Cubic {
  constructor(a0, c0, c1, a1) {
      this.a0 = a0.copy();
      this.c0 = c0.copy();
      this.c1 = c1.copy();
      this.a1 = a1.copy();
  }

  getPointAt(t) {
      const u = 1 - t;
      return new p5.Vector(
          this.a0.x * (u * u * u) + this.c0.x * (3 * t * u * u) +
          this.c1.x * (3 * t * t * u) + this.a1.x * (t * t * t),
          this.a0.y * (u * u * u) + this.c0.y * (3 * t * u * u) +
          this.c1.y * (3 * t * t * u) + this.a1.y * (t * t * t)
      );
  }

  draw() {
    const resolution = 128;
    strokeCap(ROUND);
    beginShape();
    for (let i = 0; i <= resolution; i++) {
      const t = i / resolution;
      const p = this.getPointAt(t);
      vertex(p.x, p.y);
    }
    endShape();
  }

Natural Spline

ナチュラルスプライン

Bézier curves give you detailed control using control points, but creating a complex shape requires many of them, which can be very troublesome to configure. Additionally, combining multiple Bézier curves does not always result in smooth connections. Natural spline is a very handy method when you just want a smooth curve nicely goes through a bunch of points.

ベジェ曲線は制御点を用いて細かな制御ができますが、複雑な形を作るには多くの制御点が必要で、設定がとても面倒です。また、複数のベジエ曲線を組み合わせても、必ずしも滑らかに繋がってくれるわけではありません。ナチュラルスプラインは、たくさんの点を滑らかにうまく通過する曲線が欲しいときに非常に便利な方法です。

Continuity of Curves

曲線の連続性

To understand what the natural spline is, let’s briefly discuss what being smooth means. To measure how smooth a curve is in a mathematical sense, you can take the derivative of the function that represents the curve. The first derivative shows the rate of change of position, and the second derivative shows the rate of change of the rate of change.

ナチュラルスプラインが何なのかを理解するために、「滑らかである」ということの意味について簡単に議論しましょう。曲線の滑らかさを数学的に測るには、その曲線を表す関数の微分を取ることができます。最初の微分は位置の変化率を示し、2度目の微分はその変化率の変化を示します。このようにすると、異なるレベルの連続性を考えることができます。