Koch Curve

What

フラクタル(自己相似)で有名なコッホ曲線です。フラクタルとは、画像をそのまま縮小したものが、元の画像の一部に含まれているというものです。
複雑な海岸線などに現れるパターンで、数学的に詳しく研究がなされています。実際にプログラムを書く際には画面の解像度に限界があるのでループ を5回で止めていますが、フラクタル自体は無限に細かくなっています。
画面をクリックすると再び直線から始まります。

How

var w = 800;
var h = 300;
var lines = [[0,h - 10, w, h - 10]];
var newLines = [];
function setup() {
  createCanvas(w, h);
  background(255);//white
  frameRate(1);
  strokeWeight(0.5);
}

function draw() {
  background(255);
  console.log(lines.length);
  for(i = 0; i < lines.length; i++){
    line(lines[i][0],lines[i][1],lines[i][2],lines[i][3]);
    lineParts = createLines(lines[i]);
    for(j = 0; j< lineParts.length; j++){
      newLines.push(lineParts[j]);
    }
  }
  lines = newLines;
  newLines = [];
  if(frameCount === 8){
    noLoop();
  }
}

function createLines(l){
  var a = l[0];
  var b = l[1];
  var c = l[2];
  var d = l[3];
  var v1 = (c - a) / 3;
  var v2 = (d - b) / 3;
  var u1 =  v1 * cos(-PI / 3) - v2 * sin(-PI / 3);
  var u2 =  v1 * sin(-PI / 3) + v2 * cos(-PI / 3);
  var l1 = [a, b, a + v1, b + v2];
  var l2 = [a + v1,  b + v2, a + v1 + u1, b + v2 + u2];
  var l3 = [a + v1 + u1, b + v2 + u2, a + v1 * 2, b + v2 * 2];
  var l4 = [a + v1 * 2, b + v2 * 2, c, d];
  return [l1, l2, l3, l4];
}

function mousePressed(){
  lines = [[0,h - 10, w, h - 10]];
  newLines = [];
  loop();
}