クリエイティブコーディングで使える様々な曲線の数式

deconbatch

2018年7月21日 23:25

この世には様々な曲線があり、それらを表す数式も沢山発見されています。
ジェネラティブアート、クリエイティブコーディングで使えるこれらの数式を紹介しているサイトを紹介します。

プログラミングですぐに使える媒介変数表示

こちらではサイクロイド曲線やインボリュート曲線などの曲線と数式が紹介されています。

それぞれの数式が媒介変数表示で、 x, y をそれぞれ求める形式で記載されており、ジェネレーティブアートのプログラミングに直ぐに使えて便利です。

媒介変数表示じゃない場合

こちらにはデカルトの葉線やバラ曲線など、ちょっと変わった曲線とその数式が簡単なエピソードと共に紹介されています。

こちらは x と y の関係式となっていて、そのまま直ぐにプログラミングに使える形になっていませんね。

例えば

y = x * x;

という式であれば、 x = t とすることで、

x = t;
y = t * t;

として媒介変数表示にすることができます。

同じ考え方で、同ページで紹介されているネイルの放物線であれば

x = t;
y = pow(a * t * t, 1.0/3.0);

とできます。

この数式を使って Processing で描画してみたのがこれ。

// クリエイティブコーディングで使える様々な曲線の数式
// ネイルの放物線
// @author @deconbatch
// @version 0.1
// Processing 3.2.1
// 2018.07.21
// パブリック・ドメイン

/* -------------------- */
void setup() {
  size(640, 640);
  colorMode(HSB, 360, 100, 100, 100);
  smooth();
  noLoop();
  noFill();
  strokeWeight(0.5);
}

void draw() {

  int rotationCnt = 4;

  background(0, 0, 90, 100);
  translate(width / 2.0, height / 2.0 - 30.0);
  rotate(PI * 0.875);

  for (int rotation = 0; rotation < rotationCnt; ++rotation) {

    rotate(PI * rotation / (rotationCnt * 1.0));

    stroke(0.0 + (rotation % 2) * 40.0, 50.0, 60.0, 100.0);
    pushMatrix();
    for (float paramA = 15.0; paramA < 50.0; paramA += 5.0) {
      beginShape();
      for (float pointX = -width / 2.0; pointX < width / 2.0; pointX += 5.0) {
        vertex(
               pointX,
               pow(paramA * pow(pointX, 2.0), 1.0/3.0)
               );
      }
      endShape();
    }
    popMatrix();
  }
  
  saveFrame("frames/neile01.png");

}