シダのフラクタルを描く - ツナドーナツ・技術メモ帳

コメント後で書きます
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>シダを描く</title>
</head>
<body>
  <canvas id="canvas" width="640" height="480"></canvas>
  <script>

  function drawLoopArc() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;
    var scaleX = 60;
    var scaleY = 45;
    var x1 = 1.0;
    var y1 = 0.0;
    var x2 = 0.0;
    var y2 = 0.0;
    var size = 2;
    var pi = Math.PI * 2;

    function drawArc(){
      //ctx.beginPath();
      //ctx.arc(x1 * width, height - (height * y1), size, 0, pi, true);
      console.log("x1:", x1 * width, "y1:", y1 * height);
      ctx.fillRect(320 + (x1 * scaleX), height - (scaleY * y1), size, size);
    }

    function rand(){
      var r;
      r = Math.floor(Math.random() * 100);
      return r;
    }

    function processing() {
      if(rand() % 100 < 1){
        x2 = 0.0;
        y2 = 0.16 * y1;
        x1 = x2;
        y1 = y2;
        drawArc();
      }else if(rand() % 100 <= 7){
        x2 = -0.15 * x1 + 0.28 * y1;
        y2 = 0.26 * x1 + 0.24 * y1 + 0.44;
        x1 = x2;
        y1 = y2;
        drawArc();
      }else if(rand() % 100 <= 14){
        x2 = 0.2 * x1 - 0.26 * y1;
        y2 = 0.23 * x1 + 0.22 * y1 + 1.6;
        x1 = x2;
        y1 = y2;
        drawArc();
      }else{
        x2 = 0.85 * x1 + 0.04 * y1;
        y2 = -0.04 * x1 + 0.85 * y1 + 1.6;
        x1 = x2;
        y1 = y2;
        drawArc();
      }
    }

    for(var i = 0;i < 10000;i++){
      processing();
    }
  }
  drawLoopArc();
  </script>
</body>
</html>