読者です 読者をやめる 読者になる 読者になる

ニ☆ウ☆ト☆ラ☆ボ

タイトルテスト中

コッホ曲線の描き方

描き方

「コッホ曲線」は、

  1. 第0世代のコッホ曲線,
  2. 第1世代のコッホ曲線,
  3. 第2世代のコッホ曲線,
  4. 第3世代のコッホ曲線,
  5. ...

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

f:id:ddkd:20161213000243p:plain

Canvas でのプログラミング

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

koch(n-1, size)

で描かれるとします.

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

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

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

となります. (ctxcanvas 要素から取得したコンテキストオブジェクト.)

関数 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();

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

function koch(generation, size) {
    if (generation == 0) {
    ctx.lineTo(size, 0);
    ctx.translate(size, 0);
    } else {
    // 1
    koch(generation-1, size/3);     
    ctx.rotate(-Math.PI/3); // 左へ60度回転
    // 2
    koch(generation-1, size/3);
    ctx.rotate(Math.PI*2/3); // 右へ120度回転
    // 3
    koch(generation-1, size/3);
    ctx.rotate(-Math.PI/3); // 左へ60度回転
    // 4
    koch(generation-1, size/3);
    }
}
広告を非表示にする