コッホ曲線の描き方 - 数学の遊び方研究所　　

描き方

「コッホ曲線」は、

第０世代のコッホ曲線,
第１世代のコッホ曲線,
第２世代のコッホ曲線,
第３世代のコッホ曲線,
...

と描いていった果ての極限ですが, その描き方は以下の通りです：

Canvas でのプログラミング

「原点 (0, 0) を左端とし, 点 (size, 0) を右端とする第 n-1 世代のコッホ曲線」が, 関数

koch(n-1, size)

で描かれるとします.

この関数を呼び出した後には, (size, 0) が新たな原点となるように, 座標系が平行移動されるものとします. （すなわち, x 軸の正の方向へ size だけ平行移動する.）

このとき, 「原点 (0, 0) を左端とし, 点 (size, 0) を右端とする第 n 世代のコッホ曲線」を描く関数の定義は,

function koch(n, size) {
    // １回目の貼り付け
    koch(n-1, size/3);
    ctx.rotate(-Math.PI/3);  // 座標系を左へ６０度回転
    // ２回目の貼り付け
    koch(n-1, size/3);
    ctx.rotate(Math.PI*2/3); // 座標系を右へ１２０度回転
    // ３回目の貼り付け
    koch(n-1, size/3);
    ctx.rotate(-Math.PI/3);  // 座標系を左へ６０度回転
    // ４回目の貼り付け
    koch(n-1, size/3);
}

となります. （ctx は canvas 要素から取得したコンテキストオブジェクト.）

関数 koch(n, size) を再帰的に定義してやればよさそうですね.

プログラム例

html:

<!DOCTYPE html>
<html>
  <head>
    <title>Koch</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script src="koch.js"></script>
  </body>
</html>

javascript (koch.js):

var canvas = document.getElementById('canvas');

var w = canvas.width = 600;
var h = canvas.height = 300;
canvas.style.border = 'solid 1px black';

var ctx = canvas.getContext('2d');

// コッホ曲線描画

var start = {x: w/100, y: 85*h/100}; // コッホ曲線の始点（お好きな位置で）
var size = w*98/100;                 // コッホ曲線の大きさ（お好きなサイズで）

ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 1;

ctx.translate(start.x, start.y); // 座標系の原点を移動しておきます。

ctx.beginPath();
ctx.moveTo(0, 0);
koch(5, size);
ctx.stroke();

// コッホ曲線描画関数（上で述べた通りです。第０世代の処理を加えました。）

function koch(generation, size) {
    if (generation == 0) {
    ctx.lineTo(size, 0);
    ctx.translate(size, 0);
    } else {
    // １
    koch(generation-1, size/3);     
    ctx.rotate(-Math.PI/3); // 左へ６０度回転
    // ２
    koch(generation-1, size/3);
    ctx.rotate(Math.PI*2/3); // 右へ１２０度回転
    // ３
    koch(generation-1, size/3);
    ctx.rotate(-Math.PI/3); // 左へ６０度回転
    // ４
    koch(generation-1, size/3);
    }
}